[ios] SafariServices를 활용한 웹 페이지 내 이미지 뷰어 설정

iOS 앱에서 웹 페이지를 표시할 때, 사용자가 이미지를 확대/축소하고 저장할 수 있는 편리한 이미지 뷰어를 제공하고자 합니다. 이를 위해 SafariServices를 활용하여 이미지 뷰어를 설정하는 방법을 소개합니다.

1. SafariServices 추가

먼저, 프로젝트에 SafariServices 라이브러리를 추가해야 합니다.

import SafariServices

2. 이미지 링크 감지

웹 뷰를 통해 웹 페이지를 로드한 후, 사용자가 이미지를 탭할 때 해당 이미지를 팝업으로 보여주어야 합니다. 이를 위해 웹 뷰의 delegate 메서드를 사용하여 이미지 링크를 감지합니다.

extension YourWebViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        if let url = navigationAction.request.url, url.absoluteString.hasSuffix(".jpg") || url.absoluteString.hasSuffix(".png") || url.absoluteString.hasSuffix(".jpeg") {
            let safariVC = SFSafariViewController(url: url)
            present(safariVC, animated: true, completion: nil)
            decisionHandler(.cancel)
        } else {
            decisionHandler(.allow)
        }
    }
}

3. 이미지 뷰어 표시

이미지 링크를 감지하고 SFSafariViewController를 사용하여 이미지를 표시합니다. 사용자는 해당 이미지를 확대/축소하고 저장할 수 있습니다.

4. 권한 요청

사용자가 이미지를 저장하려는 경우, 저장 권한을 요청해야 합니다. Info.plist 파일에 접근 권한을 설정하여 권한을 요청합니다.

<key>NSPhotoLibraryAddUsageDescription</key>
<string>We need access to your photo library to save images.</string>

마치며

SafariServices를 활용하면 웹 페이지 내에서 이미지를 편리하게 볼 수 있는 기능을 제공할 수 있습니다. 사용자 경험을 개선하고 앱의 가치를 높일 수 있는 방법 중 하나입니다.

더 많은 정보는 SafariServices 공식 문서를 참고하세요.


이상으로 SafariServices를 활용한 웹 페이지 내 이미지 뷰어 설정에 대해 알아보았습니다. 더 궁금한 점이 있으시다면 언제든지 물어보세요!