VC 심사역의 바이브 코딩 개발기 -3-
실제 앱 구현 도전하기
안녕하세요, 스타트업에 투자하는 VC 심사역 그믐입니다. 지난 글들에서 AI를 활용한 조금 더 심화된 개발부터 와이어프레임 제작까지의 여정을 공유했습니다. 오늘은 세 번째 세션에서 드디어 기능적인 부분이 본격적으로 구현되는 프로덕트를 만들기 위한 앱 구현 도구들과 이를 통해 WOW 레이드 대시보드를 만들어본 경험을 소개하려고합니다.
세 번째 세션의 시작
이번 세션은 지난 번 와이어프레임 제작까지 진행한 후, 본격적으로 작동하는 앱을 만들어보는 것이 목표였습니다. 그 동안은 어떠한 프로그램을 만든다기보다는 웹페이지에서 어떠한 동작이 가능하게 만드는 수준이었습니다. 이번 세션부터 본격적인 ‘프로그램’다운 것들을 만들 수 있는 기본 툴들을 배우게 되었습니다.
개발 도구의 새로운 세계
지금까지는 Grok, Google AI Studio, CodePen 등을 사용해 간단한 코드 생성과 미리보기를 경험했지만, 이번에는 더 전문적인 개발 도구들을 소개받았습니다. 적어도 다수의 코드 파일을 생성하고, 그 파일간의 연결을 통해서 뭔가 개발하는 본격적인 형태를 진행할 수 있었습니다. 이러한 구조는 일반적으로 ‘IDE’에서 다루게 되는데, 최근에는 AI를 이용해서 어느 정도 수준까지는 자연어로 진행해 볼 수 있는 ‘앱빌더’ 들을 사용하게 되었습니다.
IDE vs 앱 빌더의 차이
개발 도구는 크게 두 가지 종류로 구분할 수 있었습니다:
IDE(통합 개발 환경): Cursor와 VS Code+Copilot 같은 도구들은 전통적인 개발 환경에 AI 기능을 결합한 형태입니다. 이 도구들은 코드를 직접 작성하고 수정할 수 있는 전문적인 환경을 제공하며, AI가 코드 작성을 도와줍니다. 특히 Cursor나 VS Code+Copilot는 에이전트 모드를 통해 프롬프트만으로도 앱을 만들 수 있지만, 코드를 이해하고 수정하는 것을 기본으로 하는 도구입니다.
앱 빌더: V0나 Lovable 같은 서비스는 코드에 대한 깊은 이해 없이도 프롬프트와 이미지만으로 앱을 만들 수 있는 도구입니다. 이 도구들은 비개발자도 쉽게 사용할 수 있으며, 코드 작성 과정을 최소화하고 결과물에 집중할 수 있게 해줍니다.
휘동님은 처음에는 앱 빌더로 실제 앱을 만들어보고, 그 다음 단계로 IDE를 활용한 더 본격적인 개발로 나아가는 방식을 추천해주셨습니다.
V0와 Lovable 살펴보기
V0: 프롬프트로 앱 구현하기
V0는 프롬프트만으로 완전한 앱을 구현할 수 있는 도구로, 휘동님이 처음 소개해주셨습니다. PRD와 와이어프레임 이미지를 제공하고 "Please implement this. Use the attached image for a style reference"라는 간단한 지시문으로 앱 구현을 시도해봤습니다.
V0는다양한 기술스택을 활용해 백엔드 기능까지 포함한 앱을 생성해주었습니다. 그러나 처음 생성된 UI가 제가 원하는 WOW 테마와 분위기와 맞지 않았고, 본격적인 수정이 조금 복잡하게 느껴졌습니다.
Lovable: 직관적인 앱 빌더
V0에서의 경험을 바탕으로, 휘동님은 대안으로 Lovable을 소개해주셨습니다. Lovable도 V0와 마찬가지로 프롬프트와 이미지를 통해 앱을 생성해주지만, 더 직관적인 인터페이스와 간편한 수정 기능이 있었습니다.
특히 Lovable은 생성된 앱을 즉시 테스트해볼 수 있고, 간단한 드래그 앤 드롭 방식으로 UI 요소들을 수정할 수 있어서 비개발자인 저에게 더 적합했습니다. 그래서 V0 대신 Lovable을 주요 도구로 선택했습니다.
Lovable로 WOW 레이드 대시보드 구현하기
PRD와 와이어프레임 활용
Lovable에 제가 이전에 작성한 PRD와 ChatGPT 4o로 만든 와이어프레임 이미지를 업로드했습니다. 그리고 "WOW 테마에 맞는 레이드 대시보드를 만들어주세요. 중세풍의 UI로 게임의 분위기를 살려주세요."라는 프롬프트를 추가했습니다.
Lovable은 놀랍게도 PRD의 핵심 기능들을 구현한 앱을 생성해주었습니다:
레이드 계획 생성 기능: 공대장이 레이드 일정, 던전 이름, 최소 참가자 수를 설정할 수 있는 페이지
참가자 관리 시스템: 길드원들이 캐릭터 이름과 역할(탱커/힐러/딜러)을 입력해 레이드에 참가 신청할 수 있는 기능
실시간 대시보드: 현재 참가자 목록과 역할 구성을 한눈에 볼 수 있는 화면
직면한 어려움과 해결책
앱 구현이 간단한 수준으로는 진행이 되었으나, 아직 제대로 수정되지 않은 부분들이 많이 남았습니다. 어떻게 Raid Plan을 생성할 것인지, 추가된 플레이어들을 어떻게 정리할 것 인지에 인터페이스가 제대로 구현되지 않았습니다.
추가적으로는 그리고 와우에서 일반적으로 사용하는 직업 + 특성을 나타내는 아이콘을 사용한다거나 아이템레벨을 기재하는 항목을 만든다거나, 하는 부분을 사용하기에는 아직 조악한 버전의 결과물이었습니다.
본격적인 폭주의 시작: VS Code와 Copilot
사실 이 세션을 통해서 휘동님이 저에게 제안했던 것은 Lovable을 사용해봐라 정도였습니다. 하지만 어느정도 완성된 결과물을 보기 시작하자 제가 본격적으로 폭주하기 시작합니다. “어차피 LLM을 통하여 물어보면 다 만들어주는데”라고 하면서 VS Code와 Copilot으로 소스코드를 가져와서 마구잡이로 돌려보기 시작합니다. 그러면서 개발자가 된 것만 같은 기분도 많이 느꼇구요.
다음 개발기에서는 VS Code와 Copilot을 활용하여 제가 폭주하기 시작했을 때의 그 짜릿한 경험들을 공유해드리겠습니다. 제가 쿵이라고 말하면 짝이라고 바로 쳐주기도 하고, 무식하게 ‘해줘!’라고 외쳐보기도 하면서 프로그램을 하나씩 쌓아나간 경험 공유드릴게요!
비개발자의 AI 코딩 여정, 계속 지켜봐 주세요!
#바이브코딩 #비개발자코딩
