WKWebView의 새로운 기능

웹 콘텐츠를 앱의 인터페이스에 포함할 수 있는 프레임워크인 WKWebView의 최신 업데이트를 살펴봅니다. JavaScript 전체 화면 API의 사용 방법을 보여드리고, CSS 뷰포트 유닛을 살펴보며, 찾기 상호 작용에 대해 자세히 알아봅니다. 또한 콘텐츠 차단 제어, 암호화된 미디어 포함, Web Inspector의 사용에 대한 개선 사항을 안내합니다.

리소스

관련 비디오

WWDC22

Safari 및 WebKit의 새로운 기능

다운로드

♪ 부드러운 힙합 반주 ♪ ♪ 'WKWebView의 새로운 점'을 소개하는 시간입니다 전 WebKit 팀 엔지니어 Alex Christensen입니다 여러분이 앱에서 쓰실 수 있게 새롭고 다양한 웹 기술을 추가하느라 저희도 매우 바빴는데요 시작하기에 앞서 여러분이 앱에 알맞은 기술을 쓰실 수 있게 먼저 안내해 드리겠습니다 앱에서 브라우저와 같은 사용 경험은 누리고 싶지만 커스터마이징은 별로 필요하지 않다면 SFSafariViewController를 쓰시는 게 좋습니다 지원이 중단된 UIWebView를 아직도 앱에서 사용한다면 이제는 더 빠르고 반응성도 좋은 WKWebView로 이동할 때입니다 향후 릴리즈에서는 UIWebView를 제거할 예정입니다 WKWebView는 웹 콘텐츠와 상호 작용하는 애플리케이션 작성에 쓰는 API입니다 CSS 기반 UI에 쓸 수도 있고 JavaScript에서 앱을 작성할 때 쓸 수도 있죠 앱 바운드 도메인을 사용해서 자신의 웹 콘텐츠와 상호작용할 수도 있습니다 또 자체적인 브라우저를 개발하는 분도 계실 텐데요 어떤 애플리케이션이든 기능이 더 풍부한 웹 애플리케이션을 개발하도록 새로운 기능을 계속 추가하고 있습니다 올해 WKWebView에 새로 추가한 기능은 총 네 가지 항목입니다 웹 콘텐츠와 상호 작용하는 새로운 방법 콘텐츠 차단기와 암호화된 미디어의 새 기능 그리고 원격 Web Inspector의 사용법이죠 먼저 웹 콘텐츠와 상호 작용하는 새 API를 다뤄 보겠습니다 iOS 16에서 앱이 웹 콘텐츠와 상호 작용할 새로운 방법으로는 전체 화면 API 사용, 새로운 CSS 뷰포트 유닛 사용, 상호작용 검색 사용으로 총 세 가지가 있습니다 전체 화면으로 보여드리죠 JavaScript 덕분에 영상이나 캔버스 게임 같은 HTML 요소를 오랫동안 브라우저에서 전체 화면으로 즐길 수 있었죠 이제는 여러분의 앱에서도 그럴 수 있습니다 휴대폰에서는 어떤 모습일지 간단한 예를 보여드리죠 JavaScript는 전체 화면을 요청할 수 있고 사용자나 JavaScript가 전체 화면에서 나올 수도 있죠 앱에서는 다음과 같이 설정하면 됩니다 WKPreferences .isElementFullscreenEnabled 이 값을 참으로 설정한 후 webkitRequestFullscreen 등 전체 화면 API를 사용하는 웹 콘텐츠를 불러오면 끝이죠 이대로도 잘 작동하지만 앱에서의 전환을 커스터마이징하고 싶을 때는 WKWebView.fullscreenState 값을 보시면 됩니다 여기서 웹 콘텐츠를 전체 화면으로 설정할지 반환할지 앱에 알려줄 수 있죠 이렇게만 하면 WebKit의 전체 화면 API를 앱에서도 사용할 수 있습니다

동적 뷰포트의 크기에 따라 웹 콘텐츠의 레이아웃을 조절하게 해 주는 새로운 CSS 유닛도 있습니다 svh, lvh, dvh 등 여러 유닛이 여기에 포함되죠 웹 개발자들은 이 유닛을 이용하여 최소, 최대 동적 뷰포트 크기를 기초로 레이아웃을 조절할 수 있죠 앱에서 어떻게 이걸 활용할 수 있을지 Safari로 예를 들어드리겠습니다 Safari에서 페이지를 열면 먼저 웹페이지 호스트와 하단 버튼이 보입니다 화면을 스크롤 하면 버튼이 밑으로 사라지면서 뷰포트의 크기가 커지죠 Svh, lvh, dvh는 뷰포트의 다양한 크기를 측정하는 유용한 유닛을 제공합니다 앱이 WKWebView의 뷰포트를 바꾼다면 뷰포트 크기의 범위가 어느 정도인지 WebKit에 알려줘야 합니다 Swift에서는 함수 호출 하나로 엣지 인셋의 최대, 최솟값을 WebKit에 알려줄 수 있습니다 그럼 이 웹 콘텐츠의 레이아웃이 앱에서 올바르게 표시되죠 iOS 16의 WKWebView에서 상호작용 검색 기능도 도입했는데요 WKWebView 애플리케이션에선 대개 텍스트 출력량이 많으므로 사용자는 주로 특정 텍스트를 검색합니다 WKWebView .findInteractionEnabled를 참으로 설정하면 열린 페이지에서 텍스트를 검색할 때 익숙한 UI나 커맨드+F 같은 단축키도 사용할 수 있습니다 코드 한 줄만 입력하면 이 기능을 활성화할 수 있는 겁니다 물론 WKWebView .findInteraction을 통해 UIFindInteraction 객체에 액세스하여 검색 패널을 표시하거나 숨기고 이전 혹은 다음 결과로 이동할 수도 있습니다 앱에서 뭘 할 수 있을지 직접 시험해 보시기 바랍니다 콘텐츠 차단기에는 WKContentRuleList에 새로운 기능을 추가했습니다 Safari의 콘텐츠 차단기 도입에 사용하는 API죠 예시 사이트의 iframe에 위키피디아를 포함시켰는데요 예전에는 요청한 URL과 탑프레임 URL에 정규식을 실행하여 로드를 차단할지 다른 작업을 수행할지 결정했죠 하지만 어떤 때는 특정 규칙을 특정 iframe 내 로드에만 적용하고 싶을 때도 있으셨겠죠 이제는 현재 프레임의 URL에서 정규식을 실행할 수 있습니다 위키피디아가 포함된 프레임에서만 이미지를 차단할 규칙을 입력할 수 있죠 이렇게 하려면 이런 식으로 if-frame-url을 JSON에 추가하면 됩니다 그리고 예전처럼 JSON을 컴파일하여 WKWebViewConfiguration에 적용하면 되죠 그리고 요청이 들어온 프레임의 URL에서 정규식을 실행하는 겁니다 이 차단 규칙은 if-frame-url의 정규식과 일치하는 프레임의 요청에만 적용됩니다 여길 보면 위키피디아 iframe 내에서 불러오는 이미지만 차단한 걸 알 수 있습니다 콘텐츠 차단기 도입을 진지하게 고려하신다면 Safari 확장 프로그램 관련 WWDC 세션을 참고하여 declarativeNetRequest의 새로운 기능도 확인하시기 바랍니다 iPadOS 16의 WKWebView에 새로운 기능이 또 있습니다 바로 암호화된 미디어죠 암호화 미디어 확장 프로그램과 미디어 소스 확장 프로그램 API를 사용하는 콘텐츠가 있다면 이제 iPadOS의 앱에서도 쓸 수 있습니다 AppleTV+ 같은 프리미엄 콘텐츠도 iPadOS에서도 macOS처럼 잘 구동된다는 겁니다 여러분의 앱에 웹 브라우저 권한이 있다면 iOS에서 사용하는 Safari와 마찬가지로 여러분의 제작 앱에서도 원격 Web Inspector가 실행됩니다 코드를 추가하거나 변경할 필요도 없이 말이죠 타사 브라우저에서의 Web Inspector 활성화 절차도 Safari에서 활성화하는 것과 동일합니다 먼저 iOS 기기에서 Safari 설정을 열고 Web Inspector 기능을 켜야 합니다 그리고 Mac의 Safari를 열어 고급 설정으로 들어간 후 개발 메뉴를 활성화합니다 휴대폰을 Mac에 가까이 대고 macOS에 열어 둔 Safari의 개발 메뉴에서 여러분의 기기를 찾습니다 웹 콘텐츠를 디버깅할 도구가 Web Inspector엔 무척 많은데요 DOM을 살펴보거나 JavaScript 실행도 디버깅할 수 있고 페이지 로딩 타임라인 확인 등 여러 기능을 활용할 수 있죠 웹사이트 소유자라면 iOS상 타사 브라우저에서 원격 Web Inspector를 실행하여 직접 감시와 디버깅을 진행할 수 있습니다 올해 WKWebView에 새롭게 추가한 주요 API는 여기까지입니다 여러분의 앱에서 직접 시험해 보시기 바랍니다 API는 꼭 여러분의 앱과 잘 맞는 것으로 사용하시고요 WKWebView가 지원하지 않는 기능이 있다면 피드백 지원을 이용하여 관련 기능을 요청해 주세요 요청한 피드백을 검토한 후 여러분의 의견을 우선시하여 개발하겠습니다 새로 추가된 'Safari 웹 확장 프로그램의 새로운 사항'도 확인하시고 웹 플랫폼에 새로 추가한 내용이 궁금하다면 'What's new in Safari and WebKit'도 확인하시기 바랍니다 다른 세션도 유익하길 바라며 시청해 주셔서 감사합니다 ♪

2:26 - Fullscreen API support

webView.configuration.preferences.isElementFullscreenEnabled = true

webView.loadHTMLString("""
<script>
    button.addEventListener('click', () => {
        canvas.webkitRequestFullscreen()
    }, false);
</script>
…
""", baseURL:nil)

let observation = webView.observe(\.fullscreenState, options: [.new]) { object, change in
    print("fullscreenState: \(object.fullscreenState)")
}

3:50 - CSS viewport unit range inputs

let minimum = UIEdgeInsets(top: 0, left: 0, bottom: 30, right: 0)
let maximum = UIEdgeInsets(top: 0, left: 0, bottom: 200, right: 0)
webView.setMinimumViewportInset(minimum, maximumViewportInset: maximum)

4:17 - Using UIFindInteraction with WKWebView

webView.findInteractionEnabled = true

if let interaction = webView.findInteraction {
  interaction.presentFindNavigator(showingReplace:false)
}

5:46 - WKContentRuleList if-frame-url

let json = """
[{
    "action":{"type":"block"},
    "trigger":{
        "resource-type":["image"],
        "url-filter":".*",
        "if-frame-url":["https?://([^/]*\\\\.)wikipedia.org/"]
    }
}]
"""

WKContentRuleListStore.default().compileContentRuleList(forIdentifier: "example_blocker",
    encodedContentRuleList: json) { list, error in
    guard let list = list else { return }
    let configuration = WKWebViewConfiguration()
    configuration.userContentController.add(list)
}

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