[프로젝트 회고] CAPTURE NOW 개발 및 배포 과정
[사용한 프롬프트 요약]
"스포츠 하이라이트 공유 및 번개 모임 플랫폼 'CAPTURE NOW'를 만들고 싶어. Next.js와 Supabase를 사용해서 인스타그램 같은 피드와 소모임 모집 기능을 구현해줘. 디자인은 다크 모드에 네온 그린 포인트로 프리미엄하게 가자. 처음엔 목업 데이터로 시작해서 나중에 슈파베이스 DB로 마이그레이션 할거야. 구글 맵 연동과 Vercel 배포까지 부탁해."
1. 소개
시도하고자 했던 것과 그 이유 본 프로젝트는 스포츠를 즐기는 사람들을 위한 "하이라이트 공유 및 오프라인 번개(Meetup) 플랫폼, CAPTURE NOW"를 개발하는 것이었습니다. 기존 소셜 미디어는 스포츠에 특화되지 않아 운동 기록이나 짧은 하이라이트 영상(Short form)을 공유하고, 같은 관심사를 가진 사람들과 즉흥적으로 오프라인 모임을 갖는 데 한계가 있었습니다. 따라서 "Hood Back" 감성의 힙하고 역동적인 UI를 기반으로, 누구나 자신의 운동 모습을 자랑하고 쉽게 운동 메이트를 구할 수 있는 모바일 중심의 웹 애플리케이션을 구축하고자 했습니다.
2. 진행 방법
사용 도구 및 기술 스택
Frontend: Next.js 15 (App Router), TypeScript, Tailwind CSS
Backend & Database: Supabase (Auth, PostgreSQL, Storage, Realtime)
External API: Google Maps JavaScript API, Google Places API
Deployment: Vercel
Design Assets: Lucide React Icons, Custom Google Fonts
활용 과정 (개발 로드맵)
기획 및 프로토타이핑:
사용자 플로우(온보딩 → 피드 → 모임 → 프로필)를 정의하고, '다크 모드 + 네온 그린'의 디자인 시스템을 구축했습니다.
초기에는
mock-data.ts와localStorage를 활용하여 서버 없이도 작동하는 완전한 프론트엔드 프로토타입을 먼저 완성하여 UI/UX를 검증했습니다.
Supabase 마이그레이션 (백엔드 연동):
Auth: 이메일/비밀번호 로그인을 구현하고, 가입 시 입력한 프로필 정보(닉네임, 종목, 레벨)를
users테이블에 동기화했습니다.Database:
users,meetups,meetup_participants,highlights,meetup_feedback테이블을 설계하고 RLS(Row Level Security) 정책을 적용했습니다.Storage: 프로필 사진과 하이라이트 영상 업로드를 위해 버킷을 생성하고 저장소 정책을 설정했습니다.
핵심 기능 고도화:
Google Maps: 모임 생성 및 피드 업로드 시 위치를 직관적으로 선택할 수 있도 록
Standard Search Box와 지도를 연동했습니다.Meeting Score: 모임 후 받은 피드백(Star/Manner Player)을 기반으로 사용자 매너 점수가 자동 계산되는 로직을 구현했습니다.
보안 및 배포:
API 키 노출 방지를 위해 환경변수(
env)를 적용하고, Google Cloud Console에서 웹사이트 제한(Website Restrictions)을 설정하여 보안을 강화했습니다.Git과 Vercel을 연동하여 코드가 수정될 때마다 자동으로 프로덕션 서버에 배포되도록 파이프라인을 구축했습니다.
3. 결과와 배운 점
결과 기획했던 모든 기능(회원가입, 피드 업로드, 모임 개설/참여, 프로필 관리)이 정상 작동하는 웹 애플리케이션을 성공적으로 배포했습니다. 특히 구글 지도 연동과 실시간 데이터 저장이 매끄럽게 이루어지는 프로덕션 레벨의 MVP(Minimum Viable Product)가 완성되었습니다.
배운 점과 나만의 꿀팁
"Mock First" 전략의 유효성: 처음부터 백엔드를 붙이려 하기보다, 프론트엔드와 목업 데이터로 UI를 먼저 완성한 뒤 데이터를 교체하는 방식이 개발 속도를 훨씬 높여주었습니다. UI가 확정되니 DB 스키마 설계도 명확해졌습니다.
RLS(Row Level Security)의 중요성: Supabase를 쓸 때 단순히 테이블을 만드는 것보다, "누가 데이터를 쓸 수 있는가"를 정의하는 RLS 정책이 핵심임을 배웠습니다. 특히 Storage의 경우 테이블 권한과 별도로 버킷 정책(
INSERT권한 등)을 꼼꼼히 챙겨야 에러를 방지할 수 있습니다.보안은 타협 없음: 개발 편의를 위해 API 키를 코드에 넣었다가 보안 경고를 받는 시행착오를 겪었습니다. 키는 반드시 환경변수로 관리하고, 클라우드 콘솔 차원에서 도메인 제한을 걸어두는 것이 필수입니다.
시행착오 (Troubleshooting)
Storage Upload Error: 테이블 RLS만 신경 쓰다 Storage 버킷의
INSERT권한을 누락하여 업로드가 실패하는 문제가 있었습니다. 이는 버킷 정책을 "Authenticated Users Allow All"로 수정하여 해결했습니다.날짜 표기 오류 (Invalid Date): 브라우저마다 날짜 문자열 처리 방식이 달라 "Invalid Date"가 뜨는 문제가 있었습니다. 이를 ISO 표준 포맷(
YYYY-MM-DD)을 사용하고new Date()로 명시적 파싱을 하여 해결했습니다.Google Maps 보안: API 키가 GitHub에 노출되어 구글 보안 경고를 받았습니다. 즉시 키를 재생성하고 코드에서 제거한 뒤, 환경변수와 도메인 리퍼러 제한을 통해 해결했습니다.
앞으로의 계획 1차 배포가 완료되었으므로, 실제 사용자들로부터 데이터를 수집하며 운영 단계로 넘어갈 예정입니다.
UI/UX 개선: 사용자 피드백을 반영하여 아직 미흡한 인터랙션(로딩 애니메이션, 모달 전환 등)을 다듬을 것입니다.
기능 확장: 실시간 채팅(Realtime Subscription) 기능 강화 및 종목별 필터링 고도화를 계획하고 있습니다.
버그 수정: 운영 중 발생하는 예외 상황에 대한 에러 핸들링을 지속적으로 보완해 나갈 것입니다.
------------------------------------------------------------------------------------------------------
capture-now-final-version-deploying.vercel.app
제가 배포한 사이트이고, 저는 제 컴퓨터로만 접속해 봐서 제대로 보이는지는 모르겠습니다. 문제가 있다면 수정하겠습니다.
제가 작성한 기획안도 첨부하고 싶은데 오류로 인해서 업로드가 되지 않아서, 나중에 가능하면 올려보도록 하겠습니다 !
