<div id="readability-page-1" class="page"><div id="post-body-6229815373438891527" itemprop="articleBody">
이 글은 확실하게 성공하는 바이브 코딩 도구 사용 방법을 보여준다. 여기서는 바이브 코딩 도구로 <a href="https://en.wikipedia.org/wiki/Product_requirements_document">PRD</a>(Product Requirement Document) 작성은 <a href="https://gemini.google.com/app?hl=ko">Gemini Pro</a>, 바이브 코딩 도구는 <a href="https://github.com/features/copilot">Github Copilot</a>, 대형언어모델 LLM은 <a href="https://www.anthropic.com/claude/sonnet">Claude Sonet</a>을 사용했다(LLM은 본인 입맛에 맞게 사용하면 됨). 바이브 코딩 준비하기바이브 코딩을 하는 방법은 다음과 같이 다양하다.&nbsp;<div><ol><li><a href="https://openai.com/">ChatGPT</a> 에 코딩 요청을 해서 생성된 파이썬 같은 코드를 복사&amp;붙여넣기해 프로그램을 완성해 나가는 방법</li><li><a href="https://cloud.google.com/gemini/docs/codeassist/gemini-cli">Gemini CLI</a>, <a href="https://docs.anthropic.com/en/docs/claude-code/overview">Claude code CLI</a>, <a href="https://openai.com/codex/">codex CLI</a> 도구를 사용해 프로젝트 파일 및 소스코드를 생성하는 방법</li><li>vscode 같은 개발 <a href="https://ko.wikipedia.org/wiki/%ED%86%B5%ED%95%A9_%EA%B0%9C%EB%B0%9C_%ED%99%98%EA%B2%BD">IDE</a>와 연동되는 github <a href="https://draft.blogger.com/blog/post/edit/5201956450461596914/6229815373438891527#">copilot</a>, <a href="https://cursor.com/">cursor</a>, <a href="https://windsurf.com/editor">windsurf</a>와 같은 도구를 사용해 바이브 코딩하는 방법</li><li><a href="https://bubble.io/">Bubble</a>.io나 <a href="https://www.canva.com/ko_kr/">Canva</a>와 같은 바이브 코딩 웹서비스에서 직접 요구사항을 입력하여 제공 클라우드에 앱을 생성 빌드 실행하는 방법&nbsp;</li></ol></div>여기서는 로컬PC에서 프로젝트 소스 파일들을 생성하고 직접 수정할 수 있도록 vscode에서 바이브 코딩할 수 있는 방법을 취한다. 이를 위해 다음 환경을 미리 준비한다.<div><ul><li><a href="https://gemini.google.com/app?hl=ko">Gemini Pro</a>&nbsp;가입</li><li><a href="https://www.python.org/downloads/">파이썬</a>, <a href="https://nodejs.org/ko/download">node.js</a> 설치</li><li><a href="https://github.com/features/copilot">Github</a>&nbsp;가입</li><li><a href="https://github.com/features/copilot">Copilot</a>&nbsp;서비스 가입</li><li><a href="https://code.visualstudio.com/">vscode</a>&nbsp;설치 및 코딩 언어 관련 <a href="https://code.visualstudio.com/docs/configure/extensions/extension-marketplace">확장(Extension) 애드인 설치</a></li></ul></div>요구사항 작성하기바이브 코딩 목적은 텍스트 편집기를 개발하는 것이다. 이를 위한 PRD를 작성하고, 바이브 코딩을 진행한다. PRD작성을 위해 프롬프트를 다음과 같이 입력한다.&nbsp;<blockquote>GUI 기반 텍스트 편집기를 개발할꺼야. 파이썬과 Tkinter 라이브러리를 이용할꺼야. 메뉴는 파일 메뉴, 편집 메뉴, 테마 선택 메뉴(다크모드 하위 메뉴 포함), 찾기 메뉴로 구성됨. 이 프로그램 개발을 위한 PRD를 UI 스케치를 포함해 md 포맷으로 작성해.</blockquote>사용할 라이브러리와 같은 기술 스택을 지정하는 것은 중요하다. 약간 시행착오를 하며 명확한 PRD가 작성될 수 있도록 프롬프트에 정확한 정보를 포함시킨다. md 포맷은 좀 더 명확한 문서형식작성을 위해 사용했다. md포맷은 <a href="https://namu.wiki/w/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4">markdown</a>&nbsp;파일형식으로 <a href="https://github.com/mac999">github</a>에서 README 파일 작성할때 표준 형식이다.&nbsp;다음은 이렇게 생성된 제품 요구사항 문서이다.<div># **Python/Tkinter 기반 GUI 텍스트 편집기 제품 요구사항 명세서 (PRD)**## **1. 개요**본 문서는 파이썬(Python)과 표준 GUI 라이브러리인 티케이인터(Tkinter)를 사용하여 개발될 데스크톱 텍스트 편집기의 요구사항을 정의합니다. 이 애플리케이션은 기본적인 텍스트 편집 기능과 함께 사용자의 편의를 위한 다크 모드, 찾기 기능 등을 제공하는 것을 목표로 합니다.## **2. 목표 사용자**&nbsp; * **초보 개발자 및 학생**: 간단한 코드나 스크립트, 메모, 과제 등을 작성하고 편집하려는 사용자.&nbsp; * **일반 사용자**: Windows 메모장과 같은 가볍고 빠른 텍스트 편집기가 필요한 사용자.## **3. 핵심 기능**### **3.1. 파일 메뉴**| 기능 | 단축키 | 설명 || :--- | :--- | :--- || **새 파일** | `Ctrl+N` | 새로운 빈 편집 창을 엽니다. || **열기** | `Ctrl+O` | 기존 텍스트 파일 (`.txt` 등)을 불러옵니다. || **저장** | `Ctrl+S` | 현재 파일을 덮어쓰기 저장합니다. || **다른 이름으로 저장** | `Ctrl+Shift+S` | 새 이름이나 경로로 파일을 저장합니다. || **종료** | `Alt+F4` | 프로그램을 종료합니다. (저장되지 않은 내용이 있으면 경고) |### **3.2. 편집 메뉴**| 기능 | 단축키 | 설명 || :--- | :--- | :--- || **실행 취소 (Undo)** | `Ctrl+Z` | 마지막 작업을 되돌립니다. || **다시 실행 (Redo)** | `Ctrl+Y` | 되돌린 작업을 다시 실행합니다. || **잘라내기** | `Ctrl+X` | 선택한 텍스트를 잘라내 클립보드에 저장합니다. || **복사** | `Ctrl+C` | 선택한 텍스트를 클립보드에 복사합니다. || **붙여넣기** | `Ctrl+V` | 커서 위치에 클립보드의 내용을 붙여넣습니다. |### **3.3. 테마 선택 메뉴**| 기능 | 설명 || :--- | :--- || **라이트 모드** | 기본 테마 (흰 배경, 검은 글씨)를 적용합니다. || **다크 모드** | 어두운 테마 (회색/검은 배경, 흰 글씨)를 적용합니다. |### **3.4. 찾기 메뉴**| 기능 | 단축키 | 설명 || :--- | :--- | :--- || **찾기** | `Ctrl+F` | 문서 내에서 특정 문자열을 검색할 수 있는 입력창 또는 대화상자를 엽니다. |-----## **4. 기술 스택**&nbsp; * **프로그래밍 언어**: **Python 3.x**&nbsp; * **GUI 라이브러리**: **Tkinter** (파이썬 표준 라이브러리)-----## **5. UI 스케치**애플리케이션의 전체적인 레이아웃 스케치입니다.```+----------------------------------------------------------------------+| My Text Editor&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;- □ X |+----------------------------------------------------------------------+| 파일(F) | 편집(E) | 테마(T) | 찾기(S)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |+----------------------------------------------------------------------+| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; || |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; || |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; || |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;##############################################&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#&nbsp; &nbsp; 사용자가 텍스트를 입력하는 메인 영역&nbsp; &nbsp; #&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;#&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;##############################################&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|| |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; || |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; || |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; || |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |+----------------------------------------------------------------------+| 줄: 1, 열: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; UTF-8&nbsp; |+----------------------------------------------------------------------+```**UI 구성 요소:**&nbsp; * **제목 표시줄**: 프로그램 이름과 창 조절 버튼이 표시됩니다.&nbsp; * **메뉴 바**: 파일, 편집, 테마, 찾기 메뉴가 위치하며, 각 메뉴 클릭 시 하위 메뉴 항목들이 나타납니다.&nbsp; * **텍스트 영역**: 스크롤 가능한 주 텍스트 편집 공간입니다.&nbsp; * **상태 표시줄**: 하단에 커서의 현재 위치(줄, 열)나 인코딩 같은 간단한 상태 정보를 보여줍니다.-----## **6. 성공 지표**&nbsp; * 명시된 모든 메뉴 기능(파일 I/O, 편집, 테마 변경, 찾기)이 정상적으로 작동합니다.&nbsp; * 다크 모드와 라이트 모드 간 전환이 즉시 UI에 반영됩니다.&nbsp; * 프로그램이 안정적으로 실행되며, 일반적인 사용 환경에서 오류로 인해 종료되지 않습니다.</div>vscode에서 바이브 코딩하기<a href="https://code.visualstudio.com/">vscode</a>를 실행하고, 생성된 PRD파일을 copilot에 알려주고, 이대로 프로그램 작성하도록 입력한다.&nbsp;혹시, 에러가 발생하면, 메시지를 다시 입력해 수정하는 과정을 반복하면 된다. 다음 영상은 바이브 코딩 과정을 보여준다.<iframe allowfullscreen="" height="266" src="https://www.youtube.com/embed/Keo6fQE-PWU" width="320" youtube-src-id="Keo6fQE-PWU"></iframe>결과적으로 큰 문제 없이 편집기가 동작되는 것을 확인할 수 있다.결론바이브 코딩이 최근 매우 발전해서, 요구사항도 추론해주고, 심지어 <a href="https://ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EC%9A%94%EA%B5%AC_%EB%AA%85%EC%84%B8">SRS</a>(Software Requirement Specification), <a href="https://files.defcon.no/RUP/webtmpl/templates/a_and_d/rup_sad.htm">SAD</a>(Software Architecture Document)도 작성해 준다. 향후에는 말만 하면, 소프트웨어 공학에서 필수로 다루는 SRS, SAD뿐 아니라, <a href="https://ko.wikipedia.org/wiki/%ED%86%B5%ED%95%A9_%EB%AA%A8%EB%8D%B8%EB%A7%81_%EC%96%B8%EC%96%B4">UML</a>(Unified Modeling Language)과 같은 아키텍처 설계도도 <a href="https://namu.wiki/w/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4%20%EB%94%94%EC%9E%90%EC%9D%B8%20%ED%8C%A8%ED%84%B4">디자인패턴</a>에 의거해 그려줄 날이 멀지 않은 것 같다.다만, 소프트웨어 개발 과정에서 바이브 코딩 도구에 일을 시키려면, 당연히, 인턴에 업무 지시하는 수준의 능력은 필요하다.&nbsp;예를 들어, 바이브 코딩 시 적절한 용어를 사용해야 하며, 수정되지 않은 어려운 문제나 에러가 발생하면, 생성된 코드를 이해하고 개선할 수 있는 능력은 당연히 필요하다 하겠다.&nbsp;부록: 웹기반 텍스트 편집기 개발 및 깃허브 푸쉬하기추가로, Tailwind 로 웹 기반 편집기도 개발해 보았다. 다음과 같이 자동으로 프로젝트 만들어 코딩되고, 실행된다.&nbsp;<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgp5ZrHQqJ_hHi-zEAhXmwAaJxhAuMHYUxYcm08EqfOp3uTsNGFuG9ax4z3vyHXkyZJqxTR_ihOIxP9hmPFrG4U7aBNkFSQYaB5-DZdytYXOvlZcsSwjH__ojtjxBJVJ-jz8GYFVv1qsiFBrfK1kl3JPAV_9ytr_qGpfLLzTRuWngnIfvVoZ-6qPfdLAIed"><img alt="" data-original-height="1366" data-original-width="2554" height="149" src="https://blogger.googleusercontent.com/img/a/AVvXsEgp5ZrHQqJ_hHi-zEAhXmwAaJxhAuMHYUxYcm08EqfOp3uTsNGFuG9ax4z3vyHXkyZJqxTR_ihOIxP9hmPFrG4U7aBNkFSQYaB5-DZdytYXOvlZcsSwjH__ojtjxBJVJ-jz8GYFVv1qsiFBrfK1kl3JPAV_9ytr_qGpfLLzTRuWngnIfvVoZ-6qPfdLAIed=w400-h214" width="280"></a><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEinEjzGAYceoEc-hWrgoYHlvjgdnwawf9ZtI7pBVMlwE7aQfS2OxBFfHMSVwL1_R_LNI7edGyv-3bgsN30dTAkxa_Ou2Ki_Sqk_ZSvb3IvWom7dsCT6JRiEp2ytM8kSc3Pm2u0sVbRuOOCenrdvF8_e5R8oBd8lzjt974B6AM82vugad5zt_QXPB8Ai_K4r"><img alt="" data-original-height="1365" data-original-width="2559" height="149" src="https://blogger.googleusercontent.com/img/a/AVvXsEinEjzGAYceoEc-hWrgoYHlvjgdnwawf9ZtI7pBVMlwE7aQfS2OxBFfHMSVwL1_R_LNI7edGyv-3bgsN30dTAkxa_Ou2Ki_Sqk_ZSvb3IvWom7dsCT6JRiEp2ytM8kSc3Pm2u0sVbRuOOCenrdvF8_e5R8oBd8lzjt974B6AM82vugad5zt_QXPB8Ai_K4r=w400-h214" width="280"></a><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiHZDCJ5SuHhVENxC1kQ8oLxFtAm-Kgl6-_gzaf0HSl9yhtLgqD7_1mLC0vt8p24KtMiBoADffFOXP8wXZd3BwjBzLzs2_IDdUvQSVhRwXmRICGmi3d_WVJItH_bHRKtrXFym8eKIQXfh31nB-IgHPj2UyfXrv2gVGxypgCVnvtjCV6op_fdFVGjSinRjNG"><img alt="" data-original-height="1363" data-original-width="2554" height="149" src="https://blogger.googleusercontent.com/img/a/AVvXsEiHZDCJ5SuHhVENxC1kQ8oLxFtAm-Kgl6-_gzaf0HSl9yhtLgqD7_1mLC0vt8p24KtMiBoADffFOXP8wXZd3BwjBzLzs2_IDdUvQSVhRwXmRICGmi3d_WVJItH_bHRKtrXFym8eKIQXfh31nB-IgHPj2UyfXrv2gVGxypgCVnvtjCV6op_fdFVGjSinRjNG=w400-h214" width="280"></a>프로젝트 코드 작성 중<a href="https://blogger.googleusercontent.com/img/a/AVvXsEhnwKpI3K6KPP8LvO_OrMuO6H-lGZTPlk2C36eYljllTh9mtH_UnTGKcxX1hGTGkn5Jb_8sbi96ogorvHYa3enSbjYwrnAQfwDfUPcYR5s8RBVZQBqNNqwilYyOWlXr9Olod4ToCHa5ovk4VZJpw-ggCqbFBjsoOHazCJcSl5xxVhNNQKmg4jcY4xPziB57"><img alt="" data-original-height="1360" data-original-width="2559" height="149" src="https://blogger.googleusercontent.com/img/a/AVvXsEhnwKpI3K6KPP8LvO_OrMuO6H-lGZTPlk2C36eYljllTh9mtH_UnTGKcxX1hGTGkn5Jb_8sbi96ogorvHYa3enSbjYwrnAQfwDfUPcYR5s8RBVZQBqNNqwilYyOWlXr9Olod4ToCHa5ovk4VZJpw-ggCqbFBjsoOHazCJcSl5xxVhNNQKmg4jcY4xPziB57=w400-h213" width="280"></a><div>완성된 웹 텍스트 편집기<a href="https://blogger.googleusercontent.com/img/a/AVvXsEg6kZD-4IecanHqMFV1nrHOnxhJcs_uZCax19I7i1xcGtsK5YeU6qaVBu4FEARcOxaJm6vg6DvHvzmZ6jcZhw-GCtbVUqx6ydlornYmRFlU5ntE_vkPf5RXXmp5DUzDdu1YFsYW4go2Em90fyOHGOCFYi1j2_pmBooB5pwIBo8HZCXsbKo9UuvjSdg1KDcb"><img alt="" data-original-height="1363" data-original-width="2554" height="149" src="https://blogger.googleusercontent.com/img/a/AVvXsEg6kZD-4IecanHqMFV1nrHOnxhJcs_uZCax19I7i1xcGtsK5YeU6qaVBu4FEARcOxaJm6vg6DvHvzmZ6jcZhw-GCtbVUqx6ydlornYmRFlU5ntE_vkPf5RXXmp5DUzDdu1YFsYW4go2Em90fyOHGOCFYi1j2_pmBooB5pwIBo8HZCXsbKo9UuvjSdg1KDcb=w400-h214" width="280"></a><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgbnze7gdx-a-xxSy57_NlVrzbYQ5kAMqpBSQB_MS2pMSazj9ShM__z-G3qhh7I0_bugS-qwuP_zGf4RSpe1cdlkMtk-tFhalZ-1ItuvVnHeSAW9TZc8KN8ncJWVt58vopGZlCxdJE0BMLLlvCu_AqxO6svxBwsOct7Dw90bdfrZD-k4v4_ActmRyPJFOEU"><img alt="" data-original-height="1366" data-original-width="2559" height="149" src="https://blogger.googleusercontent.com/img/a/AVvXsEgbnze7gdx-a-xxSy57_NlVrzbYQ5kAMqpBSQB_MS2pMSazj9ShM__z-G3qhh7I0_bugS-qwuP_zGf4RSpe1cdlkMtk-tFhalZ-1ItuvVnHeSAW9TZc8KN8ncJWVt58vopGZlCxdJE0BMLLlvCu_AqxO6svxBwsOct7Dw90bdfrZD-k4v4_ActmRyPJFOEU=w400-h214" width="280"></a></div></div></div></div>

</div></div>

Daddy Makers

이 글은 확실하게 성공하는 바이브 코딩 도구 사용 방법을 보여준다. 여기서는 바이브 코딩 도구로 PRD(Product Requirement Document) 작성은 Gemini Pro, 바이브 코딩 도구는 Github Copilot, 대형언어모델 LLM은 Claude Sonet을 사용했다(LLM은 본인 입맛에 맞게 사용하면 됨).
바이브 코딩 준비하기
바이브 코딩을 하는 방법은 다음과 같이 다양하다. 
ChatGPT 에 코딩 요청을 해서 생성된 파이썬 같은 코드를 복사&붙여넣기해 프로그램을 완성해 나가는 방법
Gemini CLI, Claude code CLI, codex CLI 도구를 사용해 프로젝트 파일 및 소스코드를 생성하는 방법
vscode 같은 개발 IDE와 연동되는 github copilot, cursor, windsurf와 같은 도구를 사용해 바이브 코딩하는 방법
Bubble.io나 Canva와 같은 바이브 코딩 웹서비스에서 직접 요구사항을 입력하여 제공 클라우드에 앱을 생성 빌드 실행하는 방법 
여기서는 로컬PC에서 프로젝트 소스 파일들을 생성하고 직접 수정할 수 있도록 vscode에서 바이브 코딩할 수 있는 방법을 취한다. 이를 위해 다음 환경을 미리 준비한다.
Gemini Pro 가입
파이썬, node.js 설치
Github 가입
Copilot 서비스 가입
vscode 설치 및 코딩 언어 관련 확장(Extension) 애드인 설치
요구사항 작성하기
바이브 코딩 목적은 텍스트 편집기를 개발하는 것이다. 이를 위한 PRD를 작성하고, 바이브 코딩을 진행한다. PRD작성을 위해 프롬프트를 다음과 같이 입력한다. 
GUI 기반 텍스트 편집기를 개발할꺼야. 파이썬과 Tkinter 라이브러리를 이용할꺼야. 메뉴는 파일 메뉴, 편집 메뉴, 테마 선택 메뉴(다크모드 하위 메뉴 포함), 찾기 메뉴로 구성됨. 이 프로그램 개발을 위한 PRD를 UI 스케치를 포함해 md 포맷으로 작성해.
사용할 라이브러리와 같은 기술 스택을 지정하는 것은 중요하다. 약간 시행착오를 하며 명확한 PRD가 작성될 수 있도록 프롬프트에 정확한 정보를 포함시킨다. md 포맷은 좀 더 명확한 문서형식작성을 위해 사용했다. md포맷은 markdown 파일형식으로 github에서 README 파일 작성할때 표준 형식이다. 
다음은 이렇게 생성된 제품 요구사항 문서이다.
# **Python/Tkinter 기반 GUI 텍스트 편집기 제품 요구사항 명세서 (PRD)**
## **1. 개요**
본 문서는 파이썬(Python)과 표준 GUI 라이브러리인 티케이인터(Tkinter)를 사용하여 개발될 데스크톱 텍스트 편집기의 요구사항을 정의합니다. 이 애플리케이션은 기본적인 텍스트 편집 기능과 함께 사용자의 편의를 위한 다크 모드, 찾기 기능 등을 제공하는 것을 목표로 합니다.
## **2. 목표 사용자**
  * **초보 개발자 및 학생**: 간단한 코드나 스크립트, 메모, 과제 등을 작성하고 편집하려는 사용자.
  * **일반 사용자**: Windows 메모장과 같은 가볍고 빠른 텍스트 편집기가 필요한 사용자.
## **3. 핵심 기능**
### **3.1. 파일 메뉴**
| 기능 | 단축키 | 설명 |
| :--- | :--- | :--- |
| **새 파일** | `Ctrl+N` | 새로운 빈 편집 창을 엽니다. |
| **열기** | `Ctrl+O` | 기존 텍스트 파일 (`.txt` 등)을 불러옵니다. |
| **저장** | `Ctrl+S` | 현재 파일을 덮어쓰기 저장합니다. |
| **다른 이름으로 저장** | `Ctrl+Shift+S` | 새 이름이나 경로로 파일을 저장합니다. |
| **종료** | `Alt+F4` | 프로그램을 종료합니다. (저장되지 않은 내용이 있으면 경고) |
### **3.2. 편집 메뉴**
| 기능 | 단축키 | 설명 |
| :--- | :--- | :--- |
| **실행 취소 (Undo)** | `Ctrl+Z` | 마지막 작업을 되돌립니다. |
| **다시 실행 (Redo)** | `Ctrl+Y` | 되돌린 작업을 다시 실행합니다. |
| **잘라내기** | `Ctrl+X` | 선택한 텍스트를 잘라내 클립보드에 저장합니다. |
| **복사** | `Ctrl+C` | 선택한 텍스트를 클립보드에 복사합니다. |
| **붙여넣기** | `Ctrl+V` | 커서 위치에 클립보드의 내용을 붙여넣습니다. |
### **3.3. 테마 선택 메뉴**
| 기능 | 설명 |
| :--- | :--- |
| **라이트 모드** | 기본 테마 (흰 배경, 검은 글씨)를 적용합니다. |
| **다크 모드** | 어두운 테마 (회색/검은 배경, 흰 글씨)를 적용합니다. |
### **3.4. 찾기 메뉴**
| 기능 | 단축키 | 설명 |
| :--- | :--- | :--- |
| **찾기** | `Ctrl+F` | 문서 내에서 특정 문자열을 검색할 수 있는 입력창 또는 대화상자를 엽니다. |
-----
## **4. 기술 스택**
  * **프로그래밍 언어**: **Python 3.x**
  * **GUI 라이브러리**: **Tkinter** (파이썬 표준 라이브러리)
-----
## **5. UI 스케치**
애플리케이션의 전체적인 레이아웃 스케치입니다.
```
+----------------------------------------------------------------------+
| My Text Editor                                                 - □ X |
+----------------------------------------------------------------------+
| 파일(F) | 편집(E) | 테마(T) | 찾기(S)                                |
+----------------------------------------------------------------------+
| |                                                                  |
| |                                                                  |
| |                                                                  |
| |         ##############################################           |
| |         #                                            #           |
| |         #    사용자가 텍스트를 입력하는 메인 영역    #           |
| |         #                                            #           |
| |         ##############################################           |
| |                                                                  |
| |                                                                  |
| |                                                                  |
| |                                                                  |
+----------------------------------------------------------------------+
| 줄: 1, 열: 1                                                    UTF-8  |
+----------------------------------------------------------------------+
```
**UI 구성 요소:**
  * **제목 표시줄**: 프로그램 이름과 창 조절 버튼이 표시됩니다.
  * **메뉴 바**: 파일, 편집, 테마, 찾기 메뉴가 위치하며, 각 메뉴 클릭 시 하위 메뉴 항목들이 나타납니다.
  * **텍스트 영역**: 스크롤 가능한 주 텍스트 편집 공간입니다.
  * **상태 표시줄**: 하단에 커서의 현재 위치(줄, 열)나 인코딩 같은 간단한 상태 정보를 보여줍니다.
-----
## **6. 성공 지표**
  * 명시된 모든 메뉴 기능(파일 I/O, 편집, 테마 변경, 찾기)이 정상적으로 작동합니다.
  * 다크 모드와 라이트 모드 간 전환이 즉시 UI에 반영됩니다.
  * 프로그램이 안정적으로 실행되며, 일반적인 사용 환경에서 오류로 인해 종료되지 않습니다.
vscode에서 바이브 코딩하기
vscode를 실행하고, 생성된 PRD파일을 copilot에 알려주고, 이대로 프로그램 작성하도록 입력한다. 
혹시, 에러가 발생하면, 메시지를 다시 입력해 수정하는 과정을 반복하면 된다. 다음 영상은 바이브 코딩 과정을 보여준다.
결과적으로 큰 문제 없이 편집기가 동작되는 것을 확인할 수 있다.
결론
바이브 코딩이 최근 매우 발전해서, 요구사항도 추론해주고, 심지어 SRS(Software Requirement Specification), SAD(Software Architecture Document)도 작성해 준다. 향후에는 말만 하면, 소프트웨어 공학에서 필수로 다루는 SRS, SAD뿐 아니라, UML(Unified Modeling Language)과 같은 아키텍처 설계도도 디자인패턴에 의거해 그려줄 날이 멀지 않은 것 같다.
다만, 소프트웨어 개발 과정에서 바이브 코딩 도구에 일을 시키려면, 당연히, 인턴에 업무 지시하는 수준의 능력은 필요하다. 
예를 들어, 바이브 코딩 시 적절한 용어를 사용해야 하며, 수정되지 않은 어려운 문제나 에러가 발생하면, 생성된 코드를 이해하고 개선할 수 있는 능력은 당연히 필요하다 하겠다. 
부록: 웹기반 텍스트 편집기 개발 및 깃허브 푸쉬하기
추가로, Tailwind 로 웹 기반 편집기도 개발해 보았다. 다음과 같이 자동으로 프로젝트 만들어 코딩되고, 실행된다. 
프로젝트 코드 작성 중
완성된 웹 텍스트 편집기
미완성된 메뉴에 대해 추가 요청
모두 완성된 메뉴 기능
Github 푸쉬 요청
다음은 이렇게 개발된 프로젝트 코드이다. 
mac999/vibe_coding_web_editor

확실하게 성공하는 바이브 코딩 도구 사용 방법

댓글