{"id":278,"date":"2025-12-17T14:30:00","date_gmt":"2025-12-17T05:30:00","guid":{"rendered":"https:\/\/hed-g.me\/?p=278"},"modified":"2025-11-25T14:36:28","modified_gmt":"2025-11-25T05:36:28","slug":"pwa-%ed%95%b5%ec%8b%ac-%ea%b5%ac%ec%84%b1%ec%9a%94%ec%86%8c-manifest","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=278","title":{"rendered":"PWA \ud575\uc2ec \uad6c\uc131\uc694\uc18c: Manifest"},"content":{"rendered":"\n<p><br>Manifest?<\/p>\n\n\n\n<p>PWA\uac00 \ub2e8\uc21c\ud55c \uc6f9\uc5d0\uc11c \uc571\uc774 \ub418\ub294 \uc804\ud658\uc810\uc740 manifest.json\uc5d0 \uc788\ub2e4.<\/p>\n\n\n\n<p>\uc774 \ud30c\uc77c\uc740 \ube0c\ub77c\uc6b0\uc800\uc5d0\uac8c \uc774 \uc6f9\uc774 \uc571\ucc98\ub7fc \uc124\uce58\ub420 \uc218 \uc788\ub2e4\ub294 \uc2e0\ud638\ub97c \uc900\ub2e4.<\/p>\n\n\n\n<p>\uc989, \uc6f9\uc758 <strong>\uba54\ud0c0\ub370\uc774\ud130(metadata)<\/strong> \uc5ed\ud560\uc744 \ud558\uba70<\/p>\n\n\n\n<p>\uc544\uc774\ucf58, \uc774\ub984, \uc2dc\uc791 \uacbd\ub85c, \ud45c\uc2dc \ubaa8\ub4dc(display mode) \ub4f1\uc744 \uc815\uc758\ud55c\ub2e4.<br><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Manifest \ud30c\uc77c\uc758 \uae30\ubcf8 \uad6c\uc870<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"Lux Store\",\n  \"short_name\": \"Lux\",\n  \"start_url\": \"\/\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#111111\",\n  \"icons\": &#91;\n    {\n      \"src\": \"\/icons\/icon-192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image\/png\"\n    },\n    {\n      \"src\": \"\/icons\/icon-512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image\/png\"\n    }\n  ]\n}\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\ud544\ub4dc<\/th><th>\uc5ed\ud560<\/th><\/tr><\/thead><tbody><tr><td>name<\/td><td>\uc571\uc758 \uc804\uccb4 \uc774\ub984, \ud648 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub420 \uc774\ub984<\/td><\/tr><tr><td>short_name<\/td><td>\uc544\uc774\ucf58 \uc544\ub798 \uc9e7\uc740 \uc774\ub984<\/td><\/tr><tr><td>start_url<\/td><td>\uc571 \uc2e4\ud589 \uc2dc \ucc98\uc74c \uc5f4\ub9b4 \uacbd\ub85c<\/td><\/tr><tr><td>display<\/td><td>\uc571 \ud45c\uc2dc \ubc29\uc2dd(standalone, fullscreen, minimal-ui, browser)<\/td><\/tr><tr><td>background_color<\/td><td>\uc2a4\ud50c\ub798\uc2dc \ud654\uba74\uc758 \ubc30\uacbd\uc0c9<\/td><\/tr><tr><td>theme_color<\/td><td>\ube0c\ub77c\uc6b0\uc800 \ud234\ubc14 \uc0c9\uc0c1<\/td><\/tr><tr><td>icons<\/td><td>\uc124\uce58 \uc544\uc774\ucf58 \uc774\ubbf8\uc9c0(192px, 512px \uc774\uc0c1 \uad8c\uc7a5)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Display \ubaa8\ub4dc\uac00 \ubc14\uafb8\ub294 UX<\/h3>\n\n\n\n<p>display \uc18d\uc131\uc740 \uc571\uc774 \uc2e4\ud589\ub420 \ub54c\uc758 \ud654\uba74 \ud615\ud0dc\ub97c \uacb0\uc815\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc77c\ubc18\uc801\uc73c\ub85c\ub294 PWA\ub294 standalone\uc744 \uc0ac\uc6a9,<\/p>\n\n\n\n<p>\uc0ac\uc6a9\uc790\ub294 \ud648 \ud654\uba74\uc5d0\uc11c \uc2e4\ud589\ud588\uc744 \ub54c \ube0c\ub77c\uc6b0\uc800 UI\uac00 \uc0ac\ub77c\uc9c0\uace0 \uc571 \uc804\uc6a9 \ucc3d\uc744 \uc624\ud508\ud55c \uacbd\ud5d8\uc744 \uc5bb\ub294\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>browser: \uc77c\ubc18 \uc6f9\ucc98\ub7fc \uc8fc\uc18c\ucc3d\u30fb\ud0ed \ub178\ucd9c<\/li>\n\n\n\n<li>minimal-ui: \uc8fc\uc18c\ucc3d\ub9cc \ucd5c\uc18c\ud654\ub41c \ube0c\ub77c\uc6b0\uc800<\/li>\n\n\n\n<li>standalone: \uc571\ucc98\ub7fc \ub3d9\uc791, \uc8fc\uc18c\ucc3d \uc5c6\uc74c<\/li>\n\n\n\n<li>fullscreen: \uc644\uc804\ud55c \uc804\uccb4 \ud654\uba74 \ubaa8\ub4dc<\/li>\n<\/ul>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add to Home Screen(A2HS) \ub3d9\uc791 \uacfc\uc815<\/h2>\n\n\n\n<p>\ube0c\ub77c\uc6b0\uc800\ub294 \ub2e4\uc74c \uc870\uac74\uc774 \ucda9\uc871\ub418\uba74 \uc774 \uc6f9\uc744 \uc124\uce58\ud560 \uc218 \uc788\ub2e4\ub294 \ud504\ub85c\uadf8\ub798\uc2dc\ube0c \uc2e0\ud638\ub97c \uac10\uc9c0\ud55c\ub2e4.<\/p>\n\n\n\n<p>\ub2e4\uc74c \uc870\uac74\uc774 \ub9cc\uc871\ub418\uba74 Chrome, Edge \ub4f1\uc740 \uc790\ub3d9\uc73c\ub85c A2HS \uac00\ub2a5 \uc0c1\ud0dc\ub85c \uc804\ud658\ud55c\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\uc124\uce58 \uc870\uac74\n<ol class=\"wp-block-list\">\n<li>HTTPS \ud658\uacbd\uc5d0\uc11c \uc81c\uacf5\ub420 \uac83<\/li>\n\n\n\n<li>\uc720\ud6a8\ud55c manifest.json\uc774 \uc874\uc7ac\ud560 \uac83<\/li>\n\n\n\n<li>Service Worker\uac00 \ub4f1\ub85d\ub418\uc5b4 \uc788\uc744 \uac83<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<p><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">beforeinstallprompt \uc774\ubca4\ud2b8\ub85c \uc81c\uc5b4\ud558\uae30<\/h2>\n\n\n\n<p>\ube0c\ub77c\uc6b0\uc800\uac00 \uc124\uce58 \uac00\ub2a5\ud55c \uc0c1\ud0dc\uac00 \ub418\uba74, beforeinstallprompt \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uac1c\ubc1c\uc790\ub294 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc5b8\uc81c, \uc5b4\ub5bb\uac8c \uc124\uce58 \uc548\ub0b4\ub97c \ub744\uc6b8\uc9c0 \uc124\uc815\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\uc608\ub97c \ub4e4\uc5b4, \ud398\uc774\uc9c0 \uc9c4\uc785 10\ucd08\ud6c4\uc5d0 \uc124\uce58 \ubc30\ub108 \ud45c\uc2dc\ud558\ub824\uace0 \ud560 \ub54c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let deferredPrompt;\n\nwindow.addEventListener('beforeinstallprompt', (e) =&gt; {\n  e.preventDefault();\n  deferredPrompt = e;\n\n  \/\/ \ucee4\uc2a4\ud140 \uc124\uce58 \ubc84\ud2bc \ub178\ucd9c\n  const installBtn = document.querySelector('#install-btn');\n  installBtn.style.display = 'block';\n\n  installBtn.addEventListener('click', async () =&gt; {\n    deferredPrompt.prompt();\n    const choice = await deferredPrompt.userChoice;\n    if (choice.outcome === 'accepted') {\n      console.log('\uc0ac\uc6a9\uc790\uac00 \uc124\uce58\ub97c \uc218\ub77d\ud588\uc2b5\ub2c8\ub2e4.');\n    }\n    deferredPrompt = null;\n  });\n});\n<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud648 \ud654\uba74\uc5d0 \ucd94\uac00\ub41c \ud6c4<\/h2>\n\n\n\n<p>\uc124\uce58\uac00 \uc644\ub8cc\ub418\uba74, \ube0c\ub77c\uc6b0\uc800\ub294 manifest\uc758 \uc815\ubcf4\ub97c \uae30\ubc18\uc73c\ub85c OS \uc218\uc900\uc758 \uc571 \uc544\uc774\ucf58\uc744 \uc0dd\uc131\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc124\uce58\ub41c PWA\ub294 \uc774\ud6c4 \ube0c\ub77c\uc6b0\uc800 \uce90\uc2dc \ubc0f \uc11c\ube44\uc2a4 \uc6cc\ucee4\ub97c \ud1b5\ud574 <strong>\uc624\ud504\ub77c\uc778\uc5d0\uc11c\ub3c4 \uc2e4\ud589 \uac00\ub2a5.<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Android: \ub7f0\ucc98 \uc544\uc774\ucf58\uc73c\ub85c \ud45c\uc2dc, \uc2e4\ud589 \uc2dc standalone \ucc3d\uc5d0\uc11c \uad6c\ub3d9<\/li>\n\n\n\n<li>iOS(Safari): \ud648 \ud654\uba74\uc5d0 \ucd94\uac00 \uc218\ub3d9 \ud2b8\ub9ac\uac70 \ubc29\uc2dd(\uc790\ub3d9 \ubc30\ub108 \uc5c6\uc74c)<\/li>\n\n\n\n<li>\ub370\uc2a4\ud06c\ud1b1 Chrome: \uc571 \uc124\uce58 \uc2dc OS \ud504\ub85c\uadf8\ub7a8 \ubaa9\ub85d\uc5d0\ub3c4 \ucd94\uac00\ub428<\/li>\n<\/ul>\n\n\n\n<p>\uc124\uce58 UX\ub97c CTA(Call To Action)\ub85c \ub514\uc790\uc778\ud558\uba74 \uc804\ud658\uc728\uc774 \ub192\uc544\uc9c4\ub2e4.<\/p>\n\n\n\n<p>e.g. \uc571\uc73c\ub85c \ub354 \ube60\ub974\uac8c \uc5f4\uae30<\/p>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">manifest \uac80\uc99d\uacfc \uc9c4\ub2e8\uc740 \uc5b4\ub5bb\uac8c \ud560\uae4c?<\/h2>\n\n\n\n<p>Chrome DevTools \u2192 Application \u2192 Manifest \ud0ed\uc5d0\uc11c \uc124\uce58 \uac00\ub2a5 \uc5ec\ubd80\ub97c \uc2e4\uc2dc\uac04\uc73c\ub85c \ud655\uc778 \uac00\ub2a5.<\/p>\n\n\n\n<p>[Lighthouse]\uc758 [Progressive Web App] \uce74\ud14c\uace0\ub9ac\ub97c \ud1b5\ud574 \ub2e4\uc74c \ud56d\ubaa9\uc744 \uc790\ub3d9\uc73c\ub85c \uc810\uac80\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>manifest \uc720\ud6a8\uc131<\/li>\n\n\n\n<li>\uc571 \uc124\uce58 \uac00\ub2a5 \uc5ec\ubd80<\/li>\n\n\n\n<li>\uc624\ud504\ub77c\uc778 \ub300\uc751 \uc5ec\ubd80<\/li>\n\n\n\n<li>HTTPS \ubcf4\uc548 \uc5f0\uacb0 \uc0c1\ud0dc<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Manifest? PWA\uac00 \ub2e8\uc21c\ud55c \uc6f9\uc5d0\uc11c \uc571\uc774 \ub418\ub294 \uc804\ud658\uc810\uc740 manifest.json\uc5d0 \uc788\ub2e4. \uc774 \ud30c\uc77c\uc740 \ube0c\ub77c\uc6b0\uc800\uc5d0\uac8c \uc774 \uc6f9\uc774 \uc571\ucc98\ub7fc \uc124\uce58\ub420 \uc218 \uc788\ub2e4\ub294 \uc2e0\ud638\ub97c \uc900\ub2e4. \uc989, \uc6f9\uc758 \uba54\ud0c0\ub370\uc774\ud130(metadata) \uc5ed\ud560\uc744 \ud558\uba70 \uc544\uc774\ucf58, \uc774\ub984, \uc2dc\uc791 \uacbd\ub85c, \ud45c\uc2dc \ubaa8\ub4dc(display mode) \ub4f1\uc744 \uc815\uc758\ud55c\ub2e4. Manifest \ud30c\uc77c\uc758 \uae30\ubcf8 \uad6c\uc870 \ud544\ub4dc \uc5ed\ud560 name \uc571\uc758 \uc804\uccb4 \uc774\ub984, \ud648 \ud654\uba74\uc5d0 \ud45c\uc2dc\ub420 \uc774\ub984 short_name \uc544\uc774\ucf58 \uc544\ub798 \uc9e7\uc740 \uc774\ub984 start_url \uc571 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[44],"tags":[202,200,195,201],"class_list":["post-278","post","type-post","status-publish","format-standard","hentry","category-frontend","tag-a2hs","tag-manifest","tag-pwa","tag-201"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=278"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/278\/revisions"}],"predecessor-version":[{"id":279,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/278\/revisions\/279"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}