앱 디자인

이 장에서는 브라우저 탭 외부에서 콘텐츠를 렌더링하는 몇 가지 중요한 측면에 중점을 둡니다.

창

운영 체제마다 신청 기간에 대한 아이디어가 다릅니다. 예를 들어 iPhone에서 애플리케이션이 항상 화면의 100% 를 차지합니다. Android 및 iPad 애플리케이션은 일반적으로 전체 화면에서 실행되지만 두 앱 간에 화면을 공유할 수 있지만 한 번에 앱 인스턴스는 하나만 열립니다. 반면 데스크톱 기기에서는 애플리케이션이 한 번에 두 개 이상의 인스턴스를 열 수 있습니다. 사용 가능한 화면 공간을 다른 모든 열려 있는 애플리케이션과 공유합니다. 각 애플리케이션 인스턴스는 화면의 아무 곳에나 크기를 조절하고 위치를 지정할 수 있으며, 다른 애플리케이션과 중첩되기도 합니다.

아이콘

Google에서는 아이콘으로 앱을 인식합니다. 앱 검색, 설정, 앱을 실행할 수 있는 곳, 실행 중인 앱이 있는 곳 등에서 앱을 검색할 때 아이콘이 표시됩니다.

예를 들면 다음과 같습니다.

  • 홈 화면 (iOS, iPadOS, Android)
  • 앱 런처 (macOS, Android)
  • 시작 메뉴 또는 앱 메뉴 (Windows, ChromeOS, Linux)
  • 고정, 작업표시줄 또는 멀티태스킹 패널 (모든 운영체제)

프로그레시브 웹 앱 아이콘을 만들 때 각 운영 체제가 아이콘을 렌더링하고 아래 이미지와 같이 다른 형태의 마스크를 적용할 수 있으므로 아이콘은 플랫폼에 구애받지 않아야 합니다.

플랫폼에 따라 다양한 모양의 PWA 아이콘

앱 테마 설정

다음과 같이 PWA에서 앱 스타일 지정을 맞춤설정할 수 있는 여러 가지 방법이 있습니다.

  • 테마 색상: 바탕화면의 창 제목 표시줄 색상과 휴대기기의 상태 표시줄 색상을 정의합니다. 메타 태그를 사용하면 어두운 모드나 밝은 모드와 같은 다양한 스키마의 옵션을 사용할 수 있으며, 이러한 옵션은 사용자의 기본 설정에 따라 사용됩니다.
  • 배경 색상: 앱과 관련 CSS가 로드되기 전 창의 색상을 정의합니다.
  • 강조 색상: 양식 컨트롤 등 기본 브라우저 구성요소의 색상을 정의합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">테마 및 강조 색상을 보여주는 데스크톱 PWA와 테마 및 배경 색상을 보여주는 Android PWA 스플래시 화면</ph>
테마 및 강조 색상이 표시된 데스크톱 PWA와 테마 및 배경 색상을 보여주는 Android PWA 스플래시 화면
를 통해 개인정보처리방침을 정의할 수 있습니다.

표시 모드

프로그레시브 웹 앱에 적용할 창 환경의 종류를 정의할 수 있습니다. 다음 세 가지 옵션 중에서 선택할 수 있습니다.

  • 전체 화면
  • 독립형
  • 최소 사용자 인터페이스
를 통해 개인정보처리방침을 정의할 수 있습니다.

전체 화면 환경

전체 화면 환경은 게임, VR 또는 AR 환경과 같은 몰입형 환경에 적합합니다. 현재 Android 기기에서만 사용할 수 있으며, 상태 표시줄과 탐색 메뉴를 숨겨서 PWA에 콘텐츠 화면의 100% 를 표시합니다.

데스크톱 및 iPadOS에서 전체 화면 PWA는 지원되지 않습니다. 하지만 PWA 내에서 Fullscreen API를 사용하여 사용자 요청에 따라 앱을 전체 화면으로 표시할 수 있습니다.

독립형 환경

프로그레시브 웹 앱의 가장 일반적인 옵션인 독립형 모드는 브라우저 탐색 UI 없이 OS 표준 창에 PWA를 표시합니다. 창에는 사용자가 다음 작업을 수행할 수 있는 브라우저에서 제어하는 메뉴가 포함될 수도 있습니다.

  • 현재 URL을 복사합니다.
  • 브라우저 확장 프로그램을 확인, 적용 또는 사용 중지합니다.
  • 권한을 확인하고 변경합니다.
  • 현재 원본과 SSL 인증서를 확인합니다.

또한 PWA가 탭에서 렌더링되면 제목 표시줄에 검색주소창 또는 URL 표시줄을 대체하는 권한 및 하드웨어 사용량이 표시될 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 데스크톱에 Microsoft Edge가 설치되어 있고 메뉴가 표시된 PWA가 표시되어 있습니다. <ph type="x-smartling-placeholder">데스크톱의 Chrome과 함께 설치된 PWA에 드롭다운 메뉴와 플러그인 아이콘이 표시되어 있습니다.</ph>
위 이미지는 Microsoft Edge 및 Chrome의 데스크톱에서 독립형 모드로 PWA가 표시되는 방식을 보여줍니다.

휴대기기에서 독립형 PWA 환경을 통해 상태 표시줄이 계속 표시되는 표준 화면이 생성되므로 사용자는 알림, 시간, 배터리 잔량을 계속 볼 수 있습니다. 독립형 데스크톱 환경과 같이 브라우저 제어 메뉴가 없는 경우가 많습니다.

독립형 앱을 렌더링하는 iOS 기기

Android의 일부 브라우저는 PWA가 포그라운드에 있는 동안 사용자가 현재 URL이나 다른 옵션을 복사할 수 있도록 고정된 무음 알림을 생성합니다.

현재 활성 PWA에서 일부 작업을 보여주는 Chrome에서 렌더링된 Android 알림

최소한의 사용자 인터페이스

이 모드는 Android 및 데스크톱 운영체제의 프로그레시브 웹 앱에서 사용할 수 있습니다. 이 도구를 사용하면 PWA를 렌더링하는 브라우저에서 사용자가 애플리케이션 내에서 탐색하는 데 도움이 되는 최소한의 사용자 인터페이스가 표시됩니다.

Android에는 사용 가능한 작은 드롭다운 메뉴를 통해 현재 <title> 요소와 출처를 렌더링하는 제목 표시줄이 표시됩니다. 데스크톱의 제목 표시줄에는 탐색에 도움이 되는 버튼 모음이 표시됩니다. 예를 들어 뒤로 버튼과 현재 로드 상태에 따라 중지와 새로고침 작업 간에 전환할 수 있는 컨트롤 등이 있습니다.

<ph type="x-smartling-placeholder">
</ph> 뒤로 버튼과 새로고침 버튼이 있는 Microsoft Edge의 데스크톱 최소 UI
<ph type="x-smartling-placeholder">
</ph> Android의 경우 Firefox와 Chrome에서는 브라우저가 최소 UI에 읽기 전용 테마 탐색 메뉴를 사용합니다.

데스크톱에 맞게 디자인 최적화

데스크톱에서 작동하도록 프로그레시브 웹 앱을 설계할 때는 브라우저의 탭이나 모바일 운영 체제의 앱으로서 창 크기에 대한 무한한 가능성을 생각해야 합니다.

3장에서 미니 모드에 대해 언급했는데, 데스크톱 앱의 크기는 200x100픽셀까지 허용됩니다. 이 창은 HTML에 있는 <title> 요소의 콘텐츠를 창의 제목으로 사용합니다. 이러한 콘텐츠는 앱 간에 또는 다른 위치에서 Alt Tab 키를 눌러도 렌더링됩니다.

HTML의 <title> 요소에 주의를 기울이고 사용 방법을 다시 생각해 보세요. <title>는 검색엔진 최적화만을 위한 것이 아니며 브라우저 탭의 첫 글자만 렌더링하는 것이 아닙니다. 독립형 데스크톱 창의 사용자 환경의 일부가 될 것입니다.

CSS 권장사항

콘텐츠가 독립형 환경에서 렌더링될 때 CSS 레이아웃, 디자인, 애니메이션과 관련된 모든 환경이 유효합니다. 하지만 독립형 창에서 사용 환경을 개선하기 위한 몇 가지 도움말 및 유용한 정보가 있습니다.

미디어 쿼리

PWA에서 활용할 수 있는 첫 번째 미디어 쿼리는 browser, standalone, minimal-ui 또는 fullscreen 값을 허용하는 display-mode 속성입니다.

이 미디어 쿼리는 각 모드에 다른 스타일을 적용합니다. 예를 들어 브라우저 모드에서만 설치 초대장을 렌더링하거나, 사용자가 시스템 아이콘으로 앱을 사용할 때 하나의 특정 정보만 렌더링할 수 있습니다. 여기에는 앱이 독립형 모드로 실행될 때 사용할 뒤로 버튼을 추가하는 것이 포함될 수 있습니다.

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
드림

앱 환경

사용자는 설치된 PWA를 사용할 때 앱 동작을 기대합니다. 의미를 정의하는 것이 간단하지는 않지만, 기본 웹 동작이 일부 상황에서 최상의 환경을 제공하지는 않습니다.

사용자 선택

콘텐츠는 일반적으로 마우스나 포인터 또는 길게 누르기 동작으로 선택할 수 있습니다. 콘텐츠에는 유용하지만 PWA 내의 탐색 항목, 메뉴, 버튼에는 최적의 환경을 제공하지는 않습니다.

숫자와 같은 모든 상호작용 버튼을 선택할 수 있는 계산기 PWA

따라서 user-select: none 및 -webkit- 접두사 버전을 사용하여 이러한 요소에서 사용자 선택을 사용 중지하는 것이 좋습니다.

.unselectable {
   user-select: none;
}
드림

강조 색상

PWA에서 accent-color 속성을 사용하여 HTML 양식 컨트롤 내에서 브랜드에 맞는 색상을 정의할 수 있습니다.

시스템 글꼴

대화상자나 메시지와 같은 요소를 사용자의 기본 플랫폼 글꼴과 일치시키려면 다음 글꼴 모음을 사용하면 됩니다.

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

당겨서 새로고침

Chrome 및 Safari와 같은 최신 모바일 브라우저에는 아래로 당기면 페이지를 새로 고치는 기능이 있습니다. Android의 Chrome과 같은 일부 브라우저에서는 이 동작이 독립형 PWA에서도 사용 설정됩니다.

이 작업을 사용 중지하는 것이 좋습니다. 예를 들어 자체 동작 관리 또는 새로고침 작업을 제공하거나 사용자가 의도치 않게 작업을 트리거할 가능성이 있는 경우입니다.

overscroll-behavior-y: contain:을 사용하여 이 동작을 사용 중지할 수 있습니다.

  body {
    overscroll-behavior-y: contain;
  }

안전 영역

일부 기기에는 가려지지 않는 직사각형 화면이 없습니다. 대신 화면이 다른 모양(예: 원)이거나 iPhone 13의 노치와 같이 사용할 수 없는 부분이 있을 수 있습니다. 이 경우 일부 브라우저에서는 콘텐츠를 표시할 수 있는 안전한 영역이 포함된 환경 변수를 노출합니다.

상단에는 측면에 렌더링되지 않은 영역을 표시하는 표준 표시 영역이 있는 가로 모드의 노치 기반 기기 아래로 갈 수 있습니다.

화면(보이지 않는 영역 포함) 전체에 액세스하여 색상이나 이미지를 렌더링하려면 <meta name="viewport"> 태그의 콘텐츠에 viewport-fit=cover를 포함합니다. 그런 다음 safe-area-inset-* 환경 변수를 사용하여 콘텐츠를 해당 영역으로 안전하게 확장합니다.

리소스