일반인도 AI로 앱을 만든다 - 카페 사장님들을 위한 원가 절감 서비스 개발기

소개

시도하고자 했던 것과 그 이유를 알려주세요.

  • 원래 다른 사람들과 같이 진행하기로 한 프로젝트가 미뤄짐.

  • 그래서 내가 계속 생각해왔던 카페 자영업자들을 위한 서비스를 이번 스터디 기간동안 후딱(??) 만들어보기로함.

  • 저는 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 에서 구현하고자 했던 기능들 다 작동하는 앱 만들어오겠음. 홍보랑 디자인은 이 다음 단계로 진행하겠음.

11
5개의 답글

👉 이 게시글도 읽어보세요