웹 앱 매니페스트
manifest.json 파일로 PWA 메타데이터 정의하기
웹 앱 매니페스트은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
매니페스트의 역할
웹 앱 매니페스트는 브라우저에 페이지를 앱으로 설치하는 방법을 알려 주는 JSON 파일입니다. 사용할 이름, 표시할 아이콘, 실행할 URL, 적용할 색 구성, 렌더링할 표시 모드(standalone, fullscreen, browser)를 지정합니다.
매니페스트 연결하기
설치할 수 있어야 하는 모든 페이지의 head에서 다음과 같이 매니페스트를 참조하십시오: <link rel="manifest" href="/manifest.webmanifest">. 브라우저는 매니페스트를 한 번 가져와 캐시하며, 이후 페이지를 로드할 때 매니페스트의 업데이트를 반영합니다.
<link rel="manifest" href="/manifest.webmanifest">최소 필수 필드
브라우저에서 "앱 설치"를 제공하려면 매니페스트에 최소한 다음이 필요합니다: name(전체 이름), short_name(홈 화면 레이블, 약 12자), start_url, display(보통 "standalone"), 그리고 최소 192x192 및 512x512 PNG를 포함하는 icons 배열입니다.
{
"name": "Coddy Learn",
"short_name": "Coddy",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1f2937",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}start_url
설치된 앱 아이콘을 탭했을 때 실행되는 URL입니다. 홈 페이지를 가리키도록 /를 사용하는 경우가 많으며, 분석을 위해 쿼리 매개변수를 포함할 수도 있습니다. "start_url": "/?source=pwa"를 사용하면 설치된 세션을 브라우저 세션과 구분할 수 있습니다.
display 모드
display에는 "browser"(일반적인 페이지 UI), "minimal-ui"(일부 UI), "standalone"(UI 없음 — 앱처럼 보임), "fullscreen"(상태 표시줄 없음)을 지정할 수 있습니다. 일반적으로 PWA에는 standalone을 사용합니다.
아이콘과 마스크 가능 아이콘
Android에서 다른 홈 화면 아이콘과 어울리도록 아이콘을 마스킹할 수 있게 "maskable" 용도의 아이콘을 포함하십시오. { src: "/icon-mask.png", sizes: "192x192", purpose: "maskable" }처럼 지정합니다. 마스크 가능 아이콘에는 시스템이 잘라낼 때 사용할 안전 영역이 포함되어 있습니다.
theme_color 및 background_color
theme_color는 앱이 브라우저에서 실행될 때 주소 표시줄의 색조를 설정합니다. background_color는 페이지가 로드되기 전에 스플래시 화면의 배경으로 표시됩니다. 세련된 실행 경험을 위해 디자인 시스템의 기본 색상과 일치시키십시오.
orientation
"orientation": "portrait"를 지정하면 설치된 앱이 세로 방향으로 고정됩니다. "any", "landscape", "portrait-primary"도 사용할 수 있습니다. 대부분의 범용 PWA는 이 값을 지정하지 않고 기기가 방향을 결정하도록 둡니다.
설치 가능 조건
브라우저에 "설치"가 표시되려면 페이지가 HTTPS를 통해 제공되고, 가져오기 이벤트를 처리하는 service worker를 등록하며, 최소 필드를 갖춘 유효한 매니페스트를 연결해야 합니다. 또한 사용자가 페이지와 상호 작용했는지와 같은 참여도 기준도 충족해야 합니다.
매니페스트 업데이트
브라우저는 매니페스트를 캐시합니다. 수정 후 새로 고치려면 아이콘 URL을 변경하십시오(캐시 무효화 쿼리 매개변수를 사용해도 됩니다). 또는 기다리면 대부분의 브라우저가 주기적으로 다시 확인합니다. 강제 업데이트 API는 없으므로 사용자가 한동안 약간 오래된 매니페스트를 사용할 수 있다고 가정하고 설계하십시오.
매니페스트 테스트하기
Chrome DevTools의 Application 탭에는 구문 분석된 매니페스트, 계산된 값 및 유효성 검사 오류가 표시됩니다. Lighthouse PWA 감사는 각 설치 요구 사항을 확인하고 누락된 항목을 알려 줍니다. 개발 중에는 설치 가능 여부를 확인하기 위해 두 도구를 모두 사용하십시오.
지식 확인
웹 앱 매니페스트에서 display: "standalone" 값은 어떤 역할을 합니까?
요약
웹 앱 매니페스트(manifest.webmanifest)는 브라우저에 페이지를 앱으로 설치하는 방법을 알려 줍니다. 이름, short_name, start_url, display, theme_color, 아이콘(192 및 512, Android용 maskable 포함)을 지정합니다. <link rel="manifest">로 연결하고, 설치 가능성을 위해 HTTPS와 service worker를 사용하며, Chrome DevTools와 Lighthouse PWA 감사로 테스트하십시오.
자주 묻는 질문
“웹 앱 매니페스트” 강의는 무료인가요?
네 — “웹 앱 매니페스트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“웹 앱 매니페스트”에서 뭘 배우나요?
manifest.json 파일로 PWA 메타데이터 정의하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“웹 앱 매니페스트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.