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가 사이트를 독립 앱으로 취급하게 함.

PWA Manifest 빌더

개발

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

—

이름Short name(홈 화면)

설명

Start URLScope

디스플레이 모드방향

테마 컬러

배경 컬러

Lang방향(Direction)카테고리

아이콘

아이콘 기본 경로

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`로 서빙. Lighthouse PWA 감사가 누락 필드 표시.

사용법

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

자주 묻는 질문

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가 사이트를 독립 앱으로 취급하게 함.

PWA Manifest 빌더

사용법

자주 묻는 질문

관련 도구

JWT 디코더

UUID 생성기

해시 생성기 (SHA)

URL 인코더 / 디코더

Base64 인코더 / 디코더

JSON 포맷터 & 검증기