harvis.dev를 앱으로 설치하기
harvis.dev는 웹 매니페스트를 제공하므로 브라우저가 다른 앱과 똑같이 설치할 수 있습니다. 전용 창과 독이나 홈 화면의 전용 아이콘까지. 앱스토어도, 설치 파일도, 권한도 없습니다.
설치하면 달라지는 것
전용 창
탭도 주소창도 없습니다. 업로더와 대시보드가 깔끔한 독립 창에서 열리고, 앱 전환기에도 자기 자리를 갖습니다.
한 번에 게시
독, 작업 표시줄, 홈 화면에 아이콘이 생깁니다. 열고 폴더를 끌어다 놓으면 창이 자리를 잡기도 전에 사이트가 올라갑니다.
내려받을 것 없음
지금 보고 있는 그 사이트입니다. 설치로 늘어나는 것은 아이콘과 창뿐, 번들도 스토어 계정도 승인해야 할 백그라운드 업데이트도 없습니다.
설치 방법
지금 이 글을 보고 있는 브라우저를 고르세요. 어떤 경로든 끝은 같습니다. harvis.dev가 네이티브 앱 옆에 놓입니다.
데스크톱 Chrome, Edge, Brave
- 01주소창 오른쪽 끝을 보세요. 아래 화살표가 있는 작은 모니터가 설치 아이콘입니다.
- 02아이콘이 없으면 브라우저 메뉴를 열고 ‘페이지를 앱으로 설치’를 선택하세요(Edge는 앱 → 이 사이트를 앱으로 설치).
- 03확인하면 harvis.dev가 전용 창으로 열리고 앱 목록에도 추가됩니다.
Android의 Chrome
- 01오른쪽 위 ⋮ 메뉴를 누릅니다.
- 02‘홈 화면에 추가’를 고른 다음 ‘설치’를 누릅니다.
- 03아이콘이 홈 화면에 생기고, 브라우저 화면 요소 없이 열립니다.
iPhone과 iPad의 Safari
- 01공유 버튼(위쪽 화살표가 있는 사각형)을 누릅니다.
- 02시트를 아래로 내려 ‘홈 화면에 추가’를 누르고 ‘추가’를 선택합니다.
- 03iOS도 같은 매니페스트를 읽지만 안내는 뜨지 않으므로 이 방법뿐입니다.
Mac의 Safari
- 01harvis.dev를 일반 탭에서 엽니다.
- 02메뉴 막대에서 파일 → Dock에 추가를 고르고 이름을 정한 뒤 추가를 클릭합니다.
- 03macOS Sonoma 이상이 필요합니다. 이전 Safari는 웹 앱을 설치하지 못합니다.
데스크톱 Firefox는 웹 앱 설치를 없앴기 때문에 북마크가 가장 가까운 대안입니다. Android용 Firefox 메뉴에는 여전히 ‘홈 화면에 추가’가 있습니다.
매니페스트에 담긴 것
설치 전체가 /site.webmanifest에서 제공되는 파일 하나로 결정됩니다. 브라우저는 여기서 앱 이름, 사용할 아이콘, 창이 열리는 방식을 읽습니다.
{
"name": "harvis.dev",
"short_name": "harvis.dev",
"start_url": "/",
"display": "standalone",
"background_color": "#13161a",
"theme_color": "#13161a",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}브라우저 요소를 없애는 것은 ‘standalone’ 필드이고, maskable 아이콘은 Android가 자기 모양으로 잘라내는 아이콘입니다.
내 사이트도 설치되게 만들기
harvis.dev에 올린 사이트도 똑같이 설치할 수 있습니다. index.html 옆에 manifest.json을 두고, head에서 연결하고, 192px과 512px 아이콘을 넣으면 준비 끝입니다.
<!-- index.html --> <link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#13161a">
브라우저는 설치를 제안하기 전에 HTTPS도 요구합니다. harvis.dev 주소는 모두 이미 HTTPS로 제공되므로 따로 설정할 것이 없습니다.