[iOS] 앱클립 구현부터 테스트 플라이트 배포까지🔥

QR코드로 인식하는 앱클립!

앱클립 왜 했는가?

iOS 14부터 앱클립을 지원하기 시작했고, 기능 소개를 읽어봤을 때 아주 흥미로운 기능이라고 생각했지만 우리나라에 앱클립을 지원하는 서비스를 찾기 힘들어서 POC형태로라도 간단하게 직접 해보면서 어떤 기술인지 느껴보고 싶었어요!
시작 하기 전에 목표는 테스트 플라이트까지 배포해서 회사의 다른 분들이 자신의 폰을 가지고 영상 처럼 QR코드를 찍었을 때 앱클립으로 진입 시키도록 해서 앱클립의 역할을 다른 분들에게 인식시켜주자! 였습니다.

---

앱클립 프로젝트 생성 및 구현 (새로운 글로 준비중입니다.)

이건 별도의 포스트로 만들어야쓰것습니다~! 

---

로컬 테스트 환경 구성

가장 쉬운 로컬 테스트 방법은 앱클립 프로젝트에서 바로 빌드하는 방법입니다. 프로젝트에서 빌드하게 되면 연결된 디바이스에 바로 앱클립이 실행됩니다!

이렇게 말이죠!

개발을 진행할때는 바로바로 볼 수 있어서 편하게 개발할 수 있지만 제가 원하던 로컬 테스트 시나리오는 위에 영상처럼 카메라로 QR코드를 인식해서 진입하는 방식입니다.🤔
QR코드 인식 환경을 하기 위해서는 단말기 개발자모드에서 앱클립 환경 설정을 진행해줘야 인식합니다.

설정 > 개발자 > 앱클립 테스팅 섹션의 로컬 환경 > 로컬 환경 등록으로 들어갑니다.
URL PREFIX에는 앱클립의 Associated Domains의 URL을 적어주세요.
BUNDLE ID에는 URL PREFIX의 URL을 인식했을 때, 실행시킬 우리의 앱클립 번들 ID를 적어줍시다.
해당 과정은 QR코드 등의 앱클립 URL을 인식했을 때, 우리가 원하는 앱클립을 실행시켜주는 환경을 설정하는 과정입니다.
(실제 프로덕션 릴리즈 시에는 웹서버의 AASA파일을 통해서 앱클립을 실행시켜줍니다.)
위 환경설정을 거치고 나서 카메라를 통해 QR코드를 비추면 앱클립을 인식합니다!
테스트용 QR코드를 만드는 것은 여기내용을 보고 만드실 수 있습니다!

Title, Subtitle, Action의 컨텐츠들은 위 사진처럼 나타나기 때문에 원하는 대로 설정해주시면 됩니다!
이렇게 하면 로컬 환경 설정을 한 단말기에 한해서는 QR코드로 앱클립을 인식시킬 수 있습니다.

---

테스트 플라이트 배포 환경 설정

로컬 환경에서 테스트를 하는 것은 그렇다 치지만.. 정말 원하는 것은 로컬 환경 설정 필요 없이 테스트 플라이트로 받아서 바로 QR코드로 확인해 보는건데..! 그건 어떻게 해야하지? 하면서 리서치를 많이 진행했어요.
결론 부터 얘기하면 앱클립을 포함시켜서 앱스토어에 릴리즈 시키지 않은 상태에서는 로컬 환경 설정 없이 QR코드로 앱클립을 실행시킬 수 없습니다 ㅠㅠ 아래처럼 QR코드가 어디것인지 인식하는 정도까지만 가능합니다. 실행시키면 사용할 수 없다고 나옵니다..
(애플 문서에서는 테스트 플라이트를 통해 앱 클립을 직접적으로 실행시키는 것은 가능하지만, QR코드로 실행시키는 것에 대해서는 적혀있지 않는 것 같습니다.)

AASA 파일 설정

테스트 플라이트로 테스트를 진행하기 위해 선행되어야 할 과정입니다. AASA(Apple App Site Association)파일을 웹 서버에 설정해야합니다. AASA파일은 앱클립 정보를 담고 있는 텍스트 파일입니다. (유니버셜 링크를 구현하셨다면 이미 알고 계실겁니다.) 앱클립은 앱이 설치되어있지 않은 상태에서 바로 사용할 수 있어야 하기 때문에 앱클립 코드 안에 들어있는 URL이 어떤 앱클립인지, 제대로 사이닝이 되어있는 도메인인지 확인하는 과정이 필요한데 이런 과정을 AASA을 설정하는 것으로 앞의 과정들이 동작하게 할 수 있습니다.

여기에서는 앱클립만 실행시키기 때문에 앱클립정보를 포함시킨 AASA파일을 만들었습니다.

{
	appclips: {
		apps: [
			"팀ID.<앱클립 번들 ID>"
		]
	}
}

해당 파일을 https://<웹서버도메인>/.well-known/apple-app-site-association 에 위치시켜주세요.
위 형식을 지킨 위치에 해당 파일을 위치시켜야 애플이 인식할 수 있다고 합니다.
(저는  빠르게 웹서버를 띄우기 위해 Firebase Hosting을 사용했습니다.)

Associated Domains 변경

로컬 환경에서 테스트를 할 때는 앱클립의 Associated Domians에 적혀있던 값을 바로 위에서 AASA설정한 웹서버 도메인으로 변경해줍니다.(appclips:<웹서버도메인>)
AASA파일이 있는 도메인으로 변경해줘야 테스트 플라이트를 통해 앱클립을 직접 실행시켰을 때, 정상적으로 동작합니다.
테플 실행할 때 뿐만 아니라 테플 등록할 때 도메인을 확인하기도 합니다! aasa파일 정상적으로 확인되는지!
AASA파일 설정에 대한 자세한 내용은 역시나 애플 문서를 통해서 확인할 수 있습니다.

테스트 플라이트 등록

앱클립 코드를 모두 구현한 후, 메인 앱을 앱스토어 커넥트에 올리고 빌드를 선택하면 이제 오른쪽에 연결된 도메인이 추가된 것을 확인할 수 있습니다. 초록 체크가 되어있지 않고 빨간불이 들어왔다면 AASA파일이 웹서버에 제대로 적용이 안된 상황이라는 것이므로 웹서버 설정상태를 한번 확인해주세요.
- Associated Domains에 웹서버 도메인으로 잘 적용했는지?
- AASA파일의 경로가 /.well-known/apple-app-site-association에 잘 적용되어있는지?

유효한 도메인 확인

빌드 섹션에서 도메인 적용까지 완료되면 테스트 플라이트섹션에서도 앱클립을 실행할 수 있도록 도메인을 추가해줘야합니다.

TestFlight -&gt; 앱클립 호출에 AASA파일을 올려둔 도메인을 URL란에 적어주세요.

TestFlight -> 빌드 넘버 선택 -> 앱 클립 호출섹션에 URL란에 AASA올려둔 웹서버 URL을 적어주세요.
해당 URL에 있는 AASA 내용을 보고 앱클립을 실행시키는 것 같습니다. (그래서 AASA파일 설정이 필요합니다!)
이렇게 설정하고 배포를 하게 되면 테스트 플라이트 앱에서 아래 처럼 앱클립 섹션이 생성됩니다.
테스트 버튼을 누르게 되면 앱클립이 바로 실행됩니다!