[Swift/iOS] 앱 클립(App Clips) 만들기

0. 도입

앱클립은 WWDC2020에서 소개된 기능으로 앱을 다운 받지 않고도 앱을 실행시킬 수 있는 기능이다.

직접 WWDC2020에서 앱클립 소개된 영상을 보면서 앱클립이 무엇인지 익히는 것을 추천드립니다.

[앱링크 소개 영상 링크]

1. 앱클립 시작 전 프로젝트 설정

개인적으로 앱클립이 필요한 프로젝트를 해야한다면 깃허브에서 레파지토리를 파서 진행하기를 권장합니다.

그 이유는 뒤에 설명하겠습니다.

프로젝트를 생성한 후에 프로젝트 설정(1️⃣)에 들어갑니다.

프로젝트 설정에서 2️⃣을 눌러서 App Clip을 추가해줍니다. 

생성하고 나면 Product Name으로 폴더가 생기면서 마치 프로젝트가 하나 추가된 것 처럼 보입니다.

새로 생긴 프로젝트는 App Clip 전용 프로젝트입니다. App Clip을 부르면 새로 생긴 프로젝트가 실행된다고 보면 됩니다.

앱클립으로 구현하고자 하는 코드를 새로생긴 프로젝트에 추가하면 됩니다.

(단, 앱클립은 용량제한이 있으므로 용량이 넘지 않음을 주의합니다. WWDC 2022에서 앱클립이 15MB로 늘어났습니다.)

2. 앱 클립 세부 설정

(1)에서 깃허브에 레파지토리를 연동하는 것을 권장했습니다. 왜냐하면 앱클립을 사용하기 위해서는 도메인 주소가 필요하기 때문입니다.

깃허브에서는 레파지토리와 도메인을 연결해주는 서비스를 제공합니다. 그렇기에 처음에 깃허브에서 레파지토리를 파는 것을 추천드린것입니다.

앱클립에서 사용하는 도메인은 반드시 소문자와 '.' '-'으로만 이뤄져 있어야합니다. (설명 링크)

[git/github] 레파지토리 도메인 연결하기

다음 Xcode에서 프로젝트 설정 - Targets 에서 앱클립 프로젝트를 선택해줍니다.

그 다음 All 옆에 있는 [ + ] 를 눌러서 Associated Domains 설정을 더해줍니다.

다음 아래와 같이 깃허브 레파지토리에 연결했던 사이트를 example.com 대신에 입력해줍니다.

다음 파일을 만들어야합니다.

Xcode를 실행했다는 것은 맥을 쓰신다는 것이므로 맥 기준으로 설명하겠습니다.

텍스트편집기를 열어서 새로운 문서를 만듭니다.

{
    "appclips": {
        "apps": ["개발자Team ID.앱클립 Bundle Identifier"]
    }
}

위에 문서를 새로운 문서에 적고 확장자 없이 apple-app-site-association 이름으로 저장합니다.

개발자 Team ID 및 앱클립 Bundile Identifier 알아내는 방법

- 개발자 Team ID 알아내는 방법

Apple Developer

[ 로그인 - Account - Membership - 페이지 내 Team ID 확인]

 

-  앱클립 Bundile Identifier 알아내는 방법

Xcode - 프로젝트 설정 - TARGETS 밑 앱클립 설정 - Signing & Capabilities - Bundle Identifier 확인

 

 

그리고 레파지토리 메인에 업로드를 합니다.

3. 앱 출시 설정

앱클립 설정에서 헤더 이미지는 1800* 1200픽셀의 이미지이여야 합니다.

앱클립 헤더 이미지는 경량화를 하는 것을 추천합니다. 

헤더이미지가 무거우면 앱클립 인식 후 한참 후에 이미지가 로딩이 됩니다.

이제 앱을 출시해서 QR코드를 얻어 봅시다.

앱스토어커넥트에 들어가서 앱을 출시를 위해 정보를 기입합니다.

앱클립을 출시하기 위해서는

앱 심사 정보 - 앱클립 URL에서 레파지토리에 연결한 도메인을 https://를 포함한 Full URL을 적습니다.

4. 추가적인 설정(?)

이건 왜 이런지 모르겠지만 앱에서 한번은 개발자 설정에 들어가줘야 앱클립이 실행됨을 알 수 있었습니다.

아이폰으로 [ 설정 - 개발자 - APP CLIPS TESTING 아래의  Local Experiences] 에 적어도 1번 들어가야 합니다.

그리고 바로 밑에 [ Diagnostics ] 에 들어가서 레파지토리와 연결된 도메인을 입력해서 연결을 확인합니다.

5. QR코드 얻기

앱이 출시가 완료되었다면, 다시 앱스토어커넥트에 들어가서 [앱 클립 - 고급 앱 클립 경험] 을 누릅니다.

앱 클립 경험 URL에 자신이 레파지토레와 연결했던 도메인을 https:// 를 포함하여 Full URL을 적습니다.

다음을 눌러서 앱 클립 QR코드에 대한 설정을 해준 후에 App Clips QR코드를 얻을 수 있습니다.