diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 11287b4..9eda364 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -425,6 +425,104 @@ const productManagerSidebarEn = [ } ] +const productManagerSidebarKo = [ + { + text: '시작하기', + collapsed: false, + items: [ + { text: '학습 지도', link: '/ko-kr/stage-1/learning-map/' }, + { + text: 'AI 시대, 말할 수 있으면 코딩할 수 있다', + link: '/ko-kr/stage-1/ai-capabilities-through-games/' + } + ] + }, + { + text: '제품 프로토타입 역량', + collapsed: false, + items: [ + { + text: 'AI IDE 도구 익히기', + link: '/ko-kr/stage-1/introduction-to-ai-ide/' + }, + { + text: '좋은 아이디어 찾기', + link: '/ko-kr/stage-1/finding-great-idea/' + }, + { + text: '프로토타입 만들기', + link: '/ko-kr/stage-1/building-prototype/' + }, + { + text: 'AI 기능 통합하기', + link: '/ko-kr/stage-1/integrating-ai-capabilities/' + }, + { + text: '완성 프로젝트 실습', + link: '/ko-kr/stage-1/complete-project-practice/' + } + ] + }, + { + text: '부록: 비즈니스 사고', + collapsed: false, + items: [ + { + text: '제품 사고와 솔루션 설계', + link: '/ko-kr/stage-1/appendix-a-product-thinking/' + }, + { + text: 'AI 산업 적용 시나리오', + link: '/ko-kr/stage-1/appendix-industry-scenarios/' + }, + { + text: '소비자용 AI 제품 시나리오', + link: '/ko-kr/stage-1/appendix-c-consumer-scenarios/' + } + ] + }, + { + text: '부록: 사용자 조사와 검증', + collapsed: false, + items: [ + { + text: '아이디어는 어디서 찾을까', + link: '/ko-kr/stage-1/appendix-idea-sources/' + }, + { + text: 'Double Diamond', + link: '/ko-kr/stage-1/appendix-double-diamond/' + }, + { + text: 'Jobs to Be Done', + link: '/ko-kr/stage-1/appendix-jobs-to-be-done/' + }, + { + text: 'The Mom Test', + link: '/ko-kr/stage-1/appendix-mom-test/' + } + ] + }, + { + text: '부록: 기술 문제 해결', + collapsed: false, + items: [ + { + text: '오류가 났을 때 대처법', + link: '/ko-kr/stage-1/appendix-b-common-errors/' + }, + { + text: 'AI 코딩 도구로 스네이크 게임 만들기', + link: '/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial' + }, + { + text: '디자인 Agent와 코딩 Agent로 웹사이트 만들기', + link: '/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents' + } + ] + } +] + const stage2SidebarEn = [ { text: 'Frontend Development', @@ -2430,26 +2528,28 @@ Sitemap: ${siteUrl}/sitemap.xml { text: '홈', link: '/ko-kr/' }, { text: '초보자 & PM', - link: '/zh-cn/stage-1/learning-map/', - activeMatch: '/zh-cn/stage-1/' + link: '/ko-kr/stage-1/learning-map/', + activeMatch: '/ko-kr/stage-1/' }, { text: '풀스택 개발', - link: '/zh-cn/stage-2/frontend/lovart-assets/', - activeMatch: '/zh-cn/stage-2/' + link: '/ko-kr/stage-2/', + activeMatch: '/ko-kr/stage-2/' }, { text: '고급 개발', - link: '/zh-cn/stage-3/core-skills/basics/', - activeMatch: '/zh-cn/stage-3/' + link: '/ko-kr/stage-3/', + activeMatch: '/ko-kr/stage-3/' }, { text: '부록', - link: '/zh-cn/appendix/', - activeMatch: '/zh-cn/appendix/' + link: '/ko-kr/appendix/', + activeMatch: '/ko-kr/appendix/' } ], - sidebar: {} + sidebar: { + '/ko-kr/stage-1/': productManagerSidebarKo + } } }, 'es-es': { diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/1767350588191.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/1767350588191.png new file mode 100644 index 0000000..f016823 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/1767350588191.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image1.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image1.png new file mode 100644 index 0000000..21f5a14 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image1.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image10.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image10.png new file mode 100644 index 0000000..60ccec8 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image10.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image11.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image11.png new file mode 100644 index 0000000..c1fe454 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image11.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image12.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image12.png new file mode 100644 index 0000000..0a56016 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image12.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image13.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image13.png new file mode 100644 index 0000000..ef2691c Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image13.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image14.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image14.png new file mode 100644 index 0000000..9379976 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image14.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image15.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image15.png new file mode 100644 index 0000000..13a9cba Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image15.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image16.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image16.png new file mode 100644 index 0000000..d5db181 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image16.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image17.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image17.png new file mode 100644 index 0000000..98be30e Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image17.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image18.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image18.png new file mode 100644 index 0000000..9169fd6 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image18.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image19.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image19.png new file mode 100644 index 0000000..dc216d5 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image19.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image2.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image2.png new file mode 100644 index 0000000..c8d50c6 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image2.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image20.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image20.png new file mode 100644 index 0000000..1be765b Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image20.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image21.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image21.png new file mode 100644 index 0000000..c1c4e66 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image21.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image22.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image22.png new file mode 100644 index 0000000..93eb6c6 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image22.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image23.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image23.png new file mode 100644 index 0000000..cb76b84 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image23.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image24.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image24.png new file mode 100644 index 0000000..9ed0116 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image24.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image25.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image25.png new file mode 100644 index 0000000..5af8820 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image25.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image26.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image26.png new file mode 100644 index 0000000..231d290 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image26.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image27.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image27.png new file mode 100644 index 0000000..f6c5365 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image27.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image28.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image28.png new file mode 100644 index 0000000..efe9ab9 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image28.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image29.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image29.png new file mode 100644 index 0000000..fe0c010 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image29.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image3.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image3.png new file mode 100644 index 0000000..60d51d9 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image3.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image30.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image30.png new file mode 100644 index 0000000..f23613b Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image30.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image31.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image31.png new file mode 100644 index 0000000..2ac4d78 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image31.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image32.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image32.png new file mode 100644 index 0000000..1441cda Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image32.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image33.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image33.png new file mode 100644 index 0000000..335a340 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image33.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image34.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image34.png new file mode 100644 index 0000000..3040f8f Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image34.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image35.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image35.png new file mode 100644 index 0000000..84d9854 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image35.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image36.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image36.png new file mode 100644 index 0000000..8b19e62 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image36.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image37.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image37.png new file mode 100644 index 0000000..3ec264b Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image37.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image38.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image38.png new file mode 100644 index 0000000..09a77cc Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image38.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image39.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image39.png new file mode 100644 index 0000000..617dbf1 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image39.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image4.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image4.png new file mode 100644 index 0000000..a93e937 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image4.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image40.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image40.png new file mode 100644 index 0000000..123fa8b Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image40.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image41.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image41.png new file mode 100644 index 0000000..1d38f66 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image41.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image42.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image42.png new file mode 100644 index 0000000..7d85686 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image42.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image43.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image43.png new file mode 100644 index 0000000..2948f31 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image43.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image44.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image44.png new file mode 100644 index 0000000..967dc34 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image44.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image45.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image45.png new file mode 100644 index 0000000..b8e8bfc Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image45.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image46.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image46.png new file mode 100644 index 0000000..70e7fe6 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image46.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image47.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image47.png new file mode 100644 index 0000000..2f5c1db Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image47.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image48.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image48.png new file mode 100644 index 0000000..29869d6 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image48.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image49.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image49.png new file mode 100644 index 0000000..f6680a6 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image49.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image5.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image5.png new file mode 100644 index 0000000..f6aa135 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image5.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image50.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image50.png new file mode 100644 index 0000000..181a9e7 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image50.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image51.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image51.png new file mode 100644 index 0000000..127b12f Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image51.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image52.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image52.png new file mode 100644 index 0000000..097bb15 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image52.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image53.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image53.png new file mode 100644 index 0000000..734e921 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image53.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image54.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image54.png new file mode 100644 index 0000000..29ce6e4 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image54.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image55.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image55.png new file mode 100644 index 0000000..020ea78 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image55.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image56.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image56.png new file mode 100644 index 0000000..f1c8a5c Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image56.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image57.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image57.png new file mode 100644 index 0000000..10e3453 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image57.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image58.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image58.png new file mode 100644 index 0000000..3e68eb4 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image58.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image6.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image6.png new file mode 100644 index 0000000..87512cd Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image6.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image7.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image7.png new file mode 100644 index 0000000..08993ce Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image7.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image9.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image9.png new file mode 100644 index 0000000..475c538 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image9.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png new file mode 100644 index 0000000..2fd49ba Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png new file mode 100644 index 0000000..00a780b Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png new file mode 100644 index 0000000..05a67e6 Binary files /dev/null and b/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png differ diff --git a/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md b/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md new file mode 100644 index 0000000..a16306c --- /dev/null +++ b/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md @@ -0,0 +1,133 @@ +--- +title: 'AI 시대, 말할 수 있으면 코딩할 수 있다' +description: '작은 게임 예제를 통해 AI 코딩과 Vibe Coding의 기본 감각을 익히는 한국어 튜토리얼입니다.' +--- + +# AI 시대, 말할 수 있으면 코딩할 수 있다 + +처음부터 큰 제품을 만들려고 하면 어렵습니다. Stage 1의 첫 실습은 작고 분명한 예제에서 시작합니다. 예를 들어 "스네이크 게임을 만들어 줘"라고 말하고, AI가 만든 결과를 실행해 보며 수정하는 식입니다. + +이 장의 목표는 코딩 문법을 외우는 것이 아닙니다. **AI와 함께 만드는 흐름**을 익히는 것입니다. + +## 1. AI에게 맡길 수 있는 일 + +AI는 다음 작업을 잘 도와줍니다. + +- 간단한 웹 페이지나 게임 생성 +- HTML, CSS, JavaScript 코드 작성 +- 오류 메시지 해석 +- 기능 추가와 UI 수정 +- 코드를 더 읽기 쉽게 정리 +- 초보자에게 코드 설명 + +하지만 AI에게 모든 판단을 맡기면 결과가 흔들립니다. 사람이 해야 하는 일은 다음입니다. + +- 무엇을 만들지 정한다. +- 결과가 원하는 방향인지 판단한다. +- 너무 큰 요구를 작은 단계로 쪼갠다. +- 이상한 결과가 나오면 구체적으로 피드백한다. + +## 2. 첫 프롬프트 예시 + +작은 게임을 만들 때는 이렇게 말할 수 있습니다. + +```text +브라우저에서 바로 실행할 수 있는 스네이크 게임을 만들어 줘. +HTML, CSS, JavaScript를 한 파일에 넣어도 괜찮아. +방향키로 조작하고, 점수를 보여 주고, 게임 오버 후 다시 시작할 수 있게 해 줘. +초보자가 읽기 쉽게 코드에 중요한 부분만 짧게 주석을 달아 줘. +``` + +좋은 프롬프트는 길다고 좋은 것이 아닙니다. 다음 네 가지가 들어가면 충분합니다. + +- 실행 환경: 브라우저, Node.js, 모바일 등 +- 핵심 기능: 조작, 점수, 저장, 검색 등 +- 제약 조건: 한 파일, 외부 라이브러리 금지, 반응형 등 +- 원하는 품질: 초보자용, 깔끔한 UI, 주석 포함 등 + +## 3. 결과를 바로 믿지 말고 실행하기 + +AI가 코드를 주면 반드시 실행해 봐야 합니다. 실행 과정에서 자주 만나는 문제는 다음과 같습니다. + +| 현상 | 원인 | 대응 | +| --- | --- | --- | +| 화면이 비어 있음 | HTML 연결 문제, JS 오류 | 브라우저 콘솔 오류를 AI에게 붙여 넣기 | +| 버튼이 동작하지 않음 | 이벤트 연결 누락 | "이 버튼이 클릭되지 않는다"고 구체적으로 말하기 | +| 디자인이 어색함 | 요구사항이 추상적임 | 원하는 레이아웃, 색, 간격을 더 구체화 | +| 기능이 일부 빠짐 | 프롬프트가 너무 넓음 | 기능을 하나씩 추가 요청 | + +## 4. 수정 요청은 작게 한다 + +초보자가 가장 많이 하는 실수는 한 번에 너무 많은 수정을 요청하는 것입니다. + +좋은 수정 요청은 작습니다. + +```text +게임 오버 화면에 현재 점수와 최고 점수를 보여 줘. +다른 코드는 최대한 유지하고, 필요한 부분만 수정해 줘. +``` + +나쁜 수정 요청은 모호합니다. + +```text +더 좋게 만들어 줘. +``` + +AI는 "더 좋게"의 기준을 모릅니다. 초보자일수록 원하는 변화를 눈에 보이는 단위로 말하는 것이 중요합니다. + +## 5. AI 코딩에서 중요한 습관 + +### 5.1 한 번에 하나씩 바꾸기 + +기능을 하나 추가하고 실행합니다. 디자인을 하나 바꾸고 확인합니다. 그래야 문제가 생겼을 때 원인을 찾기 쉽습니다. + +### 5.2 오류 메시지를 그대로 보여 주기 + +오류 메시지는 AI에게 가장 좋은 단서입니다. "안 돼요"보다 "콘솔에 이런 오류가 나와요"가 훨씬 효과적입니다. + +```text +아래 오류가 나면서 게임이 시작되지 않아. +원인을 설명하고 수정 코드를 제안해 줘. + +[여기에 오류 메시지 붙여넣기] +``` + +### 5.3 코드 전체를 이해하려 하지 않아도 된다 + +처음에는 전체 코드를 완벽히 이해하지 않아도 됩니다. 대신 다음 정도를 구분하면 됩니다. + +- 화면 구조를 담당하는 HTML +- 디자인을 담당하는 CSS +- 동작을 담당하는 JavaScript + +## 6. 작은 게임에서 제품으로 넘어가기 + +게임 예제의 목적은 게임 개발자가 되는 것이 아닙니다. 이 과정에서 다음 감각을 얻는 것이 중요합니다. + +- 자연어 요구사항이 코드로 바뀌는 과정 +- 실행 결과를 보고 피드백하는 과정 +- 오류를 발견하고 수정하는 과정 +- 기능을 단계적으로 확장하는 과정 + +이 네 가지는 나중에 업무 도구, AI 챗봇, 이미지 생성 앱, 예약 시스템을 만들 때도 그대로 쓰입니다. + +## 과제 + +다음 중 하나를 골라 AI에게 만들어 달라고 요청해 보세요. + +1. 스네이크 게임 +2. 타자 연습 게임 +3. 간단한 할 일 목록 앱 +4. 랜덤 점심 메뉴 추천기 +5. 퀴즈 게임 + +완성 후에는 다음 세 가지를 추가로 요청해 보세요. + +- 화면을 더 보기 좋게 다듬기 +- 모바일에서도 잘 보이게 만들기 +- 오류나 빈 상태를 처리하기 + +## 다음으로 + +[AI IDE 도구 익히기](/ko-kr/stage-1/introduction-to-ai-ide/)에서 로컬 프로젝트를 열고 AI와 함께 개발하는 기본 흐름을 익힙니다. + diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image1.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image1.png new file mode 100644 index 0000000..dea9ce9 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image1.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image10.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image10.png new file mode 100644 index 0000000..ef73982 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image10.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image11.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image11.png new file mode 100644 index 0000000..a317bdb Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image11.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image12.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image12.png new file mode 100644 index 0000000..b1794f7 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image12.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image13.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image13.png new file mode 100644 index 0000000..860ebfb Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image13.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image14.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image14.png new file mode 100644 index 0000000..1a3fc26 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image14.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image15.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image15.png new file mode 100644 index 0000000..40afaa1 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image15.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image16.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image16.png new file mode 100644 index 0000000..14f4920 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image16.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image17.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image17.png new file mode 100644 index 0000000..cac7ae7 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image17.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image18.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image18.png new file mode 100644 index 0000000..1d26382 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image18.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image19.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image19.png new file mode 100644 index 0000000..0f04893 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image19.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image2.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image2.png new file mode 100644 index 0000000..7609bfe Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image2.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image20.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image20.png new file mode 100644 index 0000000..87e0552 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image20.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image21.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image21.png new file mode 100644 index 0000000..c667b28 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image21.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image3.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image3.png new file mode 100644 index 0000000..ba5ac0d Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image3.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image4.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image4.png new file mode 100644 index 0000000..6d15f44 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image4.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image5.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image5.png new file mode 100644 index 0000000..eed863b Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image5.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image6.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image6.png new file mode 100644 index 0000000..8c84032 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image6.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image7.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image7.png new file mode 100644 index 0000000..5cefa6a Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image7.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image8.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image8.png new file mode 100644 index 0000000..9b15b82 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image8.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image9.png b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image9.png new file mode 100644 index 0000000..ffb380a Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image9.png differ diff --git a/docs/ko-kr/stage-1/appendix-a-product-thinking/index.md b/docs/ko-kr/stage-1/appendix-a-product-thinking/index.md new file mode 100644 index 0000000..bf8fffc --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-a-product-thinking/index.md @@ -0,0 +1,145 @@ +--- +title: '제품 사고와 솔루션 설계' +description: 'AI로 프로토타입을 만들기 전에 문제, 사용자, 솔루션을 정리하는 제품 사고 기초를 설명합니다.' +--- + +# 제품 사고와 솔루션 설계 + +AI가 코드를 빠르게 만들어 줄수록 제품 사고는 더 중요해집니다. 구현이 쉬워졌다는 것은 잘못된 방향도 더 빨리 만들 수 있다는 뜻입니다. + +이 부록은 "무엇을 만들지"를 더 정확히 정하기 위한 기본 틀입니다. + +## 1. 제품은 기능이 아니라 문제 해결이다 + +초보자는 보통 기능에서 출발합니다. + +```text +로그인, 게시판, AI 챗봇, 결제, 관리자 페이지가 있는 앱 +``` + +하지만 사용자는 기능 목록을 사지 않습니다. 사용자는 자신의 문제를 더 빠르고 편하게 해결하고 싶어 합니다. + +제품 사고는 다음 질문에서 시작합니다. + +- 누가 문제를 겪고 있는가? +- 언제 그 문제가 발생하는가? +- 지금은 어떻게 해결하고 있는가? +- 기존 방식의 불편은 무엇인가? +- 내 솔루션이 줄여 주는 시간, 비용, 스트레스는 무엇인가? + +## 2. 문제 문장 만들기 + +좋은 문제 문장은 구체적입니다. + +```text +[사용자]는 [상황]에서 [목표]를 달성하려 하지만, +[현재 방식] 때문에 [불편]을 겪는다. +``` + +예시: + +```text +소규모 쇼핑몰 운영자는 새 상품을 등록할 때 매번 상세페이지 문구를 직접 써야 하지만, +마케팅 문구 작성 경험이 부족해 업로드 시간이 길어지고 상품의 장점이 잘 드러나지 않는다. +``` + +## 3. 솔루션 문장 만들기 + +솔루션은 문제 문장을 뒤집어서 만듭니다. + +```text +[사용자]가 [입력]을 넣으면, +[시스템]이 [처리]해서 +[결과]를 제공한다. +``` + +예시: + +```text +쇼핑몰 운영자가 상품명, 특징, 타깃 고객을 입력하면, +AI가 여러 톤의 상품 상세 문구와 SNS 홍보 문구를 생성한다. +``` + +## 4. MVP 범위 정하기 + +첫 버전에서 중요한 것은 "작지만 완결된 흐름"입니다. + +MVP에 넣을 것: + +- 사용자가 입력하는 핵심 정보 +- 결과를 생성하거나 보여 주는 핵심 화면 +- 결과를 복사하거나 저장하는 최소 행동 +- 실패/빈 상태 처리 + +MVP에서 빼도 되는 것: + +- 로그인 +- 권한 관리 +- 결제 +- 복잡한 관리자 페이지 +- 모든 플랫폼 지원 +- 과한 디자인 옵션 + +## 5. 기능 우선순위 + +기능을 세 가지로 나눕니다. + +| 구분 | 의미 | +| --- | --- | +| Must | 이 기능이 없으면 제품 가치가 성립하지 않음 | +| Should | 있으면 사용성이 좋아지지만 첫 버전에서 없어도 됨 | +| Later | 검증 후 추가해도 되는 기능 | + +예시: + +| 기능 | 우선순위 | +| --- | --- | +| 상품 정보 입력 | Must | +| 문구 생성 | Must | +| 결과 복사 | Must | +| 히스토리 저장 | Should | +| 팀 공유 | Later | +| 결제 | Later | + +## 6. 좋은 요구사항의 형태 + +AI에게 전달하기 좋은 요구사항은 다음처럼 씁니다. + +```text +목표: +대상 사용자: +핵심 사용 흐름: +첫 화면: +결과 화면: +필수 기능: +제외할 기능: +디자인 톤: +확인 기준: +``` + +이 형식으로 정리하면 AI IDE가 훨씬 안정적으로 결과를 만듭니다. + +## 7. 솔루션 검증 질문 + +만들기 전에 다음 질문에 답해 보세요. + +- 이 문제가 실제로 반복해서 발생하는가? +- 사용자가 지금 돈이나 시간을 쓰고 있는가? +- 내 솔루션이 기존 방식보다 명확히 쉬운가? +- 첫 버전을 하루나 이틀 안에 만들 수 있는가? +- 주변 사람에게 바로 보여 주고 반응을 받을 수 있는가? + +## 과제 + +내 아이디어를 아래 형식으로 정리하세요. + +```text +문제 문장: +솔루션 문장: +대상 사용자: +Must 기능 3개: +첫 화면 구성: +결과 화면 구성: +첫 번째 사용자 검증 질문 5개: +``` + diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image1.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image1.png new file mode 100644 index 0000000..b2c2184 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image1.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image10.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image10.png new file mode 100644 index 0000000..d3b6fba Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image10.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image11.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image11.png new file mode 100644 index 0000000..7be43ce Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image11.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image12.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image12.png new file mode 100644 index 0000000..bad2d07 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image12.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image13.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image13.png new file mode 100644 index 0000000..e8a263d Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image13.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image14.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image14.png new file mode 100644 index 0000000..31f377b Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image14.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image15.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image15.png new file mode 100644 index 0000000..33a1ecb Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image15.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image16.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image16.png new file mode 100644 index 0000000..7a15f9f Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image16.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image17.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image17.png new file mode 100644 index 0000000..6e3afae Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image17.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image18.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image18.png new file mode 100644 index 0000000..cf7da26 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image18.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image19.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image19.png new file mode 100644 index 0000000..5855787 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image19.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image2.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image2.png new file mode 100644 index 0000000..c2ebe40 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image2.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image20.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image20.png new file mode 100644 index 0000000..5723912 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image20.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image21.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image21.png new file mode 100644 index 0000000..9cdc651 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image21.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image22.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image22.png new file mode 100644 index 0000000..f0a1452 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image22.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image23.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image23.png new file mode 100644 index 0000000..b83fe56 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image23.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image24.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image24.png new file mode 100644 index 0000000..ae99dc5 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image24.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image25.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image25.png new file mode 100644 index 0000000..78ffa69 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image25.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image26.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image26.png new file mode 100644 index 0000000..17da89f Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image26.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image27.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image27.png new file mode 100644 index 0000000..74e2140 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image27.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image28.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image28.png new file mode 100644 index 0000000..8ecab49 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image28.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image29.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image29.png new file mode 100644 index 0000000..a99341e Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image29.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image3.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image3.png new file mode 100644 index 0000000..9619350 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image3.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image30.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image30.png new file mode 100644 index 0000000..3be46e2 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image30.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image31.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image31.png new file mode 100644 index 0000000..13e2a65 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image31.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image32.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image32.png new file mode 100644 index 0000000..0025fbf Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image32.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image33.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image33.png new file mode 100644 index 0000000..8f3e466 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image33.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image34.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image34.png new file mode 100644 index 0000000..34ac842 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image34.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image35.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image35.png new file mode 100644 index 0000000..94d62b0 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image35.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image4.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image4.png new file mode 100644 index 0000000..998f300 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image4.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image5.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image5.png new file mode 100644 index 0000000..3fdd5f3 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image5.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image6.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image6.png new file mode 100644 index 0000000..e813873 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image6.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image7.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image7.png new file mode 100644 index 0000000..9dd478c Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image7.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image8.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image8.png new file mode 100644 index 0000000..f4256b3 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image8.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image9.png b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image9.png new file mode 100644 index 0000000..6e98717 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image9.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md b/docs/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md new file mode 100644 index 0000000..5f86b7c --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md @@ -0,0 +1,74 @@ +--- +title: 'AI 코딩 도구로 스네이크 게임 만들기' +description: 'AI 코딩 도구를 사용해 작은 게임을 만들며 Vibe Coding 흐름을 익히는 한국어 실습입니다.' +--- + +# AI 코딩 도구로 스네이크 게임 만들기 + +이 실습의 목적은 게임 개발이 아니라 AI 코딩 도구의 기본 흐름을 익히는 것입니다. + +## 1. 목표 + +브라우저에서 실행되는 스네이크 게임을 만듭니다. + +필수 기능: + +- 방향키 조작 +- 먹이 생성 +- 점수 표시 +- 벽이나 자기 몸에 부딪히면 게임 오버 +- 다시 시작 버튼 + +## 2. 첫 요청 + +```text +브라우저에서 실행되는 스네이크 게임을 만들어 줘. +HTML, CSS, JavaScript를 사용하고, 초보자가 실행하기 쉽게 구성해 줘. + +필수 기능: +- 방향키로 조작 +- 점수 표시 +- 게임 오버 화면 +- 다시 시작 버튼 +- 보기 좋은 간단한 디자인 +``` + +## 3. 실행하기 + +AI가 단일 HTML 파일을 만들었다면 파일을 브라우저로 열어 확인합니다. Vite 프로젝트로 만들었다면 다음 명령을 사용합니다. + +```bash +npm install +npm run dev +``` + +## 4. 개선 요청 + +한 번에 많이 바꾸지 말고 작은 요청을 순서대로 합니다. + +```text +게임 시작 전 대기 화면을 추가해 줘. +스페이스바를 누르면 시작하게 해 줘. +``` + +```text +모바일에서도 플레이할 수 있게 화면 아래에 방향 버튼 4개를 추가해 줘. +``` + +```text +최고 점수를 localStorage에 저장해 줘. +``` + +## 5. 배운 점 + +이 실습에서 익혀야 할 것은 다음입니다. + +- 자연어 요구사항을 코드로 바꾸기 +- 실행 결과를 보고 피드백하기 +- 오류 메시지를 AI에게 전달하기 +- 기능을 작은 단위로 추가하기 + +## 다음으로 + +비슷한 방식으로 타자 게임, 퀴즈 게임, 할 일 목록 앱을 만들어 보세요. + diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image1.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image1.png new file mode 100644 index 0000000..6fdf2b2 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image1.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image10.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image10.png new file mode 100644 index 0000000..bd109a4 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image10.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image11.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image11.png new file mode 100644 index 0000000..9bae06a Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image11.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image12.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image12.png new file mode 100644 index 0000000..3d8eb2d Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image12.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image13.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image13.png new file mode 100644 index 0000000..820d58e Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image13.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image14.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image14.png new file mode 100644 index 0000000..c928ba4 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image14.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image15.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image15.png new file mode 100644 index 0000000..a6c6d68 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image15.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image16.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image16.png new file mode 100644 index 0000000..f8789b9 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image16.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image17.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image17.png new file mode 100644 index 0000000..ce8ea89 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image17.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image18.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image18.png new file mode 100644 index 0000000..d420e5a Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image18.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image19.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image19.png new file mode 100644 index 0000000..a18a5b0 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image19.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image2.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image2.png new file mode 100644 index 0000000..be00846 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image2.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image20.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image20.png new file mode 100644 index 0000000..9149778 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image20.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image21.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image21.png new file mode 100644 index 0000000..1b75609 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image21.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image22.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image22.png new file mode 100644 index 0000000..3d4184d Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image22.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image23.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image23.png new file mode 100644 index 0000000..fb0157f Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image23.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image3.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image3.png new file mode 100644 index 0000000..7397786 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image3.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image4.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image4.png new file mode 100644 index 0000000..ae557f0 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image4.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image5.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image5.png new file mode 100644 index 0000000..db89185 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image5.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image6.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image6.png new file mode 100644 index 0000000..c25f532 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image6.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image7.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image7.png new file mode 100644 index 0000000..c25f532 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image7.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image8.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image8.png new file mode 100644 index 0000000..54c6c3d Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image8.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image9.png b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image9.png new file mode 100644 index 0000000..4759fb0 Binary files /dev/null and b/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image9.png differ diff --git a/docs/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md b/docs/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md new file mode 100644 index 0000000..087d7c4 --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md @@ -0,0 +1,91 @@ +--- +title: '디자인 Agent와 코딩 Agent로 웹사이트 만들기' +description: '디자인 도구와 코딩 AI를 함께 사용해 작은 웹사이트를 만드는 흐름을 설명합니다.' +--- + +# 디자인 Agent와 코딩 Agent로 웹사이트 만들기 + +웹사이트를 만들 때는 디자인과 구현을 나누어 생각하면 편합니다. + +- 디자인 Agent: 로고, 레이아웃, 색상, 화면 구조를 잡는다. +- 코딩 Agent: HTML/CSS/JS 또는 프레임워크 코드로 구현한다. + +## 1. 웹사이트 목표 정하기 + +먼저 어떤 사이트인지 한 문장으로 정합니다. + +```text +개인 포트폴리오 사이트 +작은 카페 소개 사이트 +AI 도구 랜딩 페이지 +동아리 모집 페이지 +``` + +## 2. 디자인 요청 + +```text +작은 독립 카페의 랜딩 페이지 디자인을 제안해 줘. + +포함할 섹션: +- 첫 화면 hero +- 대표 메뉴 +- 공간 분위기 +- 위치와 영업시간 +- 예약/문의 버튼 + +분위기: +따뜻하지만 너무 복고풍은 아니고, 사진이 잘 보이는 깔끔한 스타일 +``` + +## 3. 사이트 구조 정리 + +디자인 결과를 보고 실제 구현 섹션을 정리합니다. + +```text +1. Hero +2. 메뉴 소개 +3. 공간 사진 +4. 방문 정보 +5. 문의 CTA +``` + +## 4. 코딩 Agent에 구현 요청 + +```text +아래 사이트 구조를 기준으로 반응형 랜딩 페이지를 만들어 줘. +HTML, CSS, JavaScript만 사용해도 돼. + +요구사항: +- 모바일에서도 자연스럽게 보이기 +- 첫 화면에서 브랜드와 CTA가 분명하게 보이기 +- 메뉴 카드는 3개 +- 위치 정보와 영업시간 포함 +- 과한 애니메이션은 넣지 않기 +``` + +## 5. 디자인과 코드 맞추기 + +처음 결과는 대개 완벽하지 않습니다. 다음처럼 구체적으로 수정합니다. + +```text +첫 화면이 너무 마케팅 배너처럼 보여. +카페 사진을 더 크게 쓰고, 텍스트는 왼쪽 아래에 자연스럽게 배치해 줘. +``` + +```text +모바일에서 메뉴 카드 텍스트가 좁아 보여. +카드는 한 줄에 하나씩 나오게 하고 간격을 늘려 줘. +``` + +## 6. 마무리 체크리스트 + +- 첫 화면에서 무엇을 소개하는 사이트인지 분명하다. +- 주요 CTA가 보인다. +- 모바일에서 레이아웃이 깨지지 않는다. +- 이미지가 너무 어둡거나 흐리지 않다. +- 텍스트가 카드나 버튼 밖으로 넘치지 않는다. + +## 과제 + +내가 만들고 싶은 웹사이트 주제를 하나 정하고, 디자인 요청과 코딩 요청을 각각 작성해 보세요. + diff --git a/docs/ko-kr/stage-1/appendix-b-common-errors/index.md b/docs/ko-kr/stage-1/appendix-b-common-errors/index.md new file mode 100644 index 0000000..dd25f0b --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-b-common-errors/index.md @@ -0,0 +1,120 @@ +--- +title: '오류가 났을 때 대처법' +description: 'AI IDE로 작업하다가 오류를 만났을 때 원인을 좁히고 AI에게 효과적으로 도움을 요청하는 방법입니다.' +--- + +# 오류가 났을 때 대처법 + +AI 코딩을 하다 보면 오류는 반드시 납니다. 오류가 난다는 것은 실패가 아니라, 수정할 단서가 생겼다는 뜻입니다. + +## 1. 먼저 어디서 오류가 났는지 구분하기 + +| 위치 | 예시 | +| --- | --- | +| 설치 오류 | `npm install` 실패 | +| 실행 오류 | `npm run dev` 실패 | +| 빌드 오류 | `npm run build` 실패 | +| 브라우저 오류 | 화면이 비거나 콘솔 에러 | +| 기능 오류 | 버튼 클릭, 입력, 결과 표시가 안 됨 | +| API 오류 | 401, 403, 429, 500 등 | + +오류 위치를 구분하면 AI에게 더 정확히 물어볼 수 있습니다. + +## 2. 오류 메시지를 그대로 복사하기 + +가장 좋은 프롬프트: + +```text +아래 오류가 발생했어. +원인을 초보자도 이해할 수 있게 설명하고, +가장 작은 수정으로 해결해 줘. + +실행한 명령: +npm run dev + +오류 메시지: +[여기에 전체 오류 붙여넣기] +``` + +## 3. 최근 변경을 알려 주기 + +오류는 대개 방금 바꾼 부분에서 생깁니다. + +```text +오류가 나기 직전에 ProductCard 컴포넌트와 App.vue를 수정했어. +이 두 파일을 중심으로 원인을 찾아 줘. +``` + +## 4. 한 번에 하나씩 고치기 + +오류가 여러 개 보이면 가장 위쪽 오류부터 해결합니다. 아래쪽 오류는 위쪽 오류 때문에 연쇄적으로 생긴 것일 수 있습니다. + +AI에게는 이렇게 요청합니다. + +```text +오류가 여러 개 나오는데, 가장 먼저 고쳐야 할 오류 하나만 골라서 설명해 줘. +그 오류를 고친 뒤 다시 실행해 볼게. +``` + +## 5. 자주 보는 오류 + +### 5.1 모듈을 찾을 수 없음 + +의존성이 설치되지 않았거나 import 경로가 틀린 경우입니다. + +대응: + +- `npm install` 실행 +- 파일 경로 확인 +- 대소문자 확인 + +### 5.2 환경변수 오류 + +API Key가 없거나 이름이 틀린 경우입니다. + +대응: + +- `.env` 파일 확인 +- 변수 이름 확인 +- 서버 재시작 + +### 5.3 빈 화면 + +JavaScript 오류로 앱이 렌더링되지 않는 경우가 많습니다. + +대응: + +- 브라우저 개발자 도구 Console 확인 +- 첫 번째 오류 복사 +- AI에게 오류와 관련 파일을 함께 보여 주기 + +### 5.4 API 인증 실패 + +401 또는 403은 보통 키, 권한, 요청 형식 문제입니다. + +대응: + +- API Key가 맞는지 확인 +- 결제/권한 활성화 확인 +- 공식 문서의 예시 요청과 비교 + +## 6. 되돌리는 것도 실력이다 + +수정이 너무 꼬이면 되돌리는 편이 빠릅니다. Git을 쓰고 있다면 변경 전 커밋을 만들어 두는 습관이 좋습니다. + +AI에게도 이렇게 말할 수 있습니다. + +```text +방금 수정 이후 문제가 생겼어. +변경된 파일을 기준으로 어떤 부분이 위험한지 설명하고, +가능하면 이전 구조를 유지하면서 최소 수정해 줘. +``` + +## 체크리스트 + +- 실행한 명령을 기록했다. +- 오류 메시지를 전체 복사했다. +- 최근 변경 파일을 확인했다. +- 첫 번째 오류부터 봤다. +- AI에게 "최소 수정"을 요청했다. + diff --git a/docs/ko-kr/stage-1/appendix-c-consumer-scenarios/index.md b/docs/ko-kr/stage-1/appendix-c-consumer-scenarios/index.md new file mode 100644 index 0000000..42fb076 --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-c-consumer-scenarios/index.md @@ -0,0 +1,110 @@ +--- +title: '소비자용 AI 제품 시나리오 참고' +description: 'C-end 소비자용 AI 제품 아이디어를 찾기 위한 한국어 시나리오 참고 목록입니다.' +--- + +# 소비자용 AI 제품 시나리오 참고 + +소비자용 제품은 업무용 제품보다 감정, 분위기, 습관, 재미가 중요합니다. 같은 기능이라도 사용자가 "나를 이해한다"고 느끼게 만드는 것이 핵심입니다. + +## 1. 라이프스타일 + +- 아침 루틴 추천기 +- 주말 집콕 계획 생성기 +- 혼자 사는 사람을 위한 생활 분위기 도우미 +- 수면 전 마음 정리 라디오 +- 생활 미감 아이디어 수집기 + +## 2. 감정 케어 + +- 감정 일기 해석 +- 불안 완화 호흡 코치 +- 이별 후 회복 동반자 +- 자신감 회복 질문 카드 +- 늦은 밤 대화 상대 + +## 3. 여가와 엔터테인먼트 + +- 인터랙티브 소설 공동 창작 +- 나만의 게임 NPC 만들기 +- 개인화 팟캐스트 아이디어 생성 +- 상황별 플레이리스트 추천 +- 방탈출/추리 게임 진행자 + +## 4. 개인 성장 + +- 습관 형성 코치 +- 매일 작은 성취 기록 +- 공부 계획 생성 +- 독서 노트 질문 생성 +- 장기 목표를 작은 행동으로 나누기 + +## 5. 관계와 소통 + +- 대화 주제 추천 +- 메시지 톤 다듬기 +- 데이트 코스 아이디어 +- 가족에게 보낼 안부 문구 +- 갈등 완화 대화 초안 + +## 6. 창작 + +- 글쓰기 아이디어 도우미 +- 사진 구도 추천 +- 브랜딩 무드보드 설명 생성 +- 음악 분위기 설명 +- 손글씨/다이어리 문구 추천 + +## 7. 여행 + +- 도시 산책 코스 추천 +- 혼자 여행 일정 짜기 +- 여행 감정 일기 생성 +- 목적지 분위기 미리보기 +- 여행 사진 촬영 아이디어 + +## 8. 건강과 생활 관리 + +- 운동 루틴 동기부여 +- 냉장고 재료 기반 식단 추천 +- 수면 환경 체크리스트 +- 자기 돌봄 리마인더 +- 스트레스 기록 요약 + +## 9. 금융 습관 + +주의: 투자 판단을 대신하는 제품은 피해야 합니다. 초보자 프로젝트에서는 습관 기록과 교육 보조가 적합합니다. + +- 소비 감정 기록 +- 저축 목표 시각화 +- 금융 용어 쉽게 설명 +- 지출 회고 질문 생성 + +## 10. 소비자 제품 설계 원칙 + +### 10.1 기능보다 감정 + +소비자 제품은 "무엇을 해 주는가"뿐 아니라 "어떤 기분을 주는가"가 중요합니다. + +### 10.2 작게 자주 쓰게 만들기 + +처음부터 큰 플랫폼보다 하루 1분, 매주 1회처럼 반복 사용되는 작은 행동이 좋습니다. + +### 10.3 사용자가 더 나은 자신을 느끼게 하기 + +좋은 소비자용 AI 제품은 사용자를 대신하지 않습니다. 사용자가 더 잘 선택하고 표현하고 정리하도록 돕습니다. + +## 과제 + +소비자용 아이디어 하나를 골라 다음 형식으로 정리하세요. + +```text +사용자: +상황: +느끼는 감정: +지금의 대안: +AI가 줄 수 있는 도움: +첫 화면: +결과 화면: +``` + diff --git a/docs/ko-kr/stage-1/appendix-consumer-scenarios/index.md b/docs/ko-kr/stage-1/appendix-consumer-scenarios/index.md new file mode 100644 index 0000000..bc817dc --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-consumer-scenarios/index.md @@ -0,0 +1,11 @@ +--- +title: '소비자용 AI 제품 시나리오 참고' +description: '소비자용 AI 제품 아이디어 참고 문서입니다.' +--- + +# 소비자용 AI 제품 시나리오 참고 + +이 문서는 기존 경로 호환을 위한 페이지입니다. 한국어 Stage 1에서는 아래 문서를 기준으로 사용합니다. + +[소비자용 AI 제품 시나리오 참고로 이동하기](/ko-kr/stage-1/appendix-c-consumer-scenarios/) + diff --git a/docs/ko-kr/stage-1/appendix-double-diamond/index.md b/docs/ko-kr/stage-1/appendix-double-diamond/index.md new file mode 100644 index 0000000..0041ba4 --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-double-diamond/index.md @@ -0,0 +1,84 @@ +--- +title: 'Double Diamond: 올바른 문제를 찾고 제대로 해결하기' +description: '제품 기획에서 자주 쓰는 Double Diamond 모델을 AI 프로토타입 작업에 적용하는 방법입니다.' +--- + +# Double Diamond: 올바른 문제를 찾고 제대로 해결하기 + +Double Diamond는 제품 문제를 다룰 때 유용한 사고 모델입니다. + +핵심은 두 번 넓히고 두 번 좁히는 것입니다. + +1. 문제를 넓게 탐색한다. +2. 진짜 풀 문제를 좁힌다. +3. 해결책을 넓게 탐색한다. +4. 첫 구현안을 좁힌다. + +## 1. Discover: 문제 넓히기 + +처음부터 솔루션을 정하지 않습니다. 사용자의 상황과 불편을 넓게 수집합니다. + +질문 예시: + +- 언제 이 문제가 생기나요? +- 지금은 어떻게 해결하나요? +- 가장 귀찮은 부분은 어디인가요? +- 이 문제 때문에 잃는 시간이나 비용은 무엇인가요? +- 비슷한 문제가 또 있나요? + +## 2. Define: 문제 좁히기 + +수집한 내용을 바탕으로 첫 버전에서 풀 문제를 하나로 좁힙니다. + +좋은 문제 정의: + +```text +온라인 강의를 준비하는 1인 강사는 매주 강의 내용을 퀴즈로 바꿔야 하지만, +문항과 해설을 만드는 데 시간이 많이 걸린다. +``` + +나쁜 문제 정의: + +```text +교육을 혁신한다. +``` + +## 3. Develop: 해결책 넓히기 + +하나의 문제에 대해 여러 해결책을 생각합니다. + +- 퀴즈 자동 생성기 +- 강의 요약 도구 +- 수강생 질문 분류 도구 +- 복습 카드 생성기 +- 시험지 템플릿 생성기 + +AI에게도 여러 안을 요청합니다. + +```text +아래 문제를 해결할 수 있는 제품 아이디어를 10개 제안해 줘. +각 아이디어는 첫 버전으로 만들 수 있을 만큼 작아야 해. +``` + +## 4. Deliver: 첫 구현안 좁히기 + +첫 구현은 가장 작고 검증 가능한 형태로 좁힙니다. + +선택 기준: + +- 하루나 이틀 안에 만들 수 있는가? +- 입력과 출력이 명확한가? +- 사용자가 결과를 바로 평가할 수 있는가? +- AI 기능 하나로 가치가 만들어지는가? + +## 과제 + +내 아이디어를 Double Diamond로 정리하세요. + +```text +Discover: 관찰한 문제 5개 +Define: 이번에 풀 문제 1개 +Develop: 가능한 솔루션 5개 +Deliver: 첫 프로토타입 범위 1개 +``` + diff --git a/docs/ko-kr/stage-1/appendix-idea-sources/index.md b/docs/ko-kr/stage-1/appendix-idea-sources/index.md new file mode 100644 index 0000000..2408ad1 --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-idea-sources/index.md @@ -0,0 +1,84 @@ +--- +title: '아이디어는 어디서 찾을까' +description: '초보자가 AI 제품 아이디어를 찾을 때 참고하기 좋은 출처와 조사 방법을 설명합니다.' +--- + +# 아이디어는 어디서 찾을까 + +아이디어가 떠오르지 않을 때는 머릿속에서 억지로 짜내기보다 이미 사람들이 돈과 시간을 쓰는 곳을 관찰하는 편이 좋습니다. + +## 1. 이미 존재하는 앱 보기 + +앱스토어, Product Hunt, Chrome Web Store, Notion 템플릿 마켓, SaaS 갤러리 등을 보면 사람들이 이미 어떤 문제를 해결하려 하는지 알 수 있습니다. + +볼 때는 기능만 보지 말고 다음을 함께 봅니다. + +- 누가 쓰는 앱인가? +- 어떤 상황에서 쓰는가? +- 리뷰에서 반복되는 불만은 무엇인가? +- 너무 복잡해서 더 작은 버전으로 만들 수 있는가? +- AI를 넣으면 시간이 줄어드는 부분은 어디인가? + +## 2. 사람들이 돈을 쓰는 곳 보기 + +다음은 좋은 단서입니다. + +- 유료 템플릿 +- 외주 서비스 +- 강의 +- 컨설팅 +- 반복 업무 대행 + +사람들이 돈을 쓴다는 것은 문제가 실제로 존재할 가능성이 높다는 뜻입니다. + +## 3. 사람들이 불평하는 곳 보기 + +커뮤니티, 리뷰, 댓글, Q&A 사이트에서 반복되는 불평을 찾습니다. + +좋은 불평은 제품 아이디어의 씨앗입니다. + +```text +매번 직접 정리하기 귀찮다. +어디서부터 시작해야 할지 모르겠다. +예시는 많은데 내 상황에 맞게 바꾸기 어렵다. +여러 도구를 왔다 갔다 해야 한다. +``` + +## 4. 반복 수작업 보기 + +AI가 잘 도와주는 영역은 반복 수작업입니다. + +- 복사해서 붙여넣기 +- 형식 맞추기 +- 요약하기 +- 분류하기 +- 문장 다듬기 +- 초안 만들기 + +반복 수작업을 찾으면 첫 제품 범위가 자연스럽게 작아집니다. + +## 5. AI에게 아이디어 조사를 시키기 + +```text +나는 AI IDE로 첫 프로토타입을 만들고 싶은 초보자야. +대상은 [사용자군]이고, 관심 분야는 [분야]야. + +다음 기준으로 제품 아이디어 10개를 제안해 줘. +- 하루나 이틀 안에 프로토타입 가능 +- AI 기능 하나만 사용 +- 입력과 출력이 명확함 +- 사용자가 직접 결과를 확인할 수 있음 + +각 아이디어마다 대상 사용자, 문제, 첫 화면, 결과 화면을 적어 줘. +``` + +## 과제 + +다음 세 곳에서 아이디어를 3개씩 찾아 보세요. + +1. 앱/웹 서비스 목록 +2. 사용자 리뷰나 커뮤니티 불평 +3. 돈을 받고 대신 해 주는 서비스 + +그중 가장 작게 만들 수 있는 아이디어 하나를 골라 Stage 1 프로젝트로 사용합니다. + diff --git a/docs/ko-kr/stage-1/appendix-industry-scenarios/index.md b/docs/ko-kr/stage-1/appendix-industry-scenarios/index.md new file mode 100644 index 0000000..9a1ccb0 --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-industry-scenarios/index.md @@ -0,0 +1,109 @@ +--- +title: 'AI 산업 적용 시나리오 참고' +description: 'B2B와 업무 자동화 관점에서 AI 제품 아이디어를 찾는 참고 시나리오입니다.' +--- + +# AI 산업 적용 시나리오 참고 + +업무용 AI 제품은 대부분 반복 작업, 문서 작업, 의사결정 보조, 고객 응대, 데이터 정리에서 시작합니다. + +이 문서는 Stage 1 프로젝트 아이디어를 찾을 때 참고할 수 있는 B2B/업무 시나리오 모음입니다. + +## 1. 마케팅 + +- 광고 문구 생성기 +- SNS 게시글 캘린더 +- 고객 리뷰 요약 +- 캠페인 아이디어 브레인스토밍 +- 경쟁사 랜딩 페이지 분석 + +첫 버전 예시: + +```text +마케터가 상품 특징과 타깃 고객을 입력하면, +AI가 광고 제목 10개와 SNS 문구 5개를 생성한다. +``` + +## 2. 영업 + +- 영업 이메일 초안 작성 +- 고객 미팅 기록 요약 +- 리드 우선순위 정리 +- 제안서 목차 생성 +- 고객 반론 대응 문구 추천 + +## 3. 고객 지원 + +- FAQ 초안 생성 +- 문의 유형 자동 분류 +- 답변 템플릿 추천 +- 불만 리뷰 요약 +- 상담 기록에서 후속 조치 추출 + +## 4. 교육 + +- 수업 자료 요약 +- 퀴즈 생성 +- 학습 계획 추천 +- 학생 질문 분류 +- 개념 설명 난이도 조절 + +## 5. 인사/채용 + +- 채용 공고 초안 작성 +- 이력서 요약 +- 면접 질문 생성 +- 온보딩 체크리스트 +- 교육 자료 정리 + +## 6. 운영/관리 + +- 회의록에서 할 일 추출 +- 업무 보고서 초안 작성 +- 반복 체크리스트 생성 +- 매뉴얼 정리 +- 일정 충돌 요약 + +## 7. 법무/계약 보조 + +주의: 법률 판단을 대신하는 제품은 고위험입니다. Stage 1에서는 판단 자동화보다 문서 정리와 체크리스트 보조 수준이 적합합니다. + +- 계약서 요약 +- 조항 체크리스트 +- 계약 검토 요청사항 정리 +- 표준 문구 비교 + +## 8. 의료/헬스케어 보조 + +주의: 진단이나 치료 판단은 피해야 합니다. + +가능한 범위: + +- 운동 기록 정리 +- 식단 메모 요약 +- 병원 방문 전 질문 목록 작성 +- 건강 습관 리마인더 + +## 9. 좋은 업무용 아이디어의 조건 + +업무용 아이디어는 다음 조건을 보면 좋습니다. + +- 반복 빈도가 높다. +- 결과 형식이 어느 정도 정해져 있다. +- 사람이 최종 확인할 수 있다. +- 실패해도 치명적이지 않다. +- 시간 절약 효과를 설명할 수 있다. + +## 과제 + +관심 있는 업종 하나를 고르고 다음을 적어 보세요. + +```text +업종: +반복 업무: +현재 해결 방식: +불편한 점: +AI가 도와줄 수 있는 부분: +첫 프로토타입 화면: +``` + diff --git a/docs/ko-kr/stage-1/appendix-jobs-to-be-done/index.md b/docs/ko-kr/stage-1/appendix-jobs-to-be-done/index.md new file mode 100644 index 0000000..68d0d33 --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-jobs-to-be-done/index.md @@ -0,0 +1,93 @@ +--- +title: 'Jobs to Be Done으로 사용자가 진짜 하려는 일 찾기' +description: 'JTBD 관점으로 AI 제품 아이디어와 사용자 요구를 정리하는 방법을 설명합니다.' +--- + +# Jobs to Be Done으로 사용자가 진짜 하려는 일 찾기 + +Jobs to Be Done, 줄여서 JTBD는 사용자를 단순한 인구통계로 보지 않고 "어떤 상황에서 어떤 진전을 이루려는 사람"으로 보는 방법입니다. + +## 1. JTBD 기본 문장 + +```text +[상황]에서 나는 [동기] 때문에 [원하는 진전]을 이루고 싶다. +``` + +예시: + +```text +새 상품을 온라인몰에 올려야 할 때, +나는 마케팅 문구 작성에 시간을 많이 쓰지 않고, +상품의 장점을 잘 보여 주는 설명을 빠르게 만들고 싶다. +``` + +## 2. 페르소나와의 차이 + +페르소나는 "누구인가"에 집중합니다. + +JTBD는 "무엇을 해내려 하는가"에 집중합니다. + +| 관점 | 질문 | +| --- | --- | +| 페르소나 | 이 사람은 누구인가? | +| JTBD | 이 사람은 어떤 상황에서 어떤 진전을 원하나? | + +제품 아이디어를 만들 때는 둘 다 유용하지만, 초보자에게는 JTBD가 첫 기능을 좁히는 데 더 직접적입니다. + +## 3. 기능, 감정, 사회적 층위 + +하나의 Job에는 보통 세 층이 있습니다. + +- 기능적 Job: 실제로 해내야 하는 일 +- 감정적 Job: 느끼고 싶은 감정 +- 사회적 Job: 다른 사람에게 보이고 싶은 모습 + +예시: + +| 층위 | 내용 | +| --- | --- | +| 기능 | 상품 설명을 빨리 작성한다 | +| 감정 | 막막함을 줄이고 자신감을 얻는다 | +| 사회 | 전문적으로 운영하는 쇼핑몰처럼 보이고 싶다 | + +## 4. 인터뷰 질문 + +JTBD를 찾을 때는 다음 질문이 좋습니다. + +- 마지막으로 이 문제를 겪은 때가 언제인가요? +- 그때 무엇을 하려고 했나요? +- 어떤 방법을 써 봤나요? +- 가장 귀찮았던 단계는 무엇인가요? +- 결과가 좋았다고 느끼는 기준은 무엇인가요? +- 돈이나 시간을 써서 해결한 적이 있나요? + +## 5. AI와 함께 JTBD 정리하기 + +```text +아래 사용자 메모를 JTBD 관점으로 정리해 줘. + +메모: +[인터뷰나 관찰 내용] + +다음 형식으로 답해 줘. +1. 상황 +2. 사용자가 원하는 진전 +3. 현재 대안 +4. 기능적 Job +5. 감정적 Job +6. 사회적 Job +7. 첫 프로토타입 아이디어 +``` + +## 과제 + +내 프로젝트 사용자를 한 명 정하고 다음을 채우세요. + +```text +상황: +원하는 진전: +현재 대안: +성공 기준: +첫 기능: +``` + diff --git a/docs/ko-kr/stage-1/appendix-mom-test/index.md b/docs/ko-kr/stage-1/appendix-mom-test/index.md new file mode 100644 index 0000000..77004e2 --- /dev/null +++ b/docs/ko-kr/stage-1/appendix-mom-test/index.md @@ -0,0 +1,86 @@ +--- +title: 'The Mom Test: 수요를 검증하는 사용자 인터뷰' +description: '칭찬이 아니라 실제 행동을 끌어내는 사용자 인터뷰 방법을 설명합니다.' +--- + +# The Mom Test: 수요를 검증하는 사용자 인터뷰 + +The Mom Test는 사용자가 예의상 해 주는 칭찬에 속지 않기 위한 인터뷰 방법입니다. 이름의 뜻은 "엄마에게 물어봐도 거짓 칭찬이 나오지 않게 질문하라"는 의미에 가깝습니다. + +## 1. 나쁜 질문 + +다음 질문은 대답이 좋게 나와도 별 도움이 되지 않습니다. + +- 이 앱 있으면 쓸 것 같아요? +- 제 아이디어 괜찮죠? +- 얼마면 살 것 같아요? +- 이런 기능 필요하죠? + +사람들은 상대를 실망시키지 않으려고 좋게 말할 수 있습니다. + +## 2. 좋은 질문 + +좋은 질문은 과거의 실제 행동을 묻습니다. + +- 마지막으로 이 문제를 겪은 때가 언제인가요? +- 그때 어떻게 해결했나요? +- 해결하는 데 얼마나 걸렸나요? +- 돈을 내거나 다른 사람에게 부탁한 적이 있나요? +- 지금 쓰는 방식에서 가장 불편한 점은 무엇인가요? + +## 3. 아이디어를 먼저 설명하지 않기 + +처음부터 내 솔루션을 보여 주면 사용자는 그 솔루션에 맞춰 대답합니다. 먼저 문제와 현재 행동을 들어야 합니다. + +추천 순서: + +1. 사용자의 최근 경험을 묻는다. +2. 현재 해결 방식을 묻는다. +3. 비용, 시간, 빈도를 묻는다. +4. 불편한 단계를 묻는다. +5. 마지막에 프로토타입을 보여 준다. + +## 4. 인터뷰 기록 템플릿 + +```text +인터뷰 대상: +날짜: +문제가 발생한 최근 상황: +현재 해결 방식: +사용한 도구: +걸린 시간: +가장 불편한 점: +돈/시간을 쓴 증거: +반복 빈도: +인상 깊은 원문: +프로토타입 반응: +다음 개선점: +``` + +## 5. AI에게 인터뷰 분석 맡기기 + +```text +아래 인터뷰 메모를 분석해 줘. +칭찬이나 의견보다 실제 행동 증거를 중심으로 정리해 줘. + +출력: +1. 강한 수요 증거 +2. 약한 수요 또는 불확실한 부분 +3. 사용자가 실제로 겪는 문제 +4. 첫 프로토타입에서 검증해야 할 가설 +5. 다음 인터뷰 질문 5개 + +메모: +[인터뷰 메모] +``` + +## 과제 + +주변 사람 3명에게 내 아이디어를 설명하기 전에 다음 질문을 해 보세요. + +1. 마지막으로 이 문제를 겪은 때가 언제인가요? +2. 그때 어떻게 해결했나요? +3. 얼마나 자주 발생하나요? +4. 가장 귀찮은 단계는 무엇인가요? +5. 해결을 위해 돈이나 시간을 쓴 적이 있나요? + diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png new file mode 100644 index 0000000..fb9d4f6 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png new file mode 100644 index 0000000..bbe2296 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png new file mode 100644 index 0000000..fc7ffaf Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png new file mode 100644 index 0000000..a7951c0 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png new file mode 100644 index 0000000..3d5813d Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-35-53.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-35-53.png new file mode 100644 index 0000000..f5e23f0 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-35-53.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png new file mode 100644 index 0000000..ec3792c Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png new file mode 100644 index 0000000..4e1b1a5 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png new file mode 100644 index 0000000..896c153 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png new file mode 100644 index 0000000..6839842 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png new file mode 100644 index 0000000..eb4feba Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png new file mode 100644 index 0000000..d49864d Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png new file mode 100644 index 0000000..982d76f Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png new file mode 100644 index 0000000..a15e888 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png new file mode 100644 index 0000000..169361e Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png new file mode 100644 index 0000000..3cca1c0 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png new file mode 100644 index 0000000..9a8d5db Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png new file mode 100644 index 0000000..665ad07 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png new file mode 100644 index 0000000..1486e8a Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png new file mode 100644 index 0000000..29e3e77 Binary files /dev/null and b/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png differ diff --git a/docs/ko-kr/stage-1/building-prototype/index.md b/docs/ko-kr/stage-1/building-prototype/index.md new file mode 100644 index 0000000..eba99da --- /dev/null +++ b/docs/ko-kr/stage-1/building-prototype/index.md @@ -0,0 +1,154 @@ +--- +title: '프로토타입 만들기' +description: '아이디어를 요구사항으로 정리하고 AI IDE로 단일 페이지 및 다중 페이지 프로토타입을 만드는 방법을 설명합니다.' +--- + +# 프로토타입 만들기 + +프로토타입은 완성품이 아닙니다. 사용자에게 "이런 제품이면 쓸 만한가?"를 빠르게 확인하기 위한 동작하는 초안입니다. + +Stage 1에서는 백엔드나 복잡한 데이터베이스보다 먼저 **화면, 흐름, 핵심 가치**를 구현합니다. + +## 1. 코드를 쓰기 전에 요구사항 정리하기 + +AI에게 바로 "앱 만들어 줘"라고 하면 결과가 흔들립니다. 먼저 다음을 정리합니다. + +| 항목 | 질문 | +| --- | --- | +| 사용자 | 누가 쓰는가? | +| 상황 | 언제, 왜 쓰는가? | +| 입력 | 사용자가 무엇을 넣는가? | +| 처리 | 앱이 무엇을 계산/생성/정리하는가? | +| 출력 | 사용자는 어떤 결과를 얻는가? | +| 성공 기준 | 결과가 좋다고 판단하는 기준은 무엇인가? | + +예시: + +```text +사용자: 작은 쇼핑몰을 운영하는 사장 +상황: 새 상품을 올릴 때 상세페이지 문구가 필요함 +입력: 상품명, 특징, 가격대, 타깃 고객 +처리: 여러 톤의 상품 문구 생성 +출력: 제목, 핵심 문구, 상세 설명, SNS 홍보 문구 +성공 기준: 바로 수정해서 쓸 수 있는 문구가 나온다 +``` + +## 2. 첫 버전 범위 정하기 + +첫 버전은 작아야 합니다. + +좋은 첫 범위: + +- 입력 폼 1개 +- 결과 카드 1개 +- 샘플 데이터 몇 개 +- 로딩/오류 상태 +- 다시 생성 버튼 + +나쁜 첫 범위: + +- 로그인 +- 결제 +- 관리자 +- 팀 협업 +- 실시간 알림 +- 모바일 앱과 웹 동시 개발 + +처음에는 "보여 줄 수 있는 핵심 장면"만 만듭니다. + +## 3. AI IDE에 줄 첫 요청 + +```text +AI 문구 생성기 프로토타입을 만들고 싶어. +아직 실제 API는 연결하지 말고, 프론트엔드 화면과 가짜 응답만 만들어 줘. + +요구사항: +- 상품명, 특징, 타깃 고객을 입력하는 폼 +- 생성 버튼 +- 생성 결과 카드 3개 +- 로딩 상태 +- 오류 메시지 영역 +- 모바일에서도 보기 좋은 반응형 레이아웃 + +먼저 어떤 파일을 만들거나 수정할지 계획을 말하고, +그다음 코드를 작성해 줘. +``` + +## 4. 단일 페이지 프로토타입 만들기 + +처음에는 한 화면이면 충분합니다. + +화면 구성 예시: + +1. 상단 제목과 짧은 설명 +2. 입력 폼 +3. 생성 버튼 +4. 결과 영역 +5. 예시 결과 또는 빈 상태 + +단일 페이지를 먼저 만드는 이유는 명확합니다. + +- 요구사항을 빠르게 확인할 수 있다. +- 사용 흐름이 보인다. +- 디자인과 문구를 쉽게 바꿀 수 있다. +- 기능 추가 전 핵심 가치가 맞는지 검증할 수 있다. + +## 5. 여러 화면으로 확장하기 + +단일 페이지가 괜찮다면 다음 화면을 추가할 수 있습니다. + +- 홈 화면: 서비스 소개와 시작 버튼 +- 생성 화면: 실제 입력과 결과 +- 히스토리 화면: 이전 결과 목록 +- 상세 화면: 결과 하나를 크게 보기 +- 설정 화면: 톤, 길이, 언어 같은 옵션 + +하지만 화면을 늘릴 때도 기준은 같습니다. 사용자가 실제로 필요한 흐름만 추가합니다. + +## 6. 프로토타입을 진짜처럼 보이게 하기 + +프로토타입 품질은 코드보다 화면의 설득력에서 많이 갈립니다. + +다음 요소를 챙기세요. + +- 실제 같은 샘플 데이터 +- 버튼 hover/disabled 상태 +- 로딩 중 문구 +- 빈 상태 안내 +- 오류 문구 +- 결과 복사 버튼 +- 모바일 레이아웃 + +AI에게 이렇게 요청할 수 있습니다. + +```text +현재 프로토타입이 너무 데모처럼 보여. +실제 SaaS 도구처럼 보이도록 UI를 다듬어 줘. +단, 기능 범위는 늘리지 말고 레이아웃, 간격, 상태 표현, 샘플 데이터만 개선해 줘. +``` + +## 7. 체크리스트 + +프로토타입을 마친 뒤 아래를 확인합니다. + +- 첫 화면에서 무엇을 하는 도구인지 5초 안에 이해된다. +- 입력해야 할 내용이 명확하다. +- 버튼을 누르면 결과가 나온다. +- 결과가 사용자의 문제와 연결된다. +- 오류나 빈 상태가 방치되어 있지 않다. +- 모바일에서도 주요 흐름이 깨지지 않는다. + +## 과제 + +자신의 아이디어를 하나 고르고 다음 산출물을 만드세요. + +1. 요구사항 1페이지 +2. 단일 페이지 프로토타입 +3. 샘플 데이터 5개 +4. 결과 화면 1개 +5. 개선 요청 프롬프트 3개 + +## 다음으로 + +[AI 기능 통합하기](/ko-kr/stage-1/integrating-ai-capabilities/)에서 가짜 응답 대신 실제 AI API를 붙이는 방법을 배웁니다. + diff --git a/docs/ko-kr/stage-1/complete-project-practice/index.md b/docs/ko-kr/stage-1/complete-project-practice/index.md new file mode 100644 index 0000000..03a1d7b --- /dev/null +++ b/docs/ko-kr/stage-1/complete-project-practice/index.md @@ -0,0 +1,105 @@ +--- +title: '완성 프로젝트 실습' +description: 'AI로 만든 프로토타입을 사용자에게 보여 줄 수 있는 데모 수준으로 다듬는 방법을 설명합니다.' +--- + +# 완성 프로젝트 실습 + +프로토타입은 "대충 되는 화면"에서 끝나면 안 됩니다. 다른 사람에게 보여 주고 피드백을 받을 수 있어야 합니다. 이 장에서는 Stage 1 결과물을 작은 완성 프로젝트로 다듬습니다. + +## 1. 행복 경로만 만들지 않기 + +초보자 프로토타입은 보통 성공 흐름만 있습니다. + +```text +입력 → 버튼 클릭 → 결과 표시 +``` + +하지만 실제 사용자는 빈 입력을 넣고, 네트워크가 실패하고, 결과가 마음에 들지 않을 수 있습니다. 최소한 다음 상태를 만들어야 합니다. + +- 입력 전 안내 +- 입력값 검증 +- 로딩 +- 성공 +- 실패 +- 재시도 + +## 2. 실제 같은 데이터 넣기 + +빈 카드와 `test`, `hello`, `sample` 같은 데이터는 제품을 약하게 보이게 합니다. AI에게 도메인에 맞는 샘플 데이터를 만들어 달라고 요청하세요. + +```text +내 앱은 소상공인용 상품 문구 생성기야. +실제처럼 보이는 샘플 상품 데이터 10개를 만들어 줘. +각 데이터에는 상품명, 특징, 타깃 고객, 가격대, 원하는 톤을 포함해 줘. +``` + +샘플 데이터가 좋아지면 데모 설득력이 크게 올라갑니다. + +## 3. 사용자 피드백 받기 + +피드백은 "좋아 보여?"라고 묻지 않습니다. 실제 행동을 관찰합니다. + +좋은 질문: + +- 이 화면에서 먼저 무엇을 눌러 보고 싶나요? +- 어떤 정보를 입력해야 하는지 바로 알겠나요? +- 나온 결과를 실제로 어디에 쓸 수 있을 것 같나요? +- 헷갈리는 문구나 버튼이 있나요? +- 이 기능이 없어도 되는 부분은 무엇인가요? + +좋지 않은 질문: + +- 이거 쓸 것 같나요? +- 괜찮죠? +- 예쁘죠? + +## 4. 피드백을 개선 작업으로 바꾸기 + +피드백을 받으면 바로 큰 개편을 하지 말고 작은 수정 단위로 정리합니다. + +| 피드백 | 수정 작업 | +| --- | --- | +| 무엇을 입력해야 할지 모르겠다 | 입력 예시와 placeholder 추가 | +| 결과가 너무 길다 | 결과 카드에 요약과 펼치기 추가 | +| 버튼이 눈에 안 띈다 | 주요 CTA 스타일 개선 | +| 실패했을 때 멈춘 줄 알았다 | 로딩/오류 상태 추가 | + +AI IDE에는 이렇게 요청합니다. + +```text +사용자 피드백을 반영해 프로토타입을 개선하고 싶어. +아래 피드백을 작은 수정 작업으로 나누고, +가장 영향이 큰 것부터 순서대로 수정해 줘. + +[피드백 목록] +``` + +## 5. 최종 제출물 + +Stage 1을 마칠 때 다음이 있으면 충분합니다. + +1. 제품 아이디어 한 문장 +2. 대상 사용자와 사용 상황 +3. 핵심 화면 1~3개 +4. AI 기능 하나 +5. 실제 같은 샘플 데이터 +6. 로딩/오류/빈 상태 +7. 주변 사용자 피드백 3개 이상 +8. 개선 전후 정리 + +## 6. 마무리 체크리스트 + +- 앱을 처음 보는 사람이 목적을 이해할 수 있다. +- 핵심 기능을 1분 안에 체험할 수 있다. +- 결과물이 사용자의 문제와 연결된다. +- 오류가 나도 화면이 무너지지 않는다. +- 데모 링크나 로컬 실행 방법을 설명할 수 있다. + +## 다음 단계 + +Stage 1을 마쳤다면 두 가지 방향이 있습니다. + +- 더 탄탄한 웹 제품을 만들고 싶다면 [Stage 2](/ko-kr/stage-2/)로 이동합니다. +- 제품 기획과 검증을 더 연습하고 싶다면 [제품 사고 부록](/ko-kr/stage-1/appendix-a-product-thinking/)을 봅니다. + diff --git a/docs/ko-kr/stage-1/finding-great-idea/index.md b/docs/ko-kr/stage-1/finding-great-idea/index.md new file mode 100644 index 0000000..be1c89c --- /dev/null +++ b/docs/ko-kr/stage-1/finding-great-idea/index.md @@ -0,0 +1,164 @@ +--- +title: '좋은 아이디어 찾기' +description: 'AI 시대에 초보자가 만들기 좋은 제품 아이디어를 찾고 검증하는 방법을 설명합니다.' +--- + +# 좋은 아이디어 찾기 + +AI가 코드를 대신 써 주는 시대에도 좋은 제품은 자동으로 나오지 않습니다. 오히려 구현 장벽이 낮아질수록 "무엇을 만들 것인가"가 더 중요해집니다. + +좋은 아이디어는 화려한 기술에서 시작하지 않습니다. 보통 특정 사람이 반복해서 겪는 불편에서 시작합니다. + +## 1. 좋은 아이디어의 조건 + +초보자가 시작하기 좋은 아이디어는 다음 조건을 만족합니다. + +| 조건 | 설명 | +| --- | --- | +| 대상이 구체적이다 | "모든 사람"보다 "공모전 준비하는 대학생"이 낫습니다. | +| 상황이 분명하다 | 언제, 어디서, 왜 쓰는지 말할 수 있어야 합니다. | +| 현재 대안이 불편하다 | 엑셀, 메모장, 수작업, 여러 앱 조합처럼 불편한 대안이 있으면 좋습니다. | +| 작게 만들 수 있다 | 첫 버전은 한두 개 핵심 기능으로 충분해야 합니다. | +| 직접 검증할 수 있다 | 주변 사람에게 보여 주고 반응을 받을 수 있어야 합니다. | + +## 2. 아이디어를 찾는 질문 + +다음 질문에서 출발해 보세요. + +- 내가 매주 반복해서 하는 귀찮은 일은 무엇인가? +- 주변 사람이 자주 부탁하는 일은 무엇인가? +- 엑셀이나 노션으로 억지로 관리하고 있는 일은 무엇인가? +- 검색하고 복사하고 정리하는 데 시간이 많이 드는 일은 무엇인가? +- 결과물을 만들 때 매번 비슷한 형식을 반복하는 일은 무엇인가? + +AI 제품 아이디어는 "AI를 넣고 싶다"에서 시작하면 흔들리기 쉽습니다. 먼저 문제를 찾고, 그 문제를 줄이는 과정에서 AI가 필요한지 판단하는 편이 낫습니다. + +## 3. 아이디어를 좁히는 방법 + +나쁜 예: + +```text +AI 비서 앱을 만들고 싶다. +``` + +좋은 예: + +```text +대학생이 팀플 회의록을 붙여 넣으면, +할 일 담당자와 마감일을 자동으로 정리해 주는 웹 앱을 만들고 싶다. +``` + +좋은 아이디어 문장은 다음 요소를 포함합니다. + +```text +[누가] [어떤 상황에서] [무엇을 넣으면] [어떤 결과를 얻는다] +``` + +예시: + +- 신입 마케터가 광고 문안을 입력하면, 여러 톤의 SNS 문구를 생성한다. +- 교사가 단원명을 입력하면, 객관식 퀴즈 10개와 해설을 만든다. +- 자취생이 냉장고 재료를 입력하면, 15분 안에 만들 수 있는 메뉴를 추천한다. + +## 4. 처음 만들기 좋은 유형 + +### 4.1 생성형 도구 + +입력값을 받아 글, 이미지 설명, 요약, 기획안, 이메일 등을 만들어 줍니다. + +예시: + +- 자기소개서 문장 다듬기 +- SNS 게시글 생성기 +- 수업 퀴즈 생성기 +- 상품 상세페이지 문구 생성기 + +### 4.2 정리형 도구 + +긴 텍스트나 흩어진 정보를 구조화합니다. + +예시: + +- 회의록에서 할 일 추출 +- 고객 리뷰 분류 +- 긴 문서 요약 +- 인터뷰 메모 정리 + +### 4.3 추천형 도구 + +사용자의 조건을 받아 후보를 추천합니다. + +예시: + +- 여행 코스 추천 +- 점심 메뉴 추천 +- 공부 계획 추천 +- 운동 루틴 추천 + +### 4.4 변환형 도구 + +한 형식의 내용을 다른 형식으로 바꿉니다. + +예시: + +- 블로그 글을 숏폼 대본으로 변환 +- 긴 설명을 발표 슬라이드 목차로 변환 +- 제품 요구사항을 개발 티켓으로 변환 + +## 5. 피해야 할 첫 아이디어 + +처음부터 다음 유형을 고르면 난이도가 급격히 올라갑니다. + +- 완전한 SNS +- 결제와 정산이 필요한 마켓플레이스 +- 실시간 채팅 서비스 +- 대규모 추천 시스템 +- 의료, 법률, 금융 판단을 대신하는 서비스 +- 여러 권한과 복잡한 관리자 시스템이 필요한 서비스 + +이런 아이디어도 나중에는 만들 수 있습니다. 하지만 첫 프로젝트에서는 "한 사람이 한 상황에서 얻는 하나의 가치"에 집중하는 편이 좋습니다. + +## 6. 10분 검증법 + +아이디어를 고른 뒤 바로 만들지 말고 10분만 검증합니다. + +1. 대상 사용자를 한 문장으로 쓴다. +2. 사용자가 지금 어떻게 해결하는지 적는다. +3. 내 도구가 줄여 줄 시간을 추정한다. +4. 첫 화면에 무엇을 입력해야 하는지 적는다. +5. 결과 화면에 무엇이 나와야 하는지 적는다. +6. 주변 사람 한 명에게 "이거 있으면 쓸 것 같아?"가 아니라 "지금 이 문제를 어떻게 해결해?"라고 묻는다. + +## 7. AI에게 아이디어 정리를 부탁하기 + +다음 프롬프트를 사용할 수 있습니다. + +```text +나는 초보자이고 AI IDE로 첫 제품 프로토타입을 만들고 싶어. +아래 아이디어를 평가해 줘. + +아이디어: +[여기에 아이디어 작성] + +다음 기준으로 답해 줘. +1. 대상 사용자가 충분히 구체적인가 +2. 첫 버전에서 만들 핵심 기능 3개 +3. 너무 큰 범위라면 줄이는 방법 +4. 첫 화면과 결과 화면에 들어갈 내용 +5. 사용자에게 물어볼 검증 질문 5개 +``` + +## 과제 + +아이디어 3개를 적고, 각각을 다음 형식으로 바꿔 보세요. + +```text +[사용자]가 [상황]에서 [입력]을 넣으면 [결과]를 얻는 도구 +``` + +그중 가장 작게 만들 수 있는 하나를 골라 다음 장으로 넘어갑니다. + +## 다음으로 + +[프로토타입 만들기](/ko-kr/stage-1/building-prototype/)에서 아이디어를 실제 화면과 기능으로 바꾸는 과정을 배웁니다. + diff --git a/docs/ko-kr/stage-1/index.md b/docs/ko-kr/stage-1/index.md new file mode 100644 index 0000000..3442f5e --- /dev/null +++ b/docs/ko-kr/stage-1/index.md @@ -0,0 +1,42 @@ +--- +title: 'Stage 1 - 아이디어에서 AI 제품 프로토타입까지' +description: 'AI IDE를 활용해 아이디어를 정리하고, 제품 프로토타입을 만들고, AI 기능을 붙여 완성도 있는 데모로 다듬는 한국어 Stage 1 학습 경로입니다.' +--- + +# Stage 1: 아이디어에서 AI 제품 프로토타입까지 + +Stage 1은 코드를 깊게 알기 전에 먼저 **말로 제품을 설계하고 AI IDE와 함께 동작하는 프로토타입을 만드는 단계**입니다. + +처음부터 완벽한 서비스를 만들려고 하지 않습니다. 대신 다음 흐름을 따라갑니다. + +1. AI 코딩이 어떤 감각인지 체험한다. +2. AI IDE를 설치하고 기본 작업 흐름을 익힌다. +3. 만들 아이디어를 고르고 요구사항을 좁힌다. +4. 단일 페이지 프로토타입을 만든 뒤 여러 화면으로 확장한다. +5. 텍스트, 이미지, 음성 같은 AI 기능을 붙인다. +6. 실제 사용자에게 보여줄 수 있는 데모로 다듬는다. + +## 추천 순서 + + + + + + + + + + + +## 부록 + +Stage 1을 진행하다가 제품 기획, 사용자 검증, 오류 처리에서 막히면 부록을 함께 보세요. + + + + + + + + + diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/image.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/image.png new file mode 100644 index 0000000..9c57843 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/image.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/image40.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/image40.png new file mode 100644 index 0000000..a5b5474 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/image40.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png new file mode 100644 index 0000000..b9ee094 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png new file mode 100644 index 0000000..4850098 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png new file mode 100644 index 0000000..463d40b Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png new file mode 100644 index 0000000..721d1dd Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png new file mode 100644 index 0000000..b33255e Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png new file mode 100644 index 0000000..9e7c8bb Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png new file mode 100644 index 0000000..ec3a5ec Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png new file mode 100644 index 0000000..cf5d1ed Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-10.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-10.png new file mode 100644 index 0000000..a3b1089 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-10.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png new file mode 100644 index 0000000..55b45eb Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png new file mode 100644 index 0000000..bca3561 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png new file mode 100644 index 0000000..5dd2cd5 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png new file mode 100644 index 0000000..8556ff9 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png new file mode 100644 index 0000000..0ec4fa1 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png new file mode 100644 index 0000000..08c7bee Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png new file mode 100644 index 0000000..0b730d2 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png new file mode 100644 index 0000000..9a26d56 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png new file mode 100644 index 0000000..375c1de Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png new file mode 100644 index 0000000..7e4c3a8 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png new file mode 100644 index 0000000..291129b Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png new file mode 100644 index 0000000..36e2f46 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png new file mode 100644 index 0000000..d035851 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png new file mode 100644 index 0000000..4b58f37 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png new file mode 100644 index 0000000..4e7783a Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png new file mode 100644 index 0000000..2905294 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png new file mode 100644 index 0000000..8f9ed68 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png new file mode 100644 index 0000000..e46c704 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png new file mode 100644 index 0000000..09763a5 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png new file mode 100644 index 0000000..20d174a Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png new file mode 100644 index 0000000..d973c60 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png new file mode 100644 index 0000000..7dfc348 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png new file mode 100644 index 0000000..cc59270 Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png new file mode 100644 index 0000000..5b2750a Binary files /dev/null and b/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png differ diff --git a/docs/ko-kr/stage-1/integrating-ai-capabilities/index.md b/docs/ko-kr/stage-1/integrating-ai-capabilities/index.md new file mode 100644 index 0000000..4e93c41 --- /dev/null +++ b/docs/ko-kr/stage-1/integrating-ai-capabilities/index.md @@ -0,0 +1,159 @@ +--- +title: 'AI 기능 통합하기' +description: '프로토타입에 텍스트 생성, 이미지 생성, OCR, 음성 등 AI 기능을 붙이는 기본 흐름을 설명합니다.' +--- + +# AI 기능 통합하기 + +프로토타입의 화면이 준비되면 다음 단계는 실제 AI 기능을 붙이는 것입니다. 중요한 것은 어떤 모델을 쓰는지가 아니라, **사용자 흐름 안에서 AI가 어떤 가치를 만드는지**입니다. + +## 1. AI 기능은 어디에 넣어야 할까 + +AI 기능은 보통 다음 위치에 들어갑니다. + +| 위치 | 예시 | +| --- | --- | +| 입력 보조 | 사용자의 짧은 메모를 정리된 프롬프트로 바꾸기 | +| 생성 | 글, 이미지 설명, 코드, 계획, 메시지 생성 | +| 요약 | 긴 문서, 회의록, 리뷰를 짧게 정리 | +| 분류 | 문의, 감정, 우선순위, 카테고리 분류 | +| 추출 | 텍스트에서 날짜, 담당자, 금액, 할 일 추출 | +| 변환 | 블로그 글을 SNS 문구로 바꾸기 | + +처음에는 한 가지 기능만 붙이세요. 여러 AI 기능을 한꺼번에 붙이면 오류 원인을 찾기 어렵습니다. + +## 2. API 연결의 기본 구조 + +대부분의 AI API 연결은 비슷합니다. + +1. API Key를 발급받는다. +2. 요청 URL을 확인한다. +3. 요청 body 형식을 확인한다. +4. 프론트엔드 또는 백엔드에서 요청을 보낸다. +5. 응답을 화면에 표시한다. +6. 오류, 로딩, 빈 응답을 처리한다. + +초보자에게는 먼저 백엔드 없이 실습하는 경우도 있지만, 실제 서비스에서는 API Key를 브라우저에 직접 노출하지 않는 편이 안전합니다. + +## 3. AI IDE에 API 연결을 요청하는 프롬프트 + +```text +현재 프로토타입에 텍스트 생성 API를 연결하고 싶어. + +요구사항: +- API Key는 .env 파일에서 읽게 해 줘. +- 사용자가 입력한 내용을 프롬프트로 보내 줘. +- 로딩 중에는 버튼을 비활성화해 줘. +- 실패하면 사용자에게 이해하기 쉬운 오류 메시지를 보여 줘. +- 응답이 비어 있으면 다시 시도 안내를 보여 줘. + +먼저 현재 프로젝트 구조를 확인하고, +어떤 방식으로 API Key를 안전하게 다룰지 설명한 뒤 수정해 줘. +``` + +## 4. 로딩과 오류가 중요하다 + +AI API는 느릴 수 있고, 실패할 수 있습니다. 사용자는 기다리는 동안 무슨 일이 일어나는지 알아야 합니다. + +필수 상태: + +- 입력 전 빈 상태 +- 생성 중 로딩 상태 +- 성공 상태 +- 실패 상태 +- 재시도 가능 상태 + +오류 메시지는 기술적으로 정확한 것보다 사용자가 다음 행동을 알 수 있어야 합니다. + +나쁜 문구: + +```text +500 Internal Server Error +``` + +좋은 문구: + +```text +생성 중 문제가 발생했습니다. 잠시 후 다시 시도해 주세요. +문제가 반복되면 입력 내용을 조금 줄여 보세요. +``` + +## 5. 프롬프트 설계 + +AI 기능의 품질은 모델만이 아니라 프롬프트에도 크게 좌우됩니다. + +좋은 프롬프트에는 다음이 들어갑니다. + +- 역할: 어떤 전문가처럼 답해야 하는가 +- 입력: 사용자가 넣은 내용 +- 출력 형식: 표, JSON, 목록, 문단 등 +- 제약: 길이, 톤, 금지 사항 +- 예시: 가능하면 좋은 출력 예시 + +예시: + +```text +너는 소상공인을 돕는 마케팅 카피라이터야. +아래 상품 정보를 바탕으로 한국어 상품 홍보 문구를 만들어 줘. + +출력 형식: +1. 짧은 제목 3개 +2. 상세 설명 1개 +3. SNS 홍보 문구 3개 + +톤: 친근하지만 과장하지 않게 +상품 정보: +{userInput} +``` + +## 6. 텍스트 생성 외의 AI 기능 + +### 6.1 이미지 생성 + +사용자가 원하는 분위기, 대상, 스타일, 비율을 입력하면 이미지 생성 모델에 전달합니다. 제품에서는 생성된 이미지를 그대로 쓰기보다 여러 후보를 보여 주고 선택하게 하는 방식이 좋습니다. + +### 6.2 OCR / 이미지 이해 + +영수증, 문서, 화면 캡처에서 정보를 읽어 구조화할 수 있습니다. 단, 인식 오류를 사용자가 수정할 수 있는 UI가 필요합니다. + +### 6.3 음성 인식 + +회의록, 메모, 인터뷰 정리에 유용합니다. 녹음, 업로드, 변환, 편집 흐름을 함께 설계해야 합니다. + +### 6.4 RAG + +내 문서나 지식베이스를 바탕으로 답하게 만드는 방식입니다. Stage 1에서는 개념만 이해하고, 본격 구현은 Stage 2 이후에 다룹니다. + +## 7. 보안 주의사항 + +- API Key를 GitHub에 올리지 않는다. +- `.env` 파일은 `.gitignore`에 넣는다. +- 브라우저에 직접 노출되는 환경변수인지 확인한다. +- 결제형 API라면 사용량 제한을 둔다. +- 사용자 입력을 그대로 신뢰하지 않는다. + +## 8. 완성 체크리스트 + +- API Key가 코드에 하드코딩되어 있지 않다. +- 로딩 중 버튼이 중복 클릭되지 않는다. +- 실패 시 오류 메시지가 보인다. +- 응답 결과가 화면에 보기 좋게 표시된다. +- 너무 긴 입력이나 빈 입력을 처리한다. +- 사용자가 결과를 복사하거나 다시 생성할 수 있다. + +## 과제 + +이전 장에서 만든 프로토타입에 AI 기능 하나를 붙여 보세요. + +추천 주제: + +- 상품 문구 생성 +- 회의록 요약 +- 여행 일정 추천 +- 공부 계획 생성 +- 리뷰 감정 분류 + +## 다음으로 + +[완성 프로젝트 실습](/ko-kr/stage-1/complete-project-practice/)에서 데모를 실제로 보여 줄 수 있는 수준으로 다듬습니다. + diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image1.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image1.png new file mode 100644 index 0000000..686a87f Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image1.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image10.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image10.png new file mode 100644 index 0000000..0d32d5a Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image10.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image11.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image11.png new file mode 100644 index 0000000..70e42b5 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image11.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image12.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image12.png new file mode 100644 index 0000000..a309a8d Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image12.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image13.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image13.png new file mode 100644 index 0000000..b8ac8a8 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image13.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image14.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image14.png new file mode 100644 index 0000000..31a6704 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image14.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image15.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image15.png new file mode 100644 index 0000000..65388b3 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image15.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image16.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image16.png new file mode 100644 index 0000000..91ae3cd Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image16.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image17.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image17.png new file mode 100644 index 0000000..84a3c51 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image17.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image18.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image18.png new file mode 100644 index 0000000..7b084ff Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image18.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image19.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image19.png new file mode 100644 index 0000000..5e31acb Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image19.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image2.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image2.png new file mode 100644 index 0000000..a1370fb Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image2.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image20.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image20.png new file mode 100644 index 0000000..0a167cd Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image20.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image21.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image21.png new file mode 100644 index 0000000..e246dcf Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image21.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image22.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image22.png new file mode 100644 index 0000000..f286e45 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image22.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image3.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image3.png new file mode 100644 index 0000000..3e22e6e Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image3.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image32.webp b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image32.webp new file mode 100644 index 0000000..76e21be Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image32.webp differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image4.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image4.png new file mode 100644 index 0000000..5940e0f Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image4.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image5.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image5.png new file mode 100644 index 0000000..7c18b2d Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image5.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image6.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image6.png new file mode 100644 index 0000000..e7912d6 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image6.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image7.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image7.png new file mode 100644 index 0000000..6d595fc Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image7.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image8.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image8.png new file mode 100644 index 0000000..e58af5a Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image8.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image9.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image9.png new file mode 100644 index 0000000..b39e85c Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image9.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png new file mode 100644 index 0000000..2584a8b Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-27-13.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-27-13.png new file mode 100644 index 0000000..0b199d6 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-27-13.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png new file mode 100644 index 0000000..3d734e6 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png new file mode 100644 index 0000000..1d1c3f6 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png new file mode 100644 index 0000000..0f72910 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-37-39.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-37-39.png new file mode 100644 index 0000000..e7ea936 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-37-39.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png new file mode 100644 index 0000000..cf3f91e Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png new file mode 100644 index 0000000..91c4132 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png new file mode 100644 index 0000000..9e92953 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png new file mode 100644 index 0000000..b027394 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png new file mode 100644 index 0000000..88fbc25 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png new file mode 100644 index 0000000..3eed073 Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png new file mode 100644 index 0000000..ea4df0e Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-35-51.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-35-51.png new file mode 100644 index 0000000..dc1119f Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-35-51.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png new file mode 100644 index 0000000..5a2abac Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png new file mode 100644 index 0000000..2d556bd Binary files /dev/null and b/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png differ diff --git a/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md b/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md new file mode 100644 index 0000000..aeba8b2 --- /dev/null +++ b/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md @@ -0,0 +1,159 @@ +--- +title: 'AI IDE 도구 익히기' +description: 'Cursor, Claude Code, Trae 같은 AI IDE의 역할과 기본 사용 흐름을 한국어로 설명합니다.' +--- + +# AI IDE 도구 익히기 + +AI IDE는 단순한 코드 편집기가 아닙니다. 프로젝트 폴더를 읽고, 파일을 만들고, 명령을 실행하고, 오류를 해석하며, 개발 흐름 전체를 도와주는 작업 환경입니다. + +이 장에서는 특정 도구 하나만 외우기보다, 대부분의 AI IDE에서 공통으로 쓰이는 사고방식과 작업 흐름을 익힙니다. + +## 1. AI IDE가 해 주는 일 + +AI IDE는 보통 다음 능력을 가집니다. + +- 프로젝트 파일 구조 읽기 +- 새 파일 생성 및 기존 파일 수정 +- 코드 설명 +- 오류 메시지 분석 +- 터미널 명령 제안 +- 리팩터링 +- 테스트나 빌드 실패 원인 추적 + +중요한 점은 AI IDE가 **현재 프로젝트의 맥락**을 읽을 수 있다는 것입니다. 일반 챗봇에게 코드 조각을 붙여 넣는 것보다 훨씬 편합니다. + +## 2. 기본 작업 흐름 + +### 2.1 폴더 열기 + +먼저 프로젝트 폴더를 엽니다. AI에게는 "이 폴더 안의 파일들을 기준으로 작업해 달라"고 요청합니다. + +```text +이 프로젝트 구조를 먼저 읽고, 어떤 파일이 진입점인지 설명해 줘. +아직 코드는 수정하지 말고 구조만 파악해 줘. +``` + +### 2.2 작은 요구사항 전달 + +처음부터 "앱 전체를 만들어 줘"라고 하지 말고 작은 단위로 요청합니다. + +```text +메인 화면에 할 일 목록을 보여 주는 기본 UI를 만들어 줘. +아직 저장 기능은 넣지 말고, 샘플 데이터 3개만 화면에 표시해 줘. +``` + +### 2.3 실행하고 확인하기 + +AI가 코드를 수정하면 직접 실행합니다. + +```bash +npm install +npm run dev +``` + +화면이 정상인지, 콘솔 오류가 없는지, 버튼이 실제로 동작하는지 확인합니다. + +### 2.4 오류를 되돌려 주기 + +오류가 나면 추측하지 말고 메시지를 그대로 전달합니다. + +```text +브라우저 콘솔에 아래 오류가 나와. +원인을 설명하고 최소 수정으로 고쳐 줘. + +[오류 메시지] +``` + +## 3. AI IDE에 좋은 지시를 주는 법 + +좋은 지시는 다음 구조를 가집니다. + +```text +목표: +현재 상태: +원하는 변경: +지키면 좋은 제약: +수정 후 확인 방법: +``` + +예시: + +```text +목표: 상품 카드 UI를 더 보기 좋게 만들고 싶어. +현재 상태: 카드 안에 제목, 가격, 설명이 텍스트로만 보여. +원하는 변경: 이미지 영역, 가격 강조, 구매 버튼을 추가해 줘. +제약: 기존 데이터 구조는 바꾸지 말고 CSS 중심으로 수정해 줘. +확인 방법: npm run dev에서 카드 3개가 한 줄로 보이면 돼. +``` + +## 4. 초보자가 꼭 알아야 할 파일들 + +프론트엔드 프로젝트에서 자주 만나는 파일은 다음과 같습니다. + +| 파일 | 역할 | +| --- | --- | +| `package.json` | 실행 명령과 의존성 목록 | +| `src/main.js` 또는 `src/main.ts` | 앱 시작점 | +| `src/App.vue`, `App.jsx` 등 | 주요 화면 컴포넌트 | +| `index.html` | 브라우저가 처음 여는 HTML | +| `README.md` | 프로젝트 설명 | + +모르는 파일이 나오면 AI에게 이렇게 묻습니다. + +```text +이 프로젝트에서 package.json, src/main.*, App.* 파일이 각각 어떤 역할을 하는지 초보자 기준으로 설명해 줘. +``` + +## 5. 안전하게 작업하는 습관 + +### 5.1 수정 전 계획을 요청하기 + +큰 변경 전에는 바로 수정하게 하지 말고 먼저 계획을 받습니다. + +```text +바로 수정하지 말고, 어떤 파일을 어떻게 바꿀지 먼저 계획만 말해 줘. +``` + +### 5.2 변경 범위를 제한하기 + +```text +이번에는 src/components/ProductCard.vue만 수정해 줘. +다른 파일은 건드리지 마. +``` + +### 5.3 실행 결과 기준을 주기 + +```text +수정 후 npm run build가 통과해야 하고, 모바일 폭에서도 버튼이 줄바꿈되어야 해. +``` + +## 6. AI IDE가 틀릴 때 + +AI IDE도 자주 틀립니다. + +- 없는 파일을 있다고 가정한다. +- 사용하지 않는 라이브러리를 임의로 추가한다. +- 실행되지 않는 코드를 만든다. +- 기존 스타일과 다른 방식으로 구현한다. + +이럴 때는 "틀렸어"라고만 하지 말고, 실제 상태를 기준으로 다시 지시합니다. + +```text +방금 말한 파일은 실제 프로젝트에 없어. +현재 파일 목록을 다시 확인하고, 존재하는 파일 기준으로 수정 계획을 다시 세워 줘. +``` + +## 과제 + +아무 작은 프론트엔드 프로젝트나 열고 다음을 해 보세요. + +1. AI에게 프로젝트 구조 설명을 요청한다. +2. 메인 화면에 작은 UI 변경을 요청한다. +3. 실행 후 오류가 있으면 오류 메시지를 붙여 넣고 고친다. +4. 변경된 파일이 무엇인지 설명해 달라고 한다. + +## 다음으로 + +[좋은 아이디어 찾기](/ko-kr/stage-1/finding-great-idea/)에서 어떤 제품을 만들지 고르는 방법을 배웁니다. + diff --git a/docs/ko-kr/stage-1/learning-map/index.md b/docs/ko-kr/stage-1/learning-map/index.md new file mode 100644 index 0000000..4b9aa7f --- /dev/null +++ b/docs/ko-kr/stage-1/learning-map/index.md @@ -0,0 +1,101 @@ +--- +title: '아이디어에서 AI 제품까지 - Easy-Vibe 학습 지도' +description: 'AI 코딩을 처음 시작하는 사람을 위한 Stage 1 한국어 학습 지도입니다. AI IDE, 요구사항 정리, 프로토타입 제작, AI 기능 통합까지 이어지는 흐름을 설명합니다.' +--- + +# 아이디어에서 AI 제품까지 + +예전에는 소프트웨어를 만들려면 프로그래밍 언어, 알고리즘, 프로젝트 경험이 먼저 필요했습니다. 지금은 출발점이 조금 달라졌습니다. 만들고 싶은 것이 분명하다면, AI가 코드 작성과 구현 과정을 상당 부분 도와줄 수 있습니다. + +이 변화의 핵심은 단순합니다. **프로그래밍 언어가 점점 자연어에 가까워지고 있습니다.** + +대형 언어 모델의 등장으로 개발은 더 이상 전문가만의 영역이 아닙니다. 예전의 어려움이 "코드를 어떻게 쓰지?"였다면, 이제 더 중요한 질문은 "무엇을 만들고 싶은가?"입니다. + +> **Vibe Coding이란?** +> 코드 한 줄부터 직접 쓰기보다, AI와 대화하며 원하는 기능과 화면을 설명하고 결과물을 함께 만들어 가는 개발 방식입니다. + +물론 AI가 코드를 써 준다고 모든 문제가 끝나는 것은 아닙니다. 실제로 쓸 수 있는 제품을 만들려면 다음 질문에 답해야 합니다. + +- AI가 만든 코드를 어떻게 더 깔끔하고 유지보수 가능하게 만들까? +- 흩어진 코드 조각을 어떻게 실행 가능한 앱으로 묶을까? +- 앱을 어떻게 배포해서 다른 사람이 쓰게 할까? +- 텍스트 생성, 이미지 인식, 음성 처리 같은 AI 기능을 어떻게 제품에 넣을까? + +Stage 1에서는 이 중에서 **아이디어를 제품 프로토타입으로 만드는 첫 번째 구간**을 다룹니다. + +## 누가 보면 좋은가 + +| 대상 | 얻을 수 있는 것 | +| --- | --- | +| 완전 초보자 | 코드를 몰라도 AI와 함께 첫 프로토타입을 만드는 경험 | +| 학생 | 과제, 공모전, 창업 아이디어를 직접 데모로 구현하는 방법 | +| 직장인 | 반복 업무를 자동화하거나 작은 내부 도구를 만드는 방법 | +| PM / 디자이너 | 문서나 화면 설계에서 끝내지 않고 동작하는 데모까지 만드는 방법 | +| 창업자 / 소상공인 | 외주 전에 아이디어를 저렴하게 검증하는 MVP 제작법 | +| 교사 / 강사 | 수업 도구, 퀴즈, 학습 보조 앱을 빠르게 만드는 방법 | + +## 성장 경로 + +### 0. AI 코딩 감각 익히기 + +먼저 작은 게임이나 단순한 웹 페이지를 만들어 보며 AI가 코드를 생성하고 수정하는 흐름을 경험합니다. 핵심은 "AI가 무엇을 잘하고, 어디서 사람이 방향을 잡아야 하는지"를 감각적으로 이해하는 것입니다. + +### 1. AI IDE와 작업 방식 익히기 + +Cursor, Claude Code, Trae 같은 AI IDE는 단순한 코드 편집기가 아니라, 프로젝트 폴더를 읽고 수정하며 명령을 실행할 수 있는 개발 파트너에 가깝습니다. + +이 단계에서는 다음을 익힙니다. + +- 프로젝트 폴더 열기 +- AI에게 요구사항 설명하기 +- 생성된 파일 확인하기 +- 실행 오류를 AI와 함께 고치기 +- 변경된 내용을 되돌리거나 비교하기 + +### 2. 좋은 아이디어 찾기 + +AI 시대에는 구현 비용이 낮아졌지만, 그렇다고 아무 아이디어나 제품이 되는 것은 아닙니다. 좋은 아이디어는 보통 다음 조건을 가집니다. + +- 누가 쓰는지 분명하다. +- 언제 쓰는지 분명하다. +- 지금은 불편한 대안이 있다. +- 작게 시작해도 가치를 줄 수 있다. + +### 3. 프로토타입 만들기 + +처음부터 백엔드, 로그인, 결제, 배포를 모두 넣으려 하지 않습니다. 먼저 "사용자가 실제로 보게 될 화면과 핵심 흐름"을 만듭니다. + +좋은 첫 프로토타입은 다음 정도면 충분합니다. + +- 핵심 화면 1~3개 +- 클릭 가능한 주요 버튼 +- 가짜 데이터 기반의 리스트/상세/결과 화면 +- 성공/실패/로딩 상태의 최소 표현 + +### 4. AI 기능 통합하기 + +프로토타입이 만들어지면 텍스트 생성, 이미지 생성, OCR, 음성 인식 같은 AI 기능을 붙일 수 있습니다. 이때 중요한 것은 모델 자체보다 **사용자 흐름 안에서 AI가 어디에 들어가야 자연스러운지**입니다. + +### 5. 완성도 있는 데모로 다듬기 + +마지막에는 사용자가 직접 만져볼 수 있는 형태로 다듬습니다. + +- 빈 화면, 로딩, 오류 상태를 처리한다. +- 예시 데이터를 실제처럼 만든다. +- 주요 흐름이 끊기지 않게 한다. +- 주변 사람에게 보여 주고 피드백을 받는다. + +## 이 단계의 목표 + +Stage 1을 끝내면 다음 능력을 갖추는 것이 목표입니다. + +- 만들고 싶은 아이디어를 AI가 이해할 수 있는 요구사항으로 바꾼다. +- AI IDE로 정적 웹 프로토타입을 만든다. +- 오류를 무서워하지 않고 AI와 함께 수정한다. +- AI API를 제품 흐름에 붙이는 기본 감각을 익힌다. +- 다른 사람에게 보여 줄 수 있는 작은 데모를 완성한다. + +## 다음으로 + +[AI 시대, 말할 수 있으면 코딩할 수 있다](/ko-kr/stage-1/ai-capabilities-through-games/)에서 작은 예제로 AI 코딩의 감각을 먼저 경험해 보세요. + diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml index b87eb99..f637073 100644 --- a/docs/public/sitemap.xml +++ b/docs/public/sitemap.xml @@ -772,147 +772,165 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/ - 2026-04-02T13:48:55+08:00 + 2026-05-11T06:13:58.867Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/ - 2026-03-06T21:59:45+08:00 + 2026-05-11T06:16:35.347Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/ - 2026-03-06T17:59:01+08:00 + 2026-05-11T06:16:35.851Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/ - 2026-02-26T09:33:06+08:00 + 2026-05-11T06:16:35.910Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/ - 2026-03-06T17:59:01+08:00 + 2026-05-11T06:16:35.795Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/ - 2026-03-06T17:59:01+08:00 + 2026-05-11T06:16:35.467Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-consumer-scenarios/ - 2026-03-25T00:28:36+08:00 + 2026-05-11T06:16:35.528Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-double-diamond/ - 2026-03-25T23:02:33+08:00 + 2026-05-11T06:16:35.636Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-idea-sources/ - 2026-03-25T23:02:33+08:00 + 2026-05-11T06:16:35.583Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/ - 2026-03-25T00:28:36+08:00 + 2026-05-11T06:16:35.410Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-jobs-to-be-done/ - 2026-03-25T23:02:33+08:00 + 2026-05-11T06:16:35.691Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-mom-test/ - 2026-03-25T23:02:33+08:00 + 2026-05-11T06:16:35.741Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/ - 2026-04-02T13:48:55+08:00 + 2026-05-11T06:13:59.053Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/ - 2026-04-02T13:48:55+08:00 + 2026-05-11T06:13:59.156Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/ - 2026-04-02T13:48:55+08:00 + 2026-05-11T06:13:58.991Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/ - 2026-04-02T13:48:55+08:00 + 2026-05-11T06:13:59.107Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/ - 2026-04-02T13:48:55+08:00 + 2026-05-11T06:13:58.932Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/ - 2026-04-02T13:48:55+08:00 + 2026-05-11T06:13:58.815Z weekly 0.9 + https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/ @@ -1044,7 +1062,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/ - 2026-04-02T13:48:55+08:00 + 2026-04-19T17:04:12+08:00 weekly 0.8