{"id":36,"date":"2026-06-26T13:32:14","date_gmt":"2026-06-26T13:32:14","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=36"},"modified":"2026-06-26T13:32:15","modified_gmt":"2026-06-26T13:32:15","slug":"vibecoding-prompts","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=36","title":{"rendered":"\ub514\uc790\uc778\uc0dd\uc131\ud558\uae30"},"content":{"rendered":"<h2>1. \ud14d\uc2a4\ud2b8\ub97c \ub514\uc790\uc778\uc73c\ub85c \uc0dd\uc131\ud558\uae30<\/h2>\n<ol>\n<li>\ud504\ub86c\ud504\ud2b8\ub97c \ub514\uc790\uc778\uc73c\ub85c \ubcc0\ud658<\/li>\n<\/ol>\n<p><a href=\"https:\/\/stitch.withgoogle.com\/projects\/1625008545166513311\">\uc2a4\ud2f0\uce58<\/a><\/p>\n<pre><code class=\"language-txt\">\ud14c\uc77c\uc708\ub4dc v4\ub97c \uc0ac\uc6a9\ud558\uc5ec &#39;\uace0\ud50c\ub9ad\uc2a4&#39;\ub77c\ub294 \uc774\ub984\uc758 \uc778\ud130\ub137 \ub3d9\uc601\uc0c1 \uc11c\ube44\uc2a4 \uc6f9 \ud654\uba74\uc744 \uc81c\uc791\ud55c\ub2e4. \uc8fc\uc694 \uac15\uc870 \uc0c9\uc0c1\uc740 \ub178\ub780\uc0c9(yellow-500)\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \uc804\uccb4 \ubc30\uacbd\uc740 \uc5b4\ub450\uc6b4 \uc0c9\uc73c\ub85c \uc124\uc815\ud558\uc5ec \uc601\ud654\uc5d0 \uc9d1\uc911\ud560 \uc218 \uc788\uac8c \ud55c\ub2e4.\n\uc0c1\ub2e8 \uc601\uc5ed\uc5d0\ub294 \uace0\ud50c\ub9ad\uc2a4 \uc774\ub984(\ub178\ub780\uc0c9), \uac80\uc0c9\ucc3d, \uc0ac\uc6a9\uc790 \ub2e8\ucd94\ub97c \ubc30\uce58\ud55c\ub2e4. \uc911\uc559\uc758 \uac00\uc7a5 \ud070 \uc601\uc5ed\uc5d0\ub294 \uc8fc\uc694 \ucd94\ucc9c \uc601\ud654\uc758 \ud070 \uc0ac\uc9c4\uacfc \ud568\uaed8 \ub178\ub780\uc0c9\uc758 &#39;\uc7ac\uc0dd&#39; \ub2e8\ucd94\ub97c \ub208\uc5d0 \ub744\uac8c \ubc30\uce58\ud55c\ub2e4. \uadf8 \uc544\ub798\uc5d0\ub294 \uc7a5\ub974\ubcc4 \uc601\ud654 \ubaa9\ub85d\uc744 \uc5ec\ub7ec \uc904\ub85c \ub098\uc5f4\ud558\uba70, \uac01 \uc904\uc740 \uac00\ub85c\ub85c \ub118\uaca8\ubcfc \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e0\ub2e4. \uc601\ud654 \uc0ac\uc9c4 \uc704\uc5d0 \ub9c8\uc6b0\uc2a4\ub97c \uc62c\ub9ac\uba74 \ud14c\ub450\ub9ac\uac00 \ub178\ub780\uc0c9\uc73c\ub85c \uac15\uc870\ub418\ub294 \ud6a8\uacfc\ub97c \ucd94\uac00\ud55c\ub2e4.\n\ud544\uc218 \uc870\uac74: \ud14c\uc77c\uc708\ub4dc v4\ub97c \uc0ac\uc6a9 . \ud654\uba74\uc744 \uc0dd\uc131\ud55c \ud6c4 \ub098\uc5d0\uac8c \uc124\uba85\ud558\ub294 \ubaa8\ub4e0 \ub2f5\ubcc0\uacfc \ucf54\ub4dc \uc8fc\uc11d, \ud654\uba74 \ub0b4\uc758 \ubaa8\ub4e0 \uae00\uc790\ub294 \ubc18\ub4dc\uc2dc \ud55c\uad6d\uc5b4\ub85c \ucd9c\ub825\ud55c\ub2e4.\n\uae00\uaf34\uc740 https:\/\/cdn.jsdelivr.net\/npm\/pretendard-std@1.3.9\/subset.min.js \ub97c \uc0ac\uc6a9\ud55c\ub2e4\n<\/code><\/pre>\n<ol start=\"2\">\n<li>\uc0dd\uc131\ub41c \ub514\uc790\uc778\uc744 \ud53c\uadf8\ub9c8\ub85c \ubcf5\uc0ac\ud55c\ub2e4.<br \/>\n<img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-03-19_230659.png\" alt=\"alt\"><\/li>\n<\/ol>\n<h2>2. \ud53c\uadf8\ub9c8 \ub514\uc790\uc778\uc73c\ub85c \uc0dd\uc131\ud558\uae30<\/h2>\n<ol start=\"2\">\n<li>\ub514\uc790\uc778\uc744 json \uc73c\ub85c \ubcc0\ud658<br \/>\n<a href=\"https:\/\/coalacoding.com\/blog\/figma-01\">\ucc38\uc870\ud398\uc774\uc9c0<\/a><\/li>\n<\/ol>\n<pre><code>\ub2e4\uc74c \uc2a4\ud0dd\uc73c\ub85c React \uc571\uc744 \ub9cc\ub4e4\uc5b4\uc918:\n\n- \ube4c\ub4dc \ub3c4\uad6c: Vite (\ucd5c\uc2e0 \ubc84\uc804)\n- React (\ucd5c\uc2e0 \ubc84\uc804), JavaScript\ub9cc \uc0ac\uc6a9 \u2014 TypeScript \uae08\uc9c0\n- React-Compress \ub85c \uc124\uce58\n- Tailwind CSS v4 (\ucd5c\uc2e0 \ubc84\uc804) \uc2a4\ud0c0\uc77c\ub9c1\n- \ubaa8\ub4e0 \uc758\uc874\uc131\uc740 \ucd5c\uc2e0 \ubc84\uc804\uc73c\ub85c \uc124\uce58\n\n\ud504\ub85c\uc81d\ud2b8 \uc124\uc815 \uc870\uac74:\n- `npm create vite@latest` \uba85\ub839\uc5b4\ub85c react (JavaScript) \ud15c\ud50c\ub9bf \uc0ac\uc6a9\n- Tailwind CSS v4\ub294 `npm install tailwindcss @tailwindcss\/vite` \ub85c \uc124\uce58\n- vite.config.js\uc5d0 @tailwindcss\/vite \ud50c\ub7ec\uadf8\uc778\uc73c\ub85c Tailwind \uc124\uc815\n- CSS \ud30c\uc77c\uc5d0 `@import &quot;tailwindcss&quot;` \ub85c Tailwind \ubd88\ub7ec\uc624\uae30\n- tailwind.config.js \uc0ac\uc6a9 \uae08\uc9c0 (v4\ub294 CSS \uae30\ubc18 \uc124\uc815 \ubc29\uc2dd)\n- TypeScript \ud30c\uc77c \uae08\uc9c0 (.ts, .tsx, tsconfig \ubaa8\ub450 \uae08\uc9c0)\n\n\ud30c\uc77c \uad6c\uc870:\n- src\/main.jsx\n- src\/App.jsx\n- src\/index.css (@import &quot;tailwindcss&quot; \ud3ec\ud568)\n- vite.config.js\n\n\ub9cc\ub4e4\uc5b4\uc57c \ud560 \uc571: 1-structure.json  \ud30c\uc77c\uc744 \ucc38\uc870\n<\/code><\/pre>\n<h2>3. \ub9ac\ubbf9\uc2a4<\/h2>\n<ol>\n<li>\uc2a4\ud2f0\uce58 \ub514\uc790\uc778 \ub9ac\ubbf9\uc2a4\ud558\uae30<br \/>\n<img decoding=\"async\" src=\"https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/2026-03-24_162156.png\" alt=\"alt\"><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>1. \ud14d\uc2a4\ud2b8\ub97c \ub514\uc790\uc778\uc73c\ub85c \uc0dd\uc131\ud558\uae30 \ud504\ub86c\ud504\ud2b8\ub97c \ub514\uc790\uc778\uc73c\ub85c \ubcc0\ud658 \uc2a4\ud2f0\uce58 \ud14c\uc77c\uc708\ub4dc v4\ub97c \uc0ac\uc6a9\ud558\uc5ec &#39;\uace0\ud50c\ub9ad\uc2a4&#39;\ub77c\ub294 \uc774\ub984\uc758 \uc778\ud130\ub137 \ub3d9\uc601\uc0c1 \uc11c\ube44\uc2a4 \uc6f9 \ud654\uba74\uc744 \uc81c\uc791\ud55c\ub2e4. \uc8fc\uc694 \uac15\uc870 \uc0c9\uc0c1\uc740 \ub178\ub780\uc0c9(yellow-500)\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \uc804\uccb4 \ubc30\uacbd\uc740 \uc5b4\ub450\uc6b4 \uc0c9\uc73c\ub85c \uc124\uc815\ud558\uc5ec \uc601\ud654\uc5d0 \uc9d1\uc911\ud560 \uc218 \uc788\uac8c \ud55c\ub2e4. \uc0c1\ub2e8 \uc601\uc5ed\uc5d0\ub294 \uace0\ud50c\ub9ad\uc2a4 \uc774\ub984(\ub178\ub780\uc0c9), \uac80\uc0c9\ucc3d, \uc0ac\uc6a9\uc790 \ub2e8\ucd94\ub97c \ubc30\uce58\ud55c\ub2e4. \uc911\uc559\uc758 \uac00\uc7a5 \ud070 \uc601\uc5ed\uc5d0\ub294 \uc8fc\uc694 \ucd94\ucc9c \uc601\ud654\uc758 \ud070 \uc0ac\uc9c4\uacfc \ud568\uaed8 \ub178\ub780\uc0c9\uc758 &#39;\uc7ac\uc0dd&#39; \ub2e8\ucd94\ub97c &#8230; <a title=\"\ub514\uc790\uc778\uc0dd\uc131\ud558\uae30\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=36\" aria-label=\"\ub514\uc790\uc778\uc0dd\uc131\ud558\uae30\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-ai-tools"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=36"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/36\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/36\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}