소개
지난 1편은 여기에 있습니다. (좌측 텍스트 클릭)
이번에는 지난번에 작업에 이어, v0에서 초안작업하던 프로젝트를 cursor로 옮기고, 전반적인 기능 상세 구현 및 DB연동에 들어갔습니다.
지금 쓰는 툴들도 다 처음,, 구현도 처음이라🥲 저에게는 아키텍처 설계보다는, 우선 손에 잡히는 툴로 이것저것 시도해보며 '기능을 만들고 보는 데' 에 집중했습니다.
진행 방법
⚙️ 기술 스택 (모두 Cursor 사용)
Frontend: Next.js 15.2.4, React 18, TypeScript
Backend: Supabase
UI Framework: Tailwind CSS 3.4
⏰ 개발 타임라인
초기 준비:
PRD + 추가 요구사항 + 기존 엑셀 데이터를 바탕으로 DB 스키마를 설계했습니다.
진행 프로세스:
Claude 3.7로 초안 작성
GPT Deep Research 모델로 검토 및 추가 Q&A
최종적으로 Supabase에 업로드 완료
이 방식이 과연 맞는지 의심이 들었는데, 결국 연동 과정에서 문제가 발생해 걱정했던 일이 현실이 되기도 했지만.....😂 그래도 결국 해결 완료!
🚩 Phase 1: 기본 구조 구축 (DB & 연동)
[DB연동하며 발생한 주요 이슈]
이슈
해결 방법
환경변수 설정 오류
.env.local 파일 올바르게 설정
Authentication 오류
Supabase 인증 이메일 확인 OFF 처리 (아직 dev용이므로)
RLS 무한재귀
순환 참조 완전 제 거 및 테이블 참조 시, 단방향 참조 구조로 변경
특히, DB연동시에는 위와같은 이슈들이 순차적으로 발생되었고, 계속되는 커서와의 핑퐁으로 해결은 되었습니다..ㅠㅠ
주로
1) `오류가 발생하는 화면 스크린샷`, 2) 그리고 `cursor가 만들어둔 이슈확인 로그 복사` 방법을 통해 순차적으로 해결습니다. 여러번 주고받아도 해결되지 않는 이슈는 아래 3)`딥리서치` 를 활용하는 방식을 사용했습니다.
(예시)
회원가입은 정상으로 되는데, 프로필실패가 떠. 아래와같은 오류가 나타나고 정확히 분석해서 해결해줘
❌ 프로필 생성 실패: invalid input syntax for type integer: "14c5d9ed-2950-4321-952b-8ff52e3cf8d7"한가지 점검해야 할게 있는 것 같아.
지금 나는 [email protected] 계정으로 회원가입 했으며 사용자 이름은 '김민수'야 근데 supabase의 profiles table에보면 해당 유저 정보가 업데이트 된 이력이 없어. 더미데이터라 그런것인지 원인을 명확히 분석하고, 실제 내 아이디로 회원가입하고, 테이블에 등록되도록 모든 내용으로 업데이트 해줘...등등등등등 X99 너무 많아서 실을수가 없는..
추가적으로 여러 차례 반복적으로 해결되지 않았던 문제는, 개발자F님 이전에 말씀해주신 방법이 떠올라서 다음과 같은 방식으로 접근했더니 의외로 빠르게 해결됐습니다.
효과적인 문제 해결 방법 (꿀팁✨)
Cursor에 현재 현황을 명확히 정리 요청
GPT Deep Research에 이슈 해결 가이드 요청 (Github 연동 추천!)
Cursor에 가이드를 참조하여 구현 요청
🚩 Phase 2: 핵심 기능 상세 구현
기본 기능을 구현한 후, 추가적인 요구사항을 발견해 이 부분을 중점적으로 다뤘습니다.
큰 틀은 잡아뒀다고 생각했는데 권한 관리에 대한 구체적인 PRD 상세를 누락해서, 이부분을 개선하는 데 집중했습니다. 주로 프리다이버 외 코치권한, 팀 관리, 대시보드 고도화 등이었습니다.
기존 PRD 기능
추가된 기능
기록 관리,
대시보드,
프로필 관리,
로그인
프리다이버&코치 권한 분리에 따른 전환,
팀 관리(생성/수락),
코치용 대시보드
이 때 부터(?) 실제로 내가 생각만 하던 것이 구현되는걸 보면서 당연히 못쓸 줄 알았던 2주 무료 플랜을 다 써버렸고....결국 유료결제를 해버렸습니다..
추가된 관리자(코치)권한 대시보드 (아직 미완료)
🚩 Phase 3: 상세 개선 - UI/UX & 디자인 & 기능개선
1)디자인
초기 MVP 단계에서 디자인을 완전히 배제하려 했지만, 베스트 사례를 보고 욕심이 생겨, 결국 GPT에 게 서비스의 브랜딩 및 톤앤매너 디자인 가이드를 요청하여 로고까지 새로 만들어봤으나 (대충해서 또는 맘에 안들어서) 아래로 방법을 바꿨어요.
기존 기술스택을 유지해야 했기 때문에, 브랜드맵 + PRD 기반으로 GPT에 아래 프롬프트로 tailwind css에 반영할 수 있도록 요청 했습니다.
지금 만들고있는 프리다이빙 앱에 대해 디자인에 대한 전면 개선이 필요해. 브랜드맵과 PRD를 참고해서 서비스적인 관점에서 좀더 완결성있고, 사용자들에게 매력적이게끔 고도화할 수 있도록 도와줘. 따라서 어떻게 진행해야 할지 절차와 방법을 자세히 알려줘.
---
한 사례의 경우, 아래와같이 prd단계에서 디자인가이드를 줬다는데, 나는 미리 정의하지 못한상황이야.아래 내용 반영하려면 어떻게 해야 할지 가이드를 줘.
색상 팔레트: 자연과 보태니컬 아트라는 주제에 맞춤, Colorhunt 사이트 참조
타이포그래피: 세리프체와 산세리프체의 조화
애니메이션: 페이지 전환, 스크롤 기반, 버튼과 카드 인터랙션, 그라데이션 및 배경 효과
보태니컬 아트 이미지: Midjourney로 주제에 맞게 생성(프롬프느는 진짜 별로지만..그냥 생각나는대로 썼습니다ㅠ_ㅠ//다른 개선 예시를 주고, 내 프로젝트에 맞게 내용을 정리해달라고 요청한 뒤, 커서에 옮기는 작업이 필요합니다. )
그래서 반영된 것의 결과물은
커서가 만들어준 기존 디자인 (원래꺼)
개선된 디자인 (추가로 몇 번 고치긴 함)
대시보드
기록관리 (등록/수정/삭제/검색)
프로필 관리 (정보 수정 / 팀가입 요청)
2)기능개선
추가적으로 사소한 기능개선을 여러 번 진행했습니다. 특히 기능개선의 경우, 구체적인 것이 핵심인데
1)명확한 경로와 2) 요청하는 기능을 명확하게 프롬프트로 요청하는 것이 중요한 것 같습니다. 더불어, 사소한 기능개선의 경우에는 하나의 프롬프트로 여러개를 한꺼번에 요청했는데, 꼬일수 있는 위험이 있을 수 있기 때문에 '순차적으로 진행해달라' 요청 했습니다.
몇가지 기능 수정이 필요한 사항이 있습니다.
1. 기록의 경우 종목에 따라 달라집니다. 예를들어 STA 경기는 분/초만 입력하고 DNF 분/초와 미터수 모두 입력해야 합니다. 이러한 종목별 특성 반영하여 입력칸을 다르게 노출되도록 적용해주세요.
2. 분/초는 셀렉박스로 쉽게 입력 가능하도록 구현해주세요.
3. 장소(입력박스)추가해주세요
4. 수온(입력박스)추가해주세요
위 요청사항은 순차적으로 적용해 주세요몇가지 기능 추가/수정이 필요합니다. '기록'탭에서 좌측 '최근 기록'영역의 데이터가 더미데이터여서, 실제 데이터로 노출되지 않고 로그인할때마다 계속 리셋됩니다. 아래와 같이 적용해주세요.
1. '최근 기록'은 각 사용자의 실제 데이터로 노출되도록 해주세요.
2. 첨부된 이미지처럼 '새 기록 추가'라는 버튼을 통해 팝업에 기록을 입럭하도록 하고, 첨부된 이미지처럼 상단에 검색/필터링할수 있는 영역을 만들어주세요.
3. 기존 만들어진 기록을 '수정/삭제'할수 있는 기능을 만들어고. 이는 '등록'팝업을 동일하게 활용할수 있게 해 주세요. 3)UI/UX
UI/UX의 가장 큰 개선은 대시보드였습니다. 주로 흐드러져있는 대시보드의 형태를 보기좋은 형태로 수정했으며, 중요하지 않은 정보는 버튼 하위의 '팝업'으로 처리할 수 있도록 요청했습니다. 특히 대시보드는 데이터의 집합체라 기본 기능이 모두 완료된 뒤에 반영해야 하기 때문에 자잘한 기능 수정을 완료한 뒤 -> 이후 작업으로 진행했습니다.
'통계'의 화면을 조금 고도화 할거야.
1. 해당 탭을 가장 좌측으로 옮겨주고, 명칭은 '대시보드'로 변경해줘.
2. 기존 '통계'탭은 3개로 구역을 나눌거고 2개 구역은 기존 기능 그대로 둘거야.
1) (기존) 기존에 있는 총 기록수 , 성공률, 화이트카드, 경고/실격, 종목별 최고 기록은 유지하되 하나의 카테고리로 묶어줘.
2) (기존) 최근 기록은 그대로 유지하고 최근 5개만 노출시켜줘. 상단 우측에 '더보기'를 클릭하면 '기록'탭으로 이동할 수 있게 해줘.
3) (추가) 종목별 성장 그래프 (각 종목별로 다르게 노출되고 셀렉박스로 선택가능해야 함) , 우리 팀에서의 순위가 대시보드에 노출되도록 해줘. 기능은 첨부된 이미지를 참조해서 구현해주고, 데이터가 없는 경우는 적절한 디폴트 화면을 노출시켜줘.
디자인이나 ui/ux는 현재에서 크게 벗어나지 않게 하되, 세련되고 사용자 친화적으로 보기 쉽게 구현해줘 결론적으로 MVP로 쓸 수 있는 기본 기능
(1)프리다이버 기록 등록/수정, 대시보드 연동 + (2) 코치 팀관리 및 승인 은
로컬서버에서 정상적으로 동작되는걸 확인할 수 있었고, 앞으로는 코치 팀관리 기능 추가 구현과, 배포를 진행 할 예정입니다.
결과와 배운 점
1) 일단 커서가 화나게 해도.. 끝까지 해결할수 있도록 시도해보자는게 가장 큰 도움이 되었습니다. 반복되도 해결되지 않는 이슈가 있다면, 개발자F님 알려주신, Deep Reserch를 활용하는 방법도 꿀팁! 입니다.
2) 커서가 작동하는 흐름이 초반엔 보이진 않더라도(그냥 Run만 누른 1인..) , 각 작업한 단계를 대략적으로라도 훑으면서 실행 해보는 것이 중요한 것 같습니다.
3) 작업 중간 중간, 현재까지의 진행단계를 Readme.md 로 만들어서 작업완료내역 / 이슈가 있었던 사항 / 해결방안 등을 정리하여 짧게라도 파악하는 것이 서비스를 만드는 흐름에 중요한 지식이 되는 것 같습니다. 아키텍쳐, DB구축, 이슈해결 등의 과정을 겪고 해결하는 것만으로도 프로젝트 전반 흐름을 볼 수 있어서 좋습니다.
(+git / github에 수시로 올리기)
4) (단점) 자꾸 결과물이 나오는게 재밌어서, 회사에서도 자꾸 커서 RunRun하는게 부업이 되어버리는.......
5) (도움이 필요한 점) 이게 맞는 방향인지 모르겠습니다...(?) 구현은 됬지만, 코드를 덕지덕지 붙인 느낌이라서 실제 배포해서 사용할 수 있을지가 미지수...
앞으로의 계획
☀︎완료 단계
1) 다양한 툴 써보며 헤메기(?)
2) V0, Lovable로 기본 화면 구현해보기
3) Supabase로 DB 세팅
4) Cursor로 프론트/백앤드/디자인 구현
5) 기능 고도화 / 디자인 개선
📍다음 단계
1) MVP형태로 실 서버 배포 (완료)
2) 자잘한 기능 꾸준히 업데이트 (대회정보 API 개발 및 연동)
3) 프리다이빙 팀에게 공유하여 실제 사용자 피드백 받기
4) 앱 배포를 위한 사전 조사/공부
5) 대회정보/ 대회 기록 불러오기 API 연동
도움 받은 글 (옵션)
성장피터님 Cursor 특강
CTO/스타트업 실험실 다양한 사례
김이언님 사례 (디자인 가이드에 활용) https://www.gpters.org/nocode/post/flora-bota-2qWP1XtxpzNITEB