지갑 및 Apple Pay의 새로운 기능

안녕하세요, ‘지갑과 Apple Pay의 새로운 기능’을 시작하겠습니다 저는 Tanya입니다 저는 Masha입니다 오늘은 올해 지갑과 Apple Pay에 새롭게 도입된 모든 기능과 개선 사항을 설명하겠습니다 지난 몇 년 간 Apple Pay Later와 주문 추적 같은 새로운 기능과 개발자를 위해 기존 기능을 더 개선하는 업데이트가 제공되었죠 올해는 Apple Pay 사용에 대한 업데이트와 티켓 발권에 대한 사용자 경험을 업그레이드하는 데 중점을 둘 것입니다 오늘 다룰 첫 결제 업데이트는 웹의 Apple Pay에 대한 것입니다 Apple Pay가 매장과 앱, 웹에서 비용을 지불하기 위한 가장 원활하고, 안전하고, 안심되는 방법이란 것은 이미 알고 계시죠 iOS 18을 사용하면 전환 실적을 개선하고 Apple 생태계 외부의 기기를 비롯해 브라우저가 있는 모든 기기로 Apple Pay 사용자 경험을 확장할 수 있습니다 iOS 18의 사용자는 iPhone으로 코드를 스캔하는 것만으로 Safari 외의 모든 브라우저에서 Apple Pay를 사용하여 비공개로 안전하게 결제를 완료할 수 있습니다 코드를 약간 변경한 후에 이 새로운 거래 흐름이 어떻게 작동하는지 보실 수 있을 거예요 이 업데이트를 가능한 한 간단하게 만들려면 코드에서 두 가지 항목을 확인하기만 하면 됩니다 먼저, Apple Pay JavaScript SDK를 가져오거나 기존 버전을 1.2.0 이후 버전으로 업데이트하세요 페이지가 로드되자마자 Apple Pay를 사용할 수 있게 하려면 이를 HTML 문서의 헤드 태그에 배치하는 것이 좋습니다 통합을 테스트하려면 베타 테스트에 관한 개발자 링크 문서를 참조하세요 다음으로는, CSS 구현 변수 대신 JavaScript SDK Apple Pay 버튼을 사용하는 것이 중요합니다 이 구성요소를 사용하면 Safari 외 브라우저 지원이 작동하게 됩니다 개발자 링크 문서에서 Apple Pay 버튼을 표시하고 맞춤화하는 방법을 자세히 확인할 수 있습니다 이 기능에 대해 알아둬야 할 또 다른 사항은 새로운 applePayCapabilities() API를 위해 canMakePaymentsWithActiveCard()가 지원 중단되고 있다는 것입니다 이전에 브라우저 또는 사용자 에이전트 감지를 사용해 웹사이트에 Apple Pay를 표시할지 여부를 결정하셨다면 이 API가 그 문제에 대한 명확하고 보편적인 해결 방법을 제공합니다 현재 결제 로직에 canMakePayments() API만 사용하고 있다면 추가로 변경하지 않고도 계속 사용할 수 있습니다 canMakePayments()가 true를 반환하는 경우 Apple Pay 버튼이 항상 표시되어야 합니다 결제 및 제품 페이지에서 Apple Pay 버튼을 우선시하거나 기본적으로 제공하려면 새로운 applePayCapabilities() API를 사용해야 합니다 더 정확하고 자세한 응답을 위해 applePayCapabilities() 호출은 paymentCredentialStatus 키를 포함하는 객체를 다음 값 중 하나와 함께 반환합니다 첫 번째 값인 paymentCredentialsAvailable은 기기에서 Apple Pay를 지원하고 지갑에 웹 결제가 가능한 활성 카드가 있음을 나타냅니다 이 경우 Apple Pay가 첫 번째 결제 옵션으로 표시되어야 합니다

두 번째 값인 paymentCredentialsUnavailable은 기기에서 결제를 할 수 있지만 지갑에 이 결제를 할 수 있는 활성 카드가 없음을 나타냅니다 따라서 Apple Pay 버튼이 표시되어서는 안 됩니다 paymentCredentialStatusUnkown 값은 Apple Pay가 지원되지만 특정 카드 정보를 사용할 수 없음을 나타내며 Safari 외의 브라우저 또는 Apple 생태계 외부 기기에서 발생합니다 Apple Pay 버튼은 여전히 여기에 표시되어야 하지만 순서는 개발자에게 달려 있습니다 Apple Pay 버튼이 표시되어서는 안 되는 마지막 시나리오는 paymentCredentialStatus에 applePayUnsupported라고 명시적으로 표시된 경우입니다 Apple Pay 버튼을 언제 어디에 표시할지에 대한 자세한 내용은 ‘웹에서 허용되는 Apple Pay 이용 지침’ 또는 휴먼 인터페이스 가이드라인에서 확인하실 수 있습니다 이제 실제로 어떤 모습인지 보기 위해 반려동물 매장으로 가 보죠

이건 큐퍼티노에 위치한 반려동물 매장의 웹사이트입니다 현재 Safari 브라우저를 사용하고 있지 않고, Mac도 아니죠 결제 페이지로 이동해서 결제 중에 Apple Pay를 클릭하면 스캔 가능한 코드가 화면에 표시됩니다 iPhone을 꺼내서 카메라로 코드를 스캔할게요 백그라운드에서 일반적인 iPhone Apple Pay 거래와 동일한 결제 시스템을 사용합니다 따라서 개발자는 고객이 어떤 기기나 브라우저를 선택하는지를 걱정할 필요가 없죠 그리고 계속해서 일반적인 Safari 웹 거래와 동일한 결제 응답 데이터를 받게 됩니다 이전에 Safari용으로 작성한 모든 코드가 이제 모든 브라우저에서 작동하며, 아무 것도 수정할 필요가 없죠 이중 클릭해서 확인할게요

보세요 거래가 완료되었네요 이제 몇 가지 팁과 모범 사례를 알려 드리겠습니다 앞서 말씀드렸듯이 헤드 태그 내에 JavaScript 파일을 가져와서 가능한 한 빠르게 실행되게 하는 것이 중요합니다 JavaScript SDK에서 제공된 Apple Pay 버튼을 사용해야 합니다 이 버튼의 CSS 구현은 Safari 외의 브라우저에서 지원되지 않습니다 Apple Pay JS 대신 W3C API를 사용해 Apple Pay를 구현한 경우 일부 브라우저에서 Payment Request API가 지원되지 않음에 유의하세요 마지막으로, 기존 canMakePayments() API 또는 Apple Pay 기능 API의 새로운 paymentCredentialStatus 객체를 사용하여 언제 어디에 Apple Pay 버튼을 표시할지 결정해야 합니다 올해의 다음 업데이트는 자금 이체 기능을 웹으로 확장한 것입니다 작년 프레젠테이션에서 본 이 다이어그램이 떠오르실 텐데요 Apple Pay에서 계정에 자금을 추가하는 API를 도입했었죠 올해는 iOS 18과 macOS 15를 통해 웹에서 자금을 이체할 수 있습니다 참고로, 자금 이체를 사용하면 사용자가 선불 카드 또는 은행 계좌에 있는 돈을 Apple Pay에 등록된 모든 사용자 카드로 이체할 수 있습니다 먼저 결제 프로세서에서 지출을 지원하는지 확인해야 합니다 웹 API의 Apple Pay에 익숙하시다면 disbursementRequest이 다른 PaymentRequest 유형과 유사하게 작동할 것입니다 iOS에서 자금을 이체할 때 동일한 규칙이 적용되며, 작년의 ‘지갑과 Apple Pay의 새로운 기능’ Talk에서 검토할 수 있습니다 간단한 코드 예시를 보여 드릴게요 일반적인 자금 이체 지원에는 새로운 기능이 필요하지 않습니다 기능 목록에 ‘supports3DS’가 있다면요 즉시 자금 이체 옵션을 지원하려면 paymentMethodData 내의 가맹점 기능 목록에 ‘supportsInstantFundsOut’을 추가해야 합니다 이렇게 하면 나중에 즉시 자금 이체와 관련된 추가 수수료도 지정할 수 있습니다 자금 이체에는 상품의 배송이 포함되어 있지 않으므로 사용자에게 혼동을 주지 않도록 결제 옵션에서 requestShipping을 false로 설정해야 합니다 결제 요청을 빌드하려면 한정자 목록 내에서 disbursementRequest 객체를 지정해야 합니다 선택적으로 요청 내에 requiredRecipientContactFields를 포함하여 결제 시트에서 사용자로부터 필요한 정보를 지정할 수도 있습니다 requiredRecipientContactFields가 필요하지 않더라도 빈 empty disbursementRequest 객체가 여전히 있어야 합니다

disbursementRequest 객체 아래의 additionalLineItems는 결제 요청에 대한 기존 구조를 따릅니다 첫 번째 항목은 사용자 계정에서 차감되어야 하는 총 금액의 요약입니다

두 번째 항목은 즉시 자금 이체 요청에만 적용되며 이 항목은 거래에 대한 수수료를 지정합니다 라인 항목 유형은 ‘instantFundsOutFee’여야 하죠 즉시 자금 이체에 수수료를 부과하지 않더라고 이 항목은 여전히 있어야 하며 금액이 0으로 설정되어 있어야 합니다 마지막 항목은 사용자의 카드로 이체되는 금액으로 여기서 항목 유형은 ‘disbursement’입니다

사용자의 관점에서, 자금 이체 요청에 대한 결제 시트는 이런 모습입니다 사용자는 어떤 결제 카드로 이체할지 선택하고 해당 카드에서 받을 금액을 확인할 수 있습니다

처리 중에 오류가 발생하는 경우 추가로 네 번째 필드에 ApplePayError 객체를 사용하여 오류가 적용되는 거래 유형을 지정할 수 있습니다 결제 프로세서에서 사용자의 결제 카드가 자금 이체를 수락할 수 없음을 확인하면 unsupportedCard 오류를 사용해야 합니다 사용자의 연락처 정보와 관련된 문제가 있는 경우 recipientContactInvalid 오류를 사용합니다 이제 오늘의 마지막 결제 업데이트는 가맹점 카테고리 코드에 대한 지원입니다 가맹점 카테고리 코드는 비즈니스에서 제공하는 상품이나 서비스의 유형별로 비즈니스를 분류하는 데 사용됩니다 특정 결제 카드에서는 일부 거래 카테고리가 지원되지 않습니다 보통 이로 인해 가맹점 측에서 거래를 처리할 수 없게 되죠 올해부터는 결제 요청 내에서 가맹점 카테고리 코드를 지정할 수 있습니다 그러면 결제 시트에서 더 스마트한 결정을 내리고 고객에게 유효한 결제 카드만 표시하여 거래의 성공 가능성이 높아집니다 Apple Pay는 ISO 표준 79450을 따르는 가맹점 카테고리 코드를 지원합니다 비즈니스의 ‘가맹점 카테고리 코드’를 잘 모르겠으면 결제 프로세서에 문의하여 확인할 수 있습니다 오늘의 결제 업데이트는 여기까지고요, 아직 끝이 아니죠 Masha가 정말 멋지고 새로운 티켓 발권 업데이트를 소개하겠습니다 고마워요, Tanya 올해 지갑의 이벤트 티켓에 대한 새로운 기능에 대해 이야기할게요 지갑에 있는 티켓의 시각적 업그레이드, 이벤트의 자세한 정보에 접근할 수 있는 새로운 이벤트 가이드 날씨, 캘린더 등의 앱과의 더 강력한 시스템 통합을 비롯해 더 풍부한 티켓 발권 경험이 도입되었습니다 PKPasses는 콘서트, 스포츠 게임이나 축제와 컨퍼런스 같이 더 길게 진행되는 이벤트 등 다양한 이벤트를 나타낼 수 있습니다 올해는 이러한 이벤트를 나타내는 NFC 이벤트 티켓에 대한 경험을 개선하는 데 중점을 뒀습니다 패스에 새로운 개선 사항을 적용하려면 패스 콘텐츠의 구조에 대한 요구 사항을 충족해야 합니다 먼저 pass.json이 의미론적으로 태그된 필수 정보를 제공해야 하죠 시맨틱 태그는 기계가 읽을 수 있는 메타데이터의 한 형태이며 시스템이 패스에 제공된 데이터를 더 잘 이해하는 데 도움이 됩니다 시맨틱 태그에 대해 자세히 알아보려면 이 세션과 연결된 링크를 확인해 주세요 다음으로, 패스를 새로운 스타일로 렌더링할지 여부를 지정하기 위해 pass.json에 선호하는 스타일을 추가합니다 오늘날과 같이 티켓 소유자가 비접촉 입장에 패스를 사용할 수 있게 하려면 패스가 NFC 권한으로 서명되어야 합니다 이 권한 요청에 대한 자세한 내용은 지갑 개발자 사이트를 확인하세요

필수 패스 번들 콘텐츠를 계속 포함해야 하고 새로 도입된 애셋을 포함하는 것을 고려해야 합니다 패스 번들에 포함할 수 있는 항목을 자세히 살펴보겠습니다 이전과 마찬가지로, PKPass 번들에는 pass.json 파일이 필요한데, 여기에는 아이콘, 로고 및 배경 이미지와 함께 대량의 패스 콘텐츠가 포함되어 있습니다 이 새로운 티켓에 대해 아트워크 애셋과 secondaryLogo도 도입했습니다 이전 OS 버전에서 스트립 이미지를 사용해 패스를 계속 렌더링하게 하려면 아트워크 애셋을 사용하세요 모든 OS 버전에서 동일한 배경을 원한다면 배경 애셋을 사용하세요 이들 각각이 패스에 어떻게 표시되는지 차근차근 살펴보죠 상단에는 이벤트 로고나 로고 텍스트가 표시됩니다 반대쪽에는 예정된 이벤트의 날짜와 시간이 있는데 한 시점일 수도 있고 며칠 동안의 기간일 수도 있죠 이러한 레이블은 이벤트 아트워크에 더 집중하고 더 많은 공간을 주기 위해 전략적으로 배치되어 각 패스가 더 고유한 방식으로 이벤트를 나타내도록 합니다

마지막으로 하단에는 기본 좌석 정보를 표시하는 데 사용되는 새로운 바닥글이 있습니다 PassKit는 이벤트와 장소 유형을 고려하고 가장 중요한 좌석 정보를 표시합니다 이 바닥글에는 보조 로고도 표시됩니다

이 새로운 레이아웃은 패스 전체에 일관성을 적용하여 티켓 소유자와 안내원이 이벤트의 좌석과 입장 정보를 더 쉽고 빠르게 찾을 수 있게 합니다 이 패스를 만들기 위해 pass.json에 필요한 항목의 한 가지 예를 설명해 드리겠습니다

이벤트 시작 날짜와 시간은 상단의 레이블에 사용됩니다 좌석 딕셔너리는 하단 바닥글에 정보를 입력하여 입장 및 좌석 정보의 최대 네 가지 요소를 표시하는 데 사용됩니다

음악 페스티벌처럼 며칠에 걸쳐 진행되는 이벤트의 경우 하루가 아닌 관련 시간 간격을 제공할 수 있습니다

할당된 좌석이 없는 경우 대신 바닥글에 일반 입장권과 같은 입장권 수준을 표시할 수 있습니다 다음으로는 패스 아래에 제공되는 새로운 경험을 살펴보겠습니다 이벤트 관련 자세한 정보를 볼 수 있는 새 진입점이 추가되었습니다 먼저, 새로운 지도 타일이 있는데, 이 타일을 탭하면 사용자가 지도 앱으로 리디렉션되고 이벤트 장소로 가는 경로를 쉽게 확인할 수 있습니다

오른쪽에는 새로운 이벤트 가이드의 진입점이 추가되었습니다 이벤트 가이드는 티켓 소유자에게 다양한 정보를 볼 수 있는 공간을 제공하여 예정된 이벤트를 더 효율적으로 준비하고 이벤트 중에 유용할 수 있는 동작에 빠르게 접근할 수 있게 합니다

상단에는 앱 내 경험으로 연결되는 일련의 동작이 표시됩니다 이러한 동작을 통해 사용자는 음식 주문, 상품 구매 자세한 수화물 정책 확인 등의 기능에 빠르게 접근할 수 있습니다 그 아래에는 이벤트 날과 위치의 일기 예보가 나와 있습니다 다음으로, 추가 장소 세부 정보를 위한 공간이 있는데, 여기에는 장소 지도와 자유 형식의 대기 레이블 정보가 포함될 수 있습니다 이벤트 가이드에는 관련 플레이리스트로 연결되는 링크도 포함됩니다 이러한 변경 사항이 pass.json에서 어떻게 보이는지 살펴보겠습니다

의미론적으로 태그된 URL이 사용되어 상단에 외부 경험으로 연결되는 탭할 수 있는 타일을 생성합니다 위도와 경도 좌표를 사용하여 제공된 장소 위치는 지도의 리디렉션과 날씨 경험을 촉진하는 데 도움이 됩니다 좌표 위치가 제공되지 않는 경우 장소 이름을 사용하여 지도의 위치를 가져옵니다

콘서트 티켓의 경우 연주자 이름이나 아티스트 ID를 포함하면 음악 통합 경험을 지원하는 데 도움이 됩니다 아티스트 ID를 찾는 자세한 방법은 관련 링크를 확인하세요 다른 티켓 유형의 경우 이벤트 이름을 사용하여 표시할 엄선된 관련 음악 콘텐츠를 확인합니다

이제 티켓을 만들기 위한 몇 가지 모범 사례를 살펴보겠습니다 가능한 경우 어댑터에서 시맨틱 태그를 사용하는 것이 좋습니다 이를 통해 이벤트 가이드와 패스에 과거의 정보를 표시할 수 있습니다

OS 버전과 관계없이 티켓이 기기에 표시되게 하려면 이전에 했던 것처럼 pass.json에 기본 및 보조 필드를 계속 포함해야 합니다 이러한 필드가 없으면 패스가 검증에 실패하거나 이전 OS 버전에서는 비어 있는 상태로 표시됩니다

포스터 이벤트 티켓을 원하는 스타일 버전으로 지정해서 이전 스타일을 새로운 이벤트 스타일로 렌더링하세요 어떤 모습인지 다음에 보여 드릴게요

포스터 이벤트 티켓은 앞서 보여 드린 새 티켓 스타일을 나타냅니다 반면 이벤트 티켓은 기존 스타일을 나타내고 PassKit에서 패스 렌더링을 시도하는 순서를 지정합니다

이 패스에는 이전 OS 버전에 대한 기존 티켓 유형을 렌더링하는 데 사용되는 헤더와 기본 필드가 포함됩니다

그리고 그 아래의 동일한 경로에는 새 티켓 스타일을 렌더링하는 의미론적으로 태그된 데이터가 있습니다

마지막으로, pass.json에 대한 이 변경 사항만 적용하면 패스가 가장 관련성이 있다고 간주되는 시점에 패스가 iPhone 및 Apple Watch에서 실시간 현황도 시작하게 됩니다 실시간 현황은 기본 좌석과 입장 정보를 표시하여 사용자가 잠금 화면이나 스마트 스택에서 가장 중요한 정보를 더 쉽게 볼 수 있게 합니다 여기에 표시되는 좌석 정보는 패스 바닥글에 표시되는 것과 비슷하며 pass.json에서 제공되는 동일한 좌석 딕셔너리를 통해 전달됩니다 지금까지 티켓 발권 업데이트에 대해 알아보았습니다 새로운 지갑 패스 업데이트를 통해 티켓 소유자가 향후 이벤트에 대해 필요한 정보를 더 쉽게 찾을 수 있길 바랍니다 이제 Tanya가 지금까지 알아본 내용을 요약해 드리겠습니다 고마워요, Masha 올해 Apple은 지갑과 Apple Pay에 멋진 새 기능을 도입했습니다 이제 앱 내와 웹에서 자금을 이체할 수 있고 Apple Pay를 사용하여 여러 생태계에서 거래를 할 수 있으며 사용자에게 더 풍부한 티켓 발권 경험을 제공할 수 있습니다 이제 몇 가지 안내 사항과 작업 항목을 알려 드릴게요 이전에 브라우저 감지를 사용해 Apple Pay의 사용 가능 여부를 확인한 경우 Apple Pay에 대한 브라우저 지원 문제를 해결하기 위해 설계된 canMakePayments API 또는 새로운 applePayCapabilities API를 활용하세요 아래의 샘플 코드를 다운로드하여 사용 가능한 모든 새 패스 티켓 발권 업데이트를 확인하고 피드백 지원을 통해 오늘 소개된 기능에 대한 피드백을 제출하세요 마지막으로, 웹에서 Apple Pay 를 처음 사용하는 경우 ‘웹에서 Apple Pay 시작하기’ Tech Talk를 확인하세요 이게 전부입니다 이 세션이 즐거우셨길 바라며 나머지 WWDC도 즐기시길 바랍니다 시청해 주셔서 감사합니다