VC 심사역의 바이브 코딩 개발기 - 1 -
첫걸음의 시작
안녕하세요, 테크 스타트업에 투자하는 VC 심사역 차승준입니다. 최근 코딩을 몰라도 AI 도구를 활용해 프로그래밍이 가능하다는 이야기를 듣고, WOW 레이드를 위한 대시보드를 만들어보겠다는 일념으로 멘토링을 개발자 친구에게 1:1 과외를 시작했습니다. 하나하나 배워가며 기록을 남기고 공유하고 싶어 이 개발기를 시작합니다. 유행하는 Vibe Coding과의 첫 만남, 함께해보세요!
첫 세션: Unknown Unknown 투성이의 시작
2025년 3월 25일
첫 과외 세션은 완전한 무지에서 시작했습니다. 레이드 대시보드를 만들고 싶다는 것 외에는 어떤 툴을 써야 할지, 어떤 기능을 구현해야 할지, 난이도는 어떨지 전혀 감이 없었죠.
AI와 함께하는 개발 접근법
친구가 AI 활용 방법 세 가지를 소개해줬습니다:
단순 반복 작업 자동화 (Assist) - 시간 소모적인 작업을 AI에게 맡겨 효율성 높이기
협업으로 문제 해결 (Collaborate) - AI를 파트너처럼 활용해 함께 문제 해결하기
AI로 지능 확장하기 (IA) - AI를 통해 내 역량을 확장하고 새로운 관점 얻기
이 접근법을 통해 코딩을 바닥부터 배우지 않아도 AI의 도움으로 원하는 것을 만들 수 있겠다는 희망이 생겼습니다.
첫 Task 선정과 구체화
친구는 "자신의 Need가 확실한 것이 중요하다"고 강조했습니다. 업무용 툴도 고려했지만, 학습의 즐거움을 위해 WOW 레이드 대시보드를 선택했습니다.
제 두서없는 설명을 친구가 명확하게 정리해줬습니다:
길드 레이드를 위해 10명이 필요한데 일정 조율이 어려움
메시지로 약속을 잡기보다 공대장이 "몇 시에 갈거요" 하면 따라가는 형태
당일에도 누가 오는지, 어떤 역할이 부족한지 알기 어려움
길드원들의 참여 현황과 필요 역할을 한눈에 보여주는 대시보드 필요
이렇게 문제가 명확해지니 단순한 기술 학습이 아닌, 실제 문제 해결을 위한 도구를 만든다는 방향성이 잡혔습니다.
PRD 작성 경험
제 아이디어는 아직 정리되지 않은 메모 수준이었지만, 친구는 이를 Grok에 입력하고 PRD 작성을 요청했습니다. 몇 가지 핵심 요소를 조정한 후, 놀랍게도 짧은 시간 안에 전문적인 PRD가 완성되었습니다.
AI가 만든 PRD 문서를 처음 접했는데, 제 아이디어가 이렇게 체계적인 문서로 정리될 수 있다는 점이 놀라웠습니다. 특히 기능 요구사항과 사용자 경험 부분은 제가 생각했던 것보다 훨씬 더 구체적으로 잘 정리되어 있었습니다. 두서없이 말했던 제 아이디어가 전문적인 제품 기획서로 변신한 모습이 신기했죠.
저희가 Grok과 나눈 대화는 위에 링크를 참고하주시고, 이때 작성된 PRD는 게시물 마지막에 샘플로 보여드릴게요!
MVP의 생성
PRD 완성 후엔 실제 모습이 궁금했습니다. Grok에 환경 설정과 요구사항을 간단히 설명하고 "v 0.1 버전 만들어줘"라고 요청하니 기본 대시보드가 완성되었습니다.
놀라웠던 건 Preview 기능으로 코드 생성 즉시 웹사이트 형태의 결과물을 바로 확인할 수 있었다는 점입니다. 기능적으로는 간단했지만, 실제 모습을 눈으로 볼 수 있다는 것만으로도 학습 동기와 성취감이 크게 향상되었습니다.
Grok으로 0.1 버전 만들기 ← Preiview 밋 MVP 코딩 대화
첫 세션의 성과와 기대
단 30분 만에 기본 프로그램의 뼈대가 완성된 것이 가장 놀라웠습니다. 코딩 경험이 전혀 없는 제가 이렇게 빠르게 무언가를 만들어낼 수 있다니 말이죠.
이제는 WOW 레이드 대시보드가 눈앞에 그려지는 듯합니다. 공대장으로서 누가 어떤 캐릭터로 참여하는지, 팀 구성은 어떻게 되는지 한눈에 볼 수 있는 화면을 상상하게 되었습니다. 다음 세션에서는 실제로 동작하는 대시보드를 만들어 길드원들과 함께 사용해보고 싶었습니다!
다음 글에서는 두 번째 세션 전까지 제가 독학으로 시도해본 여러 미니 프로젝트와 실험들을 소개해드리겠습니다. 코딩 초보가 AI의 도움을 받아 어디까지 만들 수 있는지, 그 과정에서 배운 교훈들을 솔직하게 공유할 예정이니 관심 있으시다면 팔로우해주세요!
#바이브코딩 #VC심사역 #코딩입문 #웹개발 #프로덕트엔지니어링
길드 레이드 현황 대시보드 PRD
1. 개요
1.1 목적 및 비전
길드 레이드 현황 대시보드는 World of Warcraft에서 길드 레이드 준비를 체계적이고 효율적으로 관리하기 위한 웹 기반 도구입니다. 길드원 간의 커뮤니케이션 부족과 계획 불확실성을 해결하여 레이드 준비 과정을 간소화합니다.
1.2 타겟 사용자
WoW 길드의 공대장 및 길드원
레이드 계획을 세우고 참여 여부를 확인하고자 하는 플레이어
2. MVP(Minimum Viable Product) 정의
최초 버전에서는 최소한의 핵심 기능만 구현하여 빠르게 사용 가능하도록 합니다.
2.1 핵심 기능
레이드 계획 생성
공대장이 레이드 계획을 생성
필수 입력: 날짜 및 시간, 레이드 던전 이름, 최소 인원(10명) 설정
예: "3월 25일 20:00, Vault of the Incarnates, 10명"
공대장 정보
공대장의 WoW 캐릭터명 또는 닉네임 표시
공대장은 레이드 계획을 생성/수정/삭제 가능
참여자 관리
길드원이 참여 신청 시 캐릭터명과 역할(탱커/힐러/DPS) 입력
참여 신청은 공대장의 승인 없이 즉시 반영
길드원은 자신의 신청을 취소(삭제) 가능
현재 참여자 목록을 실시간으로 대시보드에 표시
2.2 제외된 기능 (나중에 추가 예정)
시너지 분석 (현재 조합의 버프/역할 분석)
필요 인원 추천
Blizzard WoW API 연동
3. 사용자 흐름
공대장이 로그인 후 "새 레이드 계획" 버튼을 눌러 날짜, 시간, 던전 이름 입력 후 생성
길드원이 대시보드에서 레이드 계획을 확인하고 "참여 신청" 버튼으로 캐릭터명과 역할 입력
참여 신청이 즉시 대시보드에 반영되며, 모든 사용자가 실시간으로 현황 확인
길드원이 "내 신청 취소" 버튼으로 자신의 참여를 삭제 가능
4. 기술 스택
프론트엔드: React, Next.js (React Server Components 활용), Tailwind CSS, shadcn UI
백엔드/데이터베이스: Supabase (서버리스 DB, 인증 및 실시간 기능 포함)
서버: 별도 서버 구축 없이 Supabase와 Next.js로 처리
WoW API: 현재는 연동 제외, 향후 Blizzard API 검토 예정
5. 요구사항
5.1 기능적 요구사항
레이드 계획
필드: 날짜/시간, 던전 이름, 최소 인원
공대장만 생성/수정/삭제 가능
참여자 관리
필드: 캐릭터명, 역할(탱커/힐러/DPS)
누구나 신청 가능, 승인 없이 즉시 반영
본인 신청 삭제 가능
대시보드
생성된 레이드 계획과 참여자 목록을 한 화면에 표시
실시간 업데이트 (Supabase 실시간 기능 활용)
5.2 비기능적 요구사항
접근성: 모바일과 PC 모두에서 사용 가능
성능: 참여자 10~20명 규모에서 지연 없이 동작
UI/UX: WoW 테마에 맞춘 직관적인 디자인 (예: 어두운 테마, WoW 스타일 버튼)
보안: Supabase 인증으로 사용자 식별, 데이터 무단 수정 방지
6. 우선순위
최우선: 레이드 계획 생성, 참여자 관리, 대시보드 표시
후순위: 시너지 분석, 필요 인원 추천, WoW API 연동
7. 향후 확장 가능성
Discord 알림 연동
과거 레이드 기록 조회
다른 길드에서도 사용할 수 있는 템플릿화
8. 가정 및 제약
사용자는 WoW 캐릭터명과 역할을 수동으로 입력 (API 연동 없음)
초기에는 단일 길드 사용 전제로 설계
Supabase 무료 플랜으로 시작, 사용량 증가 시 유료 플랜 검토
