manifest.json 생성기이란?
Manifest.json Generator는 프로그레시브 웹 앱(PWA)에 필요한 완전한 웹 앱 매니페스트를 생성합니다. 앱 정보를 입력하면 필수 및 선택 필드가 올바르게 포맷된 manifest.json 파일을 바로 얻을 수 있습니다.
이름, 짧은 이름, 설명, start_url, scope, 표시 모드(standalone, fullscreen, minimal-ui, browser), 방향, 테마 색상, 배경 색상과 함께 크기·type·purpose를 가진 아이콘 항목을 원하는 만큼 설정합니다. 결과는 W3C Web App Manifest 사양을 따르므로 Chrome, Edge, Safari가 '홈 화면에 추가' 시 그대로 인식합니다.
사용 방법
- 앱의 기본 정보를 입력하세요: 이름, 짧은 이름, 설명, 테마 색상, 배경 색상.
- 디스플레이 모드(standalone, fullscreen, minimal-ui), 방향, 시작 URL, 범위를 설정하세요.
- 아이콘 항목과 크기를 추가한 후, 생성된 manifest.json 파일을 복사하거나 다운로드하세요.
사용 시기
- 기존 웹 프로젝트에 '앱 설치' 기능을 더해 OS 앱 서랍에 노출하고 싶을 때.
- 현장 직원에게 배포할 사내 PWA의 스플래시 색상과 아이콘을 맞춤화할 때.
- 기본 manifest가 없는 Next.js나 Vite 템플릿에 기초 manifest를 추가할 때.
결과
레시피 웹사이트를 PWA로 전환하려고 합니다. 이름을 '나의 레시피', 테마 색상을 브랜드 그린, 디스플레이 모드를 'standalone'으로 설정하고 프로젝트 루트에 배치할 매니페스트를 생성하세요.
자주 묻는 질문
- standalone과 minimal-ui 표시 모드는 어떻게 다른가요?
- standalone은 브라우저 UI를 완전히 숨겨 네이티브 앱처럼 보이게 합니다. minimal-ui는 상단에 작은 탐색 컨트롤(보통 뒤로·새로고침)을 남깁니다. fullscreen은 상태 표시줄까지 없애 게임에 어울립니다.
- 실제로 필요한 아이콘 크기는 무엇인가요?
- 최소 192×192와 512×512 PNG를 준비하세요. Chrome과 Edge가 홈 화면과 스플래시에 사용합니다. 구형 Windows 타일을 위해 144×144도 추가하고, `purpose: maskable`을 단 512×512 버전을 넣어야 Android가 디테일을 잃지 않고 잘라 사용합니다.
- name과 short_name이 둘 다 필요한 이유는요?
- `name`은 설치 대화상자와 앱 서랍에 나타나고, `short_name`은 홈 화면 아이콘 아래 약 12자 공간에 표시됩니다. short_name을 빼면 대부분의 휴대폰에서 name이 어색하게 잘립니다.
- manifest.json 파일은 어디에 두나요?
- 사이트 루트에 `manifest.json`(또는 `manifest.webmanifest`)으로 저장한 뒤 `<head>`에서 `<link rel='manifest' href='/manifest.json'>`로 연결하세요. 브라우저가 첫 페이지 로드 때 가져옵니다.
- manifest만 있으면 사이트가 설치 가능해지나요?
- 아니요. 브라우저는 `fetch` 이벤트를 처리하는 서비스 워커, HTTPS, 최소한 192×192 아이콘 하나도 함께 요구합니다. manifest는 메타데이터 계층이고, 서비스 워커가 오프라인 동작을 입증합니다.