소개
목차
아이디어 구체화 및 기획
1.1. 사업 가설 세우기
1.2. 딥리서치(시장조사)로 가설 검증
1.3. MRD(Market Requirements Document)작성
1.4. PRD(Product Requirements Documents)작성
핵심 기능 정의 및 데이터 구조 설계
2.1. 데이터 구조 계획(ERD 스케치 완료)
2.2. DB 생성 & DB 스키마 문서화
기본 템플릿 설정
3.1. Next.js + Supabase 템플릿 활용
핵심 기능 구현
4.1. 챗봇 통증 분석 기능
4.2. 분석 결과 화면 <<<<<<<<<<<<<<<< 이번 스터디에서는 여기까지 구현함
4.3. 운동 리스트 화면
4.4. 운동 상세 및 완료 기록
4.5. 마이페이지
UI/UX 개선
5.1. 브랜드맵 정의
5.2. UI 가이드라인 수립
5.3. 디자인 시스템 적용
5.4. 전체 UI 리뉴얼
테스트 및 개선
6.1. 기능 테스트
6.2. 사용자 피드백 수집
6.3. 버그수정
배포 및 운영
7.1. 베타 테스트
7.2. 정식 배포
AI 창업 패키지 스터디 4주 복기하는 시간을 가지기 위한 사례글을 작성합니다.
1주: 첫 스터디 수업듣고 오오 빡세겠군..? 근데 왠지 나도 MVP 만들 수 있겠는걸?
2주: 개발하고자 하는 사업 아이템을 딥리서치를 활용하여 시장조사 > MRD > PRD 순서대로 작성
3주: 2주차에서 작성한 MRD와 PRD 문서를 기반으로 DB 스키마 문서 작성 및 supabase에 DB 구축함
4주: DB 스키마와 PRD를 기반으로 Replit에서 supabase DB 연동하고 실제 작동하여 DB에 저장까지 구현함
진행 방법
2주차 ~ 4주차 내용을 복기하며 정리하겠습니다.
핵심 기능 정의 및 데이터 구조 설계
UI 디자인 전에 DB 설계를 먼저 진행했다. 작동이 되는 걸 확인 후 디자인을 진행하기로 했다. 다음은 perblexity에게 물어본 데이터 구축 프로세스다.
1. 앱 개발에 필요한 데이터 정리
2. ERD(데이터 관계도) 작성
3. DB 스키마 문서화
4. DB 구축
위의 과정을 클로드의 ‘코어비아 디지털 플랫폼 개발’ 프로젝트에서 진행하기로 했다. MRD v1.0, PRD v1.1 작성을 이 프로젝트 내에서 진행했다.(perblexity와 함께).
DB 구축 프로세스를 진행하기 위한 프롬프트
데이터 구조는 나중에 할 생각이었는데, 그냥 지금 진행해서 데이터 스키마 작성해보자. 다음과 같은 단계를 밟아야해. 1. 앱 개발에 필요한 데이터 정리. 2. ERD(데이터 관계도) 작성 3. DB 스키마 문서화 4. DB 구축 데이터 구조 계획에는 다음과 같은 내용이 포함되어야해.(이 부분은 <https://www.youtube.com/watch?v=krIrRNB7RGY&t=101s> 영상의 db구조 계획 부분을 참고했다.) * 필요한 데이터 엔티티 식별 * 각 엔티티 간의 관계 유형 결정 * erd 스케치 나는 데이터 구조에 대해서는 더욱 지식이 없어. 용어도 어려우니까 천천히 설명해주면서 나에게 질문하면서 진행해줘.첫번째 프롬프트는 perblexity에서 정의한 db구축 프로세스 + 두번째 이미지는 진님의 db 설계방법
이 두 가지 내용을 다 합쳐서 클로드한테 supabase용 db구축 프로세스를 진행해달라고 요청함.
코어비아 앱 Supabase DB 설계 5단계 프로세스
1️⃣ 데이터 구조 계획
필요한 테이블 식별 → 각 테이블 간의 관계 유형 결정 → ERD 스케치
2️⃣ Supabase 프로젝트 생성
Supabase 프로젝트 생성 → PostgreSQL 데이터베이스 준비
3️⃣ 테이블 및 컬럼 설정
SQL로 테이블 생성 → 각 컬럼의 데이터 타입 설정
4️⃣ 관계 설정
Foreign Key로 테이블 간 관계 설정 → Row Level Security 설정
5️⃣ API 및 실시간 기능 설정
자동 생성된 REST API 확인 → 필요시 실시간 구독 설정DB 구축하기 전 클로드에서 개발 프로젝트를 진행한 방법을 설명하겠다.
클로드에서 프로젝트를 관리한 방법
클로드 프로젝트에서 개발 초보자에게 초보 단계부터 하나씩 설명해주는 개발 멘토로서 클로드를 활용했다.
특히 코드 버전 관리를 위해서 github 자동 안내 지침을 작성하여 꾸준히 commit 할 수 있었음
코어비아 디지털 플랫폼 개발 & Git 관리 프롬프트 🎯 프로젝트 정보 프로젝트명: 코어비아 센터 디지털 플랫폼 MVP 1.0 개발 환경: Replit + Supabase GitHub Repository: https://github.com/CHAESH/Corevia-customer-app-mvp.git 개발 기간: 11일 (Day 1~11) 개발자 수준: 초보자 (AI 툴 적극 활용) 🔧 개발 지원 역할 당신은 코어비아 프로젝트 개발 멘토로서 다음을 수행합니다: 1. 개발 가이드 사용자의 개발 수준에 맞는 단계별 안내 개발 용어 설명 및 이유 제공 AI 프롬프트 예시 제공 문제 해결 시 근거 있는 설명 사용자에게 멘토로서 항상 prd를 기준으로 제공 사용자에게 코드를 제시할 때는 당장의 문제 해결이 아니라 나중에도 문제되지 않는 방향으로 제시한다. 2. Git/GitHub 버전 관리 자동 안내 다음 시점에서 반드시 Git 작업을 안내하세요: 🚨 필수 Git 작업 시점 기능 완성 시: "이제 [기능명] 완성했으니 Git 커밋하세요!" 일일 작업 종료 시: "오늘 작업 마무리로 Git 커밋하세요!" 주요 변경 시: "중요한 변경이니 Git 커밋하세요!" 문제 해결 시: "버그 수정 완료! Git 커밋하세요!" 새 파일 추가 시: "새 파일 추가했으니 Git 커밋하세요!" 📝 Git 작업 표준 프로세스 bash# 1. 상태 확인 git status # 2. 파일 추가 git add . # 3. 의미있는 커밋 git commit -m "[타입]: [구체적 작업 내용]" # 4. GitHub 업로드 git push origin main 🏷️ 커밋 메시지 규칙 feat: - 새로운 기능 추가 fix: - 버그 수정 docs: - 문서 수정 style: - 코드 스타일 변경 refactor: - 코드 리팩토링 test: - 테스트 코드 chore: - 빌드, 설정 변경 예시: feat: 로그인 기능 구현 완료 fix: 로그인 후 리다이렉션 문제 해결 docs: PRD 문서 업데이트 💬 대화 스타일 질문 중심: 사용자에게 질문하며 단계별 진행 추측 금지: 명확한 근거가 있는 설명만 제공 용어 설명: 개발 용어는 반드시 설명 포함 프로세스 설명: 왜 이 과정이 필요한지 설명 🔄 작업 흐름 관리 현재 상황 파악 → 문제 해결 → Git 커밋 안내 → 다음 단계 제시 매 작업 완료 시마다 "Git 커밋할 시점입니다!" 알림 커밋 후 다음 개발 단계 안내 ⚠️ 주의사항 사용자가 Git 작업을 빼먹지 않도록 적극적으로 알림 커밋 메시지는 구체적이고 의미 있게 작성 안내 문제 발생 시 단계별 디버깅 진행 백업 차원에서도 Git 커밋의 중요성 강조 🎯 최종 목표 11일간 체계적인 개발 진행 모든 변경사항의 완벽한 버전 관리 초보 개발자도 따라할 수 있는 명확한 가이드 문제 해결 과정의 완전한 기록 지금부터 이 프롬프트에 따라 코어비아 프로젝트 개발을 지원하며, 특히 Git/GitHub 관리를 놓치지 않고 체계적으로 안내해주세요.
2.1 데이터 구조 계획
클로드에서 단계별로 진행하여 ERD 스케치까지 완료했다.
아래처럼 클로드의 질문을 받으며 프로젝트에 맞는 데이터 테이블을 하나씩 생성했다.
필요한 테이블 식별 (7개)
🧑💼 사용자 관련 테이블
user_profiles: 사용자 기본 정보 (이름, 나이, 이메일, 가입일)
user_favorite_exercises: 즐겨찾는 운동 목록
🤖 챗봇 관련 테이블
chatbot_sessions: 챗봇 상담 세션 (시작/종료 시간, 완료 여부)
analysis_results: 통증 분석 결과 (진단명, 원인, 설명)
💪 운동 관련 테이블
exercises: 운동 정보 마스터 (운동명, 시간, 영상링크, 설명)
user_exercise_assignments: 사용자별 운동 배정 (추천 운동, 순서)
exercise_records: 운동 실행 기록 (실행일시, 통증수준, 메모)
각 테이블 간의 관계 유형 결정
1:N 관계 (일대다)
💡 의미: 하나의 레코드가 여러 개의 레코드와 연결
사용자 → 챗봇 세션: 한 사용자가 여러 번 상담 가능 (재상담 지원)
챗봇 세션 → 분석 결과: 한 번 상담으로 여러 부위 분석 가능
분석 결과 → 운동 배정: 하나의 분석에 여러 운동 추천 (3개 내외)
운동 → 운동 배정: 하나의 운동이 여러 사용자에게 배정됨
운동 → 운동 기록: 같은 운동을 여러 번 실행 가능
사용자 → 운동 기록: 한 사용자가 다양한 운동 기록 보유
N:M 관계 (다대다)
💡 의미: 여러 레코드가 여러 레코드와 자유롭게 연결
사용자 ↔ 운동: 즐겨찾는 운동 기능 (중간테이블: user_favorite_exercises)
ERD 스케치 완료
핵심 데이터 흐름
Step 1: 사용자 가입 └── user_profiles 테이블에 기본 정보 저장 Step 2: 챗봇 상담 시작 └── chatbot_sessions 테이블에 세션 생성 Step 3: 분석 결과 생성 (1개 또는 여러개) └── analysis_results 테이블에 저장 ├── 목/어깨 통증 분석 └── 허리 통증 분석 (복수 부위 가능) Step 4: 운동 배정 (순서 포함) └── user_exercise_assignments 테이블에 저장 ├── 1순위: 목 신전근 강화 ├── 2순위: 승모근 이완 └── 3순위: 가슴 스트레칭 Step 5: 운동 실행 및 기록 └── exercise_records 테이블에 저장 ├── 실행 일시 ├── 통증 수준 (1-10점) └── 개인 메모 Step 6: 즐겨찾기 등록 (선택사항) └── user_favorite_exercises 테이블에 저장
2.2 DB 스키마 문서화 & DB 생성
클로드에서 각 테이블별 상세 컬럼 정의하고, 데이터 타입 설정하고, SQL 생성 스크립트 작성했음.
DB SQL 생성 스크립트를 가지고 supabase에서 프로젝트 생성 후 SQL Editor에 sql 코드 붙여넣어서 DB 생성완료
다시 클로드에서 DB 스키마 문서화를 진행했음
업데이트된 DB 설계 내용을 PRD에 업로드하여 PRD v1.2 업데이트함.
3. 기본 템플릿 설정
DB를 supabase에서 생성하는 것까지 완료했다. 다음단계로 맨땅에서 코딩을 해야하나 걱정했다. 하지만 [AI 창업 패키지] 스터디장 진님의 팁을 듣고 빠르게 다음단계를 진행할 수 있었다. 기존에 아무것도 몰랐던 나는 클로드와 Replit에게 하나씩 물어가면서 구축했을 것. 하지만 이미 기능들이 구현된 템플릿을 가져와서 나의 프로젝트에 맞춰서 변형하면 된다. 너무 간단했다. 마치 노션 템플릿을 가져와서 내 상황에 맞게끔 수정하는 것과 같다. 그래서 우선은 Supabase에서 생성한 DB와 연동, 회원가입, 로그인 기능이 구현된 Supabase starter kit 템플릿을 가져와서 사용해봤다.
개발 프로젝트 관리와 코딩은 Replit이 아니라 클로드에서 진행했다. 클로드에서는 전체 그림을 볼 수 있고 단계별로 진행하는 느낌이지만, Replit에서 진행하려니 숲은 못보고 자꾸 나무만 보고 나무만 수정하는 느낌이기 때문이다.
하지만 지금 생각하면 클로드에서 코딩할 때 변수명, 코드와 replit에서 조금씩 수정하여 변화된 코드에 차이가 있는데, 그 부분은 관리하기가 귀찮았다. 그리고 클로드는 메모리 기능이 없으니 자꾸 Replit의 전체 코드를 알려줘야지 오류 없이 진행이 가능했다. 초반에 코드가 별로 없을 때는 괜찮았으나, 코드가 길어질수록 클로드 한도도 금방 차고 관리가 어려웠다. 개발 프로젝트 관리할 때 조금 더 좋은 방법이 있는지 조사가 필요하다.
진님의 팁을 보고 또 큰 도움을 받았다. 프로젝트 규칙들을 미리 정의하여 replit에게 명시하는 것이다. 앞으로는 어떤 코딩 IDE든지간에 IDE에서 개발 프로젝트를 관리해야겠다.
3.1. Next.js + Supabase 템플릿 활용
템플릿없이 supabase와 연동할 때 환경변수 설정에서 오류가 계속 났었다. Replit과 수정하고 수정해도 계속 나서 짜증났는데, 템플릿을 가져와서 환경변수에 supabase api 키 값을 입력하니 그냥 바로 연동됨. → 처음 개발할 때는 무조건 템플릿 가져와서 수정하기!!
그 뒤로 일어나는 오류들(로그인 이슈, 회원가입 이슈 등)은 클로드에게 하나씩 물어가며 해결했다.
결국 회원가입시 회원 정보 db에 저장, 로그인까지 무사히 완료했다.
지금 생각하면 템플릿 가져와서 그대로 사용하기 보다는, 모든 페이지에서 주요 기능들(회원가입, 로그인, 유저이메일 컨펌 등)만 남기고 나머지 내용들은 제거해달라고 한 뒤, 주요 기능들만 있는 깨끗한 페이지 상태에서 시작하는게 훨씬 효율적이다.
4. 핵심 기능 구현
회원가입, 유저 이메일 컴펌, 로그인까지 구현했고, 마이페이지 대시보드 페이지까지 생성했으니, 이제 대시보드에 표현될 내용들을 구현해야한다. PRD에 자세히 작성한대로 구현을 시작했다.
4.1. 챗봇 통증 분석 기능
사용자 흐름대로 로그인 후 통증 분석 챗봇 기능 구현을 시작했다.
개발을 처음 하는 나에게 당장 시작해볼 수 있는 챗봇 구현방법은 통증 분석을 위한 질문 리스트를 저장한 db를 생성하고, 그 Db에 저장된 질문 리스트를 순서대로 챗봇에서 사용자에게 물어보는 방법이다. 이번 스터디에서 배운 것 중 가장 중요한 것은 RAG기반 챗봇을 만든다는 내용이다. MVP1.0단계에서는 빠르게 전체 프로세스를 실행하여 기본 기능만 갖추어 결과를 내는 것이 목표이기 때문에, RAG기반 챗봇은 MVP 2.0단계에서 실행할 예정이다.
통증 분석 질문 리스트는 간단하게 구성했다. 구성한 방식은 노트북lm에서 근골격계 통증 분석 설문 방법 관련 논문, 글들을 모은 뒤, 거기서 질문 리스트를 뽑았다. 이 방법은 검토가 되지 않고, 가장 간단한 질문 리스트이기 때문에 수정이 필수다. → ‘chatbot_question’ db 생성하여 저장
UI는 아무것도 수정하지 않은 상태임!!!! 기능 구현만 보자!!!
4.2. 분석 결과 화면
챗봇 진행을 끝까지 하면 통증 분석 결과가 ‘analysis_result’ db에 저장함.
챗봇 진행을 끝까지 완료하면 자동으로 분석결과 대시보드로 이동함.
이번 스터디 기간동안은 여기까지 완성하였음.
다음 계획
우선 기능만 작동하는 MVP 1.0을 구현한다 → trae로 넘어가서 진님의 세팅 방식으로 세팅한 뒤 새로운 템플릿 가져와서 처음부터 다시 발전된 단계로 구현한다.
결과와 배운 점
AI 툴 스택만 잘 엮으면 ‘아이디어 → MVP’ 러닝타임이 4주도 가능하다.
문서-코드-데이터를 동시에 다루려면 “문서가 먼저, 코드는 나중” 순서가 최단거리.
템플릿은 초보자의 벽을 내려준다. 단, 불필요한 UI/코드 정리를 먼저 해야 산출물이 빨라진다.
질문-답변 대화식으로 문서를 작성하게 AI를 교육하면 품질과 속도가 함께 올라간다.
“개발자가 아니라도, AI와 템플릿이면 된다.”
이번 4주는 완벽과는 거리가 멀었다. 하지만 아이디어를 코드·데이터·화면으로 구체화하며 (거의) 배포 가능한 첫 제품을 손에 넣었다. 다음 스텝은 RAG 챗봇 고도화와 UI/UX 리뉴얼. 여기까지 따라온 여러분도, 같은 방법을 조금씩 변형해 자신의 아이디어를 실험 쌉가능. AI는 지시하는 만큼, 실험하는 만큼 일해 준다.
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
(내용 입력)