웹 앱 매니페스트
이름, 아이콘, start_url, display, theme_color가 포함된 manifest.json을 작성하여 브라우저에서 홈 화면에 추가하라는 메시지를 표시하도록 합니다.
웹 앱 매니페스트은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
PWA란 무엇인가요
프로그레시브 웹 앱은 네이티브 앱과 같은 기능을 제공하는 웹사이트입니다. 홈 화면에 설치할 수 있고 오프라인에서도 작동하며 푸시 알림을 받을 수 있습니다. 핵심 요소는 웹 앱 매니페스트, 서비스 워커, HTTPS의 세 가지입니다.
매니페스트 파일
manifest.json(또는 .webmanifest)은 앱의 메타데이터를 설명하는 JSON 파일입니다. 브라우저는 이 파일을 읽어 '홈 화면에 추가' 기능을 활성화하고 앱을 네이티브 앱처럼 실행합니다.
기본 매니페스트
최소한의 매니페스트에는 이름, 아이콘, 시작 URL, 표시 모드가 포함됩니다.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}매니페스트 연결하기
HTML의 <head>에서 연결하세요.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">표시 모드
"display"는 앱 창의 브라우저 요소를 제어합니다. "standalone"(브라우저 UI 없이 앱처럼 표시), "fullscreen"(몰입형 화면으로 상태 표시줄 숨김), "minimal-ui"(일부 브라우저 제어 기능 표시), "browser"(일반 탭)로 설정할 수 있습니다.
아이콘 — 여러 크기
여러 크기의 아이콘을 제공하세요. 최신 Android에서는 192과 512 크기가 필요하고, Apple에서는 추가 크기가 필요합니다. 적응형 Android 아이콘에는 "purpose": "maskable"을 사용하세요.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Apple 전용 태그
iOS는 매니페스트를 완전히 지원하지 않습니다. iOS에서 홈 화면에 추가할 수 있도록 Apple 전용 메타 태그를 추가하세요.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">설치 프롬프트
조건(매니페스트 + 서비스 워커 + HTTPS + 사용자 참여)이 충족되면 브라우저에서 beforeinstallprompt 이벤트가 발생합니다. 이 이벤트를 나중에 처리한 뒤 자체 UI에서 실행할 수 있습니다.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}바로가기(앱 바로가기)
매니페스트에 바로가기를 선언하면 설치된 앱 아이콘을 길게 눌렀을 때 표시됩니다.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]카테고리와 스크린샷
categories와 screenshots를 추가하면 Chrome Android와 Windows에서 더 풍부한 설치 UI를 제공할 수 있습니다.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]매니페스트 테스트하기
DevTools → 애플리케이션 → 매니페스트를 여세요. Chrome은 파싱된 매니페스트 필드, 아이콘 미리 보기, 경고(아이콘 누락, 낮은 대비 등)를 표시합니다.
프레임워크로 쉽게 구현하기
Next.js에서는 public/에 manifest.webmanifest를 넣으세요. Nuxt에서는 @vite-pwa/nuxt 모듈을 설치하세요. Vite에서는 vite-plugin-pwa가 매니페스트와 서비스 워커를 자동으로 생성합니다.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};빠른 확인
웹 앱 매니페스트에서 설치된 PWA를 네이티브 앱처럼 브라우저 UI 없이 열리게 하는 display 값은 무엇인가요?
복습: 웹 앱 매니페스트
PWA 메타데이터를 설명하는 JSON 파일입니다. 이름, 짧은 이름, 시작 URL, 표시 모드, 테마 색상, 아이콘(여러 크기와 maskable)을 포함하세요. HTML에서 rel=manifest로 연결하세요. iOS에서는 Apple 전용 메타 태그가 필요합니다. 사용자 지정 설치 UI에는 beforeinstallprompt 이벤트를 사용하세요. 더 풍부한 설치 화면을 위해 바로가기와 스크린샷을 추가하세요. 프레임워크(Vite PWA, Next, Nuxt PWA)가 생성을 자동화합니다.
자주 묻는 질문
“웹 앱 매니페스트” 강의는 무료인가요?
네 — “웹 앱 매니페스트” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“웹 앱 매니페스트”에서 뭘 배우나요?
이름, 아이콘, start_url, display, theme_color가 포함된 manifest.json을 작성하여 브라우저에서 홈 화면에 추가하라는 메시지를 표시하도록 합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Frontend Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“웹 앱 매니페스트” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.