웹 앱의 새로운 기능

♪ ♪

안녕하세요, 전 레이철입니다 Safari 팀 엔지니어죠 오늘은 웹 앱의 새로운 기능을 소개하려고 합니다 iPhone이 탄생한 이래로 우리는 웹 앱의 여정을 함께했고 웹 앱의 기능은 계속해서 개선돼 왔습니다 iOS와 iPadOS 16.4에서는 홈 화면에 추가한 웹 앱의 알림 기능을 선보였죠 배지 알림을 지원하는 웹 푸시 기능에 기반한 거였습니다 '홈 화면에 추가' 기능을 적용하려 iOS, iPadOS에 API도 추가했습니다

iOS와 iPadOS 17에서는 '홈 화면에 추가' 기능을 Safari View Controller에서 사용할 수 있게 됐습니다 홈 화면 웹 앱을 iOS 브라우저와 인앱 브라우저에서도 추가할수있죠 이제 macOS Sonoma에서는 Mac에서도 웹 앱을 쓸 수 있습니다 Mac의 웹 앱은 자주 쓰는 사이트를 더 편하게 볼 수 있도록 해 줍니다 다른 브라우징과는 별도로 사용할 수 있죠 웹 앱을 생성하는 방법은 iOS와 비슷합니다 Dock에 웹사이트를 추가하면 되죠

위키피디아를 보다가 Dock에 추가하려고 합니다 파일 메뉴를 열어서 'Dock에 추가하기'를 누릅니다 이 사이트의 아이콘과 이름 URL이 뜰 겁니다 이름을 줄여 보겠습니다 원하면 아이콘도 변경할 수 있지만 지금도 좋아 보이네요 '추가' 버튼을 누르면 Dock에 새 아이콘이 생깁니다 이제 Safari를 닫고 위키피디아 웹 앱을 열겠습니다

웹 앱을 열면 이 사이트를 앱처럼 사용할 수 있습니다 제 계정으로 로그인도 돼 있는데요 Dock에 추가할 때 Safari에서 쿠키를 복사하기 때문이죠 내비게이션 버튼이 있는 간단한 도구 막대도 있습니다 사이트의 색상이 도구 막대에도 적용됩니다 개발자는 내비게이션 버튼의 노출 여부를 관리할 수 있습니다 오늘은 먼저, Mac의 웹 앱이 어떻게 모든 웹사이트에서 바로 구동하는지 알아보겠습니다 그다음으로는 웹 앱의 동작을 어떻게 맞춤형으로 구성해 사용자들에게 최상의 경험을 제공할지 살펴보죠 마지막으로는 알림 소리와 배지 알림에 대해 알아보겠습니다 사용자들이 여러분의 웹 앱을 활발하게 사용하지 않을 때도 주의를 끌 수 있는 방법이죠 먼저, 웹 앱이 어떻게 바로 구동되는지 살펴보겠습니다 Mac의 웹 앱은 개발자가 별도로 작업하지 않아도 잘 작동합니다 어느 웹사이트든 웹 앱이 될 수 있죠 Mac의 웹 앱에는 MacOS 네이티브 앱에서 쓸 수 있는 각종 기능이 온전히 탑재되어 있습니다

제가 Dock에 추가해 놓은 웹 앱을 살펴봅시다 이 사이트에는 웹 앱 매니페스트 같은 웹 앱 전용 기능은 없지만 보기에도 훌륭하고 단독 웹 앱으로 기능합니다

Mac의 다른 앱들과 마찬가지로 Stage Manager나 Mission Control로도 잘 작동하고 cmd + tab 같은 단축키도 쓸수있죠

웹 앱은 Dock, Launchpad Spotlight 검색으로 열수 있습니다

웹 앱은 iCloud 키체인의 자동 완성 자격 증명을 사용합니다 Credential Provider Extension API가 적용돼 서드파티 앱에서 제공하는 자격 증명도 사용합니다

자신의 개인정보 보호를 관리하도록 해서 웹 앱이 카메라, 마이크와 위치 정보에 접근하는 걸 허용하죠 네이티브 앱과 마찬가지로 시스템 허가 프롬프트와 시스템 설정의 보안 및 개인정보 보호에서요 여기까지는 기본 동작 원리였고요 여러분은 사용자들에게 맞춤형 경험을 제공하고 싶으실 겁니다 웹 페이지가 MacOS의 Dock에 추가되면 웹 앱으로 다뤄집니다 개발자는 웹 앱 윈도우에 나오는 도구 막대의 기본 동작을 설정할 수 있습니다 내비게이션 컨트롤이 있는 도구 막대가 기본으로 나타납니다 내비게이션 컨트롤이 없는 사이트를 이용하는 데 도움이 되죠

여러분 사이트에 내비게이션 컨트롤이 이미 있거나 굳이 필요하지 않다면 도구 막대를 숨길 수도 있습니다 이걸 단독 디스플레이 모드라고 부르는데요

iOS의 기본 동작은 macOS의 기본 동작과는 다릅니다 홈 화면에 추가된 웹사이트는 기본 브라우저에서 열립니다 그러면 사용자들이 자주 사용하는 사이트를 홈 화면에서 바로 열 수 있죠 웹사이트들을 iOS와 iPadOS의 홈 화면에 단독 디스플레이 모드로 추가하면 홈 화면 웹 앱이 됩니다 이 웹 앱들은 iOS에서 단독적이고 앱과 유사한 경험을 제공합니다 브라우저에서 쿠키와 스토리지를 단독으로 사용하니까요 도구 막대처럼 브라우저에서 제공하는 UI도 없고 모든 콘텐츠를 웹 페이지에서 가져옵니다 여러분의 사이트가 iOS에서 웹 푸시와 배지를 사용하길 원하면 단독 디스플레이 모드를 사용해야 합니다

웹 앱 매니페스트를 추가해 디스플레이 모드를 설정해 보죠 웹 앱 매니페스트는 웹사이트를 웹 앱으로 열었을 때 어떤 모습으로 작동할지 시스템에 알려 주는 방법입니다 웹사이트에 웹 앱 매니페스트를 추가하려면 HTML 첫머리의 JSON 파일 링크에 rel="manifest"를 입력하세요 제 건 manifest.json이라고 이름 붙이겠습니다

해당하는 매니페스트 파일에 웹사이트에 적용할 키와 값을 넣으면 됩니다 먼저, 이름을 설정해 볼게요 웹사이트의 제목이 아닌 웹 앱의 명칭으로 쓸 문구를 넣도록 하겠습니다 제 건 너무 길거든요

display에는 standalone을 입력해 디스플레이 모드를 변경하겠습니다 macOS에서는 웹 앱에 도구 막대가 없을 겁니다 iOS와 iPadOS에서는 사이트가 홈 화면 웹 앱에서 열리죠 기본 브라우저가 아니라요 이제 웹 앱 내 링크를 클릭하면 어디서 열리는지 살펴봅시다 모든 웹 앱에는 스코프가 있습니다 스코프 내에 있는 링크는 웹 앱 안에서 열립니다 기본 스코프는 웹 앱 생성에 쓰인 웹 페이지의 호스트입니다 웹 앱 매니페스트를 사용하면 스코프를 재정의해 여러분의 사이트 내에 특정 경로를 만들 수 있습니다 예를 들어, Browser Pets 웹 앱 내에 있는 링크를 클릭하면 Web Kittens라는 다른 페이지로 넘어갑니다 여전히 같은 웹 앱에 머물고 있다는 걸 알 수 있죠 Web Kittens는 example.com 내 또 다른 페이지니까요 이번에는 apple.com 링크를 클릭해 보죠 기본 브라우저에서 링크가 열립니다 example.com 스코프의 외부에 존재하는 사이트이기 때문이죠 만약 Web Kittens 링크를 apple.com처럼 기본 브라우저에서 열고 싶으면 스코프를 웹 앱 매니페스트에 적용하면 됩니다

스코프를 적용하기 위해 먼저 start_url을 추가하겠습니다 start_url은 웹 앱을 처음열었을 때 로딩되는 URL입니다 여기서는 Browser Pets의 홈페이지가 열리는 거죠 이제 스코프를 추가하겠습니다 Browser Pets와 Web Kittens를 다른 웹 앱으로 분리해 보죠 스코프를 Browser Pets에만 제한하도록 하겠습니다 스코프는 매니페스트 URL의 하위 디렉토리입니다 이 경우에 스코프는 example.com/browserpets가 되겠죠 스코프 내에 있는 모든 링크는 웹 앱 안에서 열리고 스코프 외부에 있는 링크는 전부 기본 브라우저에서 열립니다 iOS의 홈 화면 웹 앱에서는 스코프 외부에 있는 링크는 Safari View Controller에서 열리죠

제가 홈 화면 웹 앱에 있는 링크를 탭하면 Safari View Controller에서 열립니다

우리가 매일 사용하는 웹사이트들을 최대한 활용하려면 로그인을 해야 하는데요 아까 언급했듯이 사용자들이 웹 앱을 바로 사용할 수 있도록 Mac의 웹 앱이 Dock에 추가될 때 웹사이트의 쿠키가 복사됩니다 덕분에 사용자들이 웹 앱을 열면 로그인 상태가 유지되어 더 편하게 이용할 수 있습니다 그 시점에서부터 Safari와 웹 앱의 쿠키가 분리됩니다 인증 상태가 여러분 사이트의 쿠키에만 저장되어도 사용자들이 웹 앱을 Dock에 추가했을 때 자동으로 로그인이 됩니다 웹사이트가 Dock에 추가될 때 Safari가 웹사이트의 쿠키를 웹 앱에 복사하기 때문이죠 일부 웹사이트는 인증 상태를 쿠키와 로컬 스토리지로 분리하죠 웹 앱이 생성될 때 로컬 스토리지는 복사되지 않으니 여러분의 사이트를 계속 웹 앱으로 사용하려면 사용자는 재인증을 해야 합니다 사용자들이 더 편리하게 이용하려면 인증 상태를 쿠키에 저장해야 합니다

아까도 말했듯이 웹 앱의 스코프 밖에 있는 링크는 기본 브라우저에서 열릴 겁니다 사용자들이 기본 브라우저에서 여러분의 웹 페이지에 로그인하면 Dock에 추가된 웹 앱에 로그인되지 않습니다 웹 앱이 추가된 뒤에 쿠키와 스토리지가 분리됐으니까요 OAuth나 서드파티 도메인 인증은 여러분의 웹 앱에서도 열릴 것입니다 이는 휴리스틱 평가로 이루어질 텐데요 OAuth가 사용자 기본 브라우저에서 인증을 연다는 걸 시험해 보시고 확인이 되면 apple.com/feedback으로 피드백을 주시기 바랍니다 OAuth가 사용자 기본 브라우저에서 열리지 않게 하려면 window.open을 사용하셔도 됩니다 window.open에서 불러온 링크는 스코프와 상관없이 항상 웹 앱에서 열릴 겁니다 Apple은 인증 도메인 링크가 웹 앱 내에 있어야 한다는 것을 나타내는 방법을 개발자들에게 제공하기 위해 표준 기관들과 협력합니다

이메일 링크를 쓰는 웹사이트는 링크를 열기만 해도 자동으로 로그인됩니다 이메일 링크가 기본 브라우저에서 열리기 때문에 이미 갖고 있는 웹 앱에는 자동으로 로그인되지는 않습니다 이메일로 일회용 대체 암호를 제공해서 사용자들이 여러분 사이트에 쉽게 로그인하도록 하세요 더 편리하고 안전한 인증 장치를 넣으려면 여러분 사이트의 인증에 패스키를 적용해 보시기 바랍니다 WWDC22의 '패스키 알아보기'를 참고하시면 됩니다 Mac의 웹 앱 알림은 기존의 표준 기반 웹 푸시 알림에 추가된 기능입니다 macOS Ventura의 Safari와 iOS 16.4 홈 화면 웹앱에 추가됐죠 지금부터는 배지와 소리를 포함한 알림 기능을 여러분의 웹 앱에 적용하는 법을 알려 드리겠습니다 웹 표준에 따라 웹 푸시를 이미 적용했다면 별도의 작업을 하지 않아도 Mac 웹 앱에서는 웹 페이지 푸시 알림이 작동할 겁니다 Mac 웹 앱의 알림은 '알림'에 있는 웹 앱 아이콘을 사용합니다

Safari의 웹 푸시 알림은 Safari 아이콘을 보여 주지만 Mac 웹 앱의 알림은 웹 앱 아이콘을 보여 줌으로써 사용자들에게 어떤 앱인지를 보여 주죠

사용자의 기기에 알림이 갈 때 주의를 끌 수 있도록 소리가 나게 하고 싶을 수도 있겠죠 macOS, iOS, iPadOS에서 어떻게 하는지 알려 드리겠습니다 Notification API를 적용하면 알림 소리를 켜거나 끄는 것을 정할 수 있습니다 플랫폼 기본 설정에 따르면 iOS와 iPadOS에서는 기본으로 소리가 나지만 macOS에서는 기본적으로 소리가 꺼져 있습니다 플랫폼 기본 설정을 바꾸려면 silent 값을 입력하면 됩니다 알림 소리가 안 나게 하려면 알림 값을 설정할 때 silent에 true를 입력하세요 알림 소리가 나게 하려면 silent에 false를 입력하면 됩니다 다른 네이티브 앱 알림과 마찬가지로 사용자들은 알림 설정을 통해서 알림 소리를 관리할 수 있습니다

배지는 웹 앱 내에 확인해야 할 내용이 있다는 걸 알려 주는 유용한 기능입니다

iOS 16.4의 홈 화면 웹 앱과 마찬가지로 Mac의 웹 앱도 배지 알림 기능을 지원합니다 macOS, iOS, iPadOS에서 배지 알림과 푸시 알림은 서로 연결돼 있기 때문에 사용자들이 웹 앱의 알림을 받도록 설정해 놓으면 배지 기능도 자동으로 사용하게 됩니다 배지는 웹 앱이 열려 있을 때 업데이트될 수도 있고 백그라운드에서 푸시 이벤트를 처리하고 있을 때도 업데이트되죠 '설정'에 들어가면 언제든 배지 설정을 바꿀 수 있습니다

배지 API를 적용하는 데 더 많은 정보가 필요하시면 webkit.org에서 'Badging for Home Screen Web Apps'를 확인하세요

표준 기반 웹 푸시 적용법을 더 자세히 알고 싶으시면 WWDC22의 'Safari 웹 푸시 알아보기'를 확인하시기 바랍니다

iOS의 홈 화면 웹 앱과 Mac의 웹 앱은 집중 모드와 결합돼 사용자들은 알림을 설정할 수 있습니다 사용자들은 집중 모드에 따라 어떤 알림을 받고 싶은지 설정하고 모든 기기에 집중 모드의 설정 사항을 적용할 수 있죠 웹 앱 매니페스트로 돌아가 봅시다 매니페스트 키 'id'는 도메인 내 특정 웹 앱을 정의합니다 집중 모드 설정을 동기화하고 같은 도메인 내에서 웹 앱이 여러 개로 나뉠 때 유용하게 쓰일 수 있습니다 특정 도메인에 웹 앱이 단 하나만 있다면 id를 설정할 필요가 없습니다 제공된 id가 없을 때는 start_url을 쓰면 됩니다 집중 모드의 좋은 점은 사용자의 모든 기기에서 동기화할 수 있다는 거죠

여러분과 여러분의 사용자들은 동기화 내용도 설정할 수 있습니다 여러분의 사이트에는 웹 앱이 여러 개가 있을 겁니다 예를 들어 쇼핑몰과 게시판은 각각의 웹 앱으로 생성할 수 있죠 여기서 Name 열은 iPhone이나 Mac에 뜨는 웹 앱 명칭입니다 웹 앱 매니페스트의 id 키를 보면 id가 'shop'인 웹 앱은 쇼핑몰 페이지를 나타내고 id가 'forums'인 웹 앱은 사용자들이 이용하는 게시판을 뜻한다는 것을 알 수 있습니다 이렇게 하면 사용자들이 Shop과 Forums에 대한 알림을 자신의 기호에 따라 설정할 수 있습니다 Name과 id가 정렬되면 모든 기기에서 설정이 동기화되죠 사용자는 자신의 기기에서 특정 사이트 웹 앱의 인스턴스를 여러 개 만들 수 있습니다 업무 계정과 개인 계정을 분리할 때 유용한 기능입니다 사용자는 인스턴스별로 다른 이름을 선택할 수 있습니다 이 예시에서는 'Forums'와 'Forums - Work'겠죠 이렇게 하면 사용자는 모든 기기에 동기화되는 Forums의 알림과 집중 모드를 다르게 설정할 수 있습니다

올해 WebKit에 추가된 API가 여럿 있는데요 여러분이 웹사이트를 만들 때 유용하게 쓰일 겁니다

User Activation API도 지원하는데 일시적인 활성화 또는 고정 활성화가 일어날 때 알려주죠 이는 사용자 활성화 상태에 따라 특정 기능을 불러와도 괜찮을지 결정할 때 유용합니다 알림을 보내는 데 허가를 요청하는 것 등이죠 Apple은 업데이트되고 고정되지 않은 Fullscreen API를 macOS와 iPadOS의 Safari 16.4에 추가했습니다 Screen Orientation API에 대한 예비 지원도 추가됐는데 타입 프로퍼티와 앵글 프로퍼티 onChange 이벤트 핸들러가포함되죠

webkit.org의 'WebKit Features in Safari 16.4'에서 더 많은 정보를 확인하세요 Mac의 웹 앱으로 모든 웹사이트를 바로 사용할 수 있습니다 웹 앱 매니페스트를 이용해 웹사이트가 Dock에 추가됐을 때 동작을 사용자화할 수도 있고 웹 앱에 맞춰진 기능들을 넣을 수도 있습니다 웹 푸시나 배지 알림 같은 기능이죠 Safari에서 웹사이트를 개발하고 디버깅하는 정보를 더 얻으려면 WWDC23의 'Safari 개발자 기능의 재발견'과 'Web Inspector의 새 기능'을 확인하세요 시청해 주셔서 감사합니다 WWDC23을 즐기시길 바랍니다 ♪ ♪