앱 클립의 새로운 기능

앱 클립의 새로운 기능

앱 클립의 최신 업데이트를 확인하세요! CloudKit 및 키체인 사용뿐만 아니라 크기 제한을 개선하여 앱 클립을 어떻게 더욱 쉽게 빌드할 수 있게 되었는지 살펴보세요. 또한 확인 도구를 사용하여 앱 클립을 검증하고 App Store Connect를 사용하여 고급 앱 클립 경험의 작업 흐름을 자동화하는 방법을 보여드립니다.

리소스
- App Clips
- - HD 비디오
  - SD 비디오
관련 비디오

WWDC21
- 가볍고 빠른 앱 클립 빌드하기
- 앱 클립의 새로운 기능
WWDC20
- Design great App Clips
- What's new in App Store Connect
다운로드

♪ ♪ 안녕하세요, Charles Ying입니다 앱 클립의 새로운 기능을 소개하겠습니다 앱 클립은 앱의 일부로 가볍고 빠르며 찾기 쉬워서 필요한 것을 그때그때 바로 찾을 수 있도록 해줍니다 메시지, 지도, Spotlight Safari에서 사용할 수 있고 현실에선 QR 코드나 앱 클립 코드를 이용할 수도 있습니다 Toast가 좋은 예시입니다 Toast의 앱 클립을 사용하면 QR 코드를 스캔해 결제가 되죠 Toast는 영수증에 출력된 QR 코드를 이용해 앱 클립이 열리도록 설정되어 있습니다 앱 클립을 통해 사용자가 더 빠르게 확인하고 이로 인해 더 많은 사용자들이 전체 앱을 설치하게 됩니다 기존의 사용 흐름에 앱 클립을 구축하는 것은 경험을 최적화하는 가장 좋은 방법입니다 이번엔 여러분의 사용자가 앱 클립을 더 많이 쓰게 하고 앱 클립 개발을 더 쉽게 해주는 새 기능에 대해 소개하겠습니다 먼저 앱 클립 크기 제한부터 시작하겠습니다 앱 클립은 가볍고 빠른 속도를 위해 설계되었습니다 앱 클립이 즉각적이려면 그 크기는 작아야 합니다 그리고 무선 네트워크의 속도가 2년 전보다 더 빨라진 덕분에 기쁘게도 다음과 같이 말씀드릴 수 있게 되었습니다 iOS 16에서 앱 클립 크기는 최대 15MB가 되었습니다 이를 통해 여러분이 생각하는 이상적 경험의 여지를 제공합니다 최소 버전을 iOS 16으로 설정해 15MB까지 만들 수도 있고 iOS 15 이전에서도 호환되도록 10MB 미만으로 유지할 수도 있죠 어느 쪽이든 앱 클립이 시작된 후 여러분은 추가 리소스를 항상 다운로드할 수 있습니다 속도는 여전히 훌륭한 경험의 핵심입니다 사용자가 쓰는 네트워크가 항상 빠르지는 않을 테니 앱 클립 최적화는 여전히 그 어느 때보다 중요합니다 앱 클립 최적화에 대해 더 자세히 알아보려면 'Build light and fast App Clips'를 시청해 주세요 다음으로 기쁘게 소개해 드릴 것은 앱 클립 경험이나 유니버셜 링크가 잘 설정되었는지 확실히 해주는 간단한 도구입니다 작동 방식은 다음과 같습니다 iPhone 또는 iPad에서 개발자 설정으로 이동한 뒤 App Clips Testing에서 ‘진단(Diagnostics)’을 선택하고 URL을 입력합니다 개발자 설정은 기기를 Xcode에 연결하여 켤 수 있습니다 iOS는 URL 구성을 확인합니다 모든 것이 올바르게 설정되면 녹색 체크박스들이 표시됩니다
하지만 뭔가 잘못된 것이 있다면 이런 화면이 나오며 어떤 일이 일어나고 있는지 정확히 알려줍니다 이는 Safari 배너가 안 보인다거나 앱 클립 대신 웹페이지로 접속되는 것과 같은 문제들을 해결하도록 도와줍니다 각 진단은 추가적인 구성을 설명하는 문서에 연결되어 있습니다 이제 여러분은 정확히 무엇이 잘못되었는지 알 수 있습니다
앱 클립 진단은 물리적 코드나 Safari 혹은 iMessage를 사용하는 앱 클립 경험 유니버셜 링크에 연관된 도메인 설정도 확인합니다 이 간단한 새 도구를 이용하면 더 쉽고 올바르게 구성할 수 있죠
다음은 CloudKit입니다
CloudKit라는 프레임워크 덕에 iCloud 데이터에 접근이 가능하죠 지금까지 CloudKit를 앱 클립에는 사용할 수 없었습니다 여러분의 앱 클립은 서버를 통해 데이터나 리소스를 읽어 왔죠
새 iOS 16에서는 앱 클립도 CloudKit 공개 데이터베이스에서 저장된 데이터나 리소스를 읽어 들일 수 있습니다 이제 앱과 앱 클립에서 같은 데이터에 접근할 때 CloudKit가 제공하는 모든 역량을 사용하는 같은 코드를 사용할 수 있습니다 앱과 앱 클립의 중요한 차이점은 앱 클립은 CloudKit의 공개 데이터베이스 읽기만 되고 쓰기는 안 된다는 점입니다 또 앱 클립은 Document 스토리지와 Key-Value 스토리지도 쓰지 못하죠 이러면 앱 클립을 안 쓸 때 앱 클립과 해당 데이터가 iOS에 의해 삭제된다는 사용자와의 약속이 유지됩니다
Xcode에서 앱 클립에 대해 CloudKit를 활성화하려면 앱 클립에서 TARGETS를 열고 Signing and Capabilities 탭에서 사용하고자 하는 앱 클립에 대한 CloudKit 컨테이너를 선택하세요 이 CloudKit 컨테이너는 새로운 컨테이너를 만들어도 되고 앱의 컨테이너와 공유할 수도 있습니다 다음은 CloudKit 공개 데이터를 읽는 방법에 대한 예제입니다 컨테이너의 식별자로 CKContainer를 만들어 publicCloudDatabase 속성에 접근해서 공개 데이터베이스로부터 원하는 레코드를 가져옵니다
다음은 키체인 마이그레이션입니다 현재는 인증 토큰이나 결제 정보 같은 민감한 정보를 앱 클립으로부터 앱으로 전송할 때 앱 클립은 이 데이터를 공유 앱 그룹 컨테이너에 저장하고 앱 클립에서 앱으로 전환할 때 iOS가 이 데이터를 저장합니다
앱은 앱 그룹 컨테이너를 읽고 그 정보를 키체인에 저장하죠
여기서 키체인은 이러한 정보를 안전히 저장하는 데 최적의 장소입니다 이제부터는 사용자가 새로 여러분의 앱을 설치할 때 앱 클립에서 전송되어 앱 클립 키체인에 저장된 항목들이 앱으로 전송됩니다 이제부터는 간단히 앱 클립이 보안 항목들을 키체인에 저장하고 그 항목들은 앱이 설치되면 앱으로 이동됩니다 공유 키체인 그룹과 iCloud 키체인은 지원되지 않습니다 이를 통해 앱 클립이 더 이상 사용되지 않을 때 그 키체인 정보가 남지 않는다는 사용자와의 약속을 지키게됩니다
다음은 키체인에서 로그인 정보를 읽는 방법에 대한 예제입니다 앱 및 앱 클립 모두에 대해 코드는 동일합니다 SecItemAdd을 이용해 키체인에 새로운 항목을 추가할 수 있습니다 그리고 키체인에서 이 항목을 SecItemCopyMatching으로 가져오죠 다음으로 이 항목에 레이블을 붙여 앱에서 이 항목이 앱 클립에 의해 저장되었음을 식별할 수 있게 합니다
마지막으로 App Clip Experiences API입니다 앱 클립이 발전함에 따라 여러분은 각자의 정보와 위치에 기반한 더욱 더 발전된 앱 클립 경험을 갖게 될 것입니다 이런 모든 경험을 업데이트할 쉬운 방법이 필요하겠죠 App Store Connect에는 이 워크플로를 자동화해 주는 App Clip Experiences라는 웹 API가 있습니다 더 발전된 앱 클립 경험을 추가하기 위해 이 API를 사용하는 예시를 살펴봅시다 먼저 앱 클립 리소스 ID를 가져옵니다 다음으로 헤더 이미지를 업로드합니다 마지막으로 발전된 앱 클립 경험을 추가합니다 먼저 앱 클립을 위한 리소스 ID를 찾습니다 앱 항목 ID와 앱 클립 번들 ID를 이용해 웹 API를 호출하고 나중을 위해 응답으로부터 앱 클립 리소스 ID를 저장합니다 이어 발전된 앱 클립 경험을 위한 헤더 이미지를 업로드합니다 다음 단계를 위해 헤더 이미지의 리소스 ID 저장합니다 마지막으로 앱 클립 리소스 ID와 헤더 이미지 ID를 사용하여 발전된 앱 클립 경험을 만들 수 있습니다 세 가지 딕셔너리를 작성해야 하는데요 attributes, relationships included입니다
attributes 딕셔너리에는 action name과 카테고리 및 언어를 추가하고 발전된 앱 클립 경험을 위한 링크도 넣습니다 발전된 경험이 지도와 관련 있다면 place 딕셔너리를 추가하세요 place 딕셔너리에는 해당 장소의 이름과 지도에서 수행할 mapAction 및 좌표를 추가합니다 relationships 딕셔너리에는 앱 클립 리소스 ID와 헤더 이미지 ID를 추가합니다 그리고 included 딕셔너리에는 발전된 앱 클립 경험을 위해 현지화된 제목과 부제목을 추가합니다 이렇게 하면 됩니다 이 App Store Connect API를 사용하면 발전된 앱 클립 경험 생성을 완전히 자동화할 수 있습니다 App Store Connect에 대해 자세히 알아보려면 WWDC 2018 'Automating App Store Connect'와 WWDC 2020 'What's new in App Store Connect’를 확인해 보세요 즉, 새로운 앱 클립 크기 제한은 이상적 경험 구축에 필요한 더 많은 용량을 제공합니다 앱 클립 진단 도구는 앱 클립과 유니버셜 링크 설정을 전체적으로 이해하는 좋은 방법입니다 CloudKit와 키체인은 앱과 더 많은 코드를 공유함으로써 개발을 용이하게 합니다 또한 App Clip Experiences API는 발전된 앱 클립 경험을 관리하는 워크플로를 자동화합니다 앱 클립 개발에 대해 자세히 알아보려면 WWDC 2021 'What's new in App Clips’와 WWDC 2020의 'Design great App Clips'를 시청하세요 개발자 여러분께서는 훌륭한 앱 클립을 만들어왔습니다 매우 창의적인 앱 클립들이죠 이 새 기능이 멋진 앱 클립 구축에 도움이 되기를 바랍니다 시청해 주셔서 감사합니다

4:41 - Read your CloudKit public database from your App Clip

// Read your CloudKit public database from your App Clip

let container = CKContainer.default()
let publicDatabase = container.publicCloudDatabase
let record = try await publicDatabase.record(for:
    CKRecord.ID(recordName: "A928D582-9BB6-E9C5-7881-E4EAF615E0CD"))

if let title = record["Title"] as? String,
    let description = record["Description"] as? String {
        print(“Fetched a food item from CloudKit: \(title) \(description)")
}

6:03 - Read and Write from your App Clip's keychain

// Write authentication token to App Clip keychain

let addSecretsQuery: [String: Any] = [
    kSecClass as String: kSecClassGenericPassword,
    kSecValueData as String: "smoothie-secret".data(using: .utf8),
    kSecAttrLabel as String: "foodsample-appclip"
]
SecItemAdd(addSecretsQuery as CFDictionary, nil)

// Read authentication token from app or App Clip

var readSecretsQuery: [String: Any] = [
    kSecClass as String: kSecClassGenericPassword,
    kSecReturnAttributes as String: true,
    kSecAttrLabel as String: "foodsample-appclip",
    kSecReturnData as String: true
]
var secretsCopy: AnyObject?
SecItemCopyMatching(readSecretsQuery as CFDictionary, &secretsCopy)

7:10 - Get your App Clip resource ID

# Get the App Clip resource ID

GET /v1/apps/1234567890/appClips?filter[bundleId]=com.example.foodsample.Clip

# Response

{
    "data": {
        "attributes": {
            "bundleId": "com.example.foodsample.Clip"
        },
        "id": "726ad1bb-3e1b-40eb-a986-d8a9897e4f1e"
    }
}

7:25 - Upload a header image for the advanced App Clip experience

# Upload a header image for the advanced App Clip experience

POST /v1/appClipAdvancedExperienceImages
{
    "data": {
        "type": "appClipAdvancedExperienceImages",
        "attributes": {
            "fileName": "Hero_image_US.png",
            "fileSize": 43500
        }
    }
}

# Response

{
    "data": {
        "attributes": "..."
        "id": "91c52741-832b-48a2-8935-1797655edbe7"
    }
}

7:34 - Create the advanced App Clip experience

# Create advanced App Clip experience

POST /v1/appClipAdvancedExperiences
{
    "data": {
        "type": "appClipAdvancedExperiences",
        "attributes": {
            "action": “OPEN",
            "businessCategory": "FOOD_AND_DRINK",
            "defaultLanguage": "EN",
            "isPoweredBy": true,
            "link": "https://fruta.example.com/restauraunt/simply_salad",
            "place": {
                "names": [ "Caffe Macs" ],
                "mapAction": "RESTAURANT_ORDER_FOOD",
                "displayPoint": {
                    "coordinates": { "latitude": 37.33611, "longitude": -122.00731 },
                    "source": "CALCULATED"
                }
            }
        },
        "relationships": {
            "appClip": {
                "data": {
                    "type": "appClip",
                    "id": "726ad1bb-3e1b-40eb-a986-d8a9897e4f1e"
                }
            },
            "headerImage": {
                "data": {
                    "type": "appClipAdvancedExperienceImages",
                    "id": "91c52741-832b-48a2-8935-1797655edbe7"
                }
            }
        },
        "included": {
            "type": "appClipAdvancedExperienceLocalizations",
            "attributes": {
                "language": "EN",
                "subtitle": "Fresh salad every day",
                "title": "Simply Salad"
            }
        }
    }
}

찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.

쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.

리소스

관련 비디오

WWDC21

WWDC20