iOS 환경에서 Safari 브라우저 디버깅하기

2024.10.19

Mac과 iPhone·iOS Simulator에서 Safari 개발자 도구를 연결해 웹 페이지를 디버깅하는 방법.

Frontend, iOS, Safari, Xcode

웹 프런트엔드 애플리케이션은 웹 브라우저라는 클라이언트 프로그램에서 동작한다. 그리고 이 웹 브라우저는 다양한 운영체제 위에서 돌아간다.

데스크톱 환경에서 채택되는 운영체제로는 Microsoft Windows, Apple MacOS가 대부분이고, 모바일 디바이스 환경에서 채택되는 운영체제는 데스크톱 환경보다 더욱 다양한 종류가 존재하지만 Google Android, Apple iOS가 대표적이다.

이 운영체제들 위에서 돌아가는 웹 클라이언트 프로그램, 웹 브라우저도 다양한 종류가 존재한다. 대표적으로 Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari, Naver Whale, 이뿐만 아니라 Opera Software의 Opera, 자바스크립트의 아버지 Brendan Eich가 있는 Brave Software의 Brave, Opera의 창립자가 나와 새로 개발한 Vivaldi Technologies의 Vivaldi, 개인정보 보호를 매우 중요하게 여기는 DuckDuckGo 등, 매우 다양한 웹 브라우저 프로그램이 존재하고 있다.

이 웹 브라우저 프로그램은 복잡하고 다양한 모듈과 패키지들의 구성으로 이루어져 있는데, 웹 브라우저마다 달리 사용되는 렌더링 엔진 등으로 인해 같은 코드의 웹 프런트엔드 애플리케이션임에도 불구하고, 다르게 동작하거나 화면에 그려지게 된다.

어떤 사용자가 어떤 운영체제와 브라우저에서 애플리케이션을 이용하는지 예측하기 어렵기 때문에, 좋은 웹 프런트엔드 엔지니어라면 크로스 브라우징(Cross Browsing) 작업을 통해 어떤 환경에서 애플리케이션을 사용하더라도 동일한 사용자 경험을 제공할 수 있어야 한다.

특히, Apple 디바이스에 내장되는 Safari 브라우저는 이 부분에서 악명이 자자하다. Apple 디바이스가 없는 경우 디버깅하기 어렵고, iOS의 Safari는 모바일이라는 환경적 특성도 존재하여 MacOS의 Safari 혹은 웹 브라우저의 개발자 도구에서는 확인하기 어려운, 이를테면 도구 막대같은 부분들이 존재한다. 그래서 이 글에서는 이런 부분의 테스트를 돕는 두 가지 디버깅 방법을 소개하려고 한다.

iPhone Safari에서 개발자 도구 확인하기

MacOS, 혹은 데스크톱에서는 웹 브라우저의 개발자 도구를 이용해서 다양한 시나리오를 테스트하고 디버깅할 수 있다. 하지만 iPhone에서는 개발자 도구를 확인할 수 없어, 특히 Console의 메시지나 스타일 요소들의 상태를 정확히 파악하기 어렵다. 하지만 iOS Safari의 브라우징 환경에서, MacOS Safari의 개발자 도구를 빌려 이러한 자세한 상태를 디버깅할 수 있는 방법이 있다.

먼저 MacOS Safari에서 개발자 도구를 활성화한다.

Safari → 좌측 상단 [Safari] → 설정… → [고급] 탭 → 하단 웹 개발자를 위한 기능 보기

그리고 iPhone Safari에서 웹 인스펙터를 활성화시킨다.

설정 → Safari → 하단 [고급] → 하단 웹 인스펙터

사전 설정이 완료되었다. iPhone과 Mac을 유선 케이블로 연결해준다. 이 과정에서 iPhone에 팝업되는 ‘이 기기를 신뢰함’에 동의해준다.

이제 iPhone Safari에서 브라우징되고 있는 창의 개발자 도구를 Mac Safari를 통해 확인할 수 있다.

Xcode iPhone 시뮬레이터 설정하기

위 방법도 좋지만, localhost(127.0.0.1) 환경에서 개발하면서 확인하기는 어려운 부분이 있고, 또 다양한 버전의 운영체제로 디버깅을 시도하는 것에는 한계가 존재한다. Xcode의 시뮬레이터를 이용하면 이러한 한계를 극복할 수 있다.

먼저 Xcode가 설치되지 않은 Mac이라면, Xcode를 다운로드하자. Xcode는 MacOS의 통합 개발 환경으로, App Store와 Apple Developer Web(로그인 필요)에서 다운로드 받을 수 있다.

다운로드가 완료되었다면, Xcode를 설치한다. 설치 과정에서 iOS를 같이 선택해주어야 하는데, 설치 과정에서 선택하지 못한 경우, 아래처럼 설치 후에 따로 해당하는 환경과 운영체제를 설치할 수 있다.

Xcode 실행 → 좌측 상단의 [Xcode] → Settings… → [Platforms] → iOS GET

(L) Xcode 메뉴 내 Settings, (C) Xcode Settings의 Platform 탭 좌측 하단, (R) 다양한 iOS 버전

이제 시뮬레이터를 실행시켜보자. 다음과 같은 방법으로 Xcode에서 시뮬레이터를 실행할 수 있다.

Xcode → 좌측 상단의 [Xcode] → Open Developers Tool → Simulator

만약 해당 메뉴 버튼이 보이지 않는다면 Xcode를 끄고 재실행해보자.

(L) Simulator 메뉴, (R) iOS Simulator가 켜진 모습

Dock에서 앱 아이콘 우클릭 - Device 메뉴의 하위 메뉴, 혹은 상단의 File - Open Simulator에서 디바이스 종류를 변경할 수 있다.

(L) Dock을 통한 디바이스 변경, (R) 상단 메뉴를 통한 디바이스 변경

또한, Dock의 앱 아이콘을 우클릭해서 나타나는 옵션 - [Dock에 유지]를 활성화시키면, 이후에 Xcode를 켜지 않고 바로 시뮬레이터를 켤 수 있다.

추가로, Xcode 시뮬레이터의 Safari 브라우저에서도 개발자 도구를 확인할 수 있다. Mac에서 Safari를 켜고, 다음과 같이 설정을 확인해보자.

Safari → 좌측 상단의 [개발자용] → 시뮬레이터 → 현재 켜져있는 웹 사이트

웹 프런트엔드 애플리케이션을 개발하다보면, CSS 스타일 작업을 필두로, 확실히 크로스 브라우징 작업은 예측하기 어렵고 버그가 발생하더라도 시나리오 재현이 까다롭다. 그렇지만 웹 프런트엔드 애플리케이션 엔지니어로서, 이런 방법들과 꾸준한 리서치를 통해, 고객에게 애플리케이션이 도달하기 전에 어떤 환경에서도 동일한 사용자 경험을 완성하고, 고객이 애플리케이션을 최상의 상태로 접할 수 있도록 노력하고 있다.

원문