- 프로그레시브 웹 앱(PWA)은 웹 애플리케이션을 네이티브 앱처럼 느끼게 하는 강력한 도구로, 다양한 디스플레이 모드를 통해 사용자 경험을 최적화 가능
- PWA의 매니페스트 파일에서 설정하는 디스플레이 모드는 브라우저 UI의 가시성을 조정하며, 각 모드에 따라 사용자 인터페이스를 조정해 웹과 앱 경험 간 차이를 완화
- CSS 미디어 쿼리와 JavaScript를 활용해 디스플레이 모드별로 콘텐츠와 기능을 조정, 사용자 요구를 충족하는 맞춤형 경험 제공
- PWA 사용자와 일반 웹사이트 방문자는 서로 다른 기대를 가지므로, 디스플레이 모드에 따라 내비게이션, 설치 프롬프트, 콘텐츠를 최적화해야 함
- 디스플레이 모드별 최적화는 PWA를 더 세련되고 앱처럼 느끼게 하며, 웹에서의 앱 경험을 향상시키는 중요한 기술임
PWA 디스플레이 모드와 최적화 필요성
- PWA는 웹 애플리케이션을 네이티브 앱처럼 구현하는 기술로, 브라우저 환경에서 벗어나면서 사용성 문제가 발생할 수 있음
- 브라우저가 제공하는 뒤로 가기, 새로고침, URL 복사 등의 기능을 잃을 가능성
- 웹사이트에 적합한 요소가 앱 환경에서는 부자연스러울 수 있음
-
manifest 파일에서 설정 가능한 디스플레이 모드는 다음과 같음
-
fullscreen: 모든 브라우저 UI를 숨기고 전체 화면 사용
-
standalone: 브라우저 컨트롤을 숨기고 네이티브 앱처럼 보임
-
minimal-ui: 최소한의 브라우저 UI 요소 표시
-
browser: 표준 브라우저 인터페이스 제공
- 브라우저 UI가 숨겨지면 사용자 경험에 영향을 미칠 수 있으므로, 디스플레이 모드별 최적화가 필수적
디스플레이 모드 미디어 쿼리 활용
-
미디어 쿼리를 사용해 디스플레이 모드에 따라 스타일과 기능을 조정 가능
- 예:
@media (display-mode: standalone)은 standalone 모드에서만 적용
-
fullscreen, minimal-ui, browser 모드에 각각 대응하는 쿼리 지원
- 실험적 모드인
window-controls-overlay와 tabbed는 display_override를 통해 사용자 지정 순서로 설정 가능
-
window-controls-overlay: 데스크톱에서 창 컨트롤 버튼을 오버레이로 표시
-
tabbed: 단일 창 내 여러 애플리케이션 환경 지원
- JavaScript로 디스플레이 모드 확인 및 동적 조정 가능
- 예:
window.matchMedia("(display-mode: standalone)").matches로 현재 모드 확인
- 모드 변경 시 이벤트를 감지해 동적으로 UI 조정
실용적 적용 사례
-
PWA 사용자 맞춤 콘텐츠: PWA 설치 사용자는 이미 전환된 사용자이므로, 마케팅 콘텐츠를 줄이고 사용자 경험에 집중
-
추가 옵션 제공: 브라우저 UI가 없는 경우, 폰트 크기 조정, 라이트/다크 모드 전환, 공유 기능 등 인앱 대안 필요
-
플랫폼 적합 기능: 모바일 네이티브 앱에서 흔한 하단 내비게이션 바는 PWA에 적합하나 웹사이트에서는 부자연스러움
- 인쇄 버튼 같은 기능은 PWA 모드에서 숨기는 것이 적절
-
설치 프롬프트 관리: 이미 설치된 PWA에서 설치 프롬프트가 표시되지 않도록 미디어 쿼리 또는 JavaScript로 제어
- 예:
.hide-in-pwa 유틸리티 클래스로 PWA 모드에서 요소 숨김
-
스코프와 시작 URL 전략:
scope와 start_url로 PWA와 웹 환경 간 콘텐츠 차별화
-
scope: PWA의 최상위 경로를 정의, 범위를 벗어나면 브라우저 UI 표시
-
start_url: 앱 실행 시 표시할 페이지 지정, 예: 대시보드로 바로 이동
-
뷰 전환 강화: 네이티브 앱에서 흔한 뷰 전환 효과를 PWA 전용으로 적용
- 예:
@media (display-mode: standalone) 내에서 뷰 전환 CSS 설정
브라우저 지원과 테스트
- 디스플레이 모드 미디어 쿼리는 대부분의 브라우저에서 광범위한 지원을 받음
- Firefox는 PWA를 지원하지 않으며, 안드로이드 Firefox는
browser 모드로만 표시
-
점진적 강화를 통해 비지원 브라우저에서 자연스러운 성능 저하 보장
- 테스트는 디바이스와 브라우저별로 다르게 동작하므로 다양한 환경에서 수행해야 함
- 브라우저는 디스플레이 모드 시뮬레이션을 제공하지 않으므로, 실제 디바이스와 OS 조합으로 테스트 필요
요약 및 시사점
-
display-mode 미디어 쿼리를 활용해 PWA를 설치 및 디스플레이 맥락에 따라 적응형 경험 제공
- 설치 프롬프트 숨김, 내비게이션 지원, 콘텐츠 맞춤, 네이티브 느낌 강화, 점진적 개선 가능
- PWA 사용자는 일반 웹 방문자와 다른 요구와 기대를 가지므로, 디스플레이 모드에 따라 세심한 조정 필요
- PWA의 성숙도가 높아질수록, 세심한 구현과 최적화가 매력적인 앱 경험을 만드는 핵심
- 추가 정보는 Smashing Magazine의 “Extensive Guide To Progressive Web Applications” 참고 권장