LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

웹 앱 매니페스트 생성기

자체 기획 도구찾는 도구가 없나요?

설치 가능한 웹 앱을 위한 manifest.webmanifest 생성

앱 이름, 시작 URL, 표시 모드, 테마 색상, 배경 색상, 아이콘 목록을 입력하면 사이트를 프로그레시브 웹 앱으로 설치할 수 있게 해주는 manifest.webmanifest JSON 파일을 바로 얻을 수 있습니다. 브라우저에서 로컬로 생성됩니다.

manifest.webmanifest
{
  "name": "LocalTools",
  "short_name": "LocalTools",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1f6f4a",
  "background_color": "#faf8f3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

웹 앱 매니페스트는 사이트가 설치되었을 때 브라우저가 어떻게 동작해야 하는지 알려주는 JSON 파일입니다: 홈 화면에 표시될 이름과 아이콘, 상태 표시줄 색상, 독립 창으로 열릴지 일반 브라우저 탭으로 열릴지, 시작 위치 등입니다. 이 파일이 없으면 "홈 화면에 추가" 기능이 제공되지 않거나, 앱 같은 경험 대신 단순한 북마크로 대체됩니다.

사용 방법

  1. 앱의 이름, 짧은 이름, 시작 URL을 입력하세요.
  2. 표시 모드, 테마 색상, 배경 색상을 선택하세요.
  3. 아이콘을 한 줄에 하나씩 경로와 크기로 나열하세요. 예: "/icon-192.png 192x192".
  4. JSON을 manifest.webmanifest 파일로 저장하고 페이지의 <head>에서 <link rel="manifest" href="/manifest.webmanifest">로 연결하세요.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

아이콘은 어떤 크기가 필요한가요?
최소한 192x192와 512x512 PNG면 대부분의 설치 안내와 앱 아이콘 용도를 충족합니다. 특정 플랫폼에서 더 선명한 아이콘을 원한다면 크기를 추가하세요.
theme_color와 background_color의 차이는 무엇인가요?
theme_color는 주소창이나 상태 표시줄 같은 앱 주변 브라우저 UI를 물들이고, background_color는 앱이 로드되어 실제 콘텐츠가 그려지기 전 잠깐 스플래시 화면 배경으로 표시됩니다.
PWA를 만들지 않아도 이게 필요한가요?
완전한 오프라인/서비스 워커 지원이 없어도, 매니페스트는 방문자가 사이트를 북마크하거나 홈 화면에 추가할 때 아이콘과 이름이 표시되는 방식을 개선해줍니다.

전체 도구로 돌아가기