소개
어제 진짜 서비스를 만들어보고 싶은 고객의 요청을 통해 바이브코딩해보는 기회가 있었습니다. ^^
"비개발자이지만 개발 에이전트의 A부터 Z까지 경험해보는 것 만으로도 의미있는 시간이 되겠다"라는 생각이 들어 설레였습니다.
문제는… 저는 비개발자, 그것도 완전 초보 어린이 수준이라는 점이었죠! 😅 하지만 그만큼 더 제대로 배우고 싶었어요. 그냥 이론만 배우는 게 아니라, 진짜처럼 실습하고, 고객 인터뷰도 하고, 프론트와 백엔드 모두 경험해보자는 마음으로 뛰어들었습니다,
진행 방법
도전의 시작: 클로드 코드 설치부터 험난한 여정
Claude Code 설치부터 오류가 속출!
"이건 뭐가 문제지...?" 멘탈모델도 없던 상태에서 막막하게 시작했어요.
다행히 설치 도우미 앱을 발견해 1차 설치를 완료했지만, 에러는 계속… 😭
에러 캡처해서 ChatGPT에 보여주며 하나하나 물어보며 해결해 나갔어요. 설치 도우미 앱에는 없는 부분들이 있었는데 그럴때마다 멘붕이 되는 무지성 어린이 ^.^ ;; 전적으로 선생님을 믿습니다~ 하고 따라가다가 멘탈모델 하얗게 되는 경험들이 곳곳에 나타났습니다.
가끔은 영어 공포증으로 잘못 선택할 까봐 그대로 무엇을 선택해야 하는지 묻기도 하였습니다. (아장아장) ^^
야호~ 드디어 설치 완성!!!
이제 마법사 되기 일보직전!!! 너무너무 신났습니다.
대체 Bash가 뭐지? 궁금하면 바로
나의 친구 chat GPT ^^
와우 너무 너무 친절한 우리 지피티씨~ ^^ 요약까지 해서 머리속에 콩하고 박아주시넹 ^^ 감사해요.
저는 정말 너무너무 무지성이라 설치를 하고 어디에서 바이브코딩 말을 해야 하는지 자체를 몰라서 허둥되었는데요. 헉 엄청난 사실!!!
그냥 터미널에 적으면 된다는 것!!! =.=;;
일단 바이브코딩이 돌아가는 것을 내눈으로 봐야 실감이 나겠다는 생각에
PRD 문서 잘 만들고 뭐 하고 그러기 전에 아무거나 어떻게 실행되는지를 테스트 하기 위해
제가 매일 아침마다 하고 있는 "데일리 에너지 트랙커"를 만들어 보기로 하였습니다.
나 지금 MVP로 매일매일 나의 에너지를 체크하는 앱을 만들고 싶은데
7시마다 01_physical , 02_ emotional, 03_cognitive 에너지를 체크하고
매주 분석해주는 아름다운 애플스러운 글래스 모피즘으로 만들어줘
제가 매일 하고 있는 일이라 그냥 냅다 설명했어요. 마지막에 애플스타일로 룩을 입혀보았는데 어떻게 나왔을까요? 두둥 아래와 같이 만들어 주었어요.
꺄아아앙~ 저의 첫번째 역사적인 바이브 코딩 앱 서비스 되겠습니닷 ~!!!
바이브 코딩의 세계에 이제 본격적으로 출발해보실까요? 짜잔~
설계와 기획: 고객의 진짜 문제를 찾는 여정
PRD 작성은 ChatGPT와 함께 오늘 3시간 안에 만들 수 있는 기능 MVP를 무엇을 설계하면 좋을지 의논했습니다.
바이브 코딩을 하려고 해 너는 20년차 연쇄 창업 유니콘회사를 만들어 본 탁월한 PO이자 스타트업 대표야. 다음 사업계획계획서를 통해서 MVP를 바이브코딩으로 하루만에 만들어서 의뢰한 대표님에게 와우한 임팩트를 주고 싶어 어떤 항목을 프롬프팅하면 클로드 코드로 바이브 코딩으로 멋진 결과를 만들수 있을까? 필요한 질문들을 해주면 답해줄께
Chat GPT :
이 비즈니스에 딱 맞는 임팩트 있는 MVP를 바이브코딩으로 하루 만에 만들기 위해 몇 가지 추가 정보가 필요해:
MVP 의 핵심 목적은 무엇인가요?
예: 고객 맞춤 즙 추천, 구독관리, 건강효과 추적, 영양 처방 시스템 등 중에서 우선순위
피검사나 생체 데이터 없이도 가능한 '우회적 처방' 방식으로 고려 중인 아이디어가 있나요?
예: 문진, 설문, 체형정보, 피부사진, 배변일지 등의 비의료 데이터 기반
사용자 관점에서 MVP를 접하는 주요 채널은?
예: 모바일 앱, 웹 앱, 카카오톡 챗봇, 태블릿 키오스크 등
MVP에서 가장 중요하게 여기는 임팩트 포인트는?
예: 추천의 정밀도, 직관적인 UX, 시각적 건강 추적 리포트, AI 기반 개인화 등
MVP를 사용할 예상 타깃은 누구인가요?
예: 40대 여성 위주 헬스장 고객, 체형관리 관심자, 갱년기 대상자 등
답변 주시면, 바로 바이브코딩에 최적화된 설계와 프롬프트 구조를 짜드릴게요!
고객이 말씀해 주신 내용을 기입했고
chat GPT 4.0과 o-3 를 둘다 돌려본 결과 o-3의 비교항목이 더 맘에 들었습니다. 아래와 같이 3가지 후보를 도출해주었습니다.MVP 컨셉 비교요약을 보며 제 생각을 정리할 수 있었습니다. 이렇게 빠르게 가시화를 시켜주고 비교까지 해줄 수 있도록 도와주니 정말 효율적인 의사결정에 도움이 되었습니다.
claude code에 이 내용을 마크다운 문서로 넣을지, 아니면 그냥 터미널에 그대로 넣을지 궁금했다. 일단은 터미널에 그대로 넣는 것을 선택해보았다.
고객 인터뷰를 통해 건강주스는 3종류: 다이어트, 건강, 근육 강화로 분류됨
여기서 어제본 넷플릭스 ‘K-POP 데몬헌터스’가 떠올랐고… ㅋㅋㅋㅋ
K-pop demon hunters라는 넷플릭스 영화에 나오는 huntrix 캐릭터가(1) 다이어트 , (2) 건강, (3)근육이 3분야를 지키는 캐릭터로 넣어주고
건강검진 PDF 를 넣으면 HDL, LDL, 중성지방 수치 입력이 자동으로 될 수있는 기능도 넣어줘
예시의 이름은 키키킴
코치의 이름은 진수
라고 해줘다이어트를 지키는 아이돌, 건강을 지키는 친구, 근육을 지키는 친구! 🎤 이 3명의 캐릭터를 중심으로 다이어트를 방해하는 나쁜 유혹들과 싸우는 컨셉으로 잡았어요. 저만의 잔재미를 위해서 ^,^ 혼자 신났습니다.
프론트엔드 완성과 하얀 화면
Claude Code로 프론트엔드 구성에 성공!
GitHub & Vercel 계정도 만들고 연동까지 완료 🎉
하지만… PDF에서 중성지방 수치를 추출하는 기능을 추가한 뒤, 계속 배포 에러 발생 😵
하얀 화면과 계속 싸우는 중...
이때 알게 된 사실! Claude Code 안에서 바로 질문해도 에러 해결 가능하다는 점 ✨ 캡쳐해서 chat GPT까지 가서 물어볼 필요없이 바로 터미널 Claude Code 에서 " 어 안돼는데?" "어 하얀화면인데?" " 사이트에 연결할 수 없다고 해요" 등으로 그냥 편하게 자연어로 물어보면 이것저것 시도를 알아서 해준다는 것을 발견하고 처음엔 아주 기특하게 생각했다.
그러나 여전히 안됨 그런데 왜 안되는지 도저히 모르겠음
그냥 무한 반복을 하다보니 빌드가 완료되었다!!! 두둥
이번엔 웹 호스팅 배포를 vercel로 시도해보았습니다. 과연 될까?
자꾸 가장 쉬운 방법 은 Netlify라고 하는데 안됨. 그리고 개발자 친구들이 처음부터 코드의 안전한 관리며 github로 배우는 것이 낫다 하여. 다시 Github로 시도
결과와 배운 점
아직 배포는 못했지만…!
바이브코딩으로 앱서비스 프론트엔드 개발을 직접 구현해본 것만으로도 큰 성취감
야호 Claude Code, github, vercel 등의 계정이 생겼다 ^.^ 만세~
내가 만든 화면을 처음 봤을 때 진심 정말 감동!
제페토 할아버지가 피노키오를 처음 본 기분이 이런 걸까요? 🧙♂️
배운 점
처음엔 아무것도 몰라도, 계속 질문하면 해결 실마리가 보인다는 것, 몰라도 콩나물 물주듯 뭔가는 아주 어렴픗이 샤베트처럼 멘탈모델이 얇게 얇게 깔리는 듯
Claude Code와 ChatGPT를 잘 활용하면 비개발자도 개발을 해볼 수 있다는 자신감 💪
마치 마법사가 된 것 같은 느낌이 들었어요. "빛이 있으라~!"
도움 받은 글
Claude Code 설치 도우미 앱: http://bit.ly/3GGZTb9
