라이브러리, 프레임워크, 코드 편집기, 빌더, 개발자 도구, 디버거 등 웹 개발에 사용할 수 있는 모든 도구는 프로그레시브 웹 앱 개발에도 유용합니다. 그러나 설치 가능성, 서비스 워커, 오프라인 지원 등과 같은 PWA 관련 기능을 사용할 때는 PWA용 특정 도구가 더욱 유용합니다. 어떻게 작동하는지 살펴보겠습니다.
시뮬레이터 및 기기
기초 챕터에서 언급했듯이 독립적인 디자인 패턴을 사용하여 모든 컨텍스트에서 모든 사용자에게 최상의 환경을 제공해야 합니다. 그러나 다양한 기기에서 환경을 테스트하는 것이 좋습니다.
iPhone, Android 휴대폰, 태블릿, 운영 체제가 서로 다른 데스크톱 또는 노트북을 포함하여 수십 가지의 물리적 기기를 소유하고 있지 않을 것입니다. 시뮬레이터와 에뮬레이터가 존재하는 이유가 바로 여기에 있습니다.
간단한 시뮬레이터
브라우저 내 대부분의 개발자 도구를 사용하면 단일 데스크톱 브라우저 엔진을 사용하면서 다양한 화면 크기나 네트워크 조건에서 PWA를 테스트할 수 있습니다. 일부 도구는 시뮬레이션에서 다른 사용자 에이전트를 강제 적용할 수도 있습니다.
사용 가능한 시뮬레이터는 다음과 같습니다.
- Chromium DevTools: 기기 모드, 네트워크 제한 및 여러 센서 시뮬레이션 사용 가능
- Firefox 개발자 도구: 반응형 디자인 모드
- Safari Web Inspector: 반응형 디자인 모드
일부 상용 및 무료 솔루션은 개발자와 디자이너에게 최적화되어 있습니다(예: 오픈소스 반응형ly 앱).
Apple 시뮬레이터
Apple에서 제공하는 시뮬레이터 앱 (이전의 iOS 시뮬레이터)을 사용하면 다양한 운영체제 버전의 여러 iPhone 및 iPad에서 웹 앱을 테스트할 수 있습니다.
시뮬레이터 앱은 macOS 컴퓨터에서만 사용할 수 있으며 [Xcode(AppStore에서 사용 가능)와 함께 제공됩니다. 이 앱은 다양한 기기 구성으로 iOS 및 iPadOS를 시뮬레이션합니다. PWA가 홈 화면에 설치될 때 사용되는 실제 모바일 Safari 앱과 Web.app 엔진이 포함되므로 최종적으로 표시되는 환경이 실제 기기를 상당히 대표하게 됩니다.
앱을 실행하려면 Xcode를 설치한 후 Xcode 메뉴에서 Open Developer Tools와 Simulator를 차례로 선택하여 시뮬레이터를 엽니다. 시뮬레이터에서 실제 iPhone이나 iPad에 있는 것처럼 Safari를 열 수 있습니다. File, Open Simulator 메뉴를 차례로 선택하여 다른 기기를 열 수 있습니다.
시뮬레이터를 사용하여 PWA를 테스트하는 동안 웹 개발자에게 유용한 단축키는 다음과 같습니다.
Command-Shift-H: 홈 화면으로 이동합니다.Control-Command-Shift-H: 앱 전환기에 액세스합니다.Command-Right및Command-Left: 기기를 회전합니다.
시뮬레이터는 가상 머신이 아니라 iPhone 또는 iPad처럼 보이는 macOS에서 실행되는 앱이므로 자체 TCP 스택이 없습니다. 따라서 시뮬레이터 내에서 localhost를 사용하면 Safari가 macOS localhost 기기를 가리킵니다.
기본적으로 Xcode는 최신 버전의 iOS만 설치하지만 Xcode로 이동하여 Preferences 메뉴를 사용하고 Components 탭에서 이전 시뮬레이터를 다운로드할 수 있습니다.
PWA는 최신 버전의 iOS, 이전 마이너 버전, 하나 이상의 이전 메이저 버전에서 테스트하는 것이 좋습니다.
Android Emulator
Android 생태계는 다양한 에뮬레이터를 제공하지만 Android SDK 내에서 제공되는 에뮬레이터가 가장 일반적으로 사용됩니다.
AOSP (Android 오픈소스 프로젝트)에는 브라우저를 다운로드할 수 있는 Chrome이나 Play 스토어가 포함되어 있지 않으므로 PWA 개발자는 Android Emulator에 브라우저도 필요하므로 테스트가 복잡해집니다. 따라서 모든 Android Emulator가 PWA 테스트에 유용한 것은 아닙니다.
Android SDK에는 에뮬레이션에 유용한 두 가지 도구가 함께 제공됩니다.
- SDK Manager: 다양한 운영체제 버전과 플러그인을 다운로드하고 업데이트합니다.
- AVD Manager: AVD (Android Virtual Device)를 추가, 수정, 삭제합니다. 각 AVD는 가상 머신 인스턴스와 유사하게 Android OS가 설치된 하나의 기기를 나타냅니다.
에뮬레이터와 함께 Android SDK가 포함된 무료 IDE인 Android SDK 또는 Android 스튜디오만 설치할 수 있습니다. SDK를 사용하면 명령줄을 사용하여 에뮬레이터를 열고 설정해야 합니다. Android 스튜디오를 사용하면 시작 화면의 메뉴에서 필요한 도구를 열 수 있습니다. AVD Manager에서는 화면 크기, 기능 및 Android OS 버전의 다양한 조합을 사용하여 원하는 만큼 기기를 만들 수 있습니다.
Android Emulator를 사용하면 PWA 설치 지원, 전체 사용자 환경, 사용 중인 기능이 예상대로 작동하는지 확인할 수 있습니다.
Chrome 사용하기
Android Emulator에서 Chrome을 사용하려면 Play 서비스가 포함된 AVD를 만들어야 합니다. 이렇게 하려면 다음 이미지와 같이 AVD에 사용하는 SDK에 Play 아이콘이 있는지 확인하세요.
Play 서비스가 포함된 AVD에는 Play 스토어도 포함되어 있으므로 Google 계정으로 계정을 설정한 후 Chrome을 최신 버전으로 업데이트할 수 있습니다.
다른 브라우저 사용
AVD를 Play 서비스와 함께 사용하는 경우 Play 스토어에서 브라우저를 다운로드할 수도 있습니다.
삼성 인터넷, Microsoft Edge, Opera, Firefox, Brave 등 Android에서 사용할 수 있는 대부분의 브라우저는 APK (Android 패키지)로 사용할 수 있습니다. 테스트하려는 브라우저의 APK가 있다면 파일을 에뮬레이터로 드래그하거나 명령줄을 통해 ADB를 사용하여 설치하면 됩니다.
데스크톱 에뮬레이터
다른 데스크톱 컴퓨터를 에뮬레이션하는 작업은 일반적으로 VirtualBox나 VMWare와 같은 가상 머신 시스템을 통해 수행됩니다. 이러한 도구를 사용하더라도 일부 환경(예: Windows 또는 Linux에서 macOS 에뮬레이션)은 불가능하며 일부 다른 옵션(예: macOS 또는 Windows에서 Windows 에뮬레이션)에는 라이선스가 필요할 수 있습니다.
실제 기기 사용
실제 기기를 사용하여 PWA를 테스트하는 것도 좋은 방법입니다. 물리적 기기를 원격으로 사용할 수 있는 클라우드 기반 솔루션이 일부 있으므로 여러 기기를 소유할 필요가 없습니다. 무료 솔루션과 무료 등급을 제공하는 상용 솔루션이 있습니다.
사용 가능한 솔루션 중 하나는 스마트폰, 태블릿, 폴더블 기기 등 삼성 기기에서 PWA를 테스트할 수 있는 무료 솔루션인 삼성 원격 테스트 실험실입니다.
원격 검사
실제 기기, 시뮬레이터 또는 에뮬레이터에서 프로그레시브 웹 앱을 디버그하려는 경우 원격 검사 세션을 데스크톱의 브라우저 도구와 연결하는 것이 좋습니다.
사용할 수 있는 상업용 도구도 있지만 모든 브라우저에서 다음과 같은 방법을 제공합니다.
- WebKit Remote Inspector: Safari에 연결하고 iOS 및 iPadOS 연결 기기 및 시뮬레이터에 설치된 PWA
- Chromium DevTools 원격 디버깅: 연결된 실제 기기 및 에뮬레이터를 비롯하여 이러한 브라우저에서 설치된 Android 및 PWA에서 Chrome, Edge, 삼성 인터넷, 기타 Chromium 기반 브라우저에 연결합니다.
- Firefox 원격 디버깅: 연결된 실제 기기와 에뮬레이터에서 Android용 Firefox에 연결합니다.
Android용 포트 전달
Android 실제 기기나 에뮬레이터에서 localhost에서 사용할 수 있는 PWA를 테스트할 때 문제가 발생합니다. localhost가 개발 머신이 아닌 Android TCP 스택을 가리키기 때문입니다.
로컬 IP 주소를 localhost 대신 사용할 수도 있지만, localhost를 제외한 여러 기능이 HTTPS 연결에서만 작동하므로 PWA가 오프라인에서 작동하지 않거나 PWA 기준을 통과하지 못하므로 이는 좋은 생각이 아닙니다.
데스크톱 컴퓨터의 Chromium 브라우저에서 포트 전달을 사용 설정하면 문제를 해결할 수 있습니다. 이 경우 Android 기기의 localhost에 있는 포트를 호스트 컴퓨터의 모든 출처 및 포트(개발용 컴퓨터의 localhost 포함)로 연결할 수 있습니다. 자세한 내용은 이 가이드를 참고하세요.
Chromium 브라우저
Chromium 브라우저는 프로그레시브 웹 앱을 디버깅하고 테스트하기 위한 여러 도구를 DevTools부터 제공합니다.
Samsung Internet, Microsoft Edge, Chrome을 비롯한 대부분의 Chromium 기반 브라우저는 공개 버전, 베타, Canary와 같은 다양한 채널을 제공합니다. 데스크톱과 Android에 별도의 버전을 설치하여 향후 브라우저 버전에서 PWA를 테스트할 수 있습니다. 이를 통해 아직 널리 제공되지 않는 기능을 빌드하고 테스트하거나 지원 중단 및 변경사항을 테스트하며 최신 버전에서 앱이 어떻게 동작할지 파악할 수 있습니다.
원격 검사를 사용하면 이러한 모든 도구를 사용하여 데스크톱과 Android 기기에서 PWA를 디버그하고 테스트할 수 있습니다.
서비스 워커 도구
Chromium DevTools에는 서비스 워커와 해당 API의 'Application' 탭을 디버그하기 위한 완전한 도구 세트가 있습니다. '서비스 워커' 섹션에서 다음을 수행할 수 있습니다.
- 서비스 워커의 설치 상태 및 수명 주기를 확인합니다.
- 서비스 워커를 업데이트하고 등록을 취소합니다.
- 업데이트 주기를 따릅니다.
- 현재 서비스 워커의 클라이언트를 확인합니다.
- 서비스 워커에 푸시 메시지를 보냅니다.
- 백그라운드 동기화 및 주기적 백그라운드 동기화 작업을 등록합니다.
스토리지 도구
Application 이후 Storage 내에서 웹 스토리지 항목 또는 IndexedDB 저장소와 같은 원본의 데이터를 보고, 미리 보고, 업데이트하고, 삭제할 수 있습니다.
Application, Cache, Cache Storage 내에서 현재 출처에 저장된 모든 캐시를 확인하고 콘텐츠를 미리 보고 항목을 삭제할 수 있습니다. 캐시 도구에 대해 자세히 알아보기
또한 Application > Storage 순으로 선택하면 현재 사용된 할당량을 확인하고, 커스텀 할당량 스토리지를 시뮬레이션하고, Clear site data를 사용하여 서비스 워커 등록을 포함한 모든 데이터를 지울 수 있습니다.
백그라운드 서비스
Chromium DevTools에는 Application, Background Services를 차례로 클릭하여 찾을 수 있는 백그라운드 서비스 이벤트 기록 도구 세트도 있습니다. 이를 통해 서비스 워커의 API를 기반으로 백그라운드에서 일부 이벤트가 어떻게 진행되는지 확인할 수 있습니다. 이 도구에 관해 자세히 알아보기
웹 앱 매니페스트 도구
Chromium DevTools의 Application, Manifest 아래에 웹 앱 매니페스트 및 설치 가능 여부에 관한 섹션이 있습니다. 이 섹션에서는 매니페스트의 올바른 로드 여부, 매니페스트의 값, 아이콘 모양, 앱 ID, 마스크 가능한 아이콘 빠른 검사 도구를 확인할 수 있습니다.
이 섹션에는 설치 가능성 기준 문제에 관한 경고 및 오류도 나와 있습니다.
설치 디버깅
WebAPK 설치 모드를 사용하는 Android 기기의 경우 Chromium 브라우저에서 about:webapk로 이동하여 설치된 앱 목록에 액세스할 수 있습니다.
여기에서 현재 업데이트 상태를 확인하고 WebAPK 업데이트를 요청할 수 있습니다.
데스크톱 컴퓨터에서는 about:apps로 이동하여 설치된 PWA의 사용자 친화적인 목록을 확인하고 about:app-service-internals로 이동하여 디버그 버전을 볼 수 있습니다.
Safari
이 글을 작성하는 시점 기준으로 Safari에는 PWA 테스트 및 디버깅에 사용할 수 있는 도구가 제한적이었습니다. 서비스 워커의 상태와 수명 주기를 확인하고 디버그할 수 있는 도구, 캐시의 콘텐츠를 위한 검사기, iOS 및 iPadOS에서 웹 앱 매니페스트를 지원하고 설치할 수 있는 도구도 없습니다.
Safari는 안정화 버전에서만 사용할 수 있지만 macOS용 Safari 기술 미리보기를 사용하면 향후 Safari 버전의 기능을 미리 사용해 볼 수 있습니다. iOS 및 iPadOS 베타 프로그램에는 때때로 테스트에 사용할 수 있는 새 버전의 Safari가 포함되어 있습니다.
서비스 워커 도구
Safari (macOS 및 iOS 및 iPadOS의 경우 원격)에서 할 수 있는 작업은 현재 실행 중인 서비스 워커의 검사기 창을 여는 것입니다.
macOS의 Safari에서는 Develop, Service Workers 메뉴에 현재 실행 중인 모든 서비스 워커 세션이 나열됩니다. 원격 검사를 위해 Develop 메뉴에서 검사할 기기를 선택해야 합니다. 서비스 워커 컨텍스트는 출처 또는 PWA의 설치된 이름 아래에 있는 창 컨텍스트와 동일한 하위 메뉴에 표시됩니다.
이 중 하나를 선택하면 Safari에서 제한된 검사기(Consoles, Sources, Network Tabs만 포함)로 새 창이 열립니다.
Firefox
Firefox는 모든 플랫폼에서 서비스 워커를 지원하고 앱 매니페스트는 Android에만 설치할 수 있습니다. USB 원격 검사 세션을 통해 데스크톱 및 Android에서 PWA용 도구에 액세스할 수 있습니다.
Firefox 개발자 버전이라는 데스크톱 버전을 사용할 수 있습니다. Chromium 브라우저와 마찬가지로 Firefox는 데스크톱 및 Android에서 정식, 베타, 개발자 등 다양한 채널에 버전을 제공합니다.
PWA용 도구
Firefox의 서비스 워커 검사기는 개발자 도구의 Application, Service Workers에서 사용할 수 있는 기본 도구입니다. 이를 통해 현재 등록된 서비스 워커를 보고 실행 중인 상태를 확인하며 등록을 취소할 수 있습니다. 서비스 워커의 코드 디버깅은 일부 개발자 버전의 Firefox에서만 사용할 수 있습니다.
매니페스트 도구는 Application, Manifest에서 사용할 수 있으며 아이콘 미리보기로만 매니페스트의 값을 렌더링합니다.
Storage에서 IndexedDB 및 캐시 스토리지를 비롯한 출처의 스토리지를 관리할 수 있습니다.
자세한 내용은 웹 앱용 Firefox 개발자 도구를 참조하세요.