소스코드: https://github.com/ruleBased848/vibe-coding-draw-a-circle


동그라미를 그리면 동그라미가 얼마나 정확한지 평가해주는 웹앱임.


위 링크의 프로젝트를 다운로드한 다음 index.html을 브라우저로 열면 플레이 가능.





개발과정:

너무 간단한 앱이라 개발과정이랄 것도 딱히 없지만...

우선 사용한 툴은 vscode + copilot(GPT-4.1 무과금) agent 모드.

가장 먼저 gpt한테 내가 만들고 싶은 앱이 뭔지 설명한 다음 소프트웨어 아키텍쳐만 우선 짜달라했음. (코딩은 아직 안함)

아키텍쳐가 부실한 경우(모순이 있거나 모호한 지점이 있거나 기술적으로 불가능한 부분이 있거나 등등) 아키텍쳐를 계속 수정했음. 그 결과가 architecture.md 파일임.


그 다음 아키텍쳐 파일 기반으로 코딩해달라 하니까 한 번에 완벽하게 해주더라고 ㅇㅇ.


너무 성의 없어서 미안하지만 이게 다임.


PS. 앱이 너무 심플하다 보니까 아키텍쳐를 먼저 정의한다는 전략이 얼마나 의미가 있었는지 잘모르겠네..


PS2. vercel로 배포도 해봤어.. https://vibe-coding-draw-a-circle.vercel.app/


PS3. 댓글에서 누가 버그 발견해서 그것도 AI로 해결했음..


PS4. 동그라미 최소 크기 제한 생겼어.. 혹시 안생겼으면 새로고침 해봐