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 deleted file mode 100644 index f016823..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/1767350588191.png and /dev/null 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 deleted file mode 100644 index 21f5a14..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image1.png and /dev/null 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 deleted file mode 100644 index 60ccec8..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image10.png and /dev/null 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 deleted file mode 100644 index c1fe454..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image11.png and /dev/null 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 deleted file mode 100644 index 0a56016..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image12.png and /dev/null 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 deleted file mode 100644 index ef2691c..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image13.png and /dev/null 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 deleted file mode 100644 index 9379976..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image14.png and /dev/null 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 deleted file mode 100644 index 13a9cba..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image15.png and /dev/null 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 deleted file mode 100644 index d5db181..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image16.png and /dev/null 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 deleted file mode 100644 index 98be30e..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image17.png and /dev/null 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 deleted file mode 100644 index 9169fd6..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image18.png and /dev/null 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 deleted file mode 100644 index dc216d5..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image19.png and /dev/null 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 deleted file mode 100644 index c8d50c6..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image2.png and /dev/null 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 deleted file mode 100644 index 1be765b..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image20.png and /dev/null 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 deleted file mode 100644 index c1c4e66..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image21.png and /dev/null 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 deleted file mode 100644 index 93eb6c6..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image22.png and /dev/null 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 deleted file mode 100644 index cb76b84..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image23.png and /dev/null 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 deleted file mode 100644 index 9ed0116..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image24.png and /dev/null 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 deleted file mode 100644 index 5af8820..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image25.png and /dev/null 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 deleted file mode 100644 index 231d290..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image26.png and /dev/null 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 deleted file mode 100644 index f6c5365..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image27.png and /dev/null 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 deleted file mode 100644 index efe9ab9..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image28.png and /dev/null 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 deleted file mode 100644 index fe0c010..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image29.png and /dev/null 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 deleted file mode 100644 index 60d51d9..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image3.png and /dev/null 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 deleted file mode 100644 index f23613b..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image30.png and /dev/null 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 deleted file mode 100644 index 2ac4d78..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image31.png and /dev/null 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 deleted file mode 100644 index 1441cda..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image32.png and /dev/null 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 deleted file mode 100644 index 335a340..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image33.png and /dev/null 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 deleted file mode 100644 index 3040f8f..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image34.png and /dev/null 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 deleted file mode 100644 index 84d9854..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image35.png and /dev/null 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 deleted file mode 100644 index 8b19e62..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image36.png and /dev/null 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 deleted file mode 100644 index 3ec264b..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image37.png and /dev/null 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 deleted file mode 100644 index 09a77cc..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image38.png and /dev/null 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 deleted file mode 100644 index 617dbf1..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image39.png and /dev/null 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 deleted file mode 100644 index a93e937..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image4.png and /dev/null 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 deleted file mode 100644 index 123fa8b..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image40.png and /dev/null 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 deleted file mode 100644 index 1d38f66..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image41.png and /dev/null 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 deleted file mode 100644 index 7d85686..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image42.png and /dev/null 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 deleted file mode 100644 index 2948f31..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image43.png and /dev/null 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 deleted file mode 100644 index 967dc34..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image44.png and /dev/null 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 deleted file mode 100644 index b8e8bfc..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image45.png and /dev/null 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 deleted file mode 100644 index 70e7fe6..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image46.png and /dev/null 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 deleted file mode 100644 index 2f5c1db..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image47.png and /dev/null 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 deleted file mode 100644 index 29869d6..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image48.png and /dev/null 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 deleted file mode 100644 index f6680a6..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image49.png and /dev/null 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 deleted file mode 100644 index f6aa135..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image5.png and /dev/null 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 deleted file mode 100644 index 181a9e7..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image50.png and /dev/null 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 deleted file mode 100644 index 127b12f..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image51.png and /dev/null 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 deleted file mode 100644 index 097bb15..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image52.png and /dev/null 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 deleted file mode 100644 index 734e921..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image53.png and /dev/null 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 deleted file mode 100644 index 29ce6e4..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image54.png and /dev/null 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 deleted file mode 100644 index 020ea78..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image55.png and /dev/null 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 deleted file mode 100644 index f1c8a5c..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image56.png and /dev/null 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 deleted file mode 100644 index 10e3453..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image57.png and /dev/null 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 deleted file mode 100644 index 3e68eb4..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image58.png and /dev/null 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 deleted file mode 100644 index 87512cd..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image6.png and /dev/null 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 deleted file mode 100644 index 08993ce..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image7.png and /dev/null 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 deleted file mode 100644 index 475c538..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/image9.png and /dev/null 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 deleted file mode 100644 index 2fd49ba..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png and /dev/null 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 deleted file mode 100644 index 00a780b..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png and /dev/null 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 deleted file mode 100644 index 05a67e6..0000000 Binary files a/docs/ko-kr/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png and /dev/null 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 index 0987388..2225472 100644 --- a/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md +++ b/docs/ko-kr/stage-1/ai-capabilities-through-games/index.md @@ -129,7 +129,7 @@ AI가 등장한 뒤, 일반인에게 처음으로 완전히 새로운 가능성 이런 “대화가 곧 프로그래밍”인 방식은 프로그래밍을 “코드 작성”에서 “요구사항 설명”으로 바꿉니다. 당신은 하위 기술 세부 사항을 신경 쓸 필요가 없고, AI에게 원하는 것을 명확히 알려 주기만 하면 됩니다. 그러면 AI가 아이디어를 실행 가능한 프로그램으로 바꿔 줍니다. 이것이 AI 시대 프로그래밍의 새로운 패러다임, 즉 **Vibe Coding(분위기식 코딩)** 입니다. ::: -![](images/index-2026-01-07-18-25-03.png) +![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-25-03.png) 간단한 요구사항을 입력한 뒤 **풀스택 개발** 버튼을 클릭하면, 웹페이지가 생성되는 전체 과정을 실시간으로 볼 수 있습니다. 보통 커피 한 잔을 내릴 시간 정도면 웹페이지가 자동으로 완성됩니다! @@ -142,17 +142,17 @@ AI가 등장한 뒤, 일반인에게 처음으로 완전히 새로운 가능성 5. 인터페이스는 간결하고 보기 좋아야 합니다. ``` -![](images/index-2026-01-07-18-34-03.png) +![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-34-03.png) 생성이 끝나면 오른쪽에 탐색 가능한 웹 인터페이스가 나타납니다. 페이지 내용을 위아래로 스크롤해 보거나, 페이지 상단의 🧭 버튼을 클릭해 전체 화면 모드로 전환해 결과를 확인할 수 있습니다. > 상단 버튼의 역할은 왼쪽부터 차례대로 다음과 같습니다. 화살표 버튼은 사이드 대화 기록 영역을 펼치고, 연필 버튼은 새 대화를 만들며, 순환 화살표 버튼은 페이지를 새로고침하고, 나침반 버튼은 전체 화면 모드로 전환합니다. Download 버튼은 프로젝트 다운로드, <> 버튼은 코드 보기 전환, Publish 버튼은 프로젝트 게시에 사용됩니다. -![](images/index-2026-01-07-18-35-11.png) +![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/index-2026-01-07-18-35-11.png) 이 웹페이지의 소스 코드를 보고 싶다면 오른쪽 위의 코드 아이콘을 클릭해 전체 코드를 확인할 수 있습니다. -![](images/image7.png) +![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image7.png) ::: tip 🌐 더 많은 AI 프로그래밍 도구 탐색하기 @@ -238,12 +238,12 @@ z.ai 외에도 아래의 훌륭한 AI 프로그래밍 플랫폼을 시도해 볼 > **💡 예시 프롬프트:** 스네이크 게임을 만들어줘 > -> ![](images/image12.png) +> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image12.png) > **💡 예시 프롬프트:** 스네이크 게임을 만들어줘. 다음을 지원해야 해. > > 1. 서로 다른 단어를 먹을 수 있고, 그 단어들은 상자 안에 수집되어야 해. -> ![](images/image13.png) +> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image13.png) > **💡 예시 프롬프트:** 스네이크 게임을 만들어줘. 다음을 지원해야 해. > @@ -251,13 +251,13 @@ z.ai 외에도 아래의 훌륭한 AI 프로그래밍 플랫폼을 시도해 볼 > 2. 뱀이 단어 8개를 먹으면, llm이 이 단어들을 바탕으로 시를 만들어야 하고, 필요에 따라 이 시를 다시 섞을 수 있어야 해. > 3. 시가 완성되면, 다음 단계에서 이 시를 바탕으로 이미지를 자동으로 만들어야 해. > -> ![](images/image14.png) +> ![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image14.png) 개발 과정에서는 기대만큼 좋지 않은 문제를 만날 수 있습니다. 예를 들어 버튼을 클릭해도 아무 반응이 없거나, 기능을 사용할 때 오류가 나거나, 기능이 예상대로 작동하지 않거나, 프론트엔드 페이지가 기대한 디자인과 맞지 않을 수 있습니다. 이런 상황에서는 모델에게 더 질문하여 예상치 못한 문제를 수정하도록 도와야 합니다. -![](images/image15.png) +![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image15.png) ### 3.2 게임에 새 기능 추가하기 @@ -310,13 +310,13 @@ z.ai 외에도 아래의 훌륭한 AI 프로그래밍 플랫폼을 시도해 볼 z.ai의 답변은 다음과 같을 것입니다. -![](images/image56.png) +![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image56.png) 이 프롬프트를 사용해 풀스택 개발 모드에서 프로젝트를 다시 생성할 수 있습니다. -![](images/image57.png) +![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image57.png) -![](images/image58.png) +![](../../../zh-cn/stage-1/ai-capabilities-through-games/images/image58.png)
@@ -649,7 +649,7 @@ HTML, CSS, JavaScript 같은 프론트엔드 기초 지식을 더 깊이 이해 > 💡 Vibe Coding이란 무엇인가요? 컴퓨터 과학자 [Andrej Karpathy](https://karpathy.ai/)(OpenAI 공동 창립자 중 한 명이자 Tesla 전 AI 책임자)는 2025년 2월 **vibe coding**이라는 용어를 제안했습니다. 이 개념은 LLM에 의존하는 코딩 방법을 가리키며, **프로그래머가 코드를 직접 작성하는 대신 자연어 설명을 제공하여 작동 가능한 코드를 생성할 수 있게 합니다.** -![1767350588191](images/1767350588191.png) +![1767350588191](../../../zh-cn/stage-1/ai-capabilities-through-games/images/1767350588191.png) 문자 그대로 보면 Vibe Coding은 “말로 개발하는 방식”으로 이해할 수 있습니다. 핵심 변화는 다음과 같습니다. 더 이상 코드를 한 줄씩 직접 쓰고, 문법을 찾고, Bug를 고칠 필요가 없습니다. 원하는 것을 자연어로 바로 설명합니다. 예를 들면 다음과 같습니다. 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 deleted file mode 100644 index dea9ce9..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image1.png and /dev/null 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 deleted file mode 100644 index ef73982..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image10.png and /dev/null 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 deleted file mode 100644 index a317bdb..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image11.png and /dev/null 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 deleted file mode 100644 index b1794f7..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image12.png and /dev/null 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 deleted file mode 100644 index 860ebfb..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image13.png and /dev/null 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 deleted file mode 100644 index 1a3fc26..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image14.png and /dev/null 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 deleted file mode 100644 index 40afaa1..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image15.png and /dev/null 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 deleted file mode 100644 index 14f4920..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image16.png and /dev/null 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 deleted file mode 100644 index cac7ae7..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image17.png and /dev/null 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 deleted file mode 100644 index 1d26382..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image18.png and /dev/null 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 deleted file mode 100644 index 0f04893..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image19.png and /dev/null 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 deleted file mode 100644 index 7609bfe..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image2.png and /dev/null 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 deleted file mode 100644 index 87e0552..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image20.png and /dev/null 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 deleted file mode 100644 index c667b28..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image21.png and /dev/null 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 deleted file mode 100644 index ba5ac0d..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image3.png and /dev/null 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 deleted file mode 100644 index 6d15f44..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image4.png and /dev/null 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 deleted file mode 100644 index eed863b..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image5.png and /dev/null 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 deleted file mode 100644 index 8c84032..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image6.png and /dev/null 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 deleted file mode 100644 index 5cefa6a..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image7.png and /dev/null 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 deleted file mode 100644 index 9b15b82..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image8.png and /dev/null 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 deleted file mode 100644 index ffb380a..0000000 Binary files a/docs/ko-kr/stage-1/appendix-a-product-thinking/images/image9.png and /dev/null 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 index 94185ba..c6ae39e 100644 --- a/docs/ko-kr/stage-1/appendix-a-product-thinking/index.md +++ b/docs/ko-kr/stage-1/appendix-a-product-thinking/index.md @@ -71,7 +71,7 @@ const duration = '약 6시간' 넷째, **현 상태보다 더 나은 방법이나 도구를 제시해야 합니다**. 사용자는 원래 이 일을 어떻게 하고 있었나요. 머리로 기억했나요, 종이와 펜으로 적었나요, Excel을 썼나요, 스크린샷을 저장했나요, 아니면 여러 앱 사이를 오가며 처리했나요. 당신이 제공하는 것이 분명히 더 수월하고, 더 안정적이고, 더 즐거운 방식이라면, 그 아이디어는 비로소 가치가 생기기 시작합니다. -![](images/image1.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image1.png) 위와 같은 사고가 잘 정리되지 않아도 괜찮습니다. 지금은 인공지능의 시대입니다. 위 내용을 하나의 완성된 프롬프트로 정리하고, 당신의 생각, 목표 사용자, 사용 장면을 함께 적어 대형 모델에게 보완과 정제를 맡길 수 있습니다. 모델을 언제든 온라인으로 대기하는 제품 공동창업자처럼 여기고, 반복해서 대화하고, 되묻고, 수정하면 흐릿한 개념을 구체화할 수 있습니다. @@ -91,7 +91,7 @@ const duration = '약 6시간' 가짜 요구의 전형적인 상황은 정반대입니다. 당신이 먼저 꺼내지 않으면 대부분의 사람은 그것이 문제라는 사실을 의식하지 못하고, 반드시 해결해야 한다고 느끼지도 않습니다. 당신이 묘사하는 사용 장면은 사용자의 일상생활보다 당신의 상상 속에 더 많이 존재합니다. 그들은 소개를 듣고 나서도 이것이 좋고 재미있다고 느낄 뿐, 돈을 내지 않고, 심지어 돌아서면 잊어버립니다. 이런 아이디어는 이야기를 쓰는 데는 괜찮을 수 있지만 제품을 만드는 데는 매우 위험합니다. -![](images/image2.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image2.png) 그래서 **자기만족을 피하는 첫 번째 방어선은 사용자 요구를 이해하는 것**입니다. 시작할 때부터 당신은 겉보기에는 단순하지만 매우 중요한 질문에 답하도록 스스로를 몰아붙여야 합니다. 나 자신 말고, 누가 이 일 때문에 진지하게 골머리를 앓고 있는가. 포럼, 커뮤니티, 댓글 영역을 볼 수도 있고, 주변에서 사용자가 될 가능성이 있는 몇 사람에게 직접 물어볼 수도 있습니다. "나는 매번 이 일 때문에 발목이 잡힌다"거나 "지금 방식은 정말 너무 번거롭다"와 같은 실제 감정이 담긴 불평을 듣기 어렵다면, 그 아이디어는 실제 요구와 아직 거리가 있다는 뜻입니다. @@ -117,7 +117,7 @@ const duration = '약 6시간' 아래 네 가지 출처를 진지하게 실행한다면, 그 안에서 시작할 수 있는 방향을 쉽게 캐낼 수 있습니다. -![](images/image3.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image3.png) ### 자신의 삶을 사랑하기 @@ -127,7 +127,7 @@ const duration = '약 6시간' 고양이 사진을 찍는 일을 생각해 봅시다. 많은 사람이 이런 일을 겪습니다. 자신은 휴대폰을 들고 있는데 고양이는 도무지 렌즈를 보지 않습니다. 고개를 숙여 발을 핥거나 다른 구석만 바라봅니다. 그렇다면 휴대폰이나 태블릿 화면에 자동으로 움직이는 빨간 점, 깃털, 작은 벌레 애니메이션이 나타나 고양이의 시선을 끌어 주는 작은 도구를 만들 수는 없을까요? 촬영 버튼을 누르면 그것이 자동으로 전면 카메라 근처를 한 바퀴 돌며 고양이의 시선을 렌즈 방향으로 "속여" 오고, 동시에 연속 촬영을 해서 그중 선명하고 예쁜 한 장을 골라 줍니다. 한 걸음 더 생각하면, 이 앱은 고양이마다 어떤 색, 어떤 이동 경로에 가장 흥미를 보이는지도 기록하고, 다음에는 그 고양이만의 전용 낚시 모드를 자동으로 사용해 성공률을 높일 수 있습니다. -![](images/image4.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image4.png) 당신이 화장이나 스킨케어 과정을 즐긴다면, 집 화장대 위의 모든 제품 뒤에는 많은 시행착오와 의사결정이 숨어 있습니다. 매번 메이크업 사진을 휴대폰 앨범에 찍어 두는 데 이미 익숙할 수 있습니다. 하지만 나중에 돌아볼 때마다 그날 어떤 립스틱과 어떤 아이섀도 팔레트를 썼는지 하나하나 떠올려야 합니다. 그렇다면 이런 정보를 체계적으로 기록해서 나만의 메이크업 도감을 만들 수 있지 않을까요? 더 나아가 앱이 어떤 메이크업을 어떤 상황에서 가장 많이 사용했는지, 어떤 조합이 사진에서 가장 잘 나왔는지 통계로 보여 줄 수도 있습니다. 그러면 매번 화장을 고를 때 처음부터 다시 생각하지 않아도 됩니다. @@ -230,7 +230,7 @@ const duration = '약 6시간' "**괜찮아, 이건 나중에 기회가 되면 만들면 되지...**" -![](images/image5.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image5.png) 생각만 하지 마세요. 바로 지금입니다. 이 장에서 하려는 일은, 아이디어를 만들 수 있는 버전으로 분해하는 방법을 배우도록 돕는 것입니다. 무에서 유를 만드는 일은 천재성에 의존하지 않고, 반복해서 연습할 수 있는 구체적인 동작들에 의존한다는 것을 보게 됩니다. **발산, 수렴, 분해, 세분화, 참고, 질문**입니다. 이 순서대로 하면 팀이 없어도, 시간이 많지 않아도, 하나의 아이디어를 흐름이 돌아가는 앱 데모로 바꿀 수 있습니다. @@ -244,9 +244,9 @@ const duration = '약 6시간' 더블 다이아몬드 모델은 영국 디자인 카운슬이 제시한 혁신과 디자인 프로세스 프레임워크입니다. 전체 과정을 연속된 두 개의 마름모, 즉 "더블 다이아몬드"에 비유합니다. 첫 번째 다이아몬드는 "문제 발견"에서 "명확한 문제 정의"로 가는 과정으로, 먼저 넓게 발산하고 충분히 조사하며 사용자를 이해한 뒤, 진짜 해결해야 할 핵심 문제로 수렴하는 것을 강조합니다. 두 번째 다이아몬드는 "솔루션 발전"에서 "최종 솔루션 전달"로 가는 과정으로, 가능한 해결 생각을 과감히 발산하고 탐색하며 프로토타입을 반복한 뒤, 다시 수렴하고 선별하고 다듬어 가장 적합하고 구현 가능한 방안을 만드는 과정입니다. 더블 다이아몬드 모델은 문제와 솔루션 두 단계 모두에서 "발산-수렴"을 거쳐야 함을 강조합니다. 처음부터 솔루션으로 뛰어드는 것을 피함으로써 혁신의 품질과 성공률을 높이는 것입니다. -![](images/image6.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image6.png) -![](images/image7.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image7.png) ### 첫 번째 다이아몬드: 문제 이해, 단일 지점에서 전체 모습으로 발산하고 수렴하기 @@ -282,7 +282,7 @@ const duration = '약 6시간' 여기서 필요한 능력은 **분해하고 세분화하여 추상을 구체로 바꾸는 능력**입니다. 크고 넓은 목표를 바로 손댈 수 있는 최소 실행 항목까지 조금씩 쪼개고 세부화하는 것입니다. 이 능력은 제품을 만들 때뿐 아니라 생활에서도 매우 중요합니다. -![](images/image8.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image8.png) ### 생활 예시에서 시작하기: 햄버거가 먹고 싶다는 말은 도대체 무엇을 뜻하는가 @@ -316,7 +316,7 @@ const duration = '약 6시간' "효율"이라는 말도 따로 쪼개 볼 가치가 있습니다. **효율은 도대체 무엇을 뜻할까요? 단순히 속도인가요, 아니면 속도뿐 아니라 품질, 오류율, 이해 난이도까지 포함하나요?** 예를 들어 20페이지 문서를 30분에 읽던 것을 5분에 핵심만 훑게 만드는 것은 속도입니다. 사용자가 요약에서 잘못된 논리나 데이터 모순을 빠르게 발견하게 하는 것은 품질입니다. 원래 전문 용어에 익숙하지 않은 사람도 설명과 표시를 통해 보고서를 이해하도록 돕는 것은 인지 문턱을 낮추는 일입니다. 스스로에게 아주 직접적으로 물을 수 있습니다. 이 앱이 매우 성공했다면 사용자에게 가장 큰 변화는 무엇인가. "문서에 쓰는 시간이 절반으로 줄었다"인가, 아니면 "문서 관련 일을 할 때 마음이 덜 지쳤다"인가. 이 문장에 명확히 답하면 기능 우선순위의 근거가 생깁니다. -![](images/image9.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image9.png) #### 두 번째 층의 분해와 세분화 @@ -373,7 +373,7 @@ const duration = '약 6시간' 이런 설명은 더 이상 공허한 구호가 아니라, 곧바로 프롬프트가 되거나 AI가 plan으로 실행할 수 있는 지시 묶음이 됩니다. 예를 들어 이 문장을 개발 능력을 가진 AI에게 던져 개발 방안을 생성하게 하거나, 직접 최소 사용 가능 버전의 웹 앱을 만들게 할 수 있습니다. 디자이너에게 주어 구체적인 인터페이스 프로토타입을 그리게 할 수도 있고, 엔지니어 동료에게 보내 구현 비용과 기술 방안을 빠르게 평가하게 할 수도 있습니다. -![](images/image10.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image10.png) 여기까지 하면 두 가지 현실적인 변화를 보게 됩니다. 첫째, 더 이상 "효율을 높이는 앱을 만들겠다"는 문장에 눌리지 않고, 즉시 손댈 수 있는 단계를 갖게 됩니다. 둘째, 다른 사람과의 소통 비용이 급격히 낮아집니다. 충분히 구체적으로 쪼갠 초기 방안을 내놓을 수 있기 때문입니다. @@ -390,7 +390,7 @@ const duration = '약 6시간' 전체 앱을 먼저 세 종류의 페이지로 나눌 수 있습니다. 입구 페이지, 작업 페이지, 결과 페이지입니다. -![](images/image11.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image11.png) ### 입구 페이지: 사용자는 어디에서 들어오고, 첫눈에 무엇을 보는가 @@ -439,9 +439,9 @@ const duration = '약 6시간' - 결과를 보여 줄 때 가장 중요한 정보가 가장 눈에 띄는 곳에 놓여 있는가. 부차 정보는 어떻게 접어 두었는가. - 새 사용자가 처음 들어올 때 다음에 어떻게 쓰는지 알려 주는 짧은 안내 흐름이 있는가. -![](images/image12.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image12.png) -![](images/image13.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image13.png) 다음과 같은 웹페이지 스크린샷 수집 사이트를 참고할 수 있습니다. @@ -518,7 +518,7 @@ const duration = '약 6시간' 좋은 앱의 가장 직접적인 특징은, 어떤 장면에서 사람이 실제로 조금이라도 이익을 얻도록 한다는 것입니다. 이 이익은 거창할 필요도 없고, 어려운 말로 포장할 필요도 없습니다. 하지만 당신이 분명히 말할 수 있을 정도로 구체적이어야 합니다. **그것이 도대체 사용자가 무엇을 덜 하게 했는지, 얼마나 시간을 덜 쓰게 했는지, 또는 어떤 일을 덜 실수하게 만들었는지** 말입니다. -![](images/image14.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image14.png) 예를 들어 간단한 회의록 도구가 있다고 합시다. 녹음을 업로드하거나 회의 중 직접 녹음하기만 하면, 회의가 끝난 뒤 구조화된 회의록을 자동으로 생성하고, 할 일, 담당자, 마감일을 목록으로 정리해 준다면, 사용자가 절약하는 것은 단순한 타자 시간이 아닙니다. 기록, 정리, 선별, 형식화 출력까지 전체 과정의 정신적 에너지입니다. 이 도구가 회의 한 번마다 한 사람에게 대략 20분을 절약해 준다고 매우 명확히 말할 수 있습니다. 팀 전체가 매주 이런 회의를 10번 한다면 총 절약 시간은 상당합니다. @@ -530,7 +530,7 @@ const duration = '약 6시간' 또 하나 과소평가되기 쉽지만 매우 중요한 특징은 **좋은 앱은 대개 많은 설명이 필요 없다는 것**입니다. 사용자가 처음 열었을 때 직감만으로 어디서 시작해야 할지, 무엇을 누르면 무슨 일이 생기는지 대략 알 수 있습니다. 가장 큰 버튼은 보통 가장 핵심적인 일을 하며, 가장 중요한 입구는 진짜 중요한 위치에 놓여 있습니다. 메뉴 세 번째 층에 숨어 있지 않습니다. -![](images/image15.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image15.png) 방금 당신의 앱을 다운로드한 새 사용자를 상상해 보세요. 그는 줄을 서 있거나, 차 안에 있거나, 카페에서 무심코 열었을 수 있습니다. 그때 네트워크 신호가 꼭 좋지는 않고, 긴 설명서를 읽을 인내심도 없습니다. 그가 견딜 수 있는 혼란의 시간은 대개 몇 초뿐입니다. 이 몇 초 안에 어떤 명확한 안내도 보이지 않고, 다음에 무엇을 해야 할지 모르면, 바로 닫아 버리고 다시 돌아오지 않을 가능성이 큽니다. @@ -560,7 +560,7 @@ const duration = '약 6시간' ## 3.2 요구 통찰: **매슬로의 욕구 단계 이론** -![](images/image16.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image16.png) 앱을 만들기 전에 많은 사람은 곧장 기능 차원으로 뛰어듭니다. 이쪽에 무엇을 더 만들 수 있을까, 저쪽에 버튼을 하나 더 넣을까. 그러나 앱이 살아남을 수 있는지를 진짜로 결정하는 것은, 당신이 사람의 어느 층위의 욕구를 얼마나 정확히 밟았는가입니다. @@ -643,7 +643,7 @@ const duration = '약 6시간' C 사이드 앱은 개인 사용자를 향하며, 각자의 일상생활 안에 박혀 있습니다. 흔한 유형에는 콘텐츠형, 도구형, 엔터테인먼트형, 소셜형, 학습형 등이 있습니다. -![](images/image17.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image17.png) 콘텐츠형 앱은 뉴스 읽기, 짧은 영상 플랫폼, 팟캐스트 도구 같은 것입니다. 핵심 작업은 보통 제한된 시간 안에 방대한 정보에서 사용자가 관심 있는 내용을 걸러 내게 하는 것입니다. 동시에 계속 새로운 것이 있어 사용자가 돌아오게 해야 합니다. @@ -669,7 +669,7 @@ C 사이드의 진짜 요구를 판단하는 간단한 방법은, 사용자가 B 사이드 앱은 기업, 팀, 기관 또는 어떤 부서를 향합니다. 흔한 유형에는 ERP(자원 관리 시스템), CRM(고객 관계 관리), 협업 오피스 도구, 각종 SaaS 도구, 업계 내부 관리 시스템 등이 있습니다. -![](images/image18.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image18.png) 이런 앱이 C 사이드와 가장 다른 점은 여러 역할의 요구를 동시에 만족시켜야 한다는 것입니다. 사용자는 현장 직원일 수 있지만, 의사결정자는 관리자나 대표일 수 있습니다. 데이터의 소유자는 조직 자체일 수 있고, 승인 흐름은 여러 부서를 포함할 수 있습니다. 당신은 사용자가 쓰기 좋다고 느끼게 해야 할 뿐 아니라, **의사결정자가 투자 대비 수익을 보게 해야 하며**, 전체 조직이 위험과 규정 준수 측면에서 안전하다고 느끼게 해야 합니다. @@ -770,7 +770,7 @@ AI가 없어도 앱이 성립하고, 명확한 향상 지점도 찾았다면, 더 명확한 사고 방식은 AI를 몇 가지 다른 부품으로 보는 것입니다. **AI는 두뇌가 될 수도 있고, 눈이 될 수도 있고, 손이 될 수도 있습니다**. 제품 목표에 따라 AI가 그중 어떤 부분을 담당하는지 결정해야 합니다. 가능하다면 처음에는 한두 가지 역할만 골라 잘 만드는 것이 좋습니다. 한꺼번에 모두 집어넣지 마세요. -![](images/image19.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image19.png) **AI가 두뇌 역할을 할 때는 주로 문자 내용을 이해하고 생성하거나, 복잡한 정보 사이에서 추론을 담당합니다.** 예를 들어 회의록 도우미를 만든다면, 긴 녹음에서 진짜 핵심 토론 지점을 잡아낼 수 있어야 합니다. 단순히 시간 순서대로 나열하는 것이 아닙니다. 학습 앱을 만든다면, 사용자의 답을 바탕으로 그가 개념을 이해하지 못한 것인지, 아니면 단지 부주의하게 단계를 잘못 쓴 것인지 판단하고 서로 다른 피드백을 제공할 수 있어야 합니다. 이런 장면에서 AI의 가치는 사용자가 한 말을 읽고, 사용자가 제공한 자료를 이해한 뒤, 구조와 논리를 가진 출력을 생성할 수 있다는 데 있습니다. 당신이 해야 할 일은 사용자의 문제를 분명히 묻고, 컨텍스트를 충분히 정확하게 먹여 이 두뇌가 판단할 만큼 충분한 정보를 갖게 하는 것입니다. @@ -839,7 +839,7 @@ AI가 없어도 앱이 성립하고, 명확한 향상 지점도 찾았다면, 먼저 서로 다른 장면이 AI에 요구하는 것이 다르다는 점을 이해해야 합니다. 앞의 workflow와 context 예시가 보여 준 것처럼, 흐름과 정보가 모두 확실할 때 AI는 사실 발휘할 공간이 별로 없고 전통 자동화로 충분합니다. 흐름은 확실하지만 정보가 불확실할 때 AI의 가치는 이해와 보완에 있습니다. 흐름이 불확실할 때에야 AI는 계획과 탐색을 해야 합니다. 이 분해 방식의 본질은 불확실성의 출처와 정도를 식별하는 것입니다. AI의 핵심 능력은 불확실성 속에서 패턴과 연관을 찾는 것입니다. 이 사고 방식은 Agent에만 적용되는 것이 아닙니다. 이미지 인식, 콘텐츠 생성, 추천 시스템 등 여러 영역에서도 똑같이 중요합니다. 예를 들어 AI 누끼 도구를 만든다면, 입력은 확실합니다(이미지 한 장). 하지만 가장자리 인식의 정확성, 복잡한 배경 처리 능력이 바로 불확실성이 있는 곳입니다. -![](images/image20.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image20.png) 하지만 AI는 불확실성을 해결하는 동시에 새로운 불확실성도 도입합니다. 출력은 확률적이며, 잘못 이해하고, 추론이 치우치고, 환각을 만들 수 있습니다. 서로 다른 장면과 서로 다른 사용자는 이런 불확실성을 견디는 정도가 완전히 다릅니다. 그래서 다음 질문도 해야 합니다. @@ -1096,4 +1096,4 @@ AI가 없어도 앱이 성립하고, 명확한 향상 지점도 찾았다면, **_결말은 그곳에 이르기까지의 어떤 순간보다도 더 중요하지 않습니다._** -![](images/image21.png) +![](../../../zh-cn/stage-1/appendix-a-product-thinking/images/image21.png) 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 deleted file mode 100644 index b2c2184..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image1.png and /dev/null 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 deleted file mode 100644 index d3b6fba..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image10.png and /dev/null 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 deleted file mode 100644 index 7be43ce..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image11.png and /dev/null 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 deleted file mode 100644 index bad2d07..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image12.png and /dev/null 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 deleted file mode 100644 index e8a263d..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image13.png and /dev/null 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 deleted file mode 100644 index 31f377b..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image14.png and /dev/null 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 deleted file mode 100644 index 33a1ecb..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image15.png and /dev/null 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 deleted file mode 100644 index 7a15f9f..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image16.png and /dev/null 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 deleted file mode 100644 index 6e3afae..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image17.png and /dev/null 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 deleted file mode 100644 index cf7da26..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image18.png and /dev/null 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 deleted file mode 100644 index 5855787..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image19.png and /dev/null 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 deleted file mode 100644 index c2ebe40..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image2.png and /dev/null 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 deleted file mode 100644 index 5723912..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image20.png and /dev/null 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 deleted file mode 100644 index 9cdc651..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image21.png and /dev/null 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 deleted file mode 100644 index f0a1452..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image22.png and /dev/null 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 deleted file mode 100644 index b83fe56..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image23.png and /dev/null 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 deleted file mode 100644 index ae99dc5..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image24.png and /dev/null 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 deleted file mode 100644 index 78ffa69..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image25.png and /dev/null 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 deleted file mode 100644 index 17da89f..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image26.png and /dev/null 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 deleted file mode 100644 index 74e2140..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image27.png and /dev/null 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 deleted file mode 100644 index 8ecab49..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image28.png and /dev/null 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 deleted file mode 100644 index a99341e..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image29.png and /dev/null 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 deleted file mode 100644 index 9619350..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image3.png and /dev/null 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 deleted file mode 100644 index 3be46e2..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image30.png and /dev/null 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 deleted file mode 100644 index 13e2a65..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image31.png and /dev/null 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 deleted file mode 100644 index 0025fbf..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image32.png and /dev/null 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 deleted file mode 100644 index 8f3e466..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image33.png and /dev/null 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 deleted file mode 100644 index 34ac842..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image34.png and /dev/null 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 deleted file mode 100644 index 94d62b0..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image35.png and /dev/null 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 deleted file mode 100644 index 998f300..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image4.png and /dev/null 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 deleted file mode 100644 index 3fdd5f3..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image5.png and /dev/null 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 deleted file mode 100644 index e813873..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image6.png and /dev/null 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 deleted file mode 100644 index 9dd478c..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image7.png and /dev/null 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 deleted file mode 100644 index f4256b3..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image8.png and /dev/null 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 deleted file mode 100644 index 6e98717..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-1/images/image9.png and /dev/null 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 index dc4b332..8f01416 100644 --- 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 @@ -206,7 +206,7 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성 - **결과 예시** -![](images/image1.png)![](images/image2.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image2.png) --- @@ -245,13 +245,13 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성 - **주요 특징과 워크플로:** Lovable은 통합과 협업 측면에서 잘 만들어져 있습니다. Supabase 데이터베이스 연결 같은 초기화 작업을 자동으로 처리하여 프로젝트 구축 과정이 매우 매끄럽습니다. 프로젝트 요구사항만 설명하면 Agent가 각종 서비스를 연결하고 기본 구조를 만들어 줍니다. - **적합한 사용자:** Vibe Coding을 처음 시도하는 초보자에게 Lovable은 매우 친절한 선택입니다. 여러 서비스를 함께 연결하는 복잡도를 단순화해 주므로 환경 설정이 아니라 프롬프트와 반복 개선에 집중할 수 있습니다. 높은 자동화 덕분에 실행 가능한 프로토타입을 빠르게 얻을 수 있습니다. - **프롬프트 과정:** - ![](images/image3.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image3.png) - **스네이크 게임 결과:** -![](images/image4.png)![](images/image5.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image4.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image5.png) - **가격:** 비교적 비싼 편이지만, 학교 이메일이 있으면 학생 인증을 통해 반값으로 사용할 수 있습니다. - ![](images/image6.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image6.png) ### 2. Cursor(IDE) @@ -259,13 +259,13 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성 - **주요 특징과 워크플로:** Cursor는 AI 기능이 통합된 전용 IDE이며 Windows, macOS, Linux를 지원합니다. 코드 생성, 지능형 재작성, 코드베이스 질의 같은 기능을 개발 환경 안에 직접 넣었습니다. Web 도구와 비교하면 전통적인 로컬 개발 경험에 더 가깝습니다. 로컬 환경이기 때문에 컴퓨터마다 설정이 다르고, 때때로 환경 관련 문제가 발생할 수 있습니다. 장점은 프로젝트가 내 컴퓨터에 있으므로 추가로 다운로드하거나 실행 환경을 설정할 필요가 적고, Cursor가 많은 번거로운 단계를 처리해 준다는 점입니다. - **적합한 사용자:** 어느 정도 프로그래밍 기초가 있는 사용자에게 Cursor는 매우 강력하고 익숙한 환경입니다. 그러나 완전 초보자에게는 프로젝트 구조, 의존성 관리, 파일 구성 같은 개념을 스스로 이해해야 하므로 학습 곡선이 더 가파를 수 있습니다. 전통적인 코딩 흐름에 AI 어시스턴트를 추가하고 싶은 개발자에게 더 적합합니다. - **프롬프트 과정:** - ![](images/image7.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image7.png) - **스네이크 게임 결과:** -![](images/image8.png)![](images/image9.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image8.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image9.png) - **가격:** - ![](images/image10.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image10.png) ### 3. Z.ai(Web-based) @@ -273,30 +273,30 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성 - **주요 특징과 워크플로:** Z.ai의 사용 방식은 비교적 직접적이지만, 뚜렷한 어려움이 하나 있습니다. **생성된 코드를 수동으로 복사해 붙여 넣어야 한다**는 점입니다. 플랫폼 자체에 실시간 미리보기 창이 부족하여 코드 실행 결과를 즉시 보기 어렵습니다. - **적합한 사용자:** 이 플랫폼은 비교적 “직접 손을 대는” 사용 방식을 요구합니다. 자동화가 부족하다는 것은 코드와 직접 마주해야 한다는 뜻이고, AI 출력 내용을 깊이 이해하고 싶은 사람에게는 오히려 훈련이 될 수 있습니다. 하지만 잦은 복사 붙여넣기는 효율 문제와 실수 위험을 가져옵니다. 원클릭 경험을 원하는 사람보다는 “AI가 원시적으로 출력한 코드”를 보고 싶은 학생에게 더 적합합니다. - **프롬프트 과정:** - ![](images/image11.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image11.png) - **스네이크 게임 결과:** -![](images/image12.png)![](images/image13.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image12.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image13.png) - **가격:** - ![](images/image14.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image14.png) ### 4. Replit(Web-based) - **플랫폼 유형:** Web - **주요 특징과 워크플로:** Replit은 통합 온라인 개발 및 배포 환경입니다. 브라우저 안에서 코드를 작성하고, 프로그램을 실행하고, 온라인 접속 주소를 생성할 수 있습니다. 코딩을 시작하기 전에 명확한 실행 계획을 제시합니다. 또한 시각적 편집기도 제공하므로 미리보기 창에서 UI를 직접 수정할 수 있고, 소스 코드는 자동으로 동기화되어 업데이트됩니다. 이를 통해 AI 출력이 기대와 맞는지 수시로 확인할 수 있어 왕복 수정 횟수를 크게 줄일 수 있습니다. - ![](images/image15.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image15.png) - **적합한 사용자:** Replit은 초보자에게 매우 친절합니다. 코딩부터 배포까지의 전체 폐쇄 루프를 단순화하여 서버나 호스팅 서비스를 직접 따로 설정할 필요가 없습니다. 협업 기능도 강력해 학생들이 함께 프로젝트를 하거나 다른 사람에게 원격으로 코드 확인을 부탁하기에도 적합합니다. - **프롬프트 과정:** 구축 과정에서 AI가 처음부터 요구사항을 완전히 이해한 것은 아니었고, 중간에 약 3번의 반복을 거친 뒤에야 최종 출력이 이상적인 결과에 도달했습니다. - ![](images/image16.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image16.png) - **스네이크 게임 결과:** -![](images/image17.png)![](images/image18.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image17.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image18.png) - **가격:** - ![](images/image19.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image19.png) ### 5. Minimax(Web-based) @@ -305,14 +305,14 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성 - **적합한 사용자:** 자동으로 테스트를 실행하고 오류를 수정하기 때문에 시간과 Token 소비가 모두 큰 편입니다. 하지만 AI가 문제를 찾고 해결하는 과정을 분명히 볼 수 있으므로 학습 관점에서는 가치가 있습니다. - **프롬프트 과정:** -![](images/image20.png)![](images/image21.png)![](images/image22.png)![](images/image23.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image20.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image21.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image22.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image23.png) - **스네이크 게임 결과:** -![](images/image24.png)![](images/image25.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image24.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image25.png) - **가격:** 무료 버전은 복잡한 프로젝트에서 처음부터 끝까지 순조롭게 실행되지 않을 가능성이 높으므로, 프로젝트를 완전히 구축하려면 유료 업그레이드를 더 추천합니다. - ![](images/image26.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image26.png) ### 6. Trae(IDE) @@ -320,13 +320,13 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성 - **주요 특징과 워크플로:** 데스크톱 애플리케이션인 Trae는 Web 도구와 비교했을 때 보통 성능과 응답 속도에서 더 유리합니다. 하지만 다운로드와 설치가 필요하므로 일부 사용자에게는 입문 장벽이 조금 높을 수 있습니다. 마찬가지로 로컬 환경이기 때문에 컴퓨터 설정과 의존성 환경의 차이에서 일정한 불확실성이 생깁니다. 장점은 Trae가 로컬에서 프로젝트 생성과 실행 설정을 도와주며, 사용자가 자신의 컴퓨터에서 바로 개발하고 디버깅할 수 있다는 점입니다. - **적합한 사용자:** 장기적으로 Vibe Coding 프로젝트를 진행할 계획이 있고, 전용 데스크톱 도구를 사용하고 싶은 사용자에게 더 적합합니다. “가끔 한 번 해보는” 정도를 원하는 학생에게는 가장 가벼운 선택이 아닐 수 있습니다. - **프롬프트 과정:** - ![](images/image27.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image27.png) - **스네이크 게임 결과:** -![](images/image28.png)![](images/image29.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image28.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image29.png) - **가격:** 가격은 비교적 친근한 편이며, 무료 버전만으로도 품질이 괜찮은 작은 프로젝트를 완성하기에 충분합니다. - ![](images/image30.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image30.png) ### 7. V0(Web-based) @@ -334,14 +334,14 @@ AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성 - **주요 특징과 워크플로:** V0는 Vercel이 제공하는 React UI 컴포넌트 생성에 집중한 도구입니다. 고품질의 프로덕션 사용 가능한 인터페이스를 생성하는 데 뛰어납니다. 하지만 실제 사용 중에는 “코드 보기 화면을 찾기 어렵다”, “API Key를 어디에 설정해야 하는지 명확히 설명하지 않는다” 같은 문제가 나타납니다. - **적합한 사용자:** V0는 프론트엔드와 UI/UX 디자인에 집중하는 학생이나 디자이너에게 매우 적합합니다. 하지만 완전한 풀스택 솔루션은 아니므로 백엔드 로직과 API 통합을 구현하려면 여전히 다른 플랫폼을 사용해야 합니다. 따라서 목표가 “한 번에 완전한 애플리케이션 구축”이라면 최우선 선택은 아닐 수 있습니다. - **프롬프트 과정:** - ![](images/image31.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image31.png) - ![](images/image32.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image32.png) - **스네이크 게임 결과:** - ![](images/image33.png)![](images/image34.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image33.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image34.png) - **가격:** 무료 사용자는 대략 4-5개의 간단한 프로젝트를 만들 수 있습니다. - ![](images/image35.png) + ![](../../../../zh-cn/stage-1/appendix-articles/example0-1/images/image35.png) ## 3. 플랫폼 요약 비교 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 deleted file mode 100644 index 6fdf2b2..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image1.png and /dev/null 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 deleted file mode 100644 index bd109a4..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image10.png and /dev/null 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 deleted file mode 100644 index 9bae06a..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image11.png and /dev/null 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 deleted file mode 100644 index 3d8eb2d..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image12.png and /dev/null 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 deleted file mode 100644 index 820d58e..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image13.png and /dev/null 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 deleted file mode 100644 index c928ba4..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image14.png and /dev/null 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 deleted file mode 100644 index a6c6d68..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image15.png and /dev/null 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 deleted file mode 100644 index f8789b9..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image16.png and /dev/null 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 deleted file mode 100644 index ce8ea89..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image17.png and /dev/null 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 deleted file mode 100644 index d420e5a..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image18.png and /dev/null 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 deleted file mode 100644 index a18a5b0..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image19.png and /dev/null 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 deleted file mode 100644 index be00846..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image2.png and /dev/null 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 deleted file mode 100644 index 9149778..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image20.png and /dev/null 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 deleted file mode 100644 index 1b75609..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image21.png and /dev/null 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 deleted file mode 100644 index 3d4184d..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image22.png and /dev/null 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 deleted file mode 100644 index fb0157f..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image23.png and /dev/null 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 deleted file mode 100644 index 7397786..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image3.png and /dev/null 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 deleted file mode 100644 index ae557f0..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image4.png and /dev/null 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 deleted file mode 100644 index db89185..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image5.png and /dev/null 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 deleted file mode 100644 index c25f532..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image6.png and /dev/null 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 deleted file mode 100644 index c25f532..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image7.png and /dev/null 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 deleted file mode 100644 index 54c6c3d..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image8.png and /dev/null 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 deleted file mode 100644 index 4759fb0..0000000 Binary files a/docs/ko-kr/stage-1/appendix-articles/example0-2/images/image9.png and /dev/null 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 index 9eac603..ac5b2e4 100644 --- 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 @@ -79,7 +79,7 @@ AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경 - 위 프롬프트 입력 → Agent가 생성한 여러 디자인 시안을 비교합니다. -![](images/image1.png)![](images/image2.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image1.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image2.png) ## 4. 최종 로고 확정하기 @@ -138,11 +138,11 @@ AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경 - https://colorhunt.co/ - https://coolors.co/ -![](images/image3.png)![](images/image4.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image3.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image4.png) - **Google에서 키워드로 색상 조합 검색하기** -![](images/image5.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image5.png) ## 4. 웹사이트 디자인 프롬프트 작성하기 @@ -164,7 +164,7 @@ AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경 **Mastergo 프롬프트 예시** -![](images/image6.png)![](images/image7.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image6.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image7.png) ## 2. 디자인 시안 검토하고 수정 의견 제시하기 @@ -175,7 +175,7 @@ AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경 - “색상 조합을 조정해 주세요.” - “여기 이 블록을 삭제해 주세요.” -![](images/image8.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image8.png) ## 3. 최종 디자인 확정하기 @@ -187,15 +187,15 @@ AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경 1. [Mastergo 플러그인 웹사이트](https://mastergo.com/community/plugin)를 열고 **seal**을 검색합니다. -![](images/image9.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image9.png) 2. 디자인 페이지로 돌아가 **사각형 아이콘(플러그인)** 을 클릭합니다. -![](images/image10.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image10.png) 3. 코드로 변환하고 싶은 디자인 영역을 선택하고 **Generate** 버튼을 클릭해 코드를 생성합니다. -![](images/image11.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image11.png) --- @@ -274,7 +274,7 @@ function showAlert() { 배경은 검정색, 글자는 흰색으로 해 주세요." ``` -![](images/image12.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image12.png) ## 3. 웹사이트 실행하기 @@ -295,7 +295,7 @@ Agent가 프로젝트를 다시 시작하고 미리보기 페이지를 열어 - “버튼을 조금 더 크게 만들어 주세요.” - “글꼴을 조금 더 굵게 해 주세요.” -![](images/image13.png)![](images/image14.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image13.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image14.png) ## 5. 웹사이트 문구 내용 수정하기 @@ -305,15 +305,15 @@ Agent가 생성한 첫 번째 웹사이트에는 보통 자동으로 생성된 1. 먼저 About 페이지에 보여 주고 싶은 내용을 작성합니다. Agent가 이해하기 쉽도록 Markdown 형식으로 저장할 수 있습니다. -![](images/image15.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image15.png) 2. 그런 다음 대화에서 Agent에게 해당 파일의 내용을 지정한 페이지에 적용하라고 말합니다. -![](images/image16.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image16.png) 3. 내용이 적용된 업데이트 버전을 확인합니다. -![](images/image17.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image17.png) ## 6. 이미지 삽입하기 @@ -321,11 +321,11 @@ Agent가 생성한 첫 번째 웹사이트에는 보통 자동으로 생성된 - **예시:** -![](images/image18.png)![](images/image19.png)![](images/image20.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image18.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image19.png)![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image20.png) - **결과:** -![](images/image21.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image21.png) --- @@ -337,8 +337,8 @@ Agent가 생성한 첫 번째 웹사이트에는 보통 자동으로 생성된 - **예시:** -![](images/image22.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image22.png) - **결과:** -![](images/image23.png) +![](../../../../zh-cn/stage-1/appendix-articles/example0-2/images/image23.png) 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 deleted file mode 100644 index fb9d4f6..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png and /dev/null 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 deleted file mode 100644 index bbe2296..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png and /dev/null 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 deleted file mode 100644 index fc7ffaf..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png and /dev/null 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 deleted file mode 100644 index a7951c0..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png and /dev/null 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 deleted file mode 100644 index 3d5813d..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png and /dev/null 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 deleted file mode 100644 index f5e23f0..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-35-53.png and /dev/null 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 deleted file mode 100644 index ec3792c..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png and /dev/null 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 deleted file mode 100644 index 4e1b1a5..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png and /dev/null 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 deleted file mode 100644 index 896c153..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png and /dev/null 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 deleted file mode 100644 index 6839842..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png and /dev/null 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 deleted file mode 100644 index eb4feba..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png and /dev/null 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 deleted file mode 100644 index d49864d..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png and /dev/null 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 deleted file mode 100644 index 982d76f..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png and /dev/null 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 deleted file mode 100644 index a15e888..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png and /dev/null 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 deleted file mode 100644 index 169361e..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png and /dev/null 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 deleted file mode 100644 index 3cca1c0..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png and /dev/null 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 deleted file mode 100644 index 9a8d5db..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png and /dev/null 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 deleted file mode 100644 index 665ad07..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png and /dev/null 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 deleted file mode 100644 index 1486e8a..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png and /dev/null 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 deleted file mode 100644 index 29e3e77..0000000 Binary files a/docs/ko-kr/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png and /dev/null differ diff --git a/docs/ko-kr/stage-1/building-prototype/index.md b/docs/ko-kr/stage-1/building-prototype/index.md index c16b5ef..106d25b 100644 --- a/docs/ko-kr/stage-1/building-prototype/index.md +++ b/docs/ko-kr/stage-1/building-prototype/index.md @@ -338,7 +338,7 @@ AI는 구조화된 요구사항과 대응되는 프롬프트를 반환할 것입 ``` 보통 AI는 아래와 비슷한 구조화된 프롬프트를 생성합니다. -![](images/index-2026-01-14-14-25-56.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-25-56.png) 이 프롬프트를 조금 수정한 뒤 AI IDE에 보내 코드를 생성할 수 있습니다. @@ -354,11 +354,11 @@ AI IDE(Cursor, Trae, Windsurf 등)의 기본 사용 방식이 아직 익숙하 #### 2.2.2 코드 생성 시작하기 이제 초기 프롬프트를 얻었습니다. 첫 번째 프롬프트 스타일을 예로 들어 AI가 코드를 생성하도록 해 보겠습니다. 먼저 창과 해당 폴더를 만들고, 폴더를 엽니다. 원하는 폴더 위치에서 새 프로젝트를 초기화하면 됩니다. -![](images/index-2026-01-14-14-28-44.png) -![](images/index-2026-01-14-14-30-00.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-28-44.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-30-00.png) 사이드바에서 원하는 모델을 하나 선택합니다. gemini, gpt, glm, kimi, minimax 등을 추천합니다. 그런 다음 첫 번째 단계에서 얻은 프롬프트를 입력합니다. -![](images/index-2026-01-14-14-31-41.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-31-41.png) 생성을 클릭하면 익숙한 과정을 보게 됩니다. AI는 프롬프트에 따라 프로젝트의 디렉터리 구조, 필요한 파일, 각 파일의 초기 내용을 계획합니다. @@ -372,10 +372,10 @@ AI IDE(Cursor, Trae, Windsurf 등)의 기본 사용 방식이 아직 익숙하 ::: 이때도 마찬가지로 Enter를 눌러 정보를 확인하는 것을 잊지 마세요. 그렇지 않으면 대기 상태에 빠질 수 있습니다. 일부 AI IDE는 이 문제에 빠지지 않을 수도 있습니다. -![](images/index-2026-01-14-14-33-03.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-33-03.png) 아래와 같은 장면을 만났다면, 이미 로컬에서 서비스가 시작되었다는 뜻입니다. 건너뛰기를 클릭해야 합니다. 그렇지 않으면 이 화면에 머무를 수 있습니다. 코드 생성이 끝났는데 아무것도 나타나지 않으면, 직접 “이 프로젝트를 시작해 줘”라고 말해야 합니다. -![](images/index-2026-01-14-14-38-11.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-38-11.png) ::: info 💡 상황 설명 **상황 설명**: `npm create vite@latest`로 React + TypeScript 프로젝트(easy-vibe-web)를 만들었습니다. 생성이 끝나면 컴퓨터가 이 웹페이지를 자동으로 “실행”하여 즉시 결과를 볼 수 있게 합니다. @@ -394,19 +394,19 @@ AI IDE(Cursor, Trae, Windsurf 등)의 기본 사용 방식이 아직 익숙하 ::: 모두 확인한 뒤 Agent가 잠시 실행되기를 기다리면 아래와 같은 결과를 얻을 수 있습니다. -![](images/index-2026-01-14-14-50-34.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-14-50-34.png) 초기 기능 화면은 생겼지만 프론트엔드 페이지가 너무 못생겼다는 것을 볼 수 있습니다. 이때 AI와 직접 대화하며 인터페이스 표시를 최적화할 수 있습니다. -![](images/index-2026-01-14-15-01-16.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-01-16.png) 최적화 후에는 아래와 같은 더 보기 좋은 인터페이스를 얻을 수 있습니다. -![](images/index-2026-01-14-15-05-16.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-05-16.png) 자신의 필요에 따라 웹페이지 기능을 수정할 수 있습니다. 스크린샷을 첨부하고 자유롭게 질문해도 됩니다. 예를 들어 “지금은 일괄 가져오기 기능이 필요 없으니 제거해 줘”, “왼쪽 입력 항목이 너무 많으니 xxxxx만 남겨 줘”라고 할 수 있습니다. 더 나아가 다른 성숙한 웹사이트를 참고할 수도 있습니다. 예를 들어 여기서는 Google의 어떤 디자인 제품을 직접 참고해 “참고”할 수 있습니다. 마음에 드는 성숙한 웹사이트의 스크린샷을 붙여 넣어도 됩니다. -![](images/index-2026-01-14-15-13-12.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-13-12.png) 마지막으로 다음과 같은 결과를 얻을 수 있습니다. -![](images/index-2026-01-14-15-15-18.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-15-18.png) ### 2.3 오류가 나면 어떻게 할까? @@ -456,12 +456,12 @@ AI IDE(Cursor, Trae, Windsurf 등)의 기본 사용 방식이 아직 익숙하 핵심 플레이 방식의 로직이 기본적으로 생성된 뒤에는 나머지 부분의 내용을 생성할 수 있습니다. 예를 들어 지금 설정을 클릭하거나 일부 버튼을 눌러도 전혀 작동하지 않을 수 있습니다. AI에게 비즈니스 프롬프트 요구사항에 따라 검사하고 아직 생성되지 않은 부분을 만들게 할 수 있습니다. 또는 구현이 끝나지 않은 페이지를 AI에게 바로 보완하게 할 수도 있습니다. 특정 페이지를 지정해 AI에게 구현을 보완하게 해도 됩니다. 페이지가 클릭 가능하고 기능이 정상적으로 상호작용할 때까지 진행합니다. -![](images/index-2026-01-14-15-17-55.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-17-55.png) 잠시 기다리면 프로그램이 이전 기반 위에 여러 페이지와 상호작용 기능을 보완한 것을 볼 수 있습니다. -![](images/index-2026-01-14-15-23-40.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-40.png) -![](images/index-2026-01-14-15-23-53.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-23-53.png) 이제 관심 있는 각 기능과 버튼을 사람이 직접 클릭해 상호작용이 정상인지 확인하면 됩니다. 상호작용이 되지 않는 기능이 있다면 AI와 소통하여 고치게 합니다. @@ -536,21 +536,21 @@ AI에게 비즈니스 프롬프트 요구사항에 따라 검사하고 아직 ``` 결과는 쉽게 얻을 수 있습니다. 데이터 하나가 너무 적다고 느껴지면, AI에게 테스트 케이스를 여러 개 생성하게 할 수 있습니다. -![](images/index-2026-01-14-15-30-30.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-30-30.png) 클릭하면 결과를 얻습니다. -![](images/index-2026-01-14-15-31-23.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-31-23.png) 이때 우리가 바로 얻는 것은 결과이지, “가상의 생성 과정”이 있는 것은 아닙니다. 실제 생성 과정을 모방하고 싶다면 AI와 직접 대화할 수 있습니다. “실제 생성 과정을 시뮬레이션해 주세요. 클릭한 뒤 일정 시간이 지난 후에 결과를 보여 주세요.” -![](images/index-2026-01-14-15-50-05.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-50-05.png) 생성 기능을 끝까지 통과한 뒤에는 템플릿 라이브러리 기능이 정상인지 확인해야 합니다. 페이지의 생성 카드에서 알 수 있듯 템플릿 라이브러리 저장 기능은 구현되지 않았습니다. 이때 AI와 더 깊게 대화해야 합니다. “요구사항 [여기에 위 2번 내용을 붙여 넣기] 이 정상 동작하도록 확인해 주세요. 결과 하나를 클릭해 해당 템플릿을 저장할 수 있고, 열어 보면 생성 매개변수를 볼 수 있어야 합니다.” 생성은 보통 한 번에 끝나지 않으며, 자주 스크린샷으로 수정해야 합니다. -![](images/index-2026-01-14-15-57-14.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-15-57-14.png) 마지막으로 기대한 결과를 얻습니다. -![](images/index-2026-01-14-16-12-56.png) +![](../../../zh-cn/stage-1/building-prototype/images/index-2026-01-14-16-12-56.png) 요구 흐름을 직접 경험하는 것 외에도, AI에게 바로 요구사항 검사를 시킬 수 있습니다. 예를 들면 다음과 같습니다. 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 deleted file mode 100644 index 9c57843..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/image.png and /dev/null 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 deleted file mode 100644 index a5b5474..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/image40.png and /dev/null 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 deleted file mode 100644 index b9ee094..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png and /dev/null 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 deleted file mode 100644 index 4850098..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png and /dev/null 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 deleted file mode 100644 index 463d40b..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png and /dev/null 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 deleted file mode 100644 index 721d1dd..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png and /dev/null 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 deleted file mode 100644 index b33255e..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png and /dev/null 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 deleted file mode 100644 index 9e7c8bb..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png and /dev/null 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 deleted file mode 100644 index ec3a5ec..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png and /dev/null 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 deleted file mode 100644 index cf5d1ed..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png and /dev/null 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 deleted file mode 100644 index a3b1089..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-10.png and /dev/null 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 deleted file mode 100644 index 55b45eb..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png and /dev/null 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 deleted file mode 100644 index bca3561..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png and /dev/null 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 deleted file mode 100644 index 5dd2cd5..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png and /dev/null 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 deleted file mode 100644 index 8556ff9..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png and /dev/null 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 deleted file mode 100644 index 0ec4fa1..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png and /dev/null 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 deleted file mode 100644 index 08c7bee..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png and /dev/null 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 deleted file mode 100644 index 0b730d2..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png and /dev/null 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 deleted file mode 100644 index 9a26d56..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png and /dev/null 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 deleted file mode 100644 index 375c1de..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png and /dev/null 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 deleted file mode 100644 index 7e4c3a8..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png and /dev/null 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 deleted file mode 100644 index 291129b..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png and /dev/null 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 deleted file mode 100644 index 36e2f46..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png and /dev/null 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 deleted file mode 100644 index d035851..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png and /dev/null 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 deleted file mode 100644 index 4b58f37..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png and /dev/null 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 deleted file mode 100644 index 4e7783a..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png and /dev/null 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 deleted file mode 100644 index 2905294..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png and /dev/null 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 deleted file mode 100644 index 8f9ed68..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png and /dev/null 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 deleted file mode 100644 index e46c704..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png and /dev/null 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 deleted file mode 100644 index 09763a5..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png and /dev/null 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 deleted file mode 100644 index 20d174a..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png and /dev/null 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 deleted file mode 100644 index d973c60..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png and /dev/null 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 deleted file mode 100644 index 7dfc348..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png and /dev/null 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 deleted file mode 100644 index cc59270..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png and /dev/null 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 deleted file mode 100644 index 5b2750a..0000000 Binary files a/docs/ko-kr/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png and /dev/null 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 index 79651b5..0cbcd3c 100644 --- a/docs/ko-kr/stage-1/integrating-ai-capabilities/index.md +++ b/docs/ko-kr/stage-1/integrating-ai-capabilities/index.md @@ -100,7 +100,7 @@ API에는 이런 기술 개념이 얽혀 있지만, 프로토타입 개발 단 DeepSeek이 GPQA 벤치마크 순위에서 다른 최상위 모델과 어떻게 비교되는지 보겠습니다. 주목할 점은 DeepSeek은 오픈소스(누구나 인터넷에서 모델을 다운로드 가능) 모델이고, Grok, Google Gemini, ChatGPT 같은 일반적인 다른 모델은 폐쇄형이라는 점입니다. 볼 수 있듯 DeepSeek은 이미 상당 부분 1군 모델에 가까워졌습니다. -![](images/index-2026-01-20-14-16-48.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-16-48.png) GPQA는 “Graduate-Level Google-Proof Q&A Benchmark”의 약자로, 과학 질의응답 작업을 위한 대학원 수준의 벤치마크입니다. 자세한 소개는 다음과 같습니다. @@ -116,23 +116,23 @@ GPQA는 448개의 객관식 문제를 포함하며, 생물학, 물리학, 화학 이제 시연을 진행합니다. 전체 흐름을 따라 직접 한 번 조작해 보세요. 먼저 [DeepSeek](https://platform.deepseek.com/usage) 계정을 등록하고 API Key를 만든 뒤, 검증을 위해 소액을 충전합니다. -![](images/index-2026-01-20-13-57-41.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-57-41.png) -![](images/index-2026-01-20-13-58-13.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-13.png) “API KEYS”를 클릭하고 화면 아래에서 “create new API key”를 찾습니다. 최종적으로 `sk-8573341c39fc44315aadc071c53rh7d2` 같은 API key를 얻게 됩니다. -![](images/index-2026-01-20-13-58-32.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-32.png) 키를 얻으면 모델을 호출할 권한을 가진 것입니다. 이때 [API](https://api-docs.deepseek.com/) 문서를 바로 읽을 수 있습니다. 보통 curl 또는 Python 호출 예시를 제공합니다. -![](images/index-2026-01-20-13-58-56.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-58-56.png) 예시를 찾은 뒤, 문서의 모든 내용과 키를 AI IDE의 대화창에 복사해 넣고, 이전에 개발해 둔 프로토타입에 대형 언어 모델을 통합해 달라고 요청할 수 있습니다. -![](images/index-2026-01-20-13-59-31.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-13-59-31.png) 참고 프롬프트는 다음과 같습니다. @@ -157,9 +157,9 @@ curl \ AI가 코드를 생성하는 데 약간의 시간이 지나면, 테스트할 수 있는 대응 문구 생성 버튼을 쉽게 얻을 수 있습니다. 입구를 찾을 수 없다면 AI IDE에게 어느 페이지에서 해당 페이지로 들어갈 수 있는지 알려 달라고 하면 됩니다. 정말 찾기 어렵다면 AI IDE에게 당신의 생각을 바탕으로 직접 리팩터링하고 개선하게 하여 최종 문구 생성 결과를 얻을 수 있습니다. -![](images/index-2026-01-20-14-23-23.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-23-23.png) -![](images/index-2026-01-20-14-26-35.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-26-35.png) 물론 여기서 이런 질문이 들 수 있습니다. 실제로 대형 모델을 호출한 것인지, 아니면 고정된 답변을 내장한 것인지 어떻게 알 수 있을까요? 사용자 지정 문구를 입력하고, 대형 모델이 당신이 즉시 지정한 사용자 정의 분석을 바탕으로 대응 문구를 생성하게 해 보면 됩니다. @@ -225,8 +225,8 @@ MiniMax의 API 형식은 DeepSeek과 거의 완전히 같습니다. 둘 다 Open **Qwen3 VL**은 Alibaba Cloud Tongyi Qianwen 팀이 출시한 멀티모달 비전 언어 모델 시리즈의 최신 버전입니다. VL은 “Vision-Language”, 즉 비전 언어 모델을 의미합니다. 이미지를 이해하고, 이미지에 대한 텍스트 설명을 생성하고, 이미지 관련 질문에 답하고, 이미지 정보를 추출하는 등의 작업을 할 수 있습니다. -![](images/index-2026-01-20-14-48-27.png) -![](images/index-2026-01-20-14-48-41.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-27.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-48-41.png) **Qwen3 VL의 주요 능력은 다음과 같습니다.** @@ -270,11 +270,11 @@ SiliconFlow는 오픈소스 대형 모델 추론 서비스 측면에서 비교 SiliconFlow 플랫폼의 홈 화면에 들어가면 많은 모델을 선택할 수 있습니다. 왼쪽 위에서 필터를 찾아 펼친 뒤, 비전 태그를 선택하면 여러 이미지-텍스트 모델을 볼 수 있습니다. 예를 들어 Zhipu GLM-4.6V나 Qwen3-VL이 있습니다. -![](images/index-2026-01-20-15-05-04.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-05-04.png) 테스트를 위해 아무 모델이나 선택할 수 있습니다. 여기서는 `Qwen/Qwen3-VL-8B-Instruct`를 예로 들겠습니다. -![](images/index-2026-01-20-15-07-44.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-07-44.png) [SiliconFlow 플랫폼](https://cloud.siliconflow.cn/me/account/ak)에 들어가 API 키에서 “새 API 키”를 클릭해 새로운 API Key를 만듭니다. @@ -350,9 +350,9 @@ caption = caption_image(image_path) ``` 마지막으로 생성 결과를 얻습니다. -![](images/index-2026-01-20-15-34-36.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-34-36.png) -![](images/index-2026-01-20-15-35-41.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-35-41.png)
@@ -373,12 +373,12 @@ caption = caption_image(image_path) ::: details 더 알아보기: [Seedream](https://seed.bytedance.com/en/seedream4_5)이란 무엇인가? -![](images/index-2026-01-20-23-15-17.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-17.png) > 어쩌면 Nano Banana(Google 개발)를 이미 알고 있을 수 있지만, Seedream을 놓치지 않는 것이 좋습니다. Seedream 4.5는 ByteDance가 만든 차세대 이미지 창작 모델입니다. 이미지 생성과 이미지 편집 능력을 하나의 통합 아키텍처에 결합합니다. 이를 통해 지식 기반 생성, 복잡한 추론, 참조 일관성 같은 복잡한 멀티모달 작업을 유연하게 처리할 수 있습니다. 또한 추론 속도는 이전 제품보다 훨씬 빠르며, 최대 4K 해상도의 놀라운 고화질 이미지를 생성할 수 있습니다. > -> ![](images/index-2026-01-20-23-15-38.png) -> ![](images/index-2026-01-20-23-15-50.png) +> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-38.png) +> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-15-50.png) **주요 능력:** @@ -414,29 +414,29 @@ Douyin, Bilibili, YouTube에서 볼 수 있는 많은 “AI 포스터 / AI 대 [홈페이지](https://www.volcengine.com/experience/ark?launch=seedream)에 접속한 뒤 로그인을 클릭합니다. -![](images/index-2026-01-20-23-12-07.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-07.png) 로그인 후 페이지 오른쪽 위의 충전 옵션을 찾습니다. -![](images/index-2026-01-20-23-12-22.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-22.png) 충전하려면 실명 인증이 필요합니다. -![](images/index-2026-01-20-23-12-30.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-30.png) 인증이 성공하면 [1위안을 충전해 테스트](https://console.volcengine.com/finance/fund/recharge)할 수 있습니다. [초기 화면](https://www.volcengine.com/experience/ark?launch=seedream)으로 돌아가 API 접근을 클릭합니다. -![](images/index-2026-01-20-23-12-43.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-12-43.png) 먼저 API key를 만들고, 선택 옵션을 클릭합니다. -![](images/index-2026-01-20-23-13-01.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-01.png) 그러면 2단계로 이동합니다. 여기에서 호출할 서비스가 Seedream 4.5인지 확인하고, 제공된 호출 예시를 복사해야 합니다. 이 스크린샷은 촬영 시점이 조금 이르기 때문에 모델 버전이 여전히 4.0으로 표시되어 있습니다. -![](images/index-2026-01-20-23-13-11.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-13-11.png) API Key와 호출 예시가 준비되면, 그것들을 AI IDE에 바로 붙여 넣어 프론트엔드 상호작용 데모를 생성하거나 기존 프로토타입에 능력을 연결하게 할 수 있습니다. 이미지에서 텍스트-이미지를 선택할지, 여러 이미지로 단일 이미지를 생성할지 선택할 수 있다는 점에 주의하세요. 현재 요구에 맞춰 참고 코드를 선택해야 합니다. @@ -472,7 +472,7 @@ curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \ 구현 결과는 다음과 같습니다. -![](images/index-2026-01-20-23-21-13.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-21-13.png) 주의할 점은 이미지 생성에서는 이상한 문제를 자주 만날 수 있다는 것입니다. 따라서 AI IDE가 전체 오류 정보를 표시하도록 하는 것이 좋습니다. 그래야 복사해 붙여 넣고 수정하기 쉽습니다. 그렇지 않으면 왜 그런지 모른 채 “생성 실패”만 반복해서 보일 수 있습니다. 예를 들어 이렇게 말할 수 있습니다. @@ -484,7 +484,7 @@ curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \ 이커머스 업무에서는 사용자가 업로드한 옷을 자동으로 사람에게 입혀 보게 하거나, 상품의 매력적인 판매 이미지와 포스터를 자동 생성하게 하고 싶을 수 있습니다. 여기서 우리가 시도한 프롬프트는 이커머스 포스터를 생성하게 하는 것입니다. -![](images/index-2026-01-20-23-14-10.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-14-10.png) 상상하는 비즈니스 장면에 따라 텍스트-이미지 또는 이미지-이미지 API를 사용해 서로 다른 기능을 구현할 수 있습니다. @@ -500,14 +500,14 @@ curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \ > Recraft는 디자이너, 일러스트레이터, 마케터를 위한 AI 도구입니다. 2022년 미국에서 설립되었고 본사는 런던에 있습니다. 이미지, 벡터 아트, 3D 그래픽 같은 시각 결과물을 생성하고 반복 개선하도록 돕습니다. 고품질 출력(어떤 텍스트 크기/길이든), 정확한 요소 배치, 브랜드 일관성 디자인 등의 장점이 있습니다. 200개 국가/지역의 300만 명 이상 사용자(오길비, Netflix 포함)가 신뢰하며, 3.5억 장 이상의 이미지를 만들었습니다. 이 팀은 Recraft를 필수 디자이너 도구로 만들고, 창작자가 AI 보조 워크플로를 통제할 수 있게 하는 것을 목표로 합니다. > -> ![](images/index-2026-01-20-23-23-34.png) -> ![](images/index-2026-01-20-23-23-42.png) +> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-34.png) +> ![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-23-23-42.png) 먼저 여전히 [API 입구](https://www.recraft.ai/profile/api)를 찾아 API Key를 얻어야 합니다. 여기는 무료 한도를 제공하지 않으므로 직접 1,000 크레딧을 충전해야 합니다. 이 웹사이트는 Alipay와 WeChat Pay를 지원하므로 1,000 크레딧을 쉽게 얻을 수 있습니다. 필요한 금액 이상 충전하지 않도록 주의하세요. -![](images/image40.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image40.png) 그 뒤에도 같은 방법을 따릅니다. 공식 문서에서 해당 요청 예시를 찾습니다. @@ -529,7 +529,7 @@ curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \ 텍스트 설명에 따라 완전히 새로운 이미지를 생성합니다. 프롬프트를 입력하면 모델이 의도를 이해하고 설명에 맞는 이미지를 생성합니다. -![](images/index-2026-01-20-14-43-30.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-43-30.png) **주요 능력:** @@ -550,11 +550,11 @@ curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \ - **이미지 확장**: 이미지 경계를 확장하고 새 내용을 생성합니다. - **지능형 보정**: 자동 미화, 빛과 그림자 조정, 결함 복구. -![](images/index-2026-01-20-14-46-17.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-17.png) -![](images/index-2026-01-20-14-46-29.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-29.png) -![](images/index-2026-01-20-14-46-33.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-14-46-33.png) **왜 Qwen Image 시리즈를 선택할까요?** @@ -576,7 +576,7 @@ curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \ “Image”를 선택하면 현재 지원하는 모든 텍스트-이미지 모델만 보입니다. 이 경우 우리는 Qwen/Qwen-Image를 사용할 것입니다. -![](images/index-2026-01-20-15-52-56.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/index-2026-01-20-15-52-56.png) 모든 설정이 끝나면 해당 이미지 생성 API 문서를 참고해야 합니다. 공식 문서 페이지에서 “API Reference”라고 표시된 부분을 찾을 수 있습니다. 그것을 클릭한 뒤 [이미지 생성 API 섹션](https://docs.siliconflow.cn/cn/api-reference/images/images-generations)으로 이동해 관련 요청 예시를 찾습니다. @@ -730,7 +730,7 @@ LMArena는 “다수의 사람이 어떤 모델의 답변을 더 선호하는지 2. 먼저 작업 방향을 하나 선택합니다. 예: 일반 대화 / 프로그래밍 / 비전. 3. Top 3 안에서 사용할 수 있는 것을 고릅니다. 접근 가능하고, 가격을 감당할 수 있고, 지연 시간도 받아들일 수 있어야 합니다. -![](images/image.png) +![](../../../zh-cn/stage-1/integrating-ai-capabilities/images/image.png) ## Artificial Analysis 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 deleted file mode 100644 index 686a87f..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image1.png and /dev/null 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 deleted file mode 100644 index 0d32d5a..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image10.png and /dev/null 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 deleted file mode 100644 index 70e42b5..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image11.png and /dev/null 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 deleted file mode 100644 index a309a8d..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image12.png and /dev/null 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 deleted file mode 100644 index b8ac8a8..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image13.png and /dev/null 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 deleted file mode 100644 index 31a6704..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image14.png and /dev/null 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 deleted file mode 100644 index 65388b3..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image15.png and /dev/null 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 deleted file mode 100644 index 91ae3cd..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image16.png and /dev/null 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 deleted file mode 100644 index 84a3c51..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image17.png and /dev/null 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 deleted file mode 100644 index 7b084ff..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image18.png and /dev/null 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 deleted file mode 100644 index 5e31acb..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image19.png and /dev/null 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 deleted file mode 100644 index a1370fb..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image2.png and /dev/null 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 deleted file mode 100644 index 0a167cd..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image20.png and /dev/null 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 deleted file mode 100644 index e246dcf..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image21.png and /dev/null 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 deleted file mode 100644 index f286e45..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image22.png and /dev/null 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 deleted file mode 100644 index 3e22e6e..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image3.png and /dev/null 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 deleted file mode 100644 index 76e21be..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image32.webp and /dev/null 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 deleted file mode 100644 index 5940e0f..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image4.png and /dev/null 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 deleted file mode 100644 index 7c18b2d..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image5.png and /dev/null 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 deleted file mode 100644 index e7912d6..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image6.png and /dev/null 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 deleted file mode 100644 index 6d595fc..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image7.png and /dev/null 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 deleted file mode 100644 index e58af5a..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image8.png and /dev/null 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 deleted file mode 100644 index b39e85c..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/image9.png and /dev/null 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 deleted file mode 100644 index 2584a8b..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png and /dev/null 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 deleted file mode 100644 index 0b199d6..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-27-13.png and /dev/null 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 deleted file mode 100644 index 3d734e6..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png and /dev/null 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 deleted file mode 100644 index 1d1c3f6..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png and /dev/null 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 deleted file mode 100644 index 0f72910..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png and /dev/null 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 deleted file mode 100644 index e7ea936..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-37-39.png and /dev/null 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 deleted file mode 100644 index cf3f91e..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png and /dev/null 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 deleted file mode 100644 index 91c4132..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png and /dev/null 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 deleted file mode 100644 index 9e92953..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png and /dev/null 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 deleted file mode 100644 index b027394..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png and /dev/null 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 deleted file mode 100644 index 88fbc25..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png and /dev/null 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 deleted file mode 100644 index 3eed073..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png and /dev/null 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 deleted file mode 100644 index ea4df0e..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png and /dev/null 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 deleted file mode 100644 index dc1119f..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-35-51.png and /dev/null 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 deleted file mode 100644 index 5a2abac..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png and /dev/null 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 deleted file mode 100644 index 2d556bd..0000000 Binary files a/docs/ko-kr/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png and /dev/null 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 index 1c9b7e6..74bc846 100644 --- a/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md +++ b/docs/ko-kr/stage-1/introduction-to-ai-ide/index.md @@ -75,13 +75,13 @@ IDE가 무엇인지, 각 인터페이스 요소가 어떤 역할을 하는지 IDE는 “코드를 편집하고, 관리하고, 실행하고, 디버깅”하기 위해 특화된 프로그램으로 이해할 수 있습니다. 초기 IDE의 외형은 매우 “원시적”이었고, 거의 전부 키보드로 조작했습니다. -![](images/image1.png)![](images/image2.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image1.png)![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image2.png) 터미널 인터페이스(Terminal) 이미지 출처: https://en.wikipedia.org/wiki/File:Emacs-screenshot.png `Vim`처럼 유명하고 기능이 성숙한 “내장형 IDE”는 서버 원격 조작에 자주 쓰입니다. -![](images/image3.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image3.png) 더 효율적으로 작업하려면 마우스 조작을 지원하는 현대 IDE가 필요합니다. 보통 다음을 포함합니다. @@ -91,15 +91,15 @@ IDE는 “코드를 편집하고, 관리하고, 실행하고, 디버깅”하기 현대 IDE는 Git 같은 도구도 내장하는 경우가 많습니다. 가장 인기 있는 것은 Microsoft의 **[Visual Studio Code (VS Code)](https://code.visualstudio.com/)** 입니다. 가볍고 확장 가능합니다. JetBrains 제품군 같은 전문 IDE도 있지만, 초보자에게는 VS Code가 가장 친절합니다. -![](images/image4.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image4.png) VS Code의 핵심 철학은 “모든 것은 플러그인”입니다. 플러그인 메커니즘으로 여러 언어를 지원합니다. Python 플러그인을 설치하면 Python IDE가 되고, C++ 플러그인을 설치하면 C++ IDE가 됩니다. 플러그인을 설치하지 않으면 고급 텍스트 편집기일 뿐입니다. -![](images/image5.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image5.png) 심지어 Markdown 문서를 편집하는 데도 사용할 수 있습니다. -![](images/image6.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image6.png) 정리하면 IDE는 개발자가 코드를 효율적으로 쓰고 프로그램을 실행하도록 돕는 도구 묶음입니다. @@ -126,7 +126,7 @@ VS Code의 핵심 철학은 “모든 것은 플러그인”입니다. 플러그 VS Code를 다운로드해 설치한 뒤, 오른쪽 위의 사이드바 입구를 클릭해 AI 기능 영역을 열고 이러한 능력을 체험할 수 있습니다. -![](images/image7.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image7.png) 다만 VS Code가 AI 능력이 가장 강한 IDE는 아닙니다. 대량의 AI 보조 코딩이 필요한 상황에서는 보통 “더 똑똑하고 효율이 높은” 도구를 쓰고 싶어 합니다. 좋은 AI IDE는 코드 작성과 Bug 수정 시간을 크게 줄여 줍니다. 아래에서는 현재 비교적 인기 있는 AI IDE 몇 가지를 소개합니다. 취향에 맞게 아무 AI IDE나 선택해 사용해도 됩니다. @@ -153,7 +153,7 @@ Antigravity는 Google이 2025년 11월 Gemini 3와 함께 발표한 새로운 AI ### [Trae](https://www.trae.ai/) -![](images/image8.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image8.png) Trae는 ByteDance가 출시한 AI 프로그래밍 어시스턴트이며 100개 이상의 프로그래밍 언어를 지원하고 주요 IDE에 통합될 수 있습니다. 기능에는 자연어로 코드 생성, 자동 디버깅, 디자인 시안을 React/Vue 컴포넌트로 변환하기 등이 포함됩니다. 2025년 8월 업데이트 이후 Trae에는 지능형 의존성 가져오기, 이름 변경 제안, 작업 목록 관리 등의 기능이 추가되었습니다. SOLO 모드도 백엔드 코드 생성과 기술 아키텍처 문서 편집을 지원하기 시작했습니다. ::: @@ -166,7 +166,7 @@ Cursor는 Anysphere가 개발한 AI 코드 편집기이며 VS Code 기반으로 현재 Cursor는 “프론트엔드 인터페이스가 있는 AI IDE” 중 종합 경험이 가장 좋은 도구 중 하나라고 할 수 있습니다. 사용자 수가 많고 기능 반복 주기도 빠릅니다. 가장 큰 단점은 가격이 높다는 점입니다. Pro 버전은 월 약 20달러가 필요합니다. -![](images/image9.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image9.png) ::: ::: details Qoder @@ -175,7 +175,7 @@ Cursor는 Anysphere가 개발한 AI 코드 편집기이며 VS Code 기반으로 Qoder는 Alibaba가 출시한 AI IDE이며 “투명한 협업”과 “강화된 컨텍스트 엔지니어링 능력”을 강조합니다. Action Flow를 통해 작업을 여러 단계로 분해하고 AI의 실행 과정을 실시간으로 추적할 수 있습니다. 또한 다중 모델 동적 라우팅과 작업 상태 머신 관리를 지원하므로, 중대형 프로젝트에서 아키텍처 거버넌스를 하거나 레거시 시스템을 “역공학” 분석하는 데 매우 적합합니다. -![](images/image10.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image10.png) ::: ::: details CodeBuddy @@ -184,7 +184,7 @@ Qoder는 Alibaba가 출시한 AI IDE이며 “투명한 협업”과 “강화 CodeBuddy는 Tencent Cloud가 출시한 AI 프로그래밍 도구이며 중국어 지시에 대한 지원과 기업급 규정 준수 능력을 강조합니다. 코드 완성, 일괄 코드 리뷰, 다중 모델 전환 등의 기능을 제공합니다. 그중 Craft 지능체는 다중 파일 코드 생성과 API 통합을 구현할 수 있습니다. 기업 버전은 사유화 배포를 지원하고 중국의 3급 등급보호 인증을 통과했으므로 금융, 의료 등 데이터 보안 요구가 높은 업종에 적합합니다. -![](images/image11.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image11.png) ::: ::: details VS Code + Cline @@ -193,9 +193,9 @@ CodeBuddy는 Tencent Cloud가 출시한 AI 프로그래밍 도구이며 중국 Cline은 VS Code(Visual Studio Code)의 AI 프로그래밍 Agent 플러그인입니다. 서로 다른 API 엔드포인트를 설정해 사용하는 대형 모델을 유연하게 바꿀 수 있습니다. Cline은 멀티모달 입력, MCP 도구 확장, 비용 모니터링을 지원하며, 모든 작업은 사용자 확인 후 실행됩니다. 아이디어를 빠르게 검증하거나 기존 개발 흐름에 통합하는 데 매우 적합합니다. 기본 기능은 무료이고, 기업 버전은 사유 환경에서 모델 배포를 지원합니다. -![](images/image13.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image13.png) -![](images/image14.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image14.png) ::: ::: details Kiro @@ -270,28 +270,28 @@ Trae의 비용과 사용 방식에는 다음 선택지가 있습니다. 인터페이스 형태로 보면 Trae는 우리가 일상적으로 사용하는 VS Code와 매우 비슷합니다. 왼쪽 리소스 관리자, 가운데 편집 영역, 오른쪽 확장 패널이라는 고전적인 3열 배치를 사용합니다. -![](images/image17.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image17.png) 오른쪽 사이드바가 Copilot 상호작용 창이며, Agent 창으로 이해할 수도 있습니다. 보이지 않는다면 Trae 오른쪽 위의 사이드바 아이콘을 클릭해 열 수 있습니다. -![](images/image18.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image18.png) 사이드바를 열면 `Builder` 옵션이 보입니다. 이것이 Agent 모드입니다. 간단히 이해하면 z.ai의 “로컬 버전”과 같으며, 내 컴퓨터 환경을 조작하고 실행 환경을 설치하고 웹페이지를 여는 일을 도와줄 수 있습니다. -![](images/image19.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image19.png) “Builder”를 클릭하면 “Chat” 모드와 “Builder with MCP” 모드가 보입니다. - **Chat 모드**: 주로 현재 폴더 안의 코드와 대화하거나 일반 채팅 모델처럼 사용하는 데 쓰입니다. 왼쪽 위의 “File” 메뉴로 폴더를 열 수 있으며, 이 폴더 안에서 편집 작업을 진행합니다. 이 경우 Builder가 만들거나 수정하는 파일은 모두 이 폴더 내부에서만 발생합니다. - **Builder with MCP 모드**: Agent에게 더 많은 사용 가능한 도구를 제공합니다. 예를 들어 언어 모델과 다른 소프트웨어를 연결하거나 날씨를 조회하는 등의 도구입니다. 간단히 말해 MCP는 언어 모델이 여러 외부 도구를 더 편하게 호출할 수 있게 해 줍니다. -![](images/image20.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image20.png) 아래 영역에는 모델 선택 옵션도 보입니다. 클릭하면 현재 사용하는 대형 모델을 바꿀 수 있습니다. 중국판에서는 Kimi k2나 GLM 같은 중국 모델을 선택할 수 있습니다. 국제판 Trae를 사용한다면 ChatGPT나 Claude 같은 해외 모델도 선택할 수 있습니다. 다만 중국 내 대형 모델도 매우 빠르게 발전하고 있어 Kimi, Qwen, GLM 등은 많은 작업에서 Claude 3.5 또는 3.7에 가까운 실제 경험을 보여 주며, 일상 개발에는 충분합니다. 여기서는 국제판이나 중국판 중 하나를 반드시 사용하라고 강제하지 않습니다. **주의할 점은 Auto 모드(자동 모델 선택)를 추천하지 않는다는 것입니다. 국제판이라면 Gemini 또는 GPT 모델을 추천하고, 중국판이라면 Kimi k2, Minimax, GLM 같은 중국 모델을 시도해 보기를 추천합니다.** 모델마다 적합한 장면이 다르며, 누가 반드시 더 좋다는 식의 교조적인 답은 없습니다. 서로 다른 작업에서 어려움을 만나 해결되지 않을 때 모델을 바꿔 보고, 여러 번 테스트해 자신만의 최적 실험 결과를 얻을 수 있습니다. -![](images/image21.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image21.png) 이상이 Trae에 대한 간단한 소개입니다. 이제 이전에 z.ai에서 했던 조작을 돌아보고, Trae에서 같은 일을 시도해 볼 수 있습니다. @@ -359,9 +359,9 @@ Trae에서 사용자 지정 모델을 연결할 때는 **기본적으로 OpenRou 아래 인터페이스를 통해 성공적으로 추가할 수 있습니다. 모델 선택 옵션을 본 뒤 **반드시 맨 아래까지 스크롤**해야 합니다. 아래에 “사용자 지정 모델”이 있고, 클릭하면 모델 ID를 입력할 수 있습니다. 이때 위 추천 모델 ID인 `stepfun/step-3.5-flash:free` 등을 그대로 입력하면 됩니다. 동시에 아래의 Key 얻기를 클릭해 공식 사이트로 이동하고 해당 API Key를 받아 입력하면 정상 사용 가능합니다. -![](images/index-2026-02-12-14-14-51.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-14-51.png) -![](images/index-2026-02-12-14-15-29.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-02-12-14-15-29.png) ::: ### 4.3 두 번째 단계: 사이드바에서 채팅하며 AI가 React로 스네이크 게임을 설계하게 하기 @@ -379,20 +379,20 @@ Trae에서 사용자 지정 모델을 연결할 때는 **기본적으로 OpenRou ::: 그림처럼 여기서는 Run을 클릭해 확인해야 합니다. -![](images/index-2026-01-09-10-52-55.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-52-55.png) 그림처럼 여기서는 y만 입력하면 확인됩니다. -![](images/index-2026-01-09-10-53-24.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-53-24.png) -![](images/index-2026-01-09-10-26-33.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-26-33.png) 그림처럼 여기서는 템플릿을 만들고 있지만 어떻게 조작해야 할지 모르겠습니다. 이 부분을 스크린샷으로 찍어 대형 모델에게 물어볼 수 있습니다. -![](images/index-2026-01-09-10-29-12.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-29-12.png) AI Agent가 실행 중 멈추는 또 다른 이유는 이때 “서비스”가 시작되었기 때문입니다. 우리의 스네이크 자체도 하나의 “서비스”입니다. 아래 명령의 URL을 보면 Agent가 로컬 컴퓨터 서비스를 실행했다는 뜻입니다. 해당 주소에 접속하면 스네이크를 볼 수 있습니다. 서비스는 계속 켜져 있어야 하므로 여기서 일시정지처럼 보입니다. 우리는 `Skip` 버튼만 클릭하면 됩니다. -![](images/index-2026-01-09-10-30-51.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-30-51.png) 이 과정에서 용어나 이해하기 어려운 내용을 만나도 걱정하지 마세요. 부록의 “컴퓨터 용어 설명” 부분을 확인하거나, AI에게 직접 질문하거나, 바로 질문하면 됩니다! @@ -400,13 +400,13 @@ AI Agent가 실행 중 멈추는 또 다른 이유는 이때 “서비스”가 잠시 기다리면 z.ai와 비슷한 결과를 얻을 수 있습니다. -![](images/index-2026-01-09-10-33-37.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-33-37.png) 오른쪽 아래의 체크 표시를 클릭해 코드 변경을 확정할 수 있고, `Cancel` 버튼을 클릭해 변경을 취소할 수도 있습니다. 또는 “2 files need review” 위치를 클릭해 변경된 코드를 펼쳐 볼 수 있습니다. 여기서 또 주의할 점은 코드 수정이 반드시 옳은 것은 아니라는 점입니다. 또한 모든 IDE의 Agent가 코드 되돌리기를 지원한다는 사실도 알아야 합니다. 예를 들어 여기서 실수로 잘못 수정했거나 이번 작업 결과가 만족스럽지 않다면, 수정이 끝난 뒤 입력창 부분으로 돌아가 Revert 버튼을 클릭해 수정 전 상태로 되돌릴 수 있습니다. 입력 문구를 바꾸어 다시 작업할 수 있습니다. -![](images/index-2026-01-09-10-42-53.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-42-53.png) ### 4.4 세 번째 단계(선택): AI에게 코드 구현 세부 사항 묻기 @@ -416,7 +416,7 @@ AI Agent가 실행 중 멈추는 또 다른 이유는 이때 “서비스”가 > “위에서 아래로 한 번 설명해 줘. 이 스네이크 게임은 각 단계에서 어떻게 움직이는 거야? 전문 용어는 최대한 적게 써줘.” -![](images/index-2026-01-09-10-44-36.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-44-36.png) 그다음 AI의 답변을 따라 핵심 지점을 계속 물어볼 수 있습니다. 예: @@ -469,15 +469,15 @@ AI는 설명에 따라 React 컴포넌트와 스타일을 직접 수정합니다 vibe coding 초보자에게 가장 어려운 것은 오히려 무엇이 “베스트 프랙티스”인지, 어떤 아키텍처가 가장 적합한지 모른다는 점입니다. 컴퓨터 기초를 모르기 때문에 AI를 잘 이끌기 어렵습니다. 이 문제를 해결하는 방법은 “직접 참고”입니다. z.ai에서 코드를 볼 수 있다고 앞에서 말했던 것을 기억하나요? 사실 해당 README(프로젝트에서 기능과 기술 아키텍처를 소개하는 부분)에는 이미 최적 아키텍처 참고가 제시되어 있습니다. -![](images/index-2026-01-09-10-49-33.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-49-33.png) 로컬 결과가 z.ai 결과와 최대한 비슷해지게 하고 싶다면, 이 README 전체 내용을 복사해 Trae 사이드바에 붙여 넣고, README의 아키텍처에 따라 로컬 코드를 수정하게 하면 됩니다. -![](images/index-2026-01-09-10-50-31.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-10-50-31.png) 마지막으로 z.ai와 매우 비슷한 페이지 디자인 스타일을 얻을 수 있습니다. -![](images/index-2026-01-09-11-00-57.png) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/index-2026-01-09-11-00-57.png)
@@ -494,7 +494,7 @@ vibe coding 초보자에게 가장 어려운 것은 오히려 무엇이 “베 위 작업을 통해 최소 프로그램 생성 폐쇄 루프는 빠르게 통과했습니다. 하지만 IDE에 충분히 익숙하다고 말하기는 아직 어렵습니다. 앞으로 오래 함께할 이 도구를 제대로 익히기 위해, 이번 절에서는 IDE의 각 세부 부분을 깊이 설명합니다. 먼저 인터페이스부터 시작합니다. 서로 다른 AI IDE의 인터페이스는 약간 다르지만, 대부분 [VS Code의 레이아웃](https://code.visualstudio.com/docs/getstarted/getting-started)을 이어받았습니다. -![](images/image32.webp) +![](../../../zh-cn/stage-1/introduction-to-ai-ide/images/image32.webp) 각 부분의 구체적인 역할은 다음과 같습니다. diff --git a/docs/public/sitemap.xml b/docs/public/sitemap.xml index 5184642..6cbe2f2 100644 --- a/docs/public/sitemap.xml +++ b/docs/public/sitemap.xml @@ -772,7 +772,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -781,7 +781,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -790,7 +790,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -799,7 +799,7 @@ 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-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -808,7 +808,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -817,7 +817,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -835,7 +835,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-double-diamond/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -844,7 +844,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-idea-sources/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -853,7 +853,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -862,7 +862,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-jobs-to-be-done/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -871,7 +871,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-mom-test/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -880,7 +880,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -889,7 +889,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -898,7 +898,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -907,7 +907,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -916,7 +916,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9 @@ -925,7 +925,7 @@ https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/ - 2026-05-11T15:22:02+09:00 + 2026-05-11T17:11:47+09:00 weekly 0.9