Manifest

#it #pwa #웹앱 #manifest #프론트엔드 #json #ffffff #1976d2 #2196f3

기본 정보

명칭: Web App Manifest
약칭: Manifest
분류: PWA 설정 파일
파일명: manifest.json
형식: JSON
주요 용도: 웹 애플리케이션의 설치 정보 및 실행 환경 정의
관련 주제: #Manifest #PWA #JSON #웹앱

개요

Web App Manifest는 PWA(Progressive Web App)의 이름, 아이콘, 시작 페이지, 테마 색상 등 앱의 기본 정보를 정의하는 JSON 파일이다.

브라우저는 Manifest 파일을 읽어 웹사이트를 앱처럼 설치(Home Screen 추가) 할 수 있도록 지원한다.

Manifest는 Service Worker와 함께 PWA의 핵심 요소 중 하나이다.

동작 구조

사용자

↓

브라우저

↓

manifest.json

↓

앱 정보 읽기

↓

설치 가능 여부 확인

↓

홈 화면 추가

↓

앱처럼 실행

주요 특징

앱 이름 설정
아이콘 지정
시작 URL 지정
실행 방식 설정
테마 색상 지정
배경 색상 지정
화면 방향 지정

기본 예제

{
  "name": "My Application",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1976d2",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

주요 속성

속성	설명
name	전체 앱 이름
short_name	짧은 이름
start_url	앱 실행 시작 주소
display	실행 방식
icons	앱 아이콘
background_color	시작 화면 배경색
theme_color	브라우저 테마 색상
orientation	화면 방향

name

설치된 앱의 전체 이름이다.

{
  "name": "Cloud ERP"
}

short_name

홈 화면에서 표시되는 짧은 이름이다.

{
  "short_name": "ERP"
}

start_url

앱 실행 시 처음 열리는 URL이다.

{
  "start_url": "/"
}

또는

{
  "start_url": "/dashboard"
}

display

앱 실행 방식을 지정한다.

값	설명
browser	일반 브라우저
standalone	앱처럼 실행
fullscreen	전체 화면
minimal-ui	최소한의 브라우저 UI

가장 많이 사용하는 값

{
  "display": "standalone"
}

icons

앱 아이콘을 정의한다.

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

background_color

스플래시 화면의 배경색이다.

{
  "background_color": "#ffffff"
}

theme_color

브라우저 및 상태 표시줄의 테마 색상이다.

{
  "theme_color": "#2196f3"
}

orientation

화면 방향을 지정한다.

{
  "orientation": "portrait"
}

대표 값

portrait
landscape
natural
any

scope

앱이 제어할 URL 범위를 지정한다.

{
  "scope": "/"
}

lang

기본 언어를 설정한다.

{
  "lang": "ko"
}

screenshots

앱 설치 화면에서 사용할 스크린샷이다.

{
  "screenshots": [
    {
      "src": "/screen1.png",
      "sizes": "1280x720"
    }
  ]
}

Manifest 등록

HTML에서 연결한다.

<link

rel="manifest"

href="/manifest.json">

브라우저가 자동으로 Manifest 파일을 읽는다.

PWA 구성 요소

HTML

↓

CSS

↓

JavaScript

↓

Manifest

+

Service Worker

↓

PWA

Manifest와 Service Worker가 함께 있어야 완전한 PWA 기능을 제공할 수 있다.

설치 조건

일반적으로 다음 조건이 필요하다.

HTTPS 적용
Manifest 존재
Service Worker 등록
적절한 아이콘 제공
유효한 start_url

대표 활용 분야

쇼핑몰
ERP
SaaS
메모 앱
뉴스 서비스
커뮤니티
관리자 페이지
프로젝트 관리 시스템

장점

앱 설치 가능
브랜드 아이덴티티 제공
앱과 유사한 사용자 경험
자동 실행 환경 설정
모바일 접근성 향상

단점

PWA에서만 활용 가능
브라우저 지원 범위 차이 존재
Service Worker 없이 일부 기능 제한

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

display: standalone 사용
192×192, 512×512 아이콘 제공
HTTPS 필수 적용
theme_color와 브랜드 컬러 통일
start_url은 로그인 여부 고려
다양한 해상도의 아이콘 제공
Lighthouse로 PWA 점검
scope 명확히 지정
lang 설정
앱 이름은 짧고 명확하게 작성

Manifest와 함께 사용하는 기술

출처

W3C Web App Manifest Specification
MDN Web Docs - Web App Manifest
Google web.dev PWA Documentation