# PWA를 다양한 디스플레이 모드에 최적화하기

> Clean Markdown view of GeekNews topic #22799. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=22799](https://news.hada.io/topic?id=22799)
- GeekNews Markdown: [https://news.hada.io/topic/22799.md](https://news.hada.io/topic/22799.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-08-30T10:11:02+09:00
- Updated: 2025-08-30T10:11:02+09:00
- Original source: [smashingmagazine.com](https://www.smashingmagazine.com/2025/08/optimizing-pwas-different-display-modes/)
- Points: 20
- Comments: 2

## Summary

**PWA**는 웹 앱을 **네이티브 앱 수준의 사용자 경험**으로 끌어올리기 위해 다양한 **디스플레이 모드**를 지원하며, 이로 인해 브라우저 UI 유무, 내비게이션, 설치 프롬프트 등에서 사용성 차이가 발생합니다. 개발자는 **미디어 쿼리**와 **JavaScript**를 활용해 디스플레이 모드별로 UI, 기능, 콘텐츠를 맞춤화함으로써, PWA 사용자에게 웹 방문자와는 구별되는 **특화 경험**을 제공할 수 있습니다. 이를 위해서는 브라우저 호환성과 실제 디바이스 테스트가 필수적이며, 이러한 **정교한 최적화**가 PWA의 완성도와 사용자 만족도를 결정하는 핵심입니다.

## Topic Body

- 프로그레시브 웹 앱(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](https://www.smashingmagazine.com/2018/11/guide-pwa-progressive-web-applications/)” 참고 권장

## Comments



### Comment 43167

- Author: ndrgrd
- Created: 2025-08-31T19:52:47+09:00
- Points: 1

Firefox도 nightly에서 다시 PWA를 지원하기 시작했습니다. 곧 stable에도 추가될거에요.

### Comment 43136

- Author: draupnir
- Created: 2025-08-30T11:21:00+09:00
- Points: 1

브라우저라는 통로를 통해서 써야 하는거여서.. 항상 네이티브를 선호하는데, PWA이야기를 보면 항상 재밌어요.  
같은 최적화를 추구하는데 방향이 다른…