소개
CAPTURE NOW는 스포츠 하이라이트 공유와 번개 모임(Meetup)을 결합한 웹서비스입니다.
이 프로젝트는 지피터스 20기 ‘나만의 웹서비스 만들기’ 스터디에 참여하며 진행 중인 개인 프로젝트로, 스터디를 통해 실제로 런칭 가능한 나만의 웹서비스를 만드는 것을 가장 큰 목표로 시작했습니다.
기존부터 스포츠 분야에 관심이 많았고, "내가 좋아하는 도메인에서 직접 서비스를 만들어보고 싶다"는 욕심이 자연스럽게 CAPTURE NOW로 이어졌습니다. ⚽🏀
진행 방법
1️⃣ 기초 구조와 UI부터 시작
개발이 처음이다 보니, 기능보다 전체 구조와 화면 흐름을 이해하는 것에 집중했습니다.
주요 페이지 구성
AuthPage,OnboardingPage: 로그인 및 유저 첫 설정 화면HomePage: 틱톡/릴스 스타일의 세로 스크롤 피드MeetPage,MeetDetailPage: 모임 탐색 및 상세 페이지CreatePage: 게시물 및 미디어 업로드
UI 컨셉
검은색 기반 다크 모드
스포츠 서비스에 어울리는 강한 포인트 컬러
2️⃣ 상태 관리와 데이터 흐름 설계
Zustand (
useStore.ts)유저 정보, 게시물, 이벤트 데이터를 전역 상태로 관리
초기에는 Mock Data를 사용해 UI와 화면 전환을 빠르게 검증
이 단계에서 “데이터가 어디서 오고, 어떻게 화면에 연결되는지”를 처음으로 체감했습니다.
3️⃣ Google Maps 연동으로 현실감 추가
텍스트 기반 앱에서 벗어나기 위해 Google Maps API를 연동했습니다.
MapPreview컴포넌트 제작 (재사용 가능)적용 기능
온보딩 시 주 활동 지역 시각화
모임 생성 시 장소 검색 → 좌표 변환 → 지도 핀 표시
내 위치와 게시물 위치 간 거리 계산
예:
• 2.5km away
지도를 붙이면서 “아, 이건 진짜 서비스 같다”는 느낌을 처음 받았습니다 🗺️
결과와 배운 점
❗ 개발 중 가장 큰 현실적인 어려움
개발 자체가 처음이다 보니, 용어부터 개념까지 모든 것이 낯선 상태에서 하나하나 물어보고 따라가는 과정의 연속이었습니다.
특히 기능을 계속 추가하다 보니:
기존 구조가 꼬이고
정리하려고 새 프로젝트(Supabase 포함)를 다시 만들었다가
오히려 두 프로젝트 모두 애매해지는 상황에 빠지기도 했습니다.
현재는 지금까지 만든 내용을 다시 기획안으로 정리하며, 공부를 병행하면서 천천히 정돈해 나가고 있는 단계입니다.
🌱 그래도 분명히 얻은 것들
어떤 툴들이 있는지 알게 됨
Zustand, Supabase, Google Maps API 등
이전에는 몰랐던 개념들에 익숙해지는 중
상태 관리
비동기 데이터 흐름
로딩 처리의 중요성
무엇보다도, 👉 "모르지만 만들면서 배운다"는 경험 자체가 가장 큰 수확이었습니다.
현재는 또 새롭게 원하는 기능을 추가한 기획안을 바탕으로 다시 새로운 Playground에서 웹서비스를 제작해 보고 있는데 오히려 처음에 만들었던 웹서비스의 UI/UX가 훨씬 자연스럽고 제 요구 사항이 잘 반영되어 있어서 개인적으로 고민을 거듭하고 있습니다. 제가 요구하고 있는 기능 및 페이지가 많고, 기존 프로젝트와 충돌하고 있는 문제가 있어서 이런 것인지 고민하고 있고, 결국 문제의 원인과 해결 방안이 어떻게 될지 고민하고 있습니다.
