0. 서론

0.0. 서론의 서론

웹뷰 기반의 올리브영 앱 개선 프로젝트를 진행하면서 개발자 도구의 필요성을 느꼈다.

크롬으로 이리저리 해보려다가 못 했다.

 

왜 몰랐을까? 사파리로 가능하다는 것을.

 

아래 글은 다음 내용을 다룬다.

1. iOS 기기에서 실행 중인 `모바일 웹(Safari)`을 Mac의 Safari 개발자 모드로 분석

2. iOS 기기에서 실행 중인 `WebView 기반 앱`을 Mac의 Safari 개발자 모드로 분석

 

0.1. 준비

다음 사항이 선행되어야 할 수 있다.

필자는 기존에 설정을 해두어서 이번에 할 필요는 없었다.

 

도움이 될 만한 링크를 첨부하겠다.

아래 링크가 아니어도 구글링으로 금방 해결할 수 있을 것이다.

  1. iOS 기기 개발자 모드 설정: https://zeddios.tistory.com/1361
  2. iOS 기기 신뢰 설정: https://support.apple.com/ko-kr/HT202778

 

0.2. 실행 환경

기기: iPhone 14

iOS: 17.4.1

Mac: Sonoma 14.3.1

웹뷰: WkWebView

 

 

1. 모바일 웹

1.1. iOS 기기에서 웹 검사기(Web Inspector) 활성

Image 1 Image 2 Image 3 Image 4 Image 5
  1. iOS 기기에서 `설정` 앱 실행
  2. 설정 앱
  3. `Safari`를 선택
  4. 아래로 스크롤하여 `고급(Advanced)` 선택
  5. `웹 검사기(Web Inspector)` 옵션 활성화

 

1.2. Mac에서 Safari 설정

 

  1. `Mac`에서 `Safari` 실행
  2. 상단 메뉴 바에서 `Safari` → `환경설정(Settings...)`
  3. `고급(Advanced)` 탭으로 이동
    하단 메뉴 막대에서 `개발자용 메뉴 보기 옵션` 체크하여 활성화
  4. `개발(Develop)` 메뉴 막대가 생긴 모습
    아직 연결된 기기는 Mac만 확인되는 모습

 

1.3. iOS 기기를 Mac에 연결

  1. 애플 정품 케이블로 iOS 기기를 Mac에 연결

 

1.4. Safari 개발자 모드 사용

이미지를 클릭하면 확대 가능

  1. iOS 기기를 연결하면, 연결된 기기에 나타난다.
  2. iOS 기기가 잠금되어 있으면 분석을 할 수 없다.
  3. iOS 기기의 Safari 모바일 웹을 실행하면, 실행 중인 웹페이지를 분석할 수 있게 된다.

 

1.5. 웹 페이지 분석

도메인은 네이버와 인스타그램을 활용했다.

 

1.4.에서 Mac의 웹 검사기(Web Inspector)를 실행하면, 별도의 창이 나타난다.

크롬의 개발자 도구와 유사하거나 더 우수한 기능을 이용할 수 있다.

 

  1. 웹 검사기로 검사 중인 iOS 기기의 Safari 모바일 웹 페이지.
  2. `Elements`: 요소 간의 구조와 레이아웃. 코드 변경도 가능.
  3. `Console`: 콘솔창. 코드 입력도 가능.
  4. `Sources`: 웹의 내부 소스 코드 확인 가능.
  5. `TimeLine`: 특정 동작을 수행하는 과정에서 발생한 데이터를 시각적으로 제공.

 

2. WebView 기반 앱

2.0. 제한 사항

스스로 개발한 앱은 확실히 가능하다.

그러나 대부분의 상용 앱은 분석이 불가능할 것이다.

 

webView를 설정할 때, 특정 옵션을 설정해야만 사용할 수 있기 때문이다.

상용 앱은 이것을 막아놓은 듯하다.

https://stackoverflow.com/questions/16999186/why-safari-shows-no-inspectable-applications-during-remote-debugging-with-ios

 

모바일 웹과 `1.4.2.`까지의 과정은 동일하다.

모바일 웹 대신에 앱을 빌드하면, `실행 중인 앱`을 분석할 수 있게 되는 차이가 있다.

 

2.1. webView 코드 레벨 설정

import UIKit
import WebKit

class ViewController: UIViewController {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // WKWebViewConfiguration 생성 및 설정
        let webConfiguration = WKWebViewConfiguration()

        // WKWebView 초기화
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        
        // Safari 웹 검사기로 분석 가능하도록 설정
        webView.isInspectable = true

        // 웹 뷰를 뷰 컨트롤러의 뷰에 추가
        view.addSubview(webView)

        // 웹 뷰의 오토레이아웃 설정
        webView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            webView.topAnchor.constraint(equalTo: view.topAnchor),
            webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        // 웹 페이지 로드
        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }
}

extension ViewController: WKNavigationDelegate, WKUIDelegate {
    // 필요한 델리게이트 메소드 구현
}

 

생성된 webView의 인스턴스에 `.isInpectable = true`로 설정한다.

이것을 설정하지 않으면 웹 검사기가 앱을 감지하지 못 한다.

 

2.2. Xcode 빌드 설정

 

  1. 실행 중인 앱을 선택 → `Edit Scheme...` 선택
  2. `Run`→ `Info` → `Build Configuration` → `Debug` 선택

 

2.3. 앱 분석

 

설정을 마치면, WebView 기반으로 작성된 앱을 분석할 수 있게 된다.

 

 

 

 

참고

+ Recent posts

티스토리툴바