[소개]
저에게는 서비스를 기획하며, '나만의 서비스'를 만들어보는 게 하나의 로망 같은 것이었습니다. 머릿속에만 맴돌던 생각들을 끄집어내어 구체화하고, 실제로 실행에 옮긴다는 건 말처럼 쉽지 않았지만, 이제는 AI 덕분에 그 장벽이 점점 낮아지고 있는 것 같아요. 이번 스터디 기간 동안 제 목표는 딱 두 가지였어요.
1. 다양한 AI툴들을 접하고, 경험하기. (GPT와 클로드밖에 사용하지 않던 AI신생아 1인..)
2.머릿속에만 있던 아이디어를 MVP 형태로라도 끄집어내서, 세상에 한번 꺼내보기 (출시까지 가면 물론 좋겠지만, 기간도 짧고 여건상 PoC만 되어도 만족!)
[서론]
제 취미 중 하나는 프리다이빙입니다.어쩌다 보니 대회에도 나가게 되고, 팀에도 합류하게 되었어요. (잘하는 건 아니고 그냥 팀 소속일 뿐… 고수 아님 주의!) 프리다이빙은 수영장 위에서 점프하는 다이빙이 아니라, 숨을 참고 물속으로 깊게 들어가거나, 멀리 나아가는 레저이자 스포츠예요.
그중에서도 요즘 제가 몰두하고 있는 분야는 ‘인도어’ 훈련, 즉 수영장에서 길고 멀리 나아가는 기록을 세우는 방식입니다.그러다 보니 자연스럽게, 이 스포츠와 관련된 기록 관리 서비스에 대한 갈증이 생기더라고요.
(언젠간 나도 고래랑 다이빙을..!)
[문제 정의 (Pain Point)]
프리다이빙 인도어에는 다양한 종목과 변수들이 존재하고, 그날의 컨디션이나 자세, 장비 상태에 따라 기록이 크게 달라져요.
저희 팀은 훈련 후 ‘디브리핑’이라는 회고 시간을 갖는데,대부분의 팀원들은 각자의 기록을 수기로 작성된 로그북에 남깁니다. 그래서 또한 코치나 강사는 프리다이버의 기록을 보거나, 관리할 수 없어요.
팀 내부적으로 엑셀 기반의 기록표를 만들었지만, 직관적이지 않고 사용하기도 불편해서 실제 사용자 입장에서 접근성이 떨어져요.
→ 그래서!
요구사항이 이미 어느 정도 명확하고
실제 사용할 수 있는 유저도 존재하며
바로 피드백을 받고, 개선할 수 있는
‘즉시성 있는 MVP’를 만들어보자! 는 생각이 들었습니다.
[실행단계]
1️⃣ 브랜드맵 & PRD 작성
운 좋게 CTO/스타트업 연합 스터디에 참여하게 되었고,첫 주에는 여행가J님의 ‘브랜드맵 작성하기’와 개발자F님의 OT를 들으면서 방향을 잡기 시작했어요.
(1) 프롬프트 기반으로 서비스 페르소나/주요 기능 정의
한국어 페이지의 스크린 샷
(2) GPT를 활용해 브랜드맵 & PRD 작성
→ 여행가J기존 초안을 참고하여 기본 브랜드맵을 만들고, PRD는 성장피터님의 GPTs로 다시 다듬기!
간단한 프롬프트로 요청하니, 정적 페이지 기반의 PRD를 만들어주길래 권한구분이 가능한 서비스 형태를 반영하도록 요청했습니다. 여기서, 구체적인 기능정의를 위해 기존 에 관리하고 있던 데이터 정보를 넣어주고, 간단한 주요 기능정의 (기록관리, 대시보드, 분석)를 프롬프트로 요청하였습니다. PRD를 만들때는 브랜드맵 정보를 바탕으로 만들어서 서비스에 대한 정의를 디벨롭해갔습니다.
서비스의 주요 기능 카테고리는 아래와 같습니다. 이번 MVP 단계에서는 3번까지의 기본 기능을 구현하는 데 집중해보기로 했습니다.
📌이번 MVP 범위
1. 기록 관리
2. 기록 조회(필터링)
3. 대시보드
🔧향후 기대하고 있는 고도화 범위 (언젠가는...)
1. (추후) 기록관리 자동화 (기기연동/음성인식 등)
2. (추후) AI코칭
3. (추후) 장비추천 및 커뮤니티로 확장
2️⃣ 툴 선정 & 프론트 구현
결과적으로는 앱 기반 서비스를 만들고 싶지만, MVP는 어떤 형태든 상관없으니 툴에 구애받지 않고 '구현'하는데 목적을 두었습니다. 사실 어떤 툴을 쓸까 고민이 많았는데, 결론은 '다 써보고 나에게 맞는걸 선택하자' 인 것 같아요. 이것저것 활용해보면서 나에게 단기적으로 /장기적으로 어떤 툴이 맞는지도 배우게 되었고 전반적인 흐름에 대해 감을 잡았던 것 같습니다.
첫번째로는 PRD기반으로 Lovable과 v0으로 화면을 구현 해 봤는데, 동일한 PRD였지만 개인적으로 러버블의 UI/UX나 디자인이 좀 더 마음에들었습니다. 그리고 진행하다보니 상세 기능 수정, 고도화가 두가지로는 어려운 점이 보여서 역시 cursor로 가야하나..라는 생각이 들었네요. (왜 욕심은 점점 많아지는가..근데 할 수는 있니...ㅠㅠ)
📌 Lovable vs 📍v0 비교 체험기
📌1. Lovable - 브랜드맵과, 요구사항을 좀더 깔끔하게 구현한 느낌. 대시보드는 다소 보기 어려운 난잡한 형태였지만 화면구성은 괜찮아서 다듬으면 좋을 것 같았습니다.
--> 대시보드만 좀 더 고치면 전반적인 느낌은 더 좋음.
한국 웹 사이트의 스크린 샷
한국 웹 사이트의 스크린 샷
📍2. v0 - 좀 더 투박하고 텍스트가 많은 느낌. 메뉴를 좌측으로 둔 다소 옛날(?)방식의 GNB가 눈에 띄었습니다. 대시보드는 투박한데 그래도 정비된 느낌. 로그인 안하면 개인회원은 대시보드를 못보게 만들어놔서 확인을 못했어요.ㅠㅠ
--> 전반적으로 투박하지만 보기는 쉬움.
호흡 엘로그
3️⃣DB구성
이 부분도 고민이 많았는데..( 뭘 어디 서부터 시작해야 할지를 몰라서 )
Lovable은 Supabase 연동이 가능하고, v0는 자체적으로 세팅을 도와줘서
→ Supabase를 선택하게 되었어요.
전날 사례발표에서 사라님이 화면과 그 외 여러가지 기반으로 백앤드 구현하신것 개발자F님의 코드오류의 검토방식을 딥리서치로 하시는것을 보며 여기저기 활용해보았습니다.
DB 구성 과정
기존 팀에서 기록하던 엑셀 csv + 기본 요구사항 + 위에서 만들어진 PRD 기준으로 Claude에 요청
GPT 딥리서치로 스키마 적정성 검토
Claude로 2번의 내용 주고 최종 다듬기
Claude에 방법을 물어보며 Supabase에 직접 세팅!
ㄴ초안 DB스키마 기반으로 GPT 딥리서치에게 다시 검토요청하기.
ㄴ필요한 부분은 계속해서 개선해나가기. (서비스 요구사항에 따라 테이블을 추가하거나, 도메인 지식을 반영하여 디벨롭하기 )
ㄴ최종 설계 완성!
ㄴ다 만들었으니까 supabase에 import하는 방법 물어보고
ㄴ최종 세팅 완료
오우 ERD도 후다닥 만들어주네요?(너무신기하다)
[마지막으로]
우선 기본적인 화면구성 / DB세팅까진 완료했는데, 아직 제대로 연동해서 기록 등록을 못해봤네요. 한쪽에서 실패할 확률이 높아서..어쩌다 투트랙으로 왔는데 이게 맞는건가 싶기도 한 상황인 것 같아요.
1) Lovable에서는 : 어찌저찌 연동은 했는데(된게 맞나..?) , 사용자로그가 남는지 확인을 해보려하니 로그인/회원가입페이지가 없어서 만들다보니 크레딧이 없어서 대기중
2) v0에서는 : 로그인화면 만들어달라고해서 보이기까진 했는데, supabase는 자꾸 required로 뜨고, 기존 supabase에 세팅해둔 API key로 연결해뒀는데 됐는지 안됐는지는 모르겠고...일단 오늘은 여기까지 하기로 했읍니다!
우선 1편은 여기까지 하는것으로 하고, 다음 단계를 위해 소소한 시도들을 해보려 합니다.
만들다보니 욕심이 많아져 자꾸 기능을 추가하게 되는데(누가기획자아니랄까봐) MVP만드는데 집중해야겠다는 생각+다짐.. !!! 그리고 두서없이 이것저것 사용해봤지만, 오류가 있는 페이지 하나라도 내손으로 만든다는게 참 의미있는 작업이었던 것 같아요.
✅ 현재까지 완료
☑ 브랜드맵 & PRD 작성 (MVP 요구사항 정의)
☑ 프론트 화면 초기 구현 (Lovable / v0 비교)
☑ DB 스키마 설계 및 Supabase 구성 완료
🚀 다음 단계 To-Do
🔹 v0 → Cursor 프로젝트 이전 세팅
☐ v0 프로젝트를 Cursor로 이관 (UI/컴포넌트 그대로 or 재설계) =>할수있을까?
☐ 기존 PRD 및 기능 정의서 기준으로 Cursor에서 구조화
☐ 기존 Supabase DB 연결 및 API Key 세팅 확인
[참고자료]
여행가 J - 브랜드맵 특강
개발자F - 프롬프트 작성 및 MCP연동
성장피터 - cursor특강
그 외 스터디 다수 사례들....!
