SwiftUI용 WebKit 만나보기

안녕하세요, 저는 WebKit 팀의 엔지니어인 Richard입니다 WebKit은 iOS, iPadOS, visionOS, macOS에서 Safari, Mail을 비롯한 여러 앱의 핵심이 되는 브라우저 엔진입니다 수년간 WebKit은 개발자가 풍부하고 동적인 경험을 구축하도록 도왔습니다 웹의 강력한 성능과 유연성을 앱으로 가져오고 Apple 플랫폼의 강점을 활용할 수 있도록 하죠 이 세션에서는 SwiftUI용 WebKit을 소개해 드리겠습니다 이제 새로운 SwiftUI API 덕분에 매우 간편하게 웹 콘텐츠를 앱에 통합할 수 있습니다 WebKit이 지원하는 강력한 웹 경험과 SwiftUI의 사용 편의성을 결합한 SwiftUI용 WebKit을 사용해 보면 마음에 드실 것이라 믿습니다 새로운 API를 사용하면 웹 뷰를 만들고 URL을 제공하는 것처럼 쉽게 근사한 웹 콘텐츠를 표시할 수 있습니다 이 API는 WebKit이 지원하는 모든 플랫폼에서 작동하기도 하죠 WebKit과 SwiftUI로 시작하는 것이 이제 매우 쉬워졌습니다 이 API로 앱을 빌드하는 새롭고 놀라운 방법을 몇 가지 살펴보겠습니다 먼저 웹 콘텐츠를 로드, 표시하는 다양한 방법을 배우겠습니다 로컬 리소스를 로드하는 방법도요 그다음 웹 콘텐츠의 변경 사항에 대응하는 다양한 방법과 콘텐츠를 변경하는 방법을 설명하겠습니다 그 다음 기존 및 새 뷰 한정자로 사용자가 웹 콘텐츠와 상호 작용하는 방법을 어떻게 맞춤화하는지 알아보며 마칠게요 페이지 내 검색 활성화나 스크롤 위치 설정 등으로 맞춤화할 수 있죠

다룰 내용이 많으니 바로 시작하겠습니다 새 API의 멋진 기능을 보여 드리기 위해 전 세계의 다양한 호수에 대한 정보를 탐색하는 앱을 빌드해 볼게요 앱 전체에 아름다운 웹 콘텐츠를 표시하고 문서 콘텐츠를 로드하는 방법을 설명한 후 탐색을 관찰하고 JavaScript와 통신하여 생동감 넘치는 앱으로 가꾸는 방법을 보여드릴게요 또한 웹 콘텐츠의 탐색 경험을 여러분이 원하는 대로 맞춤화하는 방법을 알려 드리겠습니다 그 후 새 뷰 한정자와 기존 한정자를 함께 활용하여 앱의 디자인과 상호 작용을 개선하는 작업으로 마무리하겠습니다 앱 빌드를 시작해 보겠습니다 SwiftUI 코드는 미리 준비해 두었으니 여기서는 새 WebKit API를 통합하는 것에 집중할게요 기본적인 작업인 웹 콘텐츠 표시부터 설명할게요 새 WebView API를 사용하면 매우 간단한 작업이 됩니다 이는 모든 웹 콘텐츠를 간단하게 표시하도록 설계된 새 SwiftUI 뷰입니다 WebView를 사용하려면 URL을 전달하면 됩니다 그러면 콘텐츠가 자동으로 로드 및 표시됩니다 하지만 WebView로 두 개 이상의 URL을 표시하고 싶을 수도 있죠 이 예시에서는 두 URL 사이에 전환하는 버튼이 있습니다 다시 URL을 WebView에 전달해 보겠습니다 이제 토글이 변경될 때마다 웹 뷰가 자동으로 새 URL로 로드되고 이동합니다 매우 간단합니다 하지만 웹 콘텐츠와 관련하여 더 흥미로운 기능을 추가할 수도 있습니다 콘텐츠의 속성 변경에 반응하는 것처럼요 이 경우 WebPage를 만든 다음 WebView에 연결하기만 하면 됩니다 그러면 페이지 제목 등 웹 콘텐츠에 대한 모든 변경 사항이 웹페이지에 표시됩니다

WebPage는 웹 콘텐츠를 나타내는 새로운 Observable 클래스로 Swift와 SwiftUI와 완벽하게 작동하도록 설계되었습니다

WebPage를 통해 웹 콘텐츠를 로드하고 제어하고 웹 콘텐츠와 통신할 수 있습니다 WebPage는 단독으로도 사용 가능하지만 WebView와 함께 활용하면 웹 콘텐츠를 위한 풍부한 경험을 빌드할 수 있습니다 이제 WebPage를 사용하여 웹 콘텐츠를 로드하는 다양한 방법을 살펴보겠습니다 개발자가 흔히 처리하는 작업 중 하나는 웹페이지에 원격 URL을 로드하는 것입니다 이는 load API와 URL 요청으로 간단하게 처리할 수 있습니다 하지만 WebPage는 URL만 로드하지 않습니다 HTML 문자열과 기본 URL을 API에 제공하여 HTML 콘텐츠를 직접 로드할 수도 있습니다 기본 URL은 HTML 내에서 상대 URL을 해결할 때 사용됩니다 WebPage는 웹 아카이브 데이터와 같은 다양한 유형의 데이터를 직접 로드하는 것도 지원합니다 로드하려는 데이터, MIME 유형, 문자 인코딩, 기본 URL을 제공하면 됩니다 제 앱에서는 특정 문서를 나타내는 ArticleViewModel 클래스를 먼저 만들겠습니다 이 클래스에 관련 WebPage와 LakeArticle을 추가하겠습니다 SwiftUI가 페이지와 문서의 변경 사항에 쉽게 반응할 수 있도록 클래스에 Observable을 적용할게요 클래스의 기본 구조를 빌드했으니 호수의 URL을 웹페이지에 로드하는 기능을 추가하겠습니다 이제 View를 살펴보겠습니다 모델의 webPage를 사용하여 WebView를 만들게요 뷰가 처음 표시될 때 모델의 loadArticle 함수를 호출하겠습니다 더 편한 경험을 위해 ignoreSafeArea를 사용하여 페이지가 기기 하단까지 완전히 이동하도록 하겠습니다 이제 앱에 새 문서 URL을 추가하고 열면 문서 내용이 세부 정보 뷰에서 로드되어 표시됩니다 좋은 시작입니다 이제 앱에 미리 로드된 문서를 추가하여 경험을 더 개선하겠습니다 예상하셨듯이 WebKit은 원격 URL과 데이터를 바로 로드할 수 있습니다 한편 앱에 번들로 포함된 콘텐츠를 로드하거나 로컬 파일에 접근할 수도 있습니다 새로운 URLSchemeHandler 프로토콜을 활용하면 됩니다 그 방법을 설명하겠습니다 나만의 스키마 핸들러를 구현하면 해당 스키마를 포함한 URL로 연결되는 모든 이동이 핸들러를 통해 처리되며 개발자가 제공한 데이터를 사용합니다 이 내용을 설명하기 전에 스키마가 뭔지 살펴보죠 스키마는 URL에서 콜론 앞에 있는 부분입니다 이 경우 HTTPS 스키마입니다 WebKit은 https, file, about처럼 흔히 사용되는 스키마를 처리하죠 하지만 이 lakes 스키마와 같은 맞춤형 스키마의 경우 애플리케이션 코드가 lake 스키마 URL의 리소스를 로드하도록 URLSchemeHandler 프로토콜이 지시합니다 나만의 맞춤형 스키마 핸들러를 구현하려면 URLSchemeHandler 프로토콜을 준수하는 유형을 만들고 URLSchemeTask 결과의 AsyncSequence를 반환하여 프로토콜의 reply 함수를 구현하세요 응답 방식을 결정할 수 있도록 이 함수는 URLRequest 매개변수도 제공합니다 이벤트 시퀀스를 생성할 때는 먼저 URLResponse를 포함하는 URLSchemeTaskResult를 yield로 처리해야 합니다 URLResponse를 yield로 처리한 후 데이터를 제공하면 됩니다 이 방법은 대부분의 경우에 적합하지만 때로는 데이터를 비동기적으로 스트리밍해야 할 수 있습니다 AsyncSequence 반환 유형 덕분에 이 또한 쉽게 구현할 수 있습니다 여기서는 단일 응답을 비동기적으로 받습니다 또한 데이터 값의 AsyncSequence를 받게 됩니다 이를 반환된 시퀀스에 추가할게요 언제든지 URL 스키마 작업이 취소되면 함수 내부의 작업도 자동으로 취소됩니다 사용자가 제 앱을 바로 사용할 수 있도록 호수 몇 개를 미리 입력해 두고 싶습니다 이 기능을 구현하기 위해 앱에 HTML 및 CSS 애셋을 추가하고 방금 만든 맞춤형 스키마 핸들러를 사용할게요 이제 스키마 핸들러와 WebPage를 등록하면 됩니다 이를 위해 처리할 스키마를 사용하여 URLScheme을 생성합니다 이 경우 다시 lakes를 사용할게요 WebKit이 이미 처리하는 스키마를 제공하면 이니셜라이저가 nil을 반환합니다 그다음 WebPage.Configuration을 만들고 여기의 urlSchemeHandlers 사전에 스키마 핸들러를 추가할게요 WebPage를 생성할 때 configuration을 전달해야 합니다 이제 몇 가지 기본 LakeArticle 값을 만들고 맞춤형 스키마를 가진 URL을 지정할 수 있죠 이러면 웹 콘텐츠를 웹에서 가져오는 대신 번들에 저장된 리소스로부터 로드합니다 새 페이지를 로드하고 새 페이지로 이동하는 방법을 배웠습니다 페이지 로드가 완료되면 사이드바에 목차를 표시하고자 합니다 웹 콘텐츠에서 발생하는 탐색 이벤트를 관찰하여 구현할 수 있습니다 매우 간단하죠 WebPage의 새 Observable currentNavigationEvent 속성을 사용하면 탐색 상태에 쉽게 접근할 수 있습니다 이벤트를 가져왔다면 이벤트의 탐색 ID를 가져오고 이벤트 유형에 따라 작업을 실행할 수 있습니다 여기에서도 다룰 내용이 많죠 그러므로 다양한 탐색 이벤트 유형을 살펴볼게요 탐색은 여러 순차적인 이벤트로 구성됩니다 탐색은 항상 startedProvisionalNavigation으로 시작합니다 서버가 요청을 리디렉션하면 receivedServerRedirect 이벤트를 받을 수 있죠 기본 프레임에서 콘텐츠를 수신하기 시작하면 committed 이벤트가 발생합니다 탐색이 완료되면 finish 이벤트가 발생합니다 다만, 여기까지 도달하지 못할 수 있죠 탐색은 언제든지 실패할 수 있으며 이 경우 failed 또는 failedProvisionalNavigation 이벤트가 발생합니다 새 탐색이 시작되면 currentNavigationEvent 속성이 해당 탐색을 반영합니다 일반적으로는 발생하는 모든 탐색에 대해 지속적으로 반응하고 싶어 할 것입니다 사용자가 링크를 클릭하거나 load 함수가 호출된 경우처럼요

이를 위해 Swift 6.2에서 제공하는 새로운 Observations API를 사용할 수 있습니다 Observations를 사용하여 currentNavigationEvent에서 async 시퀀스를 만든 다음 for-await 루프로 현재 이벤트의 변경 사항을 관찰할게요 이렇게 하면 발생하는 오류를 처리하거나 로드가 끝난 후 문서 섹션을 업데이트할 수 있습니다 이 방법으로 웹 콘텐츠의 변경 사항에 매우 간편하게 대응할 수 있습니다 currentNavigationEvent 외에도 WebPage에는 변경 사항을 관찰하는 다양한 속성이 있으며 모두 SwiftUI와 완벽하게 호환됩니다 예로, 세부 정보 뷰의 탐색 막대에 문서 제목을 표시하고 싶습니다 이는 WebPage의 title 속성에 navigationTitle을 설정하기만 하면 됩니다 정말 간단했습니다 페이지 제목 외에도 현재 URL, 추정 로딩 진행률 페이지 테마 색상 등 유용한 속성이 더 있습니다 이러한 속성은 정말 유용합니다 하지만 때로는 표준 속성이 아닌 페이지로부터 특정 정보를 얻고 싶을 때가 있습니다 이 경우에는 조금 더 유연한 방법이 필요합니다 이 기능도 쉽게 구현할 수 있습니다 새로운 callJavaScript API를 사용하면 JavaScript를 직접 평가하여 페이지와 통신할 수 있습니다 일반적인 JavaScript 함수를 작성한 후 이 함수를 callJavaScript를 사용할 때 전달하면 됩니다 callJavaScript의 반환 유형은 선택 사항인 Any 값입니다 따라서 쉬운 활용을 위해 적절한 Swift 유형으로 캐스팅해야 합니다 이 방법을 활용하면 페이지의 HTML을 사용하고 각 섹션의 ID와 제목을 모두 가져와 parseSections 함수를 간단하게 구현할 수 있죠 또한 결과를 쉽게 처리할 수 있도록 섹션 구조체 배열로 변환할게요

이제 앱이 로드되자마자 사이드바에 문서 섹션이 표시됩니다 또한 WebPage를 사용하면 원하는 방식으로 탐색 정책을 맞춤화할 수 있습니다 WebPage.NavigationDeciding 프로토콜을 사용하면 되죠 앱에서 웹 콘텐츠 내 탐색이 제가 원하는 방식으로 작동하도록 맞춤형 탐색 정책을 구현하겠습니다 페이지에 외부 사이트로 연결되는 링크가 있다면 앱 내에서 로드하는 대신 기본 브라우저에서 열리도록 할게요 이를 위해 WebPage.NavigationDeciding을 준수하는 새 NavigationDecider 유형을 만들겠습니다 이 프로토콜은 탐색의 단계마다 다른 정책을 지정할 수 있도록 합니다 탐색 시작 전이나 응답을 받았거나 인증이 필요한 단계처럼요 URL에 따라 탐색 허용 여부를 결정하기 위해 탐색 액션에 대한 정책을 지정하겠습니다 이 함수는 탐색에 사용되는 NavigationAction과 요청에 따라 조정할 수 있는 NavigationPreferences를 제공합니다 URL 스키마가 lakes이거나 호스트가 lakes.apple.com이면 링크가 외부 링크가 아닌 앱의 일부이므로 탐색을 허용하겠습니다 이 경우에 해당하지 않으면 앱 내의 WebPage가 탐색을 계속해서는 안 됩니다 탐색을 취소하고 ArticleViewModel의 urlToOpen 속성을 업데이트합니다 맞춤형 NavigationDecider를 설정했으니 이를 사용하기 위해 웹페이지를 설정해야 합니다 ArticleViewModel로 돌아가서 새 NavigationDecider와 urlToOpen 속성을 만듭니다 앞서 지정한 정책을 사용하도록 WebPage에서 NavigationDecider를 받도록 업데이트합니다 WebPage가 구성되었으니 이 기능을 완성하기 위해 마지막 단계만 남았습니다

ArticleView에서 모델의 urlToOpen 속성 변경을 확인할게요 속성이 nil이 아닌 경우 탐색이 취소되었음을 알 수 있습니다 SwiftUI Environment 값인 openURL을 사용하여 기본 브라우저에서 URL을 열도록 합니다 이제 탐색은 제가 원하는 대로 작동합니다 이제 여러 뷰 한정자를 활용하여 사용자가 웹 콘텐츠와 상호 작용하는 방법을 어떻게 맞춤화할 수 있는지 알아보죠 먼저 웹 뷰가 수직으로만 튀도록 스크롤링 동작을 구성하겠습니다 웹 뷰는 사용자가 수직 또는 수평 가장자리를 넘어 스크롤할 때 튀어 돌아오죠, 콘텐츠가 웹 뷰보다 작은 경우에도 그렇습니다 WebView와 잘 작동하는 표준 scrollBounceBehavior 한정자를 통해 이 동작을 맞춤화할 수 있습니다 콘텐츠가 뷰보다 큰 경우에만 수평 축이 튀도록 구성하려면 수평 축에 대해 .basedOnSize 값을 설정하세요 이는 WebView가 지원하는 강력한 스크롤링 맞춤화 설정 기능 중 하나에 불과하며 전부가 아닙니다 올해 visionOS에 추가된 ‘바라봐서 스크롤하기’ 기능은 단일 뷰 한정자로 쉽게 구성할 수 있습니다

새 webViewScrollInputBehavior 한정자를 사용할 때 visionOS의 WebView는 새로운 look: ScrollInputKind를 지원합니다 WebView에서는 바라봐서 스크롤하기가 기본적으로 비활성화되어 있습니다 앱에서 이 기능을 활성화하기 위해 이 한정자를 사용하고 look kind에 대해 활성화되도록 동작을 설정하겠습니다 상당히 긴 문서도 있으므로 사용자가 원하는 내용을 쉽고 간편하게 찾을 수 있도록 할게요 사용자가 문서를 쉽게 검색할 수 있도록 페이지 내 찾기 기능 지원을 추가할게요 기존의 findNavigator 한정자는 WebView와 완벽하게 작동하므로 아주 쉽게 페이지 내 찾기 기능 지원을 추가할 수 있습니다 찾기 탐색기가 표시되도록 앱 도구 막대에 버튼을 추가하겠습니다 iOS 및 iPadOS에서는 찾기 탐색기가 화면 키보드에 표시되거나 웹 뷰 하단에 표시됩니다 macOS 및 visionOS에서는 웹 뷰 상단에 표시됩니다 앱이 거의 완성된 것 같습니다 더 나은 접근성을 위해 우수한 스크롤링 경험을 만들어 볼게요 문서를 탐색하는 또 다른 쉬운 방법은 사이드바에서 섹션을 선택하고 웹 뷰가 해당 섹션으로 스크롤되도록 하는 것입니다 웹 뷰의 스크롤 위치를 선택된 섹션과 동기화해야 사용자가 현재 위치를 알 수 있습니다 먼저, 사용자가 사이드바의 섹션을 탭하면 웹 뷰가 해당 섹션으로 스크롤하는 기능을 추가하겠습니다 섹션으로 스크롤하려면 해당 섹션의 위치를 알아야 합니다 이전에 설정해 둔 JavaScript 함수로 구현해 볼게요 스크립트를 실행하기 위해 다시 callJavaScript를 사용할게요 그러나 이번에는 인수로 구성된 사전을 제공할 것입니다 이 사전의 키는 JavaScript에서 로컬 변수로 표시되며 그 값은 JavaScript 값으로 변환됩니다 일반적이고 재사용 가능한 JavaScript 함수를 만드는 효과적이면서도 쉬운 방법입니다 ArticleView에서 스크롤 위치와 섹션을 제어하기 위해 State를 추가하겠습니다 WebView에 스크롤 위치를 연결하려면 새로운 webViewScrollPosition 한정자를 사용하세요 이제 스크롤 위치에서 scrollTo를 사용하고 섹션의 계산된 위치를 전달하기만 하면 섹션이 변경될 때마다 스크롤 위치를 설정할 수 있습니다 사이드바를 사용하여 특정 섹션으로 스크롤할 수 있으니 스크롤 시 사이드바도 업데이트되도록 하고 싶습니다 새로운 webViewOnScrollGeometryChange 한정자를 사용하면 가능합니다 다른 기능도 더 있죠 콘텐츠 오프셋 또는 크기와 같은 WebView의 스크롤 지오메트리가 변경될 때마다 이 한정자는 제공된 변환을 적용하고 변환된 값이 변경되면 클로저를 호출합니다 클로저 내에서 새로운 스크롤 오프셋에 가장 가까운 섹션을 계산하고 선택된 섹션을 업데이트합니다 이렇게 하면 선택된 섹션과 스크롤 위치가 완벽하게 동기화됩니다 이로써 Lakes 앱이 완성되었습니다 수월하게 빌드했네요 문서를 로드 및 표시하기 위해 WebPage와 WebView를 사용했으며 기본 문서 몇 개로 앱을 미리 채울 수 있었습니다 사용자 경험을 개선하기 위해 사이드바에 목차를 표시하고 스크롤 위치를 동기화했습니다 많은 내용을 다루었으니 배운 내용을 요약해 볼게요 SwiftUI용 WebKit은 웹 콘텐츠를 앱에 원활하게 통합하도록 하는 간단하면서도 강력한 API입니다 또한 웹 콘텐츠를 로드하고 웹 콘텐츠의 디자인을 맞춤화하는 기능을 제공합니다 URLSchemeHandling으로 로컬 웹 리소스를 효과적으로 관리할 수 있죠 또한 webViewScrollPosition 및 findNavigator와 같은 강력한 뷰 한정자로 WebView의 사용자 경험을 맞춤화할 수 있습니다 이는 WebKit for SwiftUI의 기능 중 일부에 불과합니다 그러므로 개발자 문서를 참고하여 자세한 정보를 확인해 보시기 바랍니다 SwiftUI는 또한 모든 플랫폼에서 웹 콘텐츠가 근사하게 표시되도록 하죠

이미 SwiftUI 앱에서 UIKit 또는 AppKit WebKit API를 사용하고 있거나 새 앱을 개발 중이라면 새 API로 마이그레이션하시기 아주 좋은 기회입니다 새로운 Observations API를 비롯한 Swift 및 SwiftUI의 다른 기능도 확인해 보세요 마지막으로, 이 새 API를 사용해 본 후 필요한 변경 사항이나 기능이 있다면 의견을 공유해 주세요 새로운 WebKit을 적극적으로 활용하시기를 바랍니다