본문으로 건너뛰기
AZ Tools

PWA Manifest 빌더

Progressive Web App용 유효 manifest.json 빌드 — 이름·아이콘·테마 컬러·디스플레이 모드·스코프·방향 — 매칭 HTML <link> 와 Apple 메타 태그 포함.

아이콘
manifest.json
{
  "name": "My App",
  "short_name": "MyApp",
  "description": "A progressive web app",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "productivity",
    "utilities"
  ],
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}
HTML head (link + Apple 메타)
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0ea5e9" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApp" />
<link rel="apple-touch-icon" href="/icons/icon-180.png" />

manifest.json은 Content-Type: application/manifest+json으로 제공하세요. 빠진 필드는 Chrome DevTools의 Application 패널에서 확인할 수 있습니다.

사용법

  1. name + short_name 설정(short_name은 홈 화면 표시 — 12자 미만 권장). start_url은 실행 시 열릴 위치.
  2. 디스플레이 모드 선택: standalone(브라우저 UI 없음, 권장)이 가장 흔함. fullscreen은 상태 바 숨김, minimal-ui는 얇은 브라우저 셸 유지.
  3. 아이콘 추가. 기본값은 Android(192/512)·적응형 아이콘용 maskable 변형 커버. JSON은 manifest.json에, HTML은 <head>에 복사.

자세한 설명

펼치기

PWA manifest는 브라우저와 OS에 웹 앱을 어떻게 설치하고 표시할지 알림: 실행 아이콘·스플래시 컬러·풀스크린 vs 브라우저 크롬·지원 방향·딥링크 스코프. 이 빌더는 실제로 필요한 필드로 스펙 준수 manifest.json 생성 — Android 안전 영역용 maskable 변형 포함 합리적 기본 아이콘 세트(192px·512px). 출력엔 <link rel="manifest"> 와 Apple 전용 apple-mobile-web-app-* 메타 태그도 포함 — Apple은 아직 완전한 manifest 지원 안 했고 크로스 플랫폼 설치 가능성엔 둘 다 필요. 전부 편집 가능; 입력하면 JSON 재생성.

자주 묻는 질문

Maskable 아이콘이란?

Android 적응형 아이콘은 시스템 정의 도형(원·스퀴클·둥근 사각형)으로 아이콘을 크롭. purpose: maskable 아이콘은 로고 주변에 안전 영역 패딩 포함 → 크롭이 가장자리 잘라먹지 않음. 192/512에서 로고 주변 ~20% 패딩으로 maskable 변형 생성.

manifest.json과 Apple 메타 태그 둘 다 필요?

iOS에서 홈 화면 추가 원한다면 yes. Apple은 부분 manifest 지원(theme_color·apple-touch-icon 통한 아이콘)하나 대부분 무시. apple-mobile-web-app-capable 메타가 실제로 iOS가 사이트를 독립 앱으로 취급하게 함.

매니페스트를 넣었는데 설치 안내가 안 뜬다. 뭐가 빠진 건가?

대개 셋 중 하나다. 페이지가 HTTPS로 제공되지 않거나, fetch 핸들러를 가진 서비스 워커가 등록돼 있지 않거나, 아이콘 세트에 충분히 큰 정사각형 아이콘이 없는 경우다. 브라우저는 자체 참여도 판단과 빈도 제한도 적용하므로, 기술적으로 문제없는 앱이 두 번째 방문까지 기다리기도 한다. 개발자 도구의 설치 진단은 어떤 조건이 걸렸는지 직접 알려주니 짐작보다 빠르다.

안드로이드에서 아이콘이 잘리는 이유는?

플랫폼이 maskable로 표시된 아이콘에 자기 마스크를 씌우기 때문이다. 기기에 따라 원, 스퀘어클, 둥근 사각형이고, 그 모양대로 잘라낸다. maskable 아이콘은 중요한 것을 가운데 안전 영역, 대략 중앙의 5분의 4 안에 두고 나머지는 여백으로 흘려야 한다. 두 용도를 함께 내보내라. 마스크를 씌우지 않는 곳을 위한 일반 아이콘과, 잘림을 전제로 디자인한 maskable 아이콘이다.

관련 도구

Favicon 생성기 (멀티 사이즈 PNG)

이미지 하나로 10개 사이즈 favicon PNG 생성(16·32·48·64·96·128·180·192·256·512) — HTML 스니펫까지.

파일

/.well-known/* URI 레퍼런스

IANA 등록 well-known URI 검색 카탈로그 — security.txt·openid-configuration·apple-app-site-association·acme-challenge 외 30+개, RFC 레퍼런스·사용 사례 포함.

네트워크

JWT 디코더

JWT의 헤더·클레임·만료를 즉시 확인하세요.

개발

Plist 뷰어 (바이너리·XML)

애플 속성 목록(plist)을 바이너리든 XML이든 열어 트리로 보고, JSON이나 XML plist로 변환합니다.

파일

JSON Patch 빌더 (RFC 6902)

source/target 쌍에서 RFC 6902 JSON Patch 생성, 또는 기존 patch를 문서에 적용. add·remove·replace·move·copy·test 작업 지원.

개발

JSON 포맷터 & 검증기

브라우저에서 바로 JSON을 포맷·정렬·압축·검증하세요.

개발