웹 앱 매니페스트 아이콘: 192, 512, maskable 정리

업데이트: 2026-10-27 · AnyToolsKit

웹 앱 매니페스트(`site.webmanifest` 또는 `manifest.json`)는 사이트를 앱으로 설치했을 때의 모습을 안드로이드, 크롬, 엣지 등에 알려 줍니다. `icons` 배열에는 최소 192px과 512px PNG가 필요하며, maskable 버전도 있으면 가장 좋습니다.

최소 매니페스트

{
  "name": "내 사이트",
  "short_name": "내사이트",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#2f6fdf",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

모든 페이지에서 <link rel="manifest" href="/site.webmanifest">로 연결하세요. 파비콘 생성기가 사이트 이름과 색상을 넣어 이 파일을 만들어 줍니다.

왜 192와 512인가요?

• 192×192는 대부분의 기기에서 안드로이드 홈 화면과 앱 서랍에 쓰입니다.
• 512×512는 시작 화면, 설치 안내, PWA를 받는 앱 스토어에 쓰입니다. 크롬의 설치 조건에도 필요합니다.
• 브라우저가 필요에 따라 축소하므로 중간 크기(144, 256, 384)는 선택입니다.

maskable 아이콘과 안전 영역

안드로이드는 기기에 따라 원, 스퀘클, 둥근 사각형 등 다양한 모양으로 아이콘을 표시합니다. "purpose": "maskable" 아이콘은 시스템이 잘라 쓰는 꽉 찬 정사각형입니다. 아이콘 지름의 80%인 가운데 원(안전 영역)만 항상 보인다고 보장됩니다.

• 정사각형 전체를 배경색으로 채우세요 — 투명 금지.
• 로고는 가운데 80% 원 안에 두세요. 60–70%가 더 안전합니다.
• "any maskable" 아이콘 하나보다 일반(any)과 maskable 아이콘을 따로 제공하세요. 여백이 큰 maskable 아이콘은 잘리지 않는 곳에서 너무 작아 보입니다.

theme_color와 background_color

theme_color는 브라우저 툴바와 작업 전환기 색을 정합니다. HTML의 <meta name="theme-color">와 맞추세요. background_color는 페이지가 그려지기 전 시작 화면을 채우는 색으로, 보통 페이지 배경색을 씁니다.

매니페스트 테스트

1. 크롬 개발자 도구 → Application → Manifest를 엽니다. 위쪽에 오류와 경고가 표시되고, maskable 자르기를 포함한 아이콘 미리보기가 나옵니다.
2. Lighthouse 검사로 설치 가능 여부를 확인합니다.
3. 안드로이드 휴대폰에 사이트를 설치하고 홈 화면과 앱 전환기를 확인합니다.