앱 바로가기를 사용하면 사용자에게 자주 필요한 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
사용자의 생산성을 개선하고 주요 작업에 대한 재참여를 촉진하기 위해 이제 웹 플랫폼에서 앱 바로가기를 지원합니다. 이를 통해 웹 개발자는 사용자가 자주 필요로 하는 몇 가지 일반적인 작업에 빠르게 액세스할 수 있습니다.
이 도움말에서는 앱 바로가기를 정의하는 방법을 설명합니다. 또한 몇 가지 관련 권장사항도 배울 수 있습니다.
앱 바로가기 정보
앱 바로가기를 사용하면 사용자가 웹 앱 내에서 일반 작업이나 추천 작업을 빠르게 시작할 수 있습니다. 앱 아이콘이 표시되는 곳이라면 어디에서나 이러한 작업에 쉽게 액세스할 수 있으므로 사용자의 생산성이 향상되고 웹 앱 참여도가 높아집니다.
앱 바로가기 메뉴는 사용자 바탕화면의 작업 표시줄(Windows) 또는 도크 (macOS)에 있는 앱 아이콘을 마우스 오른쪽 버튼으로 클릭하거나 Android에서 앱의 런처 아이콘을 길게 터치하여 호출됩니다.
앱 바로가기 메뉴는 사용자의 데스크톱이나 휴대기기에 설치된 프로그레시브 웹 앱에서만 표시됩니다. 'PWA 알아보기' 모듈의 설치를 확인하여 설치 가능 요구사항을 알아보세요.
각 앱 바로가기는 사용자 인텐트를 나타내며, 각 인텐트는 웹 앱의 범위 내에 있는 URL과 연결됩니다. 사용자가 앱 바로가기를 활성화하면 이 URL이 열립니다. 앱 바로가기의 예는 다음과 같습니다.
- 최상위 탐색 항목 (예: 홈, 타임라인, 최근 주문)
- 검색
- 데이터 입력 작업 (예: 이메일 또는 트윗 작성, 영수증 추가)
- 활동 (예: 가장 인기 있는 연락처와 채팅 시작)
웹 앱 매니페스트에서 앱 바로가기 정의
앱 바로가기는 웹 앱 매니페스트에서 선택사항으로 정의됩니다. 이 JSON 파일은 웹 앱에 관한 정보와 웹 앱이 사용자의 데스크톱이나 휴대기기에 설치될 때 작동해야 하는 방식을 알려주는 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 앱의 구성을 자동으로 생성합니다. 앱 바로가기 아이콘은 필수이며 Bubblewrap에서 96x96픽셀 이상이어야 합니다.
프로그레시브 웹 앱을 신뢰할 수 있는 웹 활동으로 쉽게 전환할 수 있는 유용한 도구인 PWABuilder는 몇 가지 주의사항이 있는 앱 바로가기를 지원합니다.
신뢰할 수 있는 웹 활동을 Android 애플리케이션에 수동으로 통합하는 개발자의 경우 Android 앱 바로가기를 사용하여 동일한 동작을 구현할 수 있습니다.
샘플
유용한 링크
- MDN
- 사양
- 앱 바로가기 샘플 | 앱 바로가기 샘플 소스
- 깜박임 구성요소:
UI>Browser>WebAppInstalls