VC심사역의 바이브 코딩 개발기 -2.1-
아이디어 형상화하기
안녕하세요, 스타트업에 투자하는 VC 심사역 그믐입니다. 지난 글에서는 AI와 효과적으로 소통하는 방법과 프롬프트 엔지니어링에 대해 공유했습니다. 오늘은 두 번째 세션 후반부에서 배운 새로운 도구들과 와이어프레임 제작 방법을 배워봤는데요. 이 내용들을 여러분과 나눠보려 합니다.
새로운 도구의 발견: AI Studio와 CodePen
Grok으로 진행 한 Preview는 신기한 장난감이긴 했으나, 그냥 코드 조각으로 작성되어, 실제 기능을 추가하거나, 어떻게 구현되는 것인지 알아보기 어려운 부분들이 있었습니다. 당연히 구체적으로 코드를 다룰 수 있는 도구를 통해서 좀더 다루는 것이 필요 했구요. 이를 위해서 휘동님이 좀 더 본격적은 코딩을 진행하기 위한 두 가지 강력한 도구를 2개 소개해주셨습니다.
Google AI Studio: 더 정교한 코드 생성
첫 번째 세션에서 활용했던 Grok은 코드 생성과 Preview 기능이 있었지만, 몇 가지 한계점이 있었습니다. (1) Grok의 Preview 기능 단순히 코드의 파편에 가까워 실제 기능을 파악하기 어려웠고, (2) 디테일한 수정을 진행하기에는 제약이 많았습니다. 제대로 된 코드의 형태를 뽑아내고 다루려면 보다 정교한 툴이 필요했습니다.
이런 상황에서 Google AI Studio는 훨씬 강력한 대안이 되었습니다. 휘동님이 공유해주신 블로그 글(https://www.stdy.blog/build-racing-simulator-in-10-min-with-gemini/)을 통해 좀 더 구체적인 내용들을 살펴볼 수 있습니다.
Google AI Studio의 Chain of Thought를 사용하여 제 PRD에 대한 본격적인 추론 이후에 작성해준다는 것입니다. 작성을 요청하면 각 변수 지정이나 프로그램을 어떻게 구조를 짰는지 (DB 구조나, UI 설정 등) 정확히 설명해주고 작성에 코드 작성에 들어갑니다.
특히 최근 사용할 수 있게 된 Gemini 2.5는 결국 나중에 Cursor를 사용하는 경우에도 주로 사용하는 LLM 엔진중 하나라서 코딩의 수준이 높고, 자신의 코드 작성 단계를 세세히 나눠주는 편이라, 코딩 초보자인 저도 어렵지 않게 내용을 따라갈 수 있었습니다.
다만 Google AI Studio의 문제는 너무 본격적으로 제대로된 프로그램 구조를 가지고 코드를 작성하기 때문에 Preview 기능을 지원하지 않는다는 것입니다. 이럴 때 필요한 것이 최종 프로덕트를 눈으로 확인할 수 있는 CodePen이라는 서비스 입니다. 이 복잡한 부분을 AI Studio에 ‘CodePen에 사용할 수 있도록 코드를 짜줘’ 한마디 면 HTML, CSS, Java Script 부분으로 나누어 작성해주어서 CodePen에 사용할 수 있도록 작성해줍니다.
CodePen: 즉각적인 피드백 루프와 구조화된 코드 작성
AI Studio에서 만들어진 프로젝트를 한번 확인하기 위해서 사용할 수 있는 CodePen 서비스는 웹페이지를HTML(전체구조), CSS(디자인), JavaScript(기능)이라는 파트로 나누어 작성 및 테스트 할수 있도록하는 서비스입니다.
AI가 생성한 코드를 CodePen에 붙여넣으면, 바로 작동하는 모습을 확인할 수 있어 즉각적인 피드백을 얻을 수 있었습니다. 이런 즉각적인 피드백은 개발 과정에서 정말 중요했습니다. 코드가 의도한 대로 작동하지 않을 때, 바로 수정하고 결과를 확인할 수 있어 내가 지금 무얼하고 있구나, 어떤건 아직 코드에서 구현이 안된 것이구나 하는 부분을 확인할 수 있었습니다.
AI-Studio CodePEN을 통한 레이드 대시보드 구현
직접 Google AI Studio에 첫 시간에 Grok을 통해 작성했던 PRD를 기입하여서, 구현을 부탁하였습니다. 그 이후에 최초 버전에서 몇 가지 수정을 요청하면서 놀라운 경험을 했습니다.
직업 및 특성 리스트 생성: 단순히 “WOW 직업과 특성을 가져와줘”라고 요청했는데, AI가 워크래프트의 13개 직업 각각에 대해 3개씩, 총 39개의 특성 리스트를 정확하게 가져와주었습니다. 아마 누군가가 비슷한 프로그램을 작성했기 때문으로 보이는데, 이미 AI가 제 의도를 파악하고 귀찮은 작업들은 선행해주는 것이 너무 신기했습니다.
직업 특성에 맞는 아이콘 생성: 각 특성에 걸맞는 아이콘을 만들어달라고 요청했더니, 직업의 의미와 특성에 상당히 부합하는 아이콘들을 생성해주었습니다. 공식 와우 이미지는 아니었지만, 수도사 힐러인 운무는 비가 내리는 구름 아이콘, 야수 사냥꾼은 곰발바닥 이런식으로 디자인적으로 충분히 활용 가능한 수준의 아이콘을 자동으로 가져와 주었습니다.
앞서 배운 지식을 활용해 CodePEN에서 직접 레이드 대시보드를 구현해봤습니다. 결과물은 https://codepen.io/mnemosyn/pen/XJWGxBv에서 확인할 수 있습니다.
AI의 도움을 받아 구현한 이 대시보드는 제가 처음 상상했던 것보다 훨씬 직관적이고 사용자 친화적인 인터페이스를 갖추게 되었습니다. 특히 참가자 등록, 일정 등록/관리 기능 등을 간결하게 구현할 수 있었습니다.
CodePEN의 실시간 프리뷰 기능 덕분에 코드 수정 즉시 결과물을 확인할 수 있어, 디자인과 기능을 빠르게 개선할 수 있었습니다. 또한 다른 개발자들의 코드를 참고하거나 공유하기 쉬운 환경이라 학습에 매우 유용했습니다.
PRD에서 와이어프레임으로: 시각화의 힘
두 번째 세션에서 소개받은 두번째 내용은 와이어프레임을 만드는 것이었습니다. AI Studio나 Grok을 통해서 만들어진 웹페이지의 레이아웃은 AI가 적절하게 만들어준 형태였습니다. 이 것보다는 내가 상상하는 형태의 레이아웃을 적절하게 만드는 것이 필요하였고, 이를 위해서 필요한 것이 PRD(Product Requirements Document)를 와이어프레임으로 변환하는 작업이었습니다. 이를 위해 다음과 같은 워크플로우를 배웠습니다:
Grok 같은 도구로 PRD 작성하기
ChatGPT 4o에게 PRD를 제공하고 와이어프레임 만들기 요청하기
생성된 와이어프레임 이미지를 Claude나 Cursor에게 제공하며 “이 와이어프레임을 구현할 수 있게 디자인 컴포넌트들을 구현해줘” 요청하기
Cursor에서 디자인 컴포넌트를 조합해 앱 만들기
ChatGPT 4o를 통한 와이어 프레임 제작
휘동님이 추천한 블로그 글(https://www.stdy.blog/design-product-homepage-with-chatgpt/)을 참고해 WOW 레이드 대시보드의 PRD를 ChatGPT 4o에 입력했습니다. 그리고 “이 PRD를 바탕으로 와이어프레임을 만들어줘”라고 요청했죠.
ChatGPT 4o가 생성한 와이어프레임 이미지는 제가 상상했던 것보다 훨씬 직관적이고 완성도가 높았습니다. 특히 제가 게이머들에게 익숙한 UI를 해달라고 하거나, WoW의 엠블렘 등을 집어넣고 유사한 컬러칩을 사용해달라고 하는 등의 부탁을 하면 어느정도 따라와 주었습니다.
다만 단순한 그림 뿐만 아니라 실제 각 컴포넌트들 구현하는 코드를 생성해달라고 하거나, 각 컴포넌트들을 만들어달라고 하였을 때는 저 모서리 디테일 등으로 인하여 제대로된 코드를 생성하지는 못하였습니다.
Claude 아티팩트 기능 활용 시도
Claude의 무료 버전을 사용해 와이어프레임 구현을 시도해보기도 했습니다. 이 경우에는 웹페이지에 사용할수 있는 수준으로 단순화 된 와이어프레임을 제공하였으나, 제대로 사용하기에는 조금 조악한 느낌이 있는 수준이었습니다. 아티팩트 링크
디자인 디테일 표현의 어려움
와이어프레임 제작 과정에서 느낀 어려움 중 하나는, 제가 생각하는 디자인의 디테일(색감, 형태 등)을 AI에게 정확히 전달하는 것이었습니다. 디자인 관련 지시를 많이 해본 경험이 없다 보니, “이런 느낌으로 만들어줘”라는 애매한 표현보다는 구체적인 색상 코드나 참고 이미지를 제공하는 것이 효과적이라는 점을 깨달았습니다.
다음 단계와 계획
이 단계까지 만들고 보니 제가 만들고 싶었던 프로덕트가 생각보다 다양한 Layer로 나뉘어있다는 것을 깨달을 수 있었습니다. 처음 계획에서는 단순히 대시보드 화면만을 생각했는데, 공격대 계획을 처음 생성하는 창, 수정하는 창, 각 공격대원이 참가 신청하는 창, 자신의 참가를 삭제하는 창 등등 생각보다 많은 요소들이 들어가야만 프로젝트가 완성된다는 것을 알았습니다.
추가적으로 제가 “어떻게 요청하느냐에 따라 AI가 거의 모든 것을 만들어줄 수 있다”는 것을 알았지만 이제는 “어떻게 요청할 것인가”라는 부분을 잘 생각해봐야한다는 것이 새로운 어려움이었습니다.
다음 개발기에서는 Lovable을 활용한 MVP 제작기를 소개 드릴게요. 그 다음 제대로된 IDE인 VS Code Copilot을 활용하는 개발기가 나오니 많은 관심 부탁드립니다. 비개발자의 AI 코딩 여정, 계속 지켜봐 주세요!
#바이브코딩 #VC심사역 #와이어프레임 #AIStudio #CodePen
