설치된 PWA로의 탐색 관리

Demián Renzulli
Demián Renzulli
X GitHub
Dan Murphy
Dan Murphy
X LinkedIn
Dibyajyoti Pal
Dibyajyoti Pal
LinkedIn
Vincent Scheib
Vincent Scheib
LinkedIn

게시일: 2025년 8월 19일

탐색 관리는 프로그레시브 웹 앱 (PWA)이 사용자 탐색을 처리하는 방식을 제어하는 방법을 포함합니다. 이 작업의 중요한 구성요소는 탐색 캡처입니다. 탐색 캡처는 링크를 클릭할 때 설치된 PWA를 실행해야 하는지 아니면 새 브라우저 탭을 열어야 하는지를 결정하는 브라우저 프로세스입니다.

이 가이드에서는 Chrome 139부터 사용할 수 있는 새로운 버전의 탐색 캡처를 다룹니다. 브라우저의 기본 동작은 대부분의 경우에 적합하지만 사용자에게 가장 원활한 환경을 제공하려면 이러한 관리 기법과 관련 API를 더 깊이 이해해야 합니다.

개발자 컨트롤 섹션에서는 탐색을 맞춤설정하여 PWA에 최적의 실행 환경을 제공하는 방법을 설명합니다.

새로운 기본 동작

사용자 환경설정에 맞추고 불편함을 줄이기 위해 Chrome에서는 링크 처리 방식을 표준화하고 있습니다. 이전에는 플랫폼마다 동작이 일관되지 않았습니다. 모바일 기기는 일반적으로 설치된 앱을 우선적으로 실행하는 반면, 데스크톱 브라우저는 앱이 링크를 처리할 수 있음을 알리기 전에 먼저 탭에서 링크를 엽니다.

탐색 캡처를 위한 새로운 통합 접근 방식을 사용하면 링크가 설치된 해당 PWA에서 자동으로 열립니다. 링크는 PWA가 설치되어 있지 않거나 사용자가 선택 해제한 경우에만 브라우저 탭으로 대체됩니다. 이 새로운 동작은 Windows, Mac, Linux용 Chrome 139부터 사용할 수 있으며, ChromeOS 지원은 향후 출시에서 제공될 예정입니다.

링크를 클릭하면 설치된 PWA가 선택되고, PWA가 없는 경우 브라우저 탭에서 타겟이 열립니다.
설치된 PWA 실행을 우선시하는 새로운 탐색 캡처 동작은 Chrome 139부터 사용할 수 있습니다.

탐색 캡처는 탐색 관리 프로세스의 일부입니다. 이 프로세스는 사용자의 초기 작업부터 브라우저의 결정, 개발자가 구성한 결과 동작까지 전체 흐름을 다룹니다.

  • 사용자 작업: 링크 클릭 또는 탭과 같은 상호작용이 포함됩니다.
  • 브라우저 결정: 탐색 캡처와 같은 기본 동작 등 브라우저에서 관리하는 작업과 결정을 포함합니다.
  • 개발자 컨트롤: 개발자가 특정 작업을 처리하는 방법을 브라우저에 지시할 수 있는 웹 API가 포함됩니다.

이러한 요소의 상호작용에 따라 PWA가 독립형 창에서 열리는지 아니면 브라우저 탭에서 열리는지가 결정됩니다.

탐색 관리는 사용자 작업, 브라우저 결정, 개발자 제어의 결과입니다.

기본적인 탐색 관리 사용 사례는 사용자가 브라우저의 다른 페이지에서 설치된 PWA로 연결되는 링크를 클릭하거나 탭하는 경우입니다. 다음 예에서는 Google Chat PWA를 설치한 사용자가 Google Calendar 초대에서 PWA 링크를 클릭하는 경우를 설명합니다.

사용자가 calendar.google.com에서 chat.google.com(PWA로 설치됨) 링크를 클릭합니다.

사용자의 액션

모든 사용자 작업은 이벤트 (예: 클릭 또는 탭), 이벤트가 발생하는 표면 (예: 웹페이지 또는 데스크톱 바로가기), 활성화되는 링크 유형 (예: HTTPS URL)의 세 가지 핵심 요소로 구성됩니다. 예를 들어 사용자가 calendar.google.com의 웹페이지에서 Google Chat PWA 범위 내에 있는 https://chat.google.com/meeting_room_id 링크를 클릭할 수 있습니다.

브라우저 결정

사용자가 이전 단계에서 클릭하는 등의 사용자 작업이 있으면 브라우저에서 탐색 캡처 프로세스를 실행하여 링크를 브라우저 탭에서 열지 아니면 설치된 PWA에서 열지 결정합니다. 다음 단계로 구성됩니다.

  1. 탐색이 캡처 가능한지 확인: 일반적으로 탐색이 새 프레임을 만들고 보조 탐색 컨텍스트에서 열리지 않으면 캡처 가능한 것으로 간주됩니다.
  2. 제어하는 PWA 식별: 탐색을 캡처할 수 있는 경우 브라우저는 URL을 '제어'하는 PWA (웹 앱 매니페스트에 정의된 범위 내에 속함)를 찾으려고 시도합니다.
  3. 사용자 환경설정 확인: 제어 PWA가 발견되면 브라우저가 사용자 환경설정을 확인합니다. 사용자가 앱 설정에서 선택 해제하지 않은 경우 PWA가 실행되고, 그렇지 않으면 링크가 새 브라우저 탭에서 열립니다.
  4. PWA 실행: 브라우저가 실행 처리 알고리즘을 사용하여 PWA를 실행합니다. 다음에서 설명하는 실행 핸들러 API를 사용하여 이를 제어할 수 있습니다.

다음 다이어그램은 이 프로세스를 요약한 것입니다.

이미지
탐색 캡처: 사용자가 작업을 실행할 때 브라우저 탭에서 링크를 열지 아니면 PWA를 실행할지 결정하기 위해 브라우저에서 실행하는 단계입니다.

개발자 컨트롤

탐색 프로세스는 주로 브라우저 기본값과 사용자 설정을 사용하지만 다양한 API를 사용하여 탐색의 특정 측면을 관리할 수 있습니다. 최근 탐색 캡처 업데이트로 인해 일부 오래된 웹 API가 더 관련성이 높아졌습니다.

Launch Handler API

이 API는 브라우저가 PWA를 실행하기로 결정할 때 작동하여 새 창이나 기존 창 등 실행 방식을 제어할 수 있습니다.

PWA는 기존 창에 포커스를 맞추거나 새 창을 열어 실행할 수 있습니다.
Launch Handler API: PWA가 실행되는 방식을 결정할 수 있습니다.

client_mode이라는 하위 필드가 포함된 웹 앱 매니페스트의 launch_handler 멤버를 통해 PWA가 실행되는 방식을 정의합니다. 이 하위 필드는 새 창 또는 기존 창을 사용해야 하는지, 탐색해야 하는지 여부를 결정합니다. client_mode에 허용되는 값은 다음과 같습니다.

  • focus-existing: 이미 독립형 모드로 실행 중인 PWA와 같은 기존 앱 창에서 링크를 처리합니다.
  • navigate-existing: 이 옵션에서는 웹 앱 창에서 가장 최근에 상호작용한 탐색 컨텍스트가 실행의 타겟 URL로 이동합니다.
  • navigate-new: 이 옵션을 사용하면 웹 앱 창에 새로운 탐색 컨텍스트가 생성되어 실행의 타겟 URL을 로드합니다.

launchQueue API를 사용하여 추가 매개변수를 제공하고 특수한 사례를 처리합니다. Launch Handler API는 Chrome 110부터 사용할 수 있지만 탐색 캡처 업데이트를 통해 훨씬 더 유용해집니다. 자세한 내용은 실행 핸들러 API 문서를 참고하세요.

기타 관련 API

앱의 구체적인 요구사항에 따라 실행 처리 외에도 다른 API가 이 프로세스에서 역할을 할 수 있습니다. 여기에는 웹 앱이 표준 http 및 https (예: mailto:과 같은 표준 프로토콜 또는 web+music과 같은 맞춤 프로토콜)을 넘어 URL 스킴을 처리하는 기능을 등록할 수 있는 URL 프로토콜 핸들러가 포함됩니다. 또한 웹 앱 범위 확장 프로그램 API (현재 개발 중)를 사용하면 하위 도메인을 비롯한 다른 출처의 링크를 캡처하도록 PWA의 범위를 확장하여 사용자가 연결된 출처의 링크를 클릭할 때 PWA를 실행할 수 있습니다. 이 도움말에서는 자세히 다루지 않지만 해당 링크를 확인하여 자세히 알아볼 수 있습니다.

마지막으로 Google Chat PWA를 이미 설치한 사용자가 Google Calendar 링크를 클릭하여 Google Chat 룸으로 이동하는 예를 통해 다양한 요소가 어떻게 함께 작동하는지 알아보세요.

탐색 캡처 전

다음 동영상에서 사용자는 Google Calendar 회의를 만들고 게스트 3명을 초대합니다. Calendar 앱은 모든 참석자가 포함된 Google Chat 링크를 자동으로 생성합니다. 사용자가 이 링크를 클릭하면 새 브라우저 탭에서 채팅방이 열립니다. 그러면 주소 표시줄의 아이콘이 해당 PWA가 설치되었음을 나타내지만 사용자가 수동으로 실행해야 합니다. 탐색 캡처 업데이트 전의 동작은 다음과 같습니다.

탐색 캡처 후

다음 동영상은 동일한 사용자 워크플로를 보여주지만 이제 새로운 탐색 캡처 동작이 적용됩니다. 이 버전에서는 Google Calendar에서 Google Chat 링크를 클릭하면 설치된 PWA에서 해당 채팅방이 바로 열립니다. 또한 Google Chat팀은 웹 앱 매니페스트에 launch_handler 속성을 추가하여 실행 처리를 구현했습니다. client_mode을 focus-existing로 설정하면 PWA의 기존 인스턴스가 이미 실행 중인 경우 링크가 해당 인스턴스에서 열립니다. 새 브라우저 탭을 열고 페이지 로드를 트리거하는 데 걸리는 지연 시간을 제거하면 효과적인 '사용자 상호작용 시간'이 설계상 더 빨라질 수 있습니다. 실제로 Google Chat은 새 앱을 실행할 필요성을 없애 탐색 지연 시간을 크게 개선했습니다.

결론 및 다음 단계

이 도움말에서는 Chrome 139부터 제공되는 새로운 기본 탐색 캡처 동작을 살펴보고 설치된 PWA 범위 내에서 사용자가 HTTPS 링크를 클릭하는 일반적인 사용 사례에 중점을 두었습니다. 자세한 내용과 사용 사례는 설치된 PWA로의 탐색 관리에서 확인할 수 있습니다. 다음 다이어그램은 사용자 이벤트, 표시 경로, 프로토콜을 비롯한 사용 사례의 전체 분류와 해당 결과를 보여줍니다.

도움말에 설명된 여러 단계
탐색 캡처 다이어그램 (전체 버전)

탐색 관리 기능은 앱의 진입점을 제어하므로 앱 UX에서 중요한 측면이지만 간과되는 경우가 많습니다. 이 도움말에 설명된 기능과 링크를 사용하면 PWA에서 최상의 앱과 같은 환경을 구현할 수 있습니다.