WWDC 2021 - Build light and fast App Clips

원본 영상: https://developer.apple.com/videos/play/wwdc2021/10134/

 

• 앱 클립을 통해서 고객은 앱이 제공하는 기능에 빠르게 접근할 수 있습니다.

• 앱 클립은 OS에 통합되어 있는 기능으로 앱 클립 코드, QR 코드를 스캔하거나, NFC 태그를 탭 하는 등의 방식으로 Safari 및 메시지나 현실 세계에서 호출할 수 있습니다.
• 또한 앱 클립은 지도 및 Siri 제안에도 표시됩니다.

 

App Clip size

• 앱 클립은 요청되는 즉시 호출될 수 있도록 최대 크기가 제한되어 있습니다.
• 따라서 개발 과정에서 클립의 크기에 대해 자주 확인하는 것이 좋습니다.

• 이 과정은 소프트웨어 개발 과정에서의 반복적인 프로파일링 및 최적화 과정과 유사합니다.

• Xcode를 사용하여 크기 보고서를 생성하고 IPA를 내보낼 수 있는 과정을 볼 것입니다.
• 그다음 앱 클립의 크기를 줄이기 위한 기본 및 고급 최적화 방법을 볼 것입니다.

• 우선 앱 구성에서 Clip을 선택한 다음 Product에서 Archive를 선택합니다.

• 빌드된 이후 열린 Organizer에서 앱 배포를 선택합니다.

• 그다음 Development를 선택합니다.

• 그다음 App Clip을 선택합니다.

• 호환되는 모든 장치를 선택하고, Rebuild from Bitcode를 선택합니다.

• 이후 사이닝을 선택하고 다음을 누릅니다.

• 준비가 완료되면 내보내기를 클릭합니다.

• 완료된 결과 파일에서 App Thinning Size Report.txt를 열면 각 장치에 대한 정보를 볼 수 있습니다.

• 각 섹션의 마지막에서 두 번째 줄은 압축된 크기와 압축되지 않은 크기를 표시합니다.
• 이 예제에서는 크기 제한을 초과한다는 것을 알 수 있으며, 모든 기기에서 거의 같은 크기를 가진다는 것을 알 수 있습니다.

• ipa가 있는 폴더에서 ipa 중 하나의 확장자를. zip으로 바꾸고 두 번 클릭하여 압축을 풉니다.
• 생성된 폴더의 Payload 폴더를 열고 패키지 내용을 표시합니다.

• 내부를 살펴보면 개별 리소스가 있는 것을 볼 수 있으며, 이것을 자산 카탈로그에 넣으면 공간을 절약할 수 있을 것입니다.

• 결과 파일에 필요하지 않은 readme와 htmlDocs.zip 파일이나 프레임워크, 로컬라이제이션을 위한 폴더 등을 확인할 수 있습니다.

• 기본적으로 크기를 줄이는 방법은 빌드 설정을 다시 확인하는 것입니다.
• 그다음 Asset catalogs를 사용할 때의 이점을 확인합니다.
• 결과 파일에서 필요하지 않은 파일을 제외합니다.
• 그다음 코드를 크기를 위해 리팩터링 합니다.

• 우선 빌드 설정에서는 Release로 설정되어 최적화가 적용되는지 확인해야 합니다.

• 최적화 설정이 올바르게 작은 바이너리 크기를 가질 수 있도록 설정되었는지 확인해야 합니다.

• 이미지와 오디오, 비디오 등과 같은 리소스가 많은 공간을 차지하기 때문에 에셋 카탈로그를 사용하는 것이 좋습니다.
• 에셋 카탈로그는 Xcode 빌드 과정의 일부로 에셋을 자동으로 최적화합니다.
• 사용자가 앱을 다운로드할 때 앱 씬닝(thinning)을 통하여 다운로드하는 기기에 적합한 자산만 포함합니다.

• 새로운 에셋 카탈로그를 만들어서 앱과 App Clip양쪽에 사용되는 이미지를 넣습니다.

• 그다음 기존의 에셋 카탈로그는 App Clip에 사용되지 않으므로 App Clip에서는 제외합니다.

• 최종 결과 ipa파일에 포함될 필요가 없는 리소스는 App Clip에서 제외합니다.

• App Clip의 빌드 단계 포함되는 소스파일의 목록을 살펴보고, 필요하지 않아 보이는 파일은 제거할 수 있습니다.

• 문자열 파일도 Asset 카탈로그와 같이 새로운 문자열 파일을 생성하여 App Clip에서도 공통으로 사용하는 문자열만을 추가해 넣을 수 있습니다.

• 더 나은 최적화를 위해서는 먼저 외부 종속성에 대한 크기를 고려해야 합니다.

• 대부분의 기능을 위한 프레임워크는 이미 Apple OS에 통합되어 있습니다.
• 이러한 기본 제공 프레임워크를 사용하면 앱과 App Clip을 더 가볍고 빠르게 만들 수 있습니다.
• 로그인을 위한 기능의 경우 Apple 로그인을 사용할 수 있으며, 결제는 Apple Pay, 네트워크는 NSURLSession을 사용할 수 있습니다.

• 크기의 핵심적인 요소는 대부분 코드보다 리소스입니다.
• 예를 들어 일반적으로 PNG 이미지는 JPEG 이미지보다 더 많은 공간을 차지하므로 투명도와 같은 특정 기능이 필요한 경우에만 PNG를 사용하는 것이 좋습니다.

• JPEG는 손실 압축 품질 손실이 발생할 수 있기 때문에 로고와 같이 다양한 색상을 사용하지 않으면서 품질이 중요한 경우에는 PNG8을 사용하는 것이 좋습니다.

• 오른쪽의 이미지는 파일 크기를 크게 줄이기 위해 PNG8로 저장되었습니다.
• 색상 깊이를 줄이면 더 많은 공간을 절약할 수 있지만 색상수가 적어도 잘 표시되는 특정 이미지에만 적합합니다.

• jpeg 등의 압축률을 지정하여 더 높은 압축률을 지정한 이미지를 생성할 수 있습니다.

• 그리고 실제 앱에서 A/B 비교 테스트를 수행하여 품질이 저하되지 않는지를 확인하여 사용할 수 있습니다.

• 비디오의 경우 HEVC와 같은 최신 표준을 사용하여 인코딩합니다.

• 오디오의 경우 일반적으로 AAC 또는 MP3 코덱을 사용하여 압축합니다.
• 대부분의 경우 매우 높은 비트 전송률 은 필요하지 않은 경우가 많기 때문에 비트 전송률을 낮추어 보는 것도 좋습니다.

• 컨트롤, 로고, 아이콘과 같은 특정 종류의 이미지는 SVG 형식으로 표현하면 상당한 공간 절약을 얻을 수 있으며, 벡터 형식이기 때문에 어떤 크기에서도 잘 렌더링 됩니다.

• SF Symbol에서 SVG형식을 이용할 수 있으며, 2000개 이상의 구성 가능한 기호 중에서 선택할 수 있습니다.
• 텍스트 레이블과 자동으로 정렬되는 등의 다양한 기능이 제공됩니다.

• 위와 같은 코드를 사용하여 프로젝트에서 SF 기호를 사용할 수 있습니다.
• 문자열과 기호 이미지는 잘 정렬된 상태로 유지됩니다.

• Asset 카탈로그에 이미지의 여러 모양을 포함하는 대신 하나의 기본 이미지를 넣고, 실행 시간에 필요한 모양으로 변형하는 것이 좋습니다.

• 이와 같은 여러 가지 방법에도 불구하고 제한 크기를 넘는다면, 일부 콘텐츠의 경우 네트워크를 통해 로드하는 방법도 사용할 수 있습니다.
• 예를 들어 App Clip에는 해상도가 낮은 이미지를 넣고, 실행되었을 때 네트워크를 통해 고품질 이미지를 받아서 교체할 수 있습니다.

 

App Clip invocation

• App Clip을 출시했는데 Safari에서 볼 때 예상대로 제공되지 않는 경우를 가정해 보겠습니다.
• App Store Connect에는 기본과 고급의 두 가지 유형으로 설정할 수 있습니다.
• 기본인 경우 Safari의 웹 페이지에서 호출되거나, 메시지의 웹 페이지 링크를 보낼 때, App Clip에 대한 메타데이터를 지정할 수 있습니다.
• 고급인 경우는 QR 스캐닝, NFC, 앱 클립 코드와 같은 물리적 호출을 활용할 수 있습니다.
• 등록이 기기에 적용되는데 시간이 걸리므로 App Store Connect에서 변경한 내용을 즉시 사용할 수 없습니다.

• App Clip UI를 표시하기 전에 OS는 호출 도메인이 앱 클립과 보안 연결되어 있는지 확인합니다.
• Safari에서 보거나 QR 코드로 인코딩 된 URL에는 보안 연결이 있어야 하고 앱 및 앱 클립과 AASA 파일 이 있어야 합니다.
• 이것이 제대로 구성되지 않은 경우 클립이 표시되지 않습니다.

• 모든 것을 구성했을 때, Safari를 통해 접근하면 App Clip 카드가 이와 같이 표시될 것으로 예상한다고 가정해 보겠습니다.

• 하지만 웹 페이지만 보고 다른 것은 나타나지 않을 때에는 우선 메타 태그의 구문을 확인하고 아래의 템플릿과 유사한지 확인해야 합니다.

• 노란색 표시자를 전체 앱의 App Store ID와 App Clip의 bundleID로 변경합니다.

• Safari에서 해당 웹 페이지의 웹 검사기를 열어 메타 태그가 올바르게 구성되었는지 확인할 수 있습니다.
• head 태그 안의 소스나 노드의 속성을 확인해야 합니다.
• 이러한 메타 태그가 올바르고 App Clip 번들 ID가 Xcode 및 App Store Connect에 표시된 것과 동일한지 해야 합니다.

• 도메인 유효성 검사에서 example.com은 www.example.com과 동일하지 않습니다.
• 콘텐츠를 제공하는 도메인, 리디렉션 체인의 끝에 있는 도메인은 AASA 파일을 제공해야 하며, 해당 연결된 도메인의 자격에 포함된 도메인이어야 합니다.

• 또한 개인 브라우징이 활성화된 경우 Safari는 전체 앱 클립 카드 또는 스마트 앱 배너를 표시하지 않습니다.

• 여전히 문제가 있는 경우 ASC 포털에서 AASA가 유효성 검사를 통과하는지 확인할 수 있습니다.

• SWCutil 명령줄 도구를 사용하여 웹 사이트의 예상 위치에서 AASA 파일을 검색할 수 있습니다.
• 위의 예에서 처럼 swcutil dl -d checkcoverage.apple.com 명령을 수행하여 실행할 수 있습니다.
• 이를 사용하여 App Store Connect가 파일을 검색하지 못하게 하는 오류를 확인할 수 있습니다.

• 구성이 완전하지 않은 경우 카메라에서 앱 클립 카드 대신 웹 페이지가 표시됩니다.

• 이러한 문제가 발생하는 대부분의 원인은 물리적인 코드로 인코딩 된 URL에 대한 고급 설정이 생성되지 않았기 때문입니다.
• QR코드 URL이 웹사이트 URL과 동일하고 Safari에서는 잘 동작하더라도 물리적인 코드를 사용하려면 App Store Connect에서 고급 설정을 해야 합니다.

• 웹 트래픽의 경우 도메인 유효성 검사 전에 존재하는 모든 리디렉션을 따릅니다.

• 물리적 코드에 대한 도메인 유효성 검사의 경우 앱 클립의 자격에 정확한 도메인을 추가하고 이 도메인에서 AASA 파일도 제공해야 합니다.
• 그 이유는 실제 코드를 스캔하는 사용자에게 빠른 피드백을 제공하기 위한 것입니다.
• 그리고 일반적으로 리디렉션 체인을 따르는 네트워크 요청을 수행하지 않습니다.

• 고급 환경설정에 대한 변경 사항이나 사이트 연결이 장치에 전파되기까지는 시간이 걸립니다.

• 스캔한 URL이 고급 환경에는 잘 추가되었지만 여전히 앱 클립 카드가 표시되지 않으면 개발자 설정에서 캐시를 삭제할 수 있습니다.

 

Managing complexity

• 새로운 예제에서는 레스토랑 앱의 기능을 보여주며, 햄버거나 칵테일을 주문한 다음 계산할 수 있습니다.
• 테이블에서 QR 코드로 결제하고 내 입맛에 맞는 햄버거 구성을 친구에게 링크로 보내 친구도 주문할 수 있습니다.

• 이를 위해서는 각 구성 요소 가 독립적이고 직접 실행될 수 있는 평면화된 모듈식 기능을 만드는 것이 좋습니다.
• 이 접근 방식은 App Clip 방식의 기본인 딥 링크에 훨씬 더 적합합니다.
• URL로 인코딩할 수 있는 메뉴 항목 목록을 제공하여 직접 호출되도록 체크아웃 모듈을 디자인하면 아래와 같이 사용할 수 있습니다.

• 주문을 QR코드의 URL로 표시함으로써 고객이 테이블에서 수표를 지불할 수 있는 기능을 제공합니다.
• 음식 항목을 URL로 인코딩하면 고객이 주문한 것을 친구와 공유하여 같은 것을 구매할 수 있도록 할 수 있습니다.

• 기존에 일반적으로 앱이 시작되거나 백그라운드에서 재개될 때 호출되는 함수를 사용하여 수명 주기 이벤트에 응답할 수 있었습니다.
• 앱 클립에서도 이와 동일한 생명 주기의 또 다른 함수 세트가 추가됩니다.
• 앱과 앱 클립 실행 모두를 처리하는 코드가 공유되도록 리팩터링 하는 것이 좋습니다.

• 이제 사용자 활동을 매개변수로 사용하는 respondTo와 같은 함수를 작성하여 모든 수명 주기 함수에서 호출하여, 이 함수를 앱이나 Clip의 기본 진입점으로 사용할 수 있습니다.

• 반복 개발의 경우 Xcode에서 빌드 및 실행할 때 _XCAppClipURL 환경 변수를 선택한 호출 URL로 설정합니다.
• 클립을 실행하면 여기에서 설정한 URL이 고객의 기기에 있는 것처럼 클립에 전달됩니다.

• 개발자 설정에서 App Clips에 대한 로컬 환경을 만들어 개발 중인 클립을 테스트할 수 있습니다.

• 클립을 제출하기 전에 이것을 수행하여 카메라에서 코드를 스캔하는 것과 같이 클립을 호출할 수 있는 여러 가지 방법을 테스트할 수 있습니다.

• 이처럼 App Clips를 실행했을 때의 경험을 테스트해야 합니다.

 

Unique functionality

• 앱 클립에서는 두 가지의 간단한 권한을 제공합니다.

• 임시 알림 권한을 사용하면 App Clip이 마지막으로 실행된 후 24시간 동안 알림 을 보낼 수 있습니다.

• 임시 위치 확인 권한을 사용하면 정확한 위치를 묻거나 알 필요 없이 고객이 예상하는 지역 내에 있는지 확인할 수 있습니다.
• 이는 잘못된 주유소에서 실수로 결제하거나 잘못된 매장에서 주문하는 것을 방지하는데 도움이 됩니다.

• 개발자는 Info.plist의 App Clip항목을 통해 이 기능을 추가할 수 있습니다.
• 위치 확인은 NFC 태그, 앱 클립 코드 또는 QR 코드와 같은 물리적 호출 에만 사용할 수 있습니다.
• 사용자는 현재 세션 또는 모든 요청에 ​​대해 위치 확인을 해제할 수 있습니다.

• ConfirmAcquired의 오류를 확인하여 권한 처리에 대한 유용한 지침과 더 옵션을 사용자에게 제공할 수 있습니다.

• 프로젝트 설정 자동으로 서명 관리를 사용하여 App Clip과 관련된 대부분의 서명을 자동으로 설정할 수 있습니다.

• 수동으로 서명을 관리하는 경우 최근 프로필인지를 확인하여야 합니다.
• 이때의 이점 중 하나는 사용자가 App Clip에서 전체 앱으로 업그레이드할 때 데이터가 더 빨리 마이그레이션 된다는 것입니다.

 

목차: https://nyancoder.tistory.com/2