앱 바로가기를 사용하면 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
사용자의 생산성을 개선하고 주요 작업에 대한 재참여를 유도하기 위해 웹 플랫폼에서 이제 앱 바로가기를 지원합니다. 이를 통해 웹 개발자는 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
이 도움말에서는 앱 바로가기를 정의하는 방법을 설명합니다. 또한 관련 권장사항도 알아봅니다.
앱 바로가기 정보
앱 바로가기를 사용하면 사용자가 웹 앱 내에서 자주 실행되거나 권장되는 작업을 빠르게 시작할 수 있습니다. 앱 아이콘이 표시된 곳이라면 어디서나 이러한 작업에 쉽게 액세스할 수 있어 사용자의 생산성이 향상되고 웹 앱에 대한 사용자의 참여도가 높아집니다.
앱 바로가기 메뉴는 사용자 바탕화면의 작업 표시줄(Windows) 또는 도크 (macOS)에서 앱 아이콘을 마우스 오른쪽 버튼으로 클릭하거나 Android에서 앱의 런처 아이콘을 길게 터치하여 호출됩니다.
앱 바로가기 메뉴는 사용자의 데스크톱이나 휴대기기에 설치된 프로그레시브 웹 앱에만 표시됩니다. 설치 가능 요건에 관한 자세한 내용은 'PWA 알아보기' 모듈의 설치를 참고하세요.
각 앱 바로가기는 사용자 인텐트를 표현하며, 각 인텐트는 웹 앱의 범위 내 URL과 연결됩니다. 사용자가 앱 바로가기를 활성화하면 URL이 열립니다. 앱 바로가기의 예는 다음과 같습니다.
- 최상위 탐색 항목 (예: 홈, 타임라인, 최근 주문)
- 검색
- 데이터 입력 작업 (예: 이메일 또는 트윗 작성, 영수증 추가)
- 활동 (예: 가장 인기 있는 연락처와 채팅 시작)
웹 앱 매니페스트에서 앱 바로가기 정의
앱 바로가기는 웹 앱 매니페스트에서 선택적으로 정의됩니다. 이 JSON 파일은 웹 앱에 대한 정보와 웹 앱이 사용자의 데스크톱이나 휴대기기에 설치되었을 때 어떻게 동작해야 하는지를 브라우저에 알려줍니다. 구체적으로는 shortcuts 배열 멤버에서 선언됩니다. 다음은 잠재적인 웹 앱 매니페스트의 예입니다.
{
"name": "Player FM",
"start_url": "https://player.fm?utm_source=homescreen",
…
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "/play-later?utm_source=homescreen",
"icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
},
{
"name": "View Subscriptions",
"short_name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "/subscriptions?utm_source=homescreen",
"icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
}
]
}
shortcuts 배열의 각 구성원은 최소한 name와 url를 포함하는 사전입니다. 다른 구성원은 선택사항입니다.
name- 사용자에게 표시될 때 사람이 읽을 수 있는 앱 바로가기 라벨입니다.
short_name(선택사항)- 공간이 제한된 경우 사람이 읽을 수 있는 라벨입니다. 선택사항이지만 제공하는 것이 좋습니다.
description(선택사항)- 사람이 읽을 수 있는 앱 바로가기용 용도입니다. 이 문서 작성 당시에는 사용되지 않지만 향후 보조 기술에 노출될 수 있습니다.
url- 사용자가 앱 바로가기를 활성화할 때 열리는 URL입니다. 이 URL은 웹 앱 매니페스트 범위 내에 있어야 합니다. 상대 URL인 경우 기준 URL은 웹 앱 매니페스트의 URL입니다.
icons(선택사항)이미지 리소스 객체의 배열입니다. 각 객체에는
src및sizes속성이 포함되어야 합니다. 웹 앱 매니페스트 아이콘과 달리 이미지의type는 선택사항입니다. 이 문서 작성 당시에는 SVG 파일이 지원되지 않습니다. 대신 PNG를 사용하세요.완벽한 픽셀의 아이콘을 원하는 경우 48dp 단위로 아이콘을 제공하세요 (예: 36x36, 48x48, 72x72, 96x96, 144x144, 192x192픽셀 아이콘). 그 외의 경우에는 192x192픽셀 크기의 단일 아이콘을 사용하는 것이 좋습니다.
품질 측정을 위해 아이콘은 Android에서 기기의 이상적인 크기(48dp)의 절반 이상이어야 합니다. 예를 들어 xxhdpi 화면에 표시하려면 아이콘이 최소 72x72픽셀이어야 합니다. (이는 픽셀 단위의 dp 단위를 변환하기 위한 수식에서 파생되었습니다.)
앱 바로가기 테스트
앱 바로가기가 올바르게 설정되었는지 확인하려면 DevTools의 Application 패널에 있는 Manifest 창을 사용하세요.
이 창은 앱 바로가기를 비롯한 많은 매니페스트 속성의 사람이 읽을 수 있는 버전을 제공합니다. 모든 바로가기 아이콘(제공된 경우)이 제대로 로드되는지 쉽게 확인할 수 있습니다.
프로그레시브 웹 앱 업데이트는 하루에 한 번으로 제한되므로 일부 사용자는 앱 바로가기를 바로 사용할 수 없습니다. Chrome에서 웹 앱 매니페스트의 업데이트를 처리하는 방법을 자세히 알아보세요.
권장사항
우선순위에 따라 앱 바로가기 정렬
바로가기는 매니페스트에서 정의하는 순서대로 표시됩니다. 표시되는 앱 바로가기 수의 제한은 플랫폼에 따라 다르므로 우선순위에 따라 앱 바로가기를 정렬하는 것이 좋습니다. 예를 들어 Windows용 Chrome 및 Edge는 앱 바로가기 수를 10개로 제한하지만 Android용 Chrome은 3개만 표시합니다. Android 7용 Chrome 92 이전에는 4가 허용되었습니다. Chrome 92에서는 앱 단축키 슬롯 중 하나를 사용하여 사이트 설정에 바로가기를 추가했습니다.
고유한 앱 바로가기 이름 사용
앱 바로가기가 항상 표시되지는 않을 수 있으므로 아이콘을 사용하여 앱 바로가기를 구별해서는 안 됩니다. 예를 들어 macOS는 도크 바로가기 메뉴에서 아이콘을 지원하지 않습니다. 앱 바로가기마다 고유한 이름을 사용합니다.
앱 바로가기 사용량 측정
분석을 목적으로 start_url에서 하는 것처럼 앱 바로가기 url 항목에 주석을 달아야 합니다 (예: url:
"/my-shortcut?utm_source=homescreen").
브라우저 지원
앱 바로가기는 아래 나열된 플랫폼과 버전에서 사용할 수 있습니다.
신뢰할 수 있는 웹 활동 지원
신뢰할 수 있는 웹 활동을 사용하는 Android 앱을 빌드하는 데 권장되는 도구인 Bubblewrap은 웹 앱 매니페스트에서 앱 바로가기를 읽고 이에 상응하는 Android 앱의 구성을 자동으로 생성합니다. 앱 바로가기 아이콘은 필수이며 버블랩에서 최소 96x96픽셀이어야 합니다.
프로그레시브 웹 앱을 신뢰할 수 있는 웹 활동으로 쉽게 전환할 수 있는 유용한 도구인 PWABuilder는 몇 가지 주의사항과 함께 앱 바로가기를 지원합니다.
신뢰할 수 있는 웹 활동을 Android 애플리케이션에 수동으로 통합하는 개발자는 Android 앱 바로가기를 사용하여 동일한 동작을 구현할 수 있습니다.
샘플
유용한 링크
- MDN
- 사양
- 앱 바로가기 샘플 | 앱 바로가기 샘플 소스
- 깜박임 구성요소:
UI>Browser>WebAppInstalls