PWA용 탭으로 표시된 애플리케이션 모드

프로그레시브 웹 앱에서 탭을 사용하여 한 번에 여러 문서 작업

Thomas Steiner

컴퓨팅 분야에서 데스크톱 은유는 사용자가 컴퓨터와 더 쉽게 상호작용할 수 있도록 그래픽 사용자 인터페이스 (GUI)에서 사용하는 통합 개념의 집합인 인터페이스 은유입니다. 데스크톱 은유에 따라 GUI 탭은 책, 종이 파일 또는 카드 색인에 삽입된 기존 카드 탭을 모델로 합니다. 탭이 있는 문서 인터페이스 (TDI) 또는 탭은 탭을 문서 세트 간에 전환하는 탐색 위젯으로 사용하여 여러 문서 또는 패널을 단일 창 내에 포함할 수 있는 그래픽 컨트롤 요소입니다.

프로그레시브 웹 앱은 웹 앱 매니페스트의 display 속성에 의해 결정되는 다양한 디스플레이 모드로 실행할 수 있습니다. 예를 들어 fullscreen, standalone, minimal-ui, browser가 있습니다. 이러한 디스플레이 모드는 잘 정의된 대체 체인("fullscreen" → "standalone" → "minimal-ui" → "browser")을 따릅니다. 브라우저가 특정 모드를 지원하지 않으면 체인의 다음 디스플레이 모드로 대체됩니다. 개발자는 필요한 경우 "display_override" 속성을 통해 자체 대체 체인을 지정할 수 있습니다.

탭형 애플리케이션 모드란 무엇인가요?

지금까지 플랫폼에서 누락된 것은 PWA 개발자가 사용자에게 탭이 있는 문서 인터페이스를 제공할 수 있는 방법입니다. 예를 들어 동일한 PWA 창에서 여러 파일을 편집할 수 있도록 지원하는 방법입니다. 탭형 애플리케이션 모드를 사용하면 이 격차를 좁힐 수 있습니다.

탭형 애플리케이션 모드의 추천 사용 사례

탭형 애플리케이션 모드를 사용할 수 있는 사이트의 예는 다음과 같습니다.

  • 사용자가 한 번에 두 개 이상의 문서 (또는 파일)를 수정할 수 있는 생산성 앱
  • 사용자가 탭별로 여러 방에서 대화를 나눌 수 있는 커뮤니케이션 앱
  • 새 인앱 탭에서 도움말 링크를 여는 읽기 앱

개발자가 빌드한 탭과의 차이점

별도의 브라우저 탭에 문서를 배치하면 리소스 격리가 무료로 제공되며, 이는 현재 웹에서는 불가능합니다. 개발자가 빌드한 탭은 브라우저 탭처럼 수백 개의 탭으로 확장할 수 없습니다. 탐색 기록, '이 페이지 URL 복사', '이 탭 전송' 또는 '웹브라우저에서 이 페이지 열기'와 같은 브라우저 어포던스는 개발자가 빌드한 탭 인터페이스 페이지에는 적용되지만 현재 선택한 문서 페이지에는 적용되지 않습니다.

"display": "browser"와의 차이점

현재 "display": "browser"에는 이미 특정 의미가 있습니다.

사용자 에이전트에서 하이퍼링크를 여는 플랫폼별 규칙 (예: 브라우저 탭 또는 새 창)을 사용하여 웹 애플리케이션을 엽니다.

브라우저는 UI와 관련하여 원하는 대로 할 수 있지만 "display": "browser"가 갑자기 '브라우저 어포던스가 아닌 탭이 있는 문서 인터페이스가 있는 별도의 애플리케이션별 창에서 실행'을 의미하게 된다면 이는 개발자 기대에 대한 상당히 큰 변혁이 될 것입니다.

"display": "browser"를 설정하면 애플리케이션 창에 배치되는 것을 선택 해제하는 것과 마찬가지입니다.

현재 상태

단계 상태
1. 설명 동영상 만들기 완료
2. 사양의 초안 작성 시작되지 않음
3. 의견 수집 및 디자인 반복 진행 중
4. 오리진 트라이얼 진행 중
5. 출시 시작되지 않음

탭형 애플리케이션 모드 사용

탭형 애플리케이션 모드를 사용하려면 개발자가 웹 앱 매니페스트에 특정 "display_override" 모드 값을 설정하여 앱을 선택해야 합니다.

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

다음으로, 원하는 경우 "tab_strip" 속성을 사용하여 탭 동작을 미세 조정할 수 있습니다. 허용되는 하위 속성은 "home_tab" 및 "new_tab_button" 두 가지입니다. "tab_strip" 속성이 없으면 특정 속성의 "auto" 값이 사용됩니다. 브라우저는 "auto"에 사용할 값을 결정합니다.

홈 탭

홈 탭은 고정된 탭으로, 앱에 사용 설정된 경우 앱이 열려 있을 때 항상 표시되어야 합니다. 이 탭은 탐색되어서는 안 됩니다. 이 탭에서 클릭한 링크는 새 앱 탭에서 열립니다. 앱은 이 탭이 잠겨 있는 URL과 탭에 표시되는 아이콘을 맞춤설정할 수 있습니다.

"home_tab"에 허용되는 값은 다음과 같습니다.

  • "auto"를 사용하여 브라우저에서 할 일을 결정하도록 합니다.
  • "absent"를 사용하여 브라우저에 홈 탭을 표시하지 않도록 지정합니다.
  • 두 개의 하위 속성이 있는 객체입니다.
    • 허용되는 값이 "auto"인 "url" 또는 홈 탭을 고정할 URL입니다.
    • 허용되는 값이 "auto"인 "icons" 또는 기본 "icons" 속성과 같이 아이콘 배열입니다.

새 탭 버튼

새 탭 버튼이 있는 경우 앱 범위 내에 있는 URL에서 새 탭을 열어야 합니다. 앱은 이 버튼에 맞춤 URL과 아이콘을 설정할 수 있습니다. 브라우저는 이러한 탭을 드래그하여 새 창을 만들거나 브라우저 탭과 결합하는 방법을 결정할 수 있습니다.

"new_tab_button"에 허용되는 값은 다음과 같습니다.

  • "auto"를 사용하여 브라우저에서 할 일을 결정하도록 합니다.
  • "absent"을(를) 사용하여 브라우저에 새 탭 버튼을 표시하지 않도록 지시합니다.
  • 두 개의 하위 속성이 있는 객체입니다.
    • 허용되는 값이 "auto"인 "url" 또는 새 탭을 열려는 범위 내 URL입니다.
    • 허용되는 값이 "auto"인 "icons" 또는 기본 "icons" 속성과 같이 아이콘 배열입니다.

전체 예

탭 인터페이스로 앱의 동작을 구성하는 전체 예시는 다음과 같습니다.

{
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "url": "./home/",
      "icons": [
        {
          "src": "./home.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    },
    "new_tab_button": {
      "url": "./new-tab/",
      "icons": [
        {
          "src": "./new-tab.svg",
          "sizes": "any",
          "type": "image/svg+xml"
        }
      ]
    }
  }
}

탭이 있는 애플리케이션 모드 감지

앱은 CSS 또는 JavaScript에서 display-mode CSS 미디어 기능을 확인하여 탭이 있는 애플리케이션 모드에서 실행 중인지 감지할 수 있습니다.

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

Launch Handler API와의 상호작용

Launch Handler API를 사용하면 사이트에서 앱 실행을 기존 앱 창으로 리디렉션하여 중복 창이 열리는 것을 방지할 수 있습니다. 탭이 있는 앱이 "client_mode": "navigate-new"를 설정하면 앱 실행 시 기존 앱 창에 새 탭이 열립니다.

데모

브라우저 플래그를 설정하여 탭형 애플리케이션 모드를 사용해 볼 수 있습니다.

  1. #enable-desktop-pwas-tab-strip 플래그를 설정합니다.
  2. tabbed-application-mode.glitch.me 앱(소스 코드)을 설치합니다.
  3. 여러 탭의 여러 링크를 클릭합니다.

tabbed-application-mode.glitch.me의 탭형 애플리케이션 모드 데모 스크린샷

의견

Chrome팀에서는 탭형 애플리케이션 모드 사용 경험에 관한 의견을 듣고자 합니다.

API 설계 설명

탭형 애플리케이션 모드에서 예상대로 작동하지 않는 부분이 있나요? 생성된 웹 앱 매니페스트 문제에 관한 의견을 작성합니다.

구현 문제 신고

Chrome 구현에서 버그를 발견했나요? new.crbug.com에서 버그를 신고합니다. 최대한 자세한 내용과 재현을 위한 간단한 안내를 포함하고 구성요소 상자에 UI>Browser>WebAppInstalls를 입력합니다. Glitch는 재현 케이스를 빠르고 쉽게 공유하는 데 적합합니다.

API 지원 표시

탭형 애플리케이션 모드를 사용할 계획인가요? 공개적으로 지원하면 Chrome팀이 기능의 우선순위를 정하는 데 도움이 되며 다른 브라우저 공급업체에 기능을 지원하는 것이 얼마나 중요한지 보여줍니다.

#TabbedApplicationMode 해시태그를 사용하여 @ChromiumDev에 트윗을 보내고 사용 중인 위치와 사용 방법을 알려주세요.

감사의 말씀

탭형 애플리케이션 모드는 맷 지우카님이 살펴봤습니다. Chrome의 실험적 구현은 앨런 커터가 담당했습니다. 이 도움말은 조 미들리님이 검토했습니다. 위키미디어 커먼즈의 틸 니어만님이 제공한 히어로 이미지입니다.