[바이브 코딩] #4: 실전 Day 1 - 아이디어부터 화면까지

들어가며

---

안녕하세요. 개발자 stark입니다!

저번 포스팅에 이어 이번에는 Monkeys 팀의 72시간 실전 개발 기록입니다. 저희는 잠과 식사, 산책을 제외한 모든 시간에 바이브 코딩을 진행했으며, 수면 시간도 조절하며 완성도를 높이기 위해 노력했습니다. 어떤 일정이었는지 소개드리자면 아래의 표와 같습니다.

날짜	시간	활동	비고
Day 1	13:30	강화도 출발 🚗	-
	16:00	도착	마트 들림
	16:00-18:00	아이디어 도출 & Claude Code 세팅	본격 시작
	18:00-20:00	저녁 바베큐 파티 🍖 & 산책	휴식
	20:00-24:00	Vibe Coding with OTT	4시간
Day 2	00:00-05:00	Vibe Coding with OTT	5시간
	05:00-09:00	취침 😴	4시간 수면
	09:00-12:00	Vibe Coding with OTT	3시간
	12:00-14:00	점심 (한식) 🍚	휴식
	14:00-17:00	카페 Vibe Coding 🐢	거북이 구경
	17:00-18:00	저녁 전 산책 🚶	휴식
	18:00-20:00	저녁 & 휴식	-
	20:00-24:00	Vibe Coding with OTT	4시간
Day 3	00:00-03:00	Vibe Coding with OTT	3시간
	03:00-07:00	취침 😴	4시간 수면
	07:00-11:00	Vibe Coding with OTT	4시간
	11:00-13:00	점심 (돌짜장) 🍜	-
	15:00	집 도착 🏠	프로젝트 종료

 

바이브 코딩 시리즈 정리

#1: AI와 2박 3일 - Monkeys 프로젝트의 시작

#2: AI와 협업하기 위한 우리만의 법칙

#3: AI 도구 선택과 12단계 계획

#4: 실전 Day1 - 아이디어부터 화면까지 (현)

#5: 실전 Day2-3 - 백엔드 완성 그리고 배포

#6: Monkeys 프로젝트 최종 보고

 

 

강화도 출발

---

오후 1시 30분에 저희는 신대방 삼거리에서 만나서 음료를 한잔 사들고 바로 강화도로 출발했습니다. 하필 저희가 여행 가는 날에 비가 엄청나게 많이 왔습니다. 저희는 쏟아지는 비를 뚫고 소소한 이야기를 하며 강화도로 출발하였습니다.

강화도 숙도 출발

비를 뚫고 숙소에 도착했는데 처음 본 숙소의 모습은 약간 무서웠습니다. 맑은 날은 참 보기 좋았을 텐데 이날 비가 와서 그랬던 것 같습니다. 그래도 도착하자마자 기분이 너무 좋았던 기억이 납니다.

강화도 숙소 도착

펜션은 어딜 가든 도착하면 길고양이가 반겨주더군요. 이 냥이는 비를 피해 풀 속에 들어가서 저희를 쳐다보고 있었습니다. (근데 왜 길냥이들은 항상 치즈, 얼룩이, 호랭이들만 있는 걸까요..?)

팬션의 고양이

저희가 잡은 숙소 내부는 이렇게 생겼습니다. 생각보다 상태가 많이 좋았습니다. 엄청나게 넓었고 티비도 있고 소파도 있고 침실 공간도 따로 방이 있었습니다. 심지어 관리가 잘되어서 화장실도 엄청 깨끗했습니다.

팬션 상태

 

 

아이디어 선정

---

숙소에 도착하자마자 짐을 풀고 프로젝트를 시작했습니다. 소파에 앉아서 편안한 자세로 노트북을 세팅했습니다. 그리고 프로젝트의 '전략 & 전술 & key point'를 정했습니다.

 

이후 아이디어 선정을 위해 Claude desktop을 실행시켰습니다. Claude에게 질문을 해서 앞으로 2박 3일간 만들어나갈 서비스에 대한 아이디어를 얻어내기 위해서였습니다. 처음에는 이렇게 물어봤습니다.

'우리가 AI를 사용해서 간단한 서비스를 하나 만들려고 하는데 생활하는데 유용하고 쓸모 있으면서 재미있는 걸로 아이디어 좀 도출해 줘'

 

프롬프트 결과는 다음과 같았습니다.

'코드 리뷰 배틀" - AI 기반 코드 품질 경쟁 플랫폼'

"회의록 액션 트래커" - 음성 회의 자동 태스크 추출 서비스

"PR 문구 마법사" - 깃허브 PR 자동 생성기

"디버그 도우미" - 에러 로그 즉석 해결사

 

근데 뭔가 이상했습니다. AI가 도출해 준 아이디어들이 전부 '개발'에 관련이 있었던 것입니다. 뭔가 이상해서 고민하던 도중 제가 Claude를 처음 세팅할 때 'Claude가 응답할 때 고려해야 할 개인 선호 사항은 무엇인가요?'라는 영역에 다음과 같이 작성을 했었다는 것이 떠올랐습니다.

 

"나는 Java, Kotlin과 Spring을 사용하는 백엔드 개발자야 너의 응답은 항상 명확한 정보를 기반으로 해줬으면 해."

 

이 정보 때문에 claude는 제게 응답할 때 이것을 반영해서 매번 개발과 관련된 정보를 주고 있었습니다. '즉, AI에게 내가 어떤 사람인지 알려주면 그 정보를 기반으로 응답을 만들어준다는 것입니다.' 그러니 설정할 때 주의할 필요해 보입니다. 또한 claude의 응답을 보면 문제점이 하나 더 있습니다. 바로 AI를 사용해서 서비스를 만든다고 적었더니 의미가 혼동스러웠는지 추천해 준 모든 아이디어에 AI가 포함되어 있었습니다. 그래서 prompt를 추가로 입력했습니다.

 

'AI를 활용하는 서비스가 아니라 AI로 서비스를 만들겠다는 의미야'

 

이렇게 좀 더 의미를 명확하게 전달했더니 잘 알아듣고 '아, AI가 직접 서비스를 구축하는 방식을 말씀하시는군요! 코드 생성부터 배포까지 AI로 진행할만한 서비스 아이디어를 몇 가지 제안드립니다.' 이렇게 답변해 주었습니다. 그리고 다음과 같은 아이디어를 만들어줬습니다. (질문이 구체적이지 않았음에도 스스로 해석하고 다양한 아이디어를 만들어줬습니다)

 

층간소음 익명 소통 앱

점심 산책 메이트

퇴근길 장보기 셰어

회의실 난민 구조대

인생 랜덤 미션

인생 스탯

우리 동네 고양이 도감

 

정말 솔직하게 말씀드리자면 이 아이디어들이 별로 마음에 들지 않았습니다. 그러나 저희의 주목적은 세상의 문제를 해결해 줄 서비스를 만드는 게 아니라 '바이브 코딩'으로 서비스를 어디까지 만들 수 있을지 알아보는 것이었기 때문에 시간 끌지 않고 아이디어 2개를 빠르게 선정했습니다. 저희가 선정한 아이디어는 다음과 같습니다.

 

1. 인생 랜덤 미션 + 인생 스탯

2. 우리 동네 고양이 도감

 

 

기획서 설계

---

2가지 아이디어를 선정한 다음 저와 eddy님은 마음에 드는 아이디어를 선택했고 서비스 구현은 동시에 진행하기로 했습니다. 이를 위해 가장 첫 단계로 기획서를 작성하기로 했고 이것 또한 Claude Desktop을 활용했습니다.

 

기획서를 만들기 위해서는 내부 기능을 추가로 정의할 필요가 있었고 claude에서 제공하는 '아티팩트'라는 기능을 활용하기로 했습니다. 아티팩트는 ChatGPT가 제공하는 gpts와 비슷합니다. 저희는 여기에 있는 '브레인스토밍' 기능을 찾아냈고 바로 사용해 봤습니다.

claude 아티팩트

저희가 사용한 아티팩트는 '브레인스토밍 아이디어 생성기'였습니다. 아티팩트에 들어가 보면 아이디어에 대한 기본 정보를 입력하는 form이 존재합니다. 페이지 하단에는 입력 예시가 적혀있었기 때문에 내용을 채우는 것은 어렵지 않았습니다.

브레인스토밍 아이디어 생성기

내용을 전부 작성하고 아이디어 생성을 실행했더니 아래와 같이 서비스에 있으면 좋을 것 같은 다양한 기능들을 정의해 주었습니다.

브레인스토밍 결과

저희는 여기서 얻은 데이터를 전부 복사해서 Claude desktop의 채팅 프롬포트에 넣어주었습니다. 그리고 이 정보를 사용해서 기획서와 PRD를 만들어달라고 부탁했습니다. 이때 중요한 것은 AI에게 전문 기획자 페르소나를 입혀줘야 합니다. 하단의 '더 보기'를 통해 저희가 어떤 식으로 입력했는지 확인하실 수 있습니다.

monkeys는 사용자들에게 매일 소소하고 재미있는 랜덤 미션을 제공하여 일상의 루틴을 깨뜨리고 새로운 경험을 유도하는 '인생 랜덤 미션' 서비스를 새롭게 출시하려고 합니다. 미션 완료 시 다음날 난이도를 선택할 수 있는 보상 시스템을 통해 사용자 참여도를 높이려고 하며, 일상 속 작은 변화와 모험을 통한 라이프스타일 개선에 초점을 맞추고 있습니다.

 

생성된 아이디어

 

미션 카테고리 개인화 시스템

사용자의 성향, 위치, 라이프스타일을 분석해 '사교적', '모험적', '건강', '창의적' 등의 카테고리별 미션을 제공합니다. 초기 온보딩에서 선호도를 파악하고, 완료 패턴을 학습하여 점진적으로 개인 맞춤형 미션을 추천합니다. 우선순위:High 노력:Medium 영향:High

 

미션 인증 및 스토리 공유

미션 완료 시 사진/영상으로 인증하고, 경험담을 짧은 스토리로 공유할 수 있는 기능을 추가합니다. 다른 사용자들의 미션 후기를 보며 동기부여를 얻고, 커뮤니티 형성을 통해 지속적인 참여를 유도합니다. 우선순위:High 노력:Medium 영향:High

 

날씨·시간 연동 상황별 미션

실시간 날씨, 시간대, 요일 정보를 활용해 상황에 맞는 미션을 자동 생성합니다. 비 오는 날엔 실내 미션, 주말엔 야외 활동, 퇴근 시간엔 경로 변경 미션 등으로 실용성과 실현 가능성을 높입니다. 우선순위:Medium 노력:Low 영향:Medium

 

미션 난이도 진화 알고리즘

사용자의 미션 완료율과 선택 패턴을 분석해 자동으로 난이도를 조절하는 시스템을 구축합니다. 너무 쉬우면 점진적으로 도전적인 미션을, 실패율이 높으면 더 접근하기 쉬운 미션을 제안하여 적절한 도전감을 유지합니다. 우선순위:Medium 노력:High 영향:High

 

친구 초대 듀얼 미션

친구를 초대해 함께 수행할 수 있는 듀얼 미션을 도입합니다. '함께 새로운 카페 가기', '서로 추천 책 읽고 감상 나누기' 등 협동 미션을 통해 사용자 확산과 재미 요소를 동시에 확보합니다. 우선순위:Low 노력:Medium 영향:Medium

 

미션 완료 마일리지 리워드

미션 완료 시 포인트를 적립하여 카페 쿠폰, 영화 할인권 등 실제 혜택으로 교환할 수 있는 시스템을 구축합니다. 로컬 파트너십을 통해 지역 상권과 연계하여 수익 모델도 창출하고 사용자 동기부여를 강화합니다. 우선순위:Low 노력:High 영향:Medium

 

너는 10년 이상된 엄청난 기획 전문 가니까 네가 직접 기획서랑 prd를 작성해 줘 이외에도 기획 전문가가 해야 할 것들이면 다 포함시켜서 pdf문서 또는 마크다운 형태로 작성해 줘

이렇게 만들어진 기획서는 상당히 규모가 컸습니다. 간단히 목차만 보여드리겠습니다.

기획서 목차

 

 

디자인 설계 + 프론트엔드 생성

---

실무에 비하면 볼품없는 기획서였지만 이 정도라도 구성해 준다는 것에 충분히 만족했습니다. 저희는 기획서를 토대로 Figma AI를 활용해서 디자인을 만들어보기로 했습니다. 제가 개발 동아리를 운영하면서 make라는 기능을 사용해 본 적이 있는데 너무 좋았기에 이번 Monkeys에도 사용하기로 했고 바로 디자인을 맡겨봤습니다.

 

Figma의 make라는 기능이 무엇이냐 하면 사용자가 입력한 prompt를 기반으로 디자인과 코드를 생성해 주는 기능입니다. 저희가 지금까지 열심히 기획서를 만든 이유 중 하나가 바로 figma make에 prompt로 기획서를 제공해서 디자인과 프론트엔드 영역을 개발하기 위해서였습니다.

 

피그마 AI(make)를 사용하면서 느낀 점은 prompt만 전달하면 저 같은 디자인을 잘 모르는 사람에게도 편하게 디자인을 제공하지만 prompt에 ‘컨셉, 색상, 브랜딩’을 명확하게 제시하지 않으면 너무 AI 같은 느낌이 드는 색감과 디자인을 만들어 준다는 것을 알 수 있었습니다. 그래서 저희는 컨셉을 웹/앱 서비스로 지정하고 적절한 색상과 브랜딩을 생각한 다음 다시 만들어달라고 prompt를 입력했더니 아래와 같은 결과물을 받을 수 있었습니다.

 

하단의 링크는 Figma의 배포 기능을 통해 만들어준 디자인을 웹으로 올려둔 것입니다. 들어가 보시면 디자인을 구경하실 수 있습니다!

MONKEYS 랜덤 미션 웹앱 개발

동네 고양이 도감

 

Figma make의 장점은 이렇게 만들어준 디자인을 React 코드(프론트엔드 소스코드)로 다운로드할 수 있다는 것입니다. 즉, Figma make만 잘 활용한다면 어느 정도 서비스 화면을 구성할 수는 있다는 것입니다. (당연히 만들어준 소스의 퀄리티가 부족하지만 front 초보인 제게는 이 정도 퀄리티만으로도 엄청 감사했습니다)

 

이렇게 저희는 "아이디어 도출 (Claude) → 기획서 작성 (Claude) → 디자인 (Figma ai: claude) → 프론트엔드 코드 작성 (Figma ai: claude)" 단계를 거치며 프론트엔드 기본 작업을 완료했습니다.

 

 

마무리하며

---

이렇게 강화도 첫날의 전반부가 마무리되었습니다.

 

오후 4시에 도착해서 자정까지, 약 8시간 동안 저희는 아이디어 도출 → 기획서 작성 → 디자인 → 프론트엔드 코드 생성까지 완료했습니다. 사람이 하기에는 불가능한 속도였습니다. 물론 바베큐 파티와 산책 시간을 빼면 실제 작업 시간은 4시간이라 훨씬 더 적었습니다.

 

가장 놀라웠던 건 AI들의 연계였습니다. Claude가 아이디어를 내고, Claude 아티팩트가 아이디어를 확장하고 다시 Claude가 기획서를 작성하고, Figma Make가 디자인과 Frontend 코드를 만들어내는 과정이 물 흐르듯 자연스러웠습니다. (저희가 방향을 잘 설계해서 그런 것일 수도 있습니다 ㅎㅎ)

 

특히 Claude가 저를 개발자로 인식해서 개발 관련 아이디어만 제안했던 사건은 AI의 특성을 잘 보여준다고 생각합니다. AI는 우리가 준 컨텍스트 안에서만 최선을 다한다는 것. 그래서 프롬프트를 잘 입력하는 것이 중요합니다.

 

다음 편에서는 본격적인 백엔드 개발 과정을 다룰 것입니다.

To be continued...

 

2025.08.24 - [AI] - [바이브 코딩] #5: 실전 Day 2-3 - 백엔드 완성 그리고 배포

[바이브 코딩] #5: 실전 Day 2-3 - 백엔드 완성 그리고 배포