Safari 확장 프로그램의 새로운 기능

♪ 감미로운 인스트루멘탈 힙합 ♪ ♪ 안녕하세요 'Safari 확장 프로그램의 새 기능'을 소개합니다 저는 데이비드 존슨이고 Apple의 Safari 확장 프로그램 엔지니어입니다 오늘 여러분께 Safari 확장 프로그램의 발전을 말씀드릴 수 있어 기쁩니다 사용자 경험 향상과 새로운 기능에 초점을 두었죠 먼저 App Store에서 이용할 수 있는 2천 개 이상의 Safari 확장 프로그램을 만들고 공유해 주셔서 감사합니다 iOS에서 Safari 확장 프로그램에 대한 수요가 대단히 많았습니다 WWDC21에서 소개된 이후로 상위 카테고리에 자주 오르고 있죠 확장 프로그램은 사용자가 macOS, iOS, iPadOS에서 자신의 브라우징 경험을 사용자화할 수 있게 하는데요 Safari 확장 구축에는 네 가지 방법이 있습니다 콘텐츠 차단기, 공유 확장 앱 확장, 웹 확장이 그것이죠 Safari 17은 이 모든 유형을 지원하지만 브라우저 사용자화의 미래는 웹 확장에 있습니다 Apple은 다른 주요 브라우저 개발사와 함께 웹 확장 프로그램 표준화에 힘쓰고 있으며 이 협업의 목표는 호환성을 개선하고 개발을 간소화하며 모든 브라우저에서 친숙한 환경을 제공하는 것입니다 Apple은 웹 확장 커뮤니티 그룹인 W3C와 함께 일하고 있으며 당사는 이 단체에서 공동 의장을 맡고 있습니다 다른 브라우저 및 확장 프로그램 개발자와 협업하여 이러한 표준화 작업을 추진하고 있기에 Apple은 더 강력하고 통합된 웹 확장 생태계를 구축할 수 있습니다 오늘의 주제로 넘어가기 전에 Safari 웹 확장 프로그램에 대한 주요 세부정보 두 가지를 알려 드리겠습니다 우선 Safari 17은 Manifest V2 및 V3 웹 확장을 꾸준히 지원할 것입니다 Manifest V3에 계속해서 새로운 기능을 추가할 예정이니 필요할 때 업데이트하세요 둘째, 웹 확장은 플랫폼을 넘나들 수 있는 Safari 확장을 구축하는 가장 좋은 방법입니다 단일 공유 코드베이스를 사용하면 웹 확장을 통해 iOS, iPadOS macOS 및 최신 xrOS에서 Safari의 기능을 사용자화할 수 있죠 맞습니다 iOS와 iPad에서는 물론 xrOS에서도 웹 확장이 가능한데요 xrOS에서 웹 확장은 다른 플랫폼과 똑같이 실행되며 스크립트 주입과 백그라운드 콘텐츠 실행 팝오버 표시 기능과 같은 iOS에서 확장과 동일한 기능을 제공합니다 여러분의 확장 프로그램이 xrOS에서 브라우징 경험을 어떻게 향상할지 기대되는데요 xrOS상 Safari를 더 자세히 알고 싶다면 'xrOS용 Safari 알아보기'를 확인하세요 서론은 이렇게 마무리하고 오늘 세션에서 다룰 내용을 말씀드리도록 하겠습니다 먼저 새로이 업데이트된 확장 API를 알아보고 이것이 Safari 확장 기능을 어떻게 향상하는지 살펴보겠습니다 다음으로 사용자가 브라우징 경험을 더 잘 관리할 수 있도록 하는 Safari 앱 확장 프로그램의 사이트별 권한을 다루겠습니다 마지막으로 Safari 프로필 및 프라이빗 브라우징과 호환하는 방법을 알아보겠습니다 첫 번째는 새로운 확장 API입니다 콘텐츠 차단기는 훌륭한 기능으로서 웹 페이지를 정리하고 어노이언스를 제거하고 스크립트 로딩을 차단합니다 콘텐츠 차단기는 JSON에 정의된 규칙을 사용하여 방문한 웹 사이트 정보에 액세스하지 않고도 콘텐츠를 차단하거나 숨기죠 웹 페이지 콘텐츠를 선언적으로 숨기는 것은 까다로울 수 있는데요 그래서 이제 콘텐츠 차단기가 :has() 셀렉터를 지원합니다 :has() 셀렉터는 아주 유용합니다 콘텐츠 차단기가 자식 엘리먼트를 기준으로 부모 엘리먼트를 정확히 지정하거든요 이 규칙 예시에서는 class .post의 엘리먼트를 숨기고 class .paid-promo의 자식 엘리먼트도 숨깁니다 웹 페이지 콘텐츠를 숨기거나 네트워크 요청을 차단하는 확장은 가장 일반적인 확장 유형에 속하는데요 그래서 Safari는 사용자에게 안전한 프라이빗 브라우징 경험을 제공하는 혁신적이고 효과적인 확장 프로그램을 꾸준히 지원하고 있습니다 웹 확장이 이루어진 네트워크 요청을 차단하거나 수정하려면 Declarative Net Request의 업데이트 사항을 확인해야 합니다 Declarative Net Request는 강력한 API로서 웹 확장이 네트워크 요청을 차단하고 수정하게 합니다 확장 프로그램은 콘텐츠 차단기처럼 JSON 형식으로 규칙을 제공하고 Safari는 나머지를 처리하는데요 이는 특히 배터리 구동 기기에서 전력 효율이 향상되었음을 의미합니다 이러한 규칙은 선언적이므로 사용자가 방문하는 웹 페이지에 액세스하지 않아도 되어 개인정보 보호 및 보안이 강화됩니다 Safari 16.4의 Declarative Net Request에서 한 가지 중요한 업데이트는 확장 프로그램이 요청 헤더를 수정할 수 있다는 것입니다 이 예시에서는 example.com에 대한 모든 요청에 사용자 지정 User-Agent 헤더를 설정하는 작업을 정의했는데요 이 작업 유형은 헤더 설정 외에도 새 값을 추가하거나 기존 값을 제거하거나 HTTP 요청에서 헤더를 완전히 제거하여 헤더를 수정할 수 있습니다 네트워크 요청을 수정하는 것은 막강한 도구이며 몇 가지 핵심 사항을 명심해야 합니다 먼저 매니페스트에서 declarativeNetRequest WithHostAccess 권한을 선언해야 합니다 Safari 16.4에서는 리디렉션 작업에도 이 권한이 필요하며 헤더 수정 또는 리디렉션 작업을 적용하려면 사이트별 권한이 확장 프로그램에 부여돼야 합니다 이렇게 하면 사용자가 사이트별로 데이터를 관리할 수 있게 됩니다 이러한 사항을 염두에 두면 강력하면서도 개인정보 보호를 지향하는 콘텐츠 차단 확장을 이루어 사용자에게 맞춤화된 경험을 제공할 수 있습니다 확장을 구축할 때 Declarative Net Request를 사용하면 차단된 요청의 수만 사용자에게 알릴 수 있는데요 새로운 declarativeNetRequest.setExtension ActionOptions API를 사용하여 차단된 로드 수와 같은 작업 수를 표시하는 배지 텍스트를 구성할 수 있습니다 이 예시에서는 현재 이 API의 유일한 옵션인 displayActionCountAsBadgeText 옵션을 true로 설정합니다 수행된 작업에 따라 확장 배지가 자동으로 업데이트되죠 이를 통해 사용자는 브라우징 기록을 비공개로 유지하면서 확장 프로그램의 활동 및 효과를 쉽게 모니터링할 수 있습니다 이제 확장 프로그램의 활동을 더 잘 관리할 수 있는 scripting API의 업데이트 사항을 살펴보겠습니다 registerContentScript API 집합을 사용하여 프로그래밍 방식으로 등록 및 업데이트 또는 제거할 수 있는 content script를 만들 수 있습니다 그래서 content script에 적용할 특정 페이지 또는 조건을 대상으로 지정할 수 있죠 이 예시에서는 webkit.org와 일치하는 페이지에 주입할 스크립트를 등록했으며 이 스크립트 등록은 세션 전체에서 유지됩니다 이 새로운 API는 확장 매니페스트에 정의된 static content script를 보완하여 content script를 더 유연하게 관리하고 확장 프로그램용 고급 기능을 개발할 수 있게 합니다 또한 Safari 16.4는 웹 확장에 세션 스토리지 영역이라는 새 스토리지 영역을 제공하는데요 세션 스토리지에서 데이터를 저장 및 검색할 때 다른 스토리지 영역과 비슷한 기능을 사용합니다 이 API를 쓰면 브라우저 세션을 사용하는 동안 메모리에 데이터를 저장할 수 있으므로 비연속적인 백그라운드 페이지 로드 간 데이터에 빠르고 효율적으로 액세스할 수 있습니다 로컬 스토리지와 달리 세션 스토리지는 디스크에 남지 않고 Safari가 종료되면 삭제됩니다 그래서 세션 스토리지는 민감하거나 보안과 관련된 데이터를 저장하는 데 유용합니다 로컬 스토리지에 저장하면 안 되는 해독 키 또는 인증 토큰이 여기에 속하죠 끝으로, 확장 프로그램이 제공하는 아이콘이 다양한 UI 요소에 적합한 크기를 다 갖고 있는지 확인하는 건 매우 번거로운데요 이제 Safari 16.4를 시작으로 어떤 크기에서도 잘 보이는 단일 SVG 아이콘을 만들 수 있습니다 Safari는 여러분이 다른 것에 집중할 수 있도록 확장 프로그램 아이콘을 적극적으로 조정할 것입니다 이러한 API 업데이트는 올해 개선된 Safari 확장 기능 중 일부에 불과합니다 다음으로 알아볼 것은 Safari 앱 확장 프로그램 및 사이트별 권한입니다 웹 확장의 사이트별 권한에 익숙하실 텐데요 앱 확장에서도 같은 방식으로 작동합니다 사용자는 웹 사이트를 탐색할 때 확장 액세스 권한을 부여하여 개인정보 보호 및 관리의 질을 높일 수 있습니다 확장 프로그램이 처음 실행되면 사용자가 방문하는 사이트에 액세스할 수 없는데요 확장 프로그램이 페이지에 처음 액세스하려고 하면 Safari는 도구 막대에 아이콘으로 표시하여 현재 페이지에 액세스하기를 원한다는 것을 사용자에게 알려 줍니다 사용자가 해당 아이콘을 클릭하면 확장 프로그램에 어떤 액세스 권한이 있는지 알 수 있고 '1일 허용' 또는 '항상 허용'을 선택할 수 있습니다 권한이 부여되면 아이콘에 색이 입혀지는데 이는 현재 페이지에 확장 프로그램이 액세스할 수 있다는 걸 나타냅니다 Safari 17으로 업그레이드하고 Safari 앱 확장 프로그램을 이미 실행한 사용자는 해당 확장 프로그램의 모든 권한을 마이그레이션합니다 또한 배너가 표시되어 개인정보 보호를 강화할 수도 있는데요 '각 웹 사이트에 대한 요청'을 선택하면 모든 Safari 앱 확장 권한이 재설정되고 사용자 방문 시 각 사이트에 대한 확장 액세스 권한을 부여할 수 있습니다 Safari 17에는 이런 변경 사항을 지원할 수 있는 새로운 API가 없지만 Safari 17에서 확장 프로그램이 어떻게 동작할지 예상하고 실제로 테스트해 보시길 바랍니다 사용자는 Safari 앱 확장 프로그램이 액세스할 수 있는 웹 사이트를 완벽히 관리할 수 있으며 사용자가 권한을 부여하면 확장 프로그램이 사이트에 자동으로 액세스합니다 하지만 언제든지 권한을 부여하거나 취소할 수 있습니다 이제 모든 확장 프로그램에서 아이콘이 기본적으로 표시되는데요 Safari에서 확장 아이콘이 어떻게 나타나는지 확인하고 PDF 벡터 아이콘을 제공하여 색이 적절히 입혀지게 하세요 마지막으로, 프로필 및 프라이빗 브라우징에서 작동하는 확장 프로그램의 업데이트 사항을 말씀드리겠습니다 Safari 17에서 사용자는 다른 브라우징 콘텍스트에서 확장 프로그램을 끄지 않고도 프라이빗 브라우징 윈도우 및 탭에 액세스하는 확장 프로그램을 관리할 수 있습니다 스크립트를 주입하거나 방문 페이지 정보를 읽을 수 있는 확장 프로그램은 기본적으로 꺼져 있으나 콘텐츠 차단기와 같이 콘텐츠에 액세스하지 않는 확장 프로그램은 프라이빗 브라우징에서 자동으로 허용됩니다 추가적인 개인정보 보호 문제를 일으키지 않기 때문이죠 이건 MacOS의 Safari 설정에 있는 업데이트된 확장 창이며 iOS에도 비슷한 업데이트가 있습니다 프라이빗 브라우징에서도 이 확장 프로그램을 이제 허용할 수 있습니다 확장 프로그램이 실행되고 Safari 설정에서 한 번만 클릭하면 해당 확장 프로그램이 프라이빗 브라우징에도 액세스하죠 프로필은 올해 Safari에 새로 추가된 것으로 브라우징 데이터를 분리해서 보관할 수 있으며 프로필에는 기록 및 쿠키 웹 사이트 데이터가 각각 저장되어 있습니다 또한 사용자는 프로필별로 사용할 확장 프로그램을 선택할 수 있으며 여기에는 새 탭 페이지 확장이 포함됩니다 물론 이 모든 설정은 iCloud를 통해 iPhone, iPad, Mac에서 동기화되죠 Safari 설정의 확장 창도 확장 프로그램이 활성화된 프로필을 나열하도록 업데이트되었는데요 여기서 Sea Creator 확장 프로그램이 회사 및 학교 프로필 모두에서 활성화된 것을 확인할 수 있습니다 프로필에서 확장 프로그램이 실행되면 해당 확장의 인스턴스가 완전히 새롭게 생성되며 각 인스턴스의 UUID 및 백그라운드 페이지 스토리지는 서로 다릅니다 하지만 사이트별 권한은 프로필 간에 공유되므로 사용자는 확장 액세스 권한을 한 번만 부여하면 됩니다 프로필에서 실행되는 경우 확장 프로그램은 윈도우 및 탭 프로필과 관련된 기타 데이터에만 액세스할 수 있습니다 확장 프로그램이 기본 호스트 앱과 통하는 경우 앱이 여러 프로필에서 메시지를 받을 것을 예상하고 해당 프로필에서 데이터 분리를 따르는지 확인하세요 앱이 beginRequest(with context) 요청을 받으면 userInfo 딕셔너리를 디코딩하며 프로필에서 확장 프로그램이 활성화되면 키 SFExtensionProfileKey에 대한 프로필 식별자 값이 확인됩니다 확장 프로그램에는 프로필별로 고유 인스턴스가 있어서 백그라운드 콘텐츠를 따로 검사할 수 있습니다 Safari 17의 개발자용 메뉴에서 '웹 확장 백그라운드 콘텐츠' 항목으로 이동하여 확장 프로그램별로 그룹화된 백그라운드 페이지와 서비스 워커를 볼 수 있습니다 각 확장 프로그램은 프로필별로 검사 가능한 콘텐츠를 나열합니다 올해 개선된 Safari 개발자 기능을 자세히 알아보고 싶다면 'Web Inspector의 새 기능' 및 'Safari 개발자 기능의 재발견'을 확인하세요 정리하자면 Safari는 웹 확장을 표준화하고 혁신적이고 효과적으로 확장하는 새 API를 제공하고자 노력하고 있습니다 토론에 참여해 보시고 WECG에 참가하여 웹 확장의 미래를 일구는 데 도움을 받아 가시기를 바랍니다 앱 확장 프로그램의 사이트별 권한과 :has() 셀렉터와 같은 새로운 기능의 지원으로 확장 프로그램을 만들어 사용자에게 안전한 프라이빗 브라우징 경험을 제공할 수 있습니다 확장 기능을 반드시 업데이트하여 새로운 기능을 활용하고 프로필 및 프라이빗 브라우징 모두에서 확장 프로그램이 잘 작동되도록 해 보세요 마지막으로, Safari 17에서 확장 프로그램을 테스트하고 '피드백 지원'을 통해 피드백을 제공해 주세요 경청해 주셔서 감사드리며 남은 WWDC도 즐기시기를 바랍니다 ♪