2025년 8월 17일한국어

웹 앱 매니페스트에 대한 포괄적인 이해를 통해 프로그레시브 웹 앱(PWA)의 잠재력을 최대한 발휘하세요. 최적의 사용자 경험과 검색 가능성을 위해 PWA를 구성하는 방법을 알아보세요.

웹 앱 매니페스트: 프로그레시브 웹 앱 구성을 위한 안내서

웹 앱 매니페스트는 웹 애플리케이션에 대한 정보를 브라우저와 운영 체제에 제공하는 JSON 파일입니다. 이 정보는 앱이 사용자의 기기에 설치될 때 사용되며, 프로그레시브 웹 앱(PWA)으로서 어떻게 보이고 작동하는지를 정의합니다. 웹사이트를 설치 가능한 앱과 같은 경험으로 변환하는 청사진이라고 생각하면 됩니다. 잘 구성된 매니페스트는 사용자 참여와 검색 가능성에 매우 중요합니다.

프로그레시브 웹 앱(PWA)이란 무엇인가요?

웹 앱 매니페스트에 대해 자세히 알아보기 전에 PWA가 무엇인지 다시 한번 살펴보겠습니다. PWA는 사용자에게 앱과 같은 경험을 제공하는 웹 애플리케이션입니다. PWA는 다음과 같습니다:

신뢰성: 서비스 워커 덕분에 즉시 로드되고 오프라인 또는 저품질 네트워크에서도 작동합니다.
빠른 속도: 부드러운 애니메이션과 끊김 없는 스크롤링으로 사용자 상호 작용에 빠르게 응답합니다.
참여 유도: 푸시 알림 및 홈 화면에 설치할 수 있는 기능과 같은 기능으로 몰입감 있는 사용자 경험을 제공합니다.

웹 앱 매니페스트의 역할

웹 앱 매니페스트는 PWA의 초석입니다. 브라우저가 다음을 수행하는 데 필요한 정보를 제공합니다:

PWA 설치: 사용자가 웹 앱을 기기에 설치하고 홈 화면이나 앱 실행기에 추가할 수 있도록 합니다.
PWA 올바르게 표시: 앱의 이름, 아이콘, 테마 색상 및 기타 시각적 측면을 정의합니다.
PWA 동작 제어: 앱이 시작되는 방식(예: 전체 화면 모드 또는 독립 실행형 창)과 운영 체제와 통합되는 방식을 지정합니다.

`manifest.json` 파일 만들기

웹 앱 매니페스트는 일반적으로 `manifest.json`이라는 JSON 파일입니다. 웹 애플리케이션의 루트 디렉토리에 배치해야 합니다. 다음은 기본 예시입니다:

            {
  "name": "My Awesome PWA",
  "short_name": "Awesome PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

각 속성을 자세히 살펴보겠습니다:

`name`

웹 애플리케이션의 전체 이름입니다. 이 이름은 앱 설치가 제안될 때 사용자에게 표시되며 앱 실행기에도 표시됩니다.

예시:

            "name": "Global News App"

`short_name`

앱의 이름의 짧은 버전으로, 홈 화면이나 앱 실행기와 같이 공간이 제한된 경우 사용됩니다. 간결하게 유지하세요.

예시:

            "short_name": "Global News"

`start_url`

앱이 시작될 때 로드해야 하는 URL입니다. 일반적으로 웹 애플리케이션의 홈페이지이지만 특정 랜딩 페이지일 수도 있습니다.

예시:

            "start_url": "/"

사용자가 PWA를 시작하는 방식을 추적하기 위해 쿼리 매개변수가 있는 URL을 사용할 수도 있습니다:

            "start_url": "/?utm_source=homescreen"

`display`

앱이 시작될 때 어떻게 표시되어야 하는지를 정의합니다. 몇 가지 옵션이 있습니다:

`standalone`: 앱은 주소 표시줄과 같은 브라우저 UI 요소 없이 자체 최상위 창으로 열립니다.
`fullscreen`: 앱은 상태 표시줄조차 숨기고 전체 화면을 차지합니다.
`minimal-ui`: `standalone`과 유사하지만 뒤로 가기 버튼 및 새로 고침 버튼과 같은 최소한의 브라우저 UI를 제공합니다.
`browser`: 앱은 일반 브라우저 탭 또는 창으로 열립니다.

권장 사항: `standalone`은 일반적으로 PWA에 선호되는 옵션입니다.

예시:

            "display": "standalone"

`background_color`

앱이 시작될 때 앱의 스플래시 화면 배경색입니다. 이는 앱 아이콘과 앱 콘텐츠 간의 원활한 전환을 제공하는 데 중요합니다.

예시:

            "background_color": "#ffffff"

`theme_color`

Android의 상태 표시줄과 같이 앱 UI를 스타일링하는 데 사용되는 테마 색상입니다. 이 색상은 앱의 브랜딩과 일치해야 합니다.

예시:

            "theme_color": "#000000"

`icons`

앱의 아이콘을 나타내는 객체 배열입니다. 다양한 장치 및 해상도에서 앱이 잘 보이도록 여러 크기의 아이콘을 제공해야 합니다.

각 아이콘의 속성:

`src`: 아이콘 이미지의 URL입니다.
`sizes`: 픽셀 단위의 아이콘 치수(예: "192x192")입니다.
`type`: 아이콘 이미지의 MIME 유형(예: "image/png")입니다.

권장 아이콘 크기:

48x48
72x72
96x96
144x144
192x192
512x512

예시:

            "icons": [
  {
    "src": "/icons/icon-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/icon-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]

추가 매니페스트 속성

위의 속성이 가장 일반적이지만 웹 앱 매니페스트는 PWA 구성을 위한 다른 많은 옵션을 지원합니다:

`id`

PWA의 고유 식별자입니다. 이름이 같은 여러 PWA가 있을 경우 충돌을 방지하는 데 중요합니다.

예시:

            "id": "com.example.myapp"

`scope`

앱의 탐색 범위를 정의합니다. 이는 웹사이트 내의 어떤 URL이 PWA의 일부로 간주되는지를 결정합니다. 사용자가 범위를 벗어난 곳으로 이동하면 앱은 일반 브라우저 탭에서 열립니다.

예시:

            "scope": "/app/"

이 예시에서는 `/app/`으로 시작하는 URL만 PWA의 일부로 간주됩니다.

`orientation`

앱의 선호 화면 방향을 지정합니다. 옵션에는 `portrait`, `landscape`, `any` 등이 있습니다.

예시:

            "orientation": "portrait"

`related_applications`

관련 네이티브 애플리케이션을 정의하는 객체 배열입니다. 이를 통해 PWA를 설치한 사용자에게 네이티브 앱을 홍보할 수 있습니다.

예시:

            "related_applications": [
  {
    "platform": "play",
    "id": "com.example.myapp"
  }
]

이 예시는 `com.example.myapp` ID를 가진 Google Play 스토어에 관련 네이티브 앱이 있음을 나타냅니다.

`prefer_related_applications`

사용자에게 PWA 대신 관련 네이티브 애플리케이션을 설치하도록 권장할지 여부를 나타내는 불리언 값입니다.

예시:

            "prefer_related_applications": true

`categories`

앱의 카테고리를 나타내는 문자열 배열입니다. 이를 통해 사용자가 앱 스토어 또는 검색 결과에서 앱을 찾는 데 도움이 될 수 있습니다.

예시:

            "categories": ["news", "information"]

`shortcuts`

사용자가 홈 화면의 앱 아이콘에서 액세스할 수 있는 바로가기 목록을 정의합니다. 이를 통해 사용자는 앱 내에서 자주 사용하는 작업을 빠르게 수행할 수 있습니다.

예시:

            "shortcuts": [
  {
    "name": "Latest News",
    "short_name": "News",
    "description": "Read the latest news articles",
    "url": "/news",
    "icons": [{
      "src": "/icons/news.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }
]

매니페스트를 웹 앱에 연결하기

`manifest.json` 파일을 만든 후에는 HTML의 `` 섹션에 `` 태그를 추가하여 웹 애플리케이션에 연결해야 합니다:

            <link rel="manifest" href="/manifest.json">

매니페스트 유효성 검사

매니페스트 파일이 올바르게 형식이 지정되었고 필요한 모든 속성을 포함하고 있는지 확인하기 위해 `manifest.json` 파일의 유효성을 검사하는 것이 중요합니다. 매니페스트 유효성을 검사하려면 JSONLint와 같은 온라인 도구나 Chrome 개발자 도구를 사용할 수 있습니다.

PWA 테스트

매니페스트를 만들고 연결한 후에는 다른 브라우저와 장치에서 PWA를 테스트하여 예상대로 작동하는지 확인해야 합니다. 매니페스트를 검사하고 문제를 진단하려면 Chrome 개발자 도구(Application -> Manifest)를 사용하십시오.

웹 앱 매니페스트 구성 모범 사례

웹 앱 매니페스트를 구성할 때 염두에 두어야 할 몇 가지 모범 사례는 다음과 같습니다:

모든 필수 속성 제공: `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color`, `icons`와 같은 필수 속성을 모두 포함했는지 확인하십시오.
적절한 아이콘 크기 사용: 다양한 장치 및 해상도를 지원하기 위해 여러 크기의 아이콘을 제공하십시오.
올바른 디스플레이 모드 선택: 앱의 사용자 경험에 가장 적합한 `display` 모드를 선택하십시오. `standalone`은 일반적으로 선호되는 옵션입니다.
매니페스트 유효성 검사: `manifest.json` 파일이 올바르게 형식이 지정되었는지 확인하기 위해 항상 유효성을 검사하십시오.
PWA 테스트: 다른 브라우저와 장치에서 PWA를 테스트하여 예상대로 작동하는지 확인하십시오.
SEO 최적화: 앱의 검색 가능성을 개선하기 위해 `name`, `short_name`, `description`에 관련 키워드를 사용하십시오.
현지화 고려: 앱이 전 세계 사용자를 대상으로 하는 경우 다른 언어에 대한 다른 이름, 설명 및 아이콘으로 매니페스트의 현지화된 버전을 제공하는 것을 고려하십시오.

잘 구성된 웹 앱 매니페스트 예시

다음은 인기 있는 PWA의 잘 구성된 웹 앱 매니페스트 몇 가지 예입니다:

Twitter Lite

            {
  "name": "Twitter Lite",
  "short_name": "Twitter",
  "icons": [
    {
      "src": "/static/icons/mstile-150x150.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/twitter-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1da1f2",
  "description": "Twitter Lite is a faster, data-friendly way to see what's happening in the world.",
  "orientation": "portrait"
}

Starbucks

            {
  "name": "Starbucks",
  "short_name": "Starbucks",
  "icons": [
    {
      "src": "/static/icons/starbucks-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/icons/starbucks-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f2f0eb",
  "theme_color": "#00704a",
  "description": "Order your favorite Starbucks drinks and food with the app.",
  "orientation": "portrait",
  "shortcuts": [
    {
      "name": "Order Now",
      "short_name": "Order",
      "description": "Start a new order",
      "url": "/order",
      "icons": [{
        "src": "/static/icons/order-icon.png",
        "sizes": "192x192",
        "type": "image/png"
      }]
    }
  ]
}

웹 앱 매니페스트의 미래

웹 앱 매니페스트는 진화하는 표준이며 시간이 지남에 따라 새로운 기능과 기능이 추가되고 있습니다. PWA가 최신 기술을 최대한 활용하도록 W3C의 최신 업데이트 및 권장 사항을 계속 주시하십시오.

결론

웹 앱 매니페스트는 모든 PWA의 필수 구성 요소입니다. 매니페스트를 올바르게 구성하면 원활하고 매력적인 사용자 경험을 제공하여 웹 앱을 네이티브 애플리케이션처럼 느끼게 할 수 있습니다. 이 가이드에서는 매니페스트 속성, 모범 사례 및 예시를 포함하여 웹 앱 매니페스트에 대한 포괄적인 개요를 제공했습니다. 이러한 지침을 따르면 PWA의 잠재력을 최대한 발휘하고 전 세계 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.

웹 앱 매니페스트의 힘을 활용하고 웹사이트를 설치 가능하고 앱과 같은 경험으로 변환하여 사용자를 기쁘게 하고 참여를 유도하십시오.