소개
시도하고자 했던 것과 그 이유를 알려주세요.
원래 다른 사람 들과 같이 진행하기로 한 프로젝트가 미뤄짐.
그래서 내가 계속 생각해왔던 카페 자영업자들을 위한 서비스를 이번 스터디 기간동안 후딱(??) 만들어보기로함.
저는 15기부터 ai 공부를 시작했고, 16기에 AI 창업 패키지 스터디를 시작으로 바이브 코딩 공부를 시작했습니다!! 그래서 개발자 관점에서 보면 말도 안되는 부분들 있을 수 있음.
레츠고
진행 방법
스터디 목표: 앱 MVP 개발해서 배포하기!! 실 사용자 100명 모으기!!
가장 처음에 한 일은 전체 그림 보기. 왜??? 난 개발을 해본적이 없는 일반인이니까.
1인 완전 초보 개발자가 아이디어 발굴부터 프로덕트 배포 그리고 유지보수까지 할 수 있을까?
객관적인 팩트가 필요해서 perblexity 를 갈궈서 프로덕트 개발 7단계 로드맵을 짰다.
## 전체 프로세스 요약
- 1️⃣ 단계: 아이디어 발굴 및 시장 검증 (5일)
- 2️⃣ 단계: 경쟁사 분석 및 시장 기회 발굴 (5일)
- 3️⃣ 단계: 기획 및 설계 (7일)
- 4️⃣ 단계: 개발 및 코딩 (28일)
- 5️⃣ 단계: 마케팅 및 런칭 (7일)
- 6️⃣ 단계: 피드백 수집 및 개선 (14일)
- 7️⃣ 단계: 성장 및 운영 자동화 (지속)
이때까지만해도 그대로 따라하면 다 될 줄 알았지...
1단계: 아이디어 발굴 및 시장 검증
이건 전에 몇 번 했던 부분이라 링크 달아놓겠다.
이번에 새로 추가된 점은 아이디어를 검증을 하고 싶었다. perblexity가 알려준 방법이 랜딩페이지 만들어서 광고 돌려보고 수요 조사 먼저한 뒤에 시장조사 하라는거다.
그래서 랜딩페이지 후딱 만들어서,
한국어 웹 사이트의 홈페이지
카페 자영업자들이 많이 모여있는 네이버 카페에 글이랑 링크도 올려보고, 페이스북 인스타그램 광고도 돌려봤다. 이것들도 다 처음해보는 것들이라 시간이 꽤 오래걸렸다.
특히 광고돌리는거 왜케 어려움.ㅋ
아무튼 이틀밖에 안돌렸는데 15000원 들었다. 55명이 랜딩페이지에 들어왔고 5명이 신청했다!!
사실 내 광고가 도달한 사람들에 비해서 실질적인 신청 비율은 꽤 낮다고 생각했지만,
아무튼 5명이나 저 허접한 랜딩페이지를 보고 신청했다는게 신기했다! 네이버 카페 글을 보고 쪽지도 하나 오긴 했다. 괜찮은 아이디어 같다고.
좋아 희망회로 돌려서 서비스 만들기로 결정했음.
-> 1단계 완료
2단계: 경쟁사 분석 및 시장 기회 발굴
아 이부분도 위의 링크에 아주 자세하게 적어놨다. 딥리서치 돌리고 돌리고 돌려서 분석했다.
이 과정에서 처음 생각했던 아이디어를 현실적으로 변형할 수 있었다.
딥리서치와 카페 자영업자분들의 커뮤니티를 뒤져본 결과, 그들이 무엇을 필요로 하는지 좀 더 명확하게 알게됐다.
그리고 내가 처음 생각했던 아이디어는 이미 1만 5000개의 카페 사장님들이 사용하여 자리잡은 서비스, 그 외 외식업 사장님들이 많이 사용하는 서비스도 자리잡고 있었다.
만약 딥리서치와 타겟 고객의 커뮤니티를 뒤져보지 않고 바로 개발에 들어갔다면 아마도 다 만들고 나서 아무도 사용하지 않는 쓰레기를 만들었다는 걸 알게됐을듯.
아이디어 피벗한 과정: chatgpt, gemini, genspark 이 세 곳에서 딥리서치를 진행했고, 다 모아놓고 차별화된 사업아이디어 3가지 뽑은 뒤에 가장 현실적이고 매력적인 아이디어를 선택할 수 있었다.
전화로 한국어의 스크린 샷
아 이 과정에서 옵시디언 아주 유용했다. 저렇게 모아놓고 smart composer 플러그인을 사용하여 저 세개의 문서를 분석해서 사업아이디어 달라고 했더니 잘 뽑아줬다. 근데 난 의심병이 많아서 claude에서 opus4 모델로 사업아이디어를 뽑았다 ㅋ
근데 어쨌든 결과는 비슷했음. 아무튼 사업 아이디어 최종 결정!
-----
3단계: 기획 및 설계 (중요)
난 문서작업은 거의 claude opus4 모델로 작업했다.
왜냐하면 개발 하기 전에 개발에 필요한 모든 문서들을 구체적으로 꼼꼼하게 작성을 다 해놔야하는데(by 최원혁 : 지난기수 베오베), 아무리 봐도 claude opus4가 제일 나은 것 같았다.
아무튼 이렇게 최종적으로 뽑은 사업아이디어와 딥리서치로 조사한 시장조사 결과들을 몽땅 가지고 mrd를 만들고, prd도 만들었다. (참 쉽죠)
근데 이번에 알게된 점이 Prd 하나 만든다고 개발할 수 있는거 아님. 아 오케이 db 스키마 까지는 만들었지만 그래도 실제로 개발할때는 더 많은 정보들을 문서로 정리해놔야한다고 한다.
그래서 이번에 정말 문서작업에 공을 많이 들였다. opus4 리밋 너무 빨라.. 100달러나 내는데 ㅠ
클로드 opus4와 대화하면서 문서 리스트를 만들었다.
MRD, PRD, TRD(기술명세서), DB 스키마 여기까지는 필수이고,
그 외에도 클로드가 더 작성하란다.
사용자 스 토리 백로그, 시스템 아키텍처 상세 설계, 와이어프레임 상세 명세, api 상세 명세서, 모니터링 및 운영 가이드, UI-UX 가이드라인 .....
일단.. 보니까 prd에 다 합쳐놨길래 이걸 쪼개서 더 자세하게 각 문서들을 작성해달라고 했다. 여기서 아주 opus4 갈림.
문서 작업할 때 다 쓰면 새로운 채팅창에서 검토 기준 알려주고 검토하라그러고, 그렇게 몇 번을 한 듯. 검토기준은 무조건 문서끼리 일관성(테이블 이름, 변수 이름 등)이 있어야 하고, 1인 개발자가 진행할 수 있는 수준이어야 한다는 것이었다.
검토할 때마다 문서 업데이트 해줬음.
아무튼 그렇게 개발을 위한 문서들을 최종 버전으로 완성했음.
Adobe Flash Player의 한국 버전 스크린 샷
아 조타조아. 자 이제 개발을 시작해보자!!
4단계: 개발 및 코딩
어떻게 시작하지??? 문서 만드는데 너무 열정을 쏟았나 멍했음.
다시 정신차리고 지난 기수에서 진님이 말씀해주셨던 보일러 플레이트!!(다른 사람들이 이미 만들어놓은 웹/앱 코드 템플릿??)를 찾아보자.
비어있는 폴더에서 저 문서 다 가져가서 cursor랑 개발할까 잠시 고민했지만, 나 자신을 다시 객관화하고 코드 템플릿을 찾았다.
코드 템플릿은 무료도 있고 유료도 있다. 노션 템플릿과 같다. 가져와서 내걸로 변형하면 됨.
아무튼 템플릿을 가져와서 cursor에서 개발 시작함.
이제 고통 시작임.. 지금 토 할 것 같음. ㅋ
지난기수에 한 번은 처음부터 끝까지 개발 과정을 가볍게라도 경험했어햐하는데, 이번에 새로 할라니 죽겠음.
솔직히 템플릿 가져와서 claude code & gemini cli 한테 내가 미리 작성한 문서보고 바꿔줘!! 하면 다 될 줄 알았음.
쉽지 않았다.. 그래도 이 개발 과정(오늘 시작했음)에서 배운 것들이 많았다.
그 점들을 공유하자면,
claude code 와 gemini cli 둘 다 사용하면 좋다.
claude code는 어차피 돈내고 있어서 무조건 사용하는데, 리밋걸리거나 이제 얘 답변이 이상해지면 gemini cli한테 넘어가서 물어본다.
근데 gemini cli 에서 pro 모델은 금방 리밋걸렸음.. 코딩은 flash 모델 보다는 pro 모델이 나은 것 같음.(오늘 개발 시작했음 주의)
cursor agent는 거의 안썼음. 무료라서 다른 애들에 비해 답 퀄리티 현저히 떨어짐. 뭐라는지 모르겠음. 다 나한테 하라고 함.
하지만 하나만 고르자면 나는 claude code opus4 ㅋㅋㅋ 아 알잘깔딱센...
아래는 cursor에서 좌=gemini cli, 우= claude code 로 갈구는 모냥입니다.
검은 배경이있는 컴퓨터 화면의 스크린 샷
코드 템플릿을 가져와서 사용한 것이 실수였을까? 전에 간단한 로그인 기능이 구현된 코드 템플릿을 가져왔을때는 supabase 로그인 이슈가 금방 해결이 되었지만, 이번에 가져온 코드 템플릿은 좀 복잡한 기능들이 다 구현되어있던거라서 그런지, 로그인 이슈로 오늘 하루 반나절을 매달렸음.
지난주에 원혁님이 발표하신 내용 중에 클로드 코드에게 하나의 task씩 알려줘야지 클로드 코드가 잘 알아듣고 코딩한다고 했던게 이제야 좀 이해가 됨. 지금 내가 개발했던 방식은 템플릿 가져오고 일단 데이터베이스는 내가 미리 설계한 데이터베이스 스키마 문서를 참고해서 바꾸 라고 했음. 그리고 걍 다 해주길 바라는 마음으로 내가 미리 작성한 개발에 필요한 문서들 보고 현재 코드를 다 변경해줘~~ 했더니 너무 마음에 안드는 결과가 나왔음. 다 엎어버려야하나 고민중..
-->> 템플릿 코드 베이스 위에서 geimini cli에게 내가 미리 작성한 10개의 문서를 참고하여 전체 코드를 수정해달라고 아주 단순하게 요청했음. 그 결과 !!
식욕
흰색 배경이있는 웹 사이트의 스크린 샷
결과는 완전 별로다. 뭐 첫 화면은 랜딩페이지 형식으로 기본은 한 것 같은데, 아무튼 전체적으로 코드를 바꿔! 이런 바이브 코딩을 안된다는걸 깨달았음.
그래서 어차피 나는 모바일 앱으로도 만들거니까. 앱 디자인은 loveable 같은 ai 툴에서 이쁘게 만들어서 그걸 커서로 가져온 뒤 그대로 코딩해달라고 해야겠다!
내가 사용한 ai 도구: https://readdy.ai/ -> 왜 이거 선택했나? -> 진님이 이게 디자인 짱이다 라고 이미 검증해주셨음. 감사한 마음으로 이걸로 직진!!
보라색 배경이있는 웹 페이지의 스크린 샷
이렇게 만든 디자인을 커서에서 똑같이 만들 때 팁!!
코드를 다운로드 받고 커서에서 여는 것이 아니라 이미지들을 캡처한 다음에 커서한테 저 이미지대로 만들어달라고 해야함. --> 이 팁 또한 AI창업패키지 스터디에서 스터디장님들에게 귀동냥으로 들은 꿀팁
그렇게 커서에게 기존 디자인 완전 별로고, 우리 서비스는 모바일로 만들거니까 내가 캡처한 저 이미지들처럼 디자인해달라고 요청했음. 그랬더니 짜잔~!
결과는 스터디 발표때 보여드림
아무튼 정말 그대로 디자인해줬고(이건 클로드 코드가 전체적으로 기가막히게 만들어줬음), 그 뒤로는 기능을 하나씩 구현해나가기만 하면 끝@@!
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
바이브코딩 ? 쉽다? 무시하지말자. 제대로 된 개발을 위한 문서작업이 진행되어야 한다.
개발 할 때 문서관리는 obsidian이 좋다.
개발 문서 작업은 claude opus4가 좋다.(굉장히 개인적인 생각)
코딩은 gemini cli, cursor agen 보다는 클로드 코드가 알잘딱깔센이더라. 아 gemini cli도 어쩔때는 클로드 코드보다 괜찮았음.
앱 디자인은 캡쳐해서 커서나 다른 코드 툴에게 이대로 디자인해달라고 하면 된다.
도움이 필요한 부분이 있나요?
클로드 코드와 코딩하는 방법을 좀 더 알아봐야할 듯. 근데 개발 과정을 잘 알고 있는 사람이라면 어떻게 시킬지 잘 알겠지만, 나같이 잘 모르는 사람은 클로드 코드에게 어떤 프로세스도 어떻게 시켜야할지 잘 모름. task master mcp나 클로드에서 task를 다 쪼개서 하나씩 실천하는 방식도 도전해봐야겠다.
아니면 아예 빈 폴더에서 시작해봐?? ??? 어??
앞으로의 계획이 있다면 들려주세요.
다음주는 아무튼 mvp 에서 구현하고자 했던 기능들 다 작동하는 앱 만들어오겠음. 홍보랑 디자인은 이 다음 단계로 진행하겠음.
