최근에 만든 사이드 프로젝트 Goal Crush Data Center 후기를 써보려고 합니다.'골 때리는 그녀들(이하 골때녀)'은 어느덧 4년이 넘는 시간 동안 꾸준히 사랑받고 있는 예능 프로그램입니다. 매주 수요일 밤, 축구에 진심인 여자 방송인들의 경기를 보며 저도 모르게 데이터 정리에 대한 욕구가 스멀스멀 올라오기 시작했습니다.
"이 방대한 경기 데이터들을 왜 한곳에 정리해주는 곳이 없는 거야?!"
이 작은 의문점에서 프로젝트는 시작되었습니다. 단순히 데이터 정리를 넘어, 혼자서 풀스택 개발 경험을 쌓고 싶었고, 요즘 핫한 AI와의 협업은 어디까지 가능한지 직접 부딪혀보고 싶었습니다. 그리고 무엇보다, 저처럼 '골때녀'에 진심인 팬들에게 '진짜' 유용한 서비스를 제공하고 싶었습니다. 딱 한 달, 매주 6~8시간씩 공들여 만든 저의 '골때녀 데이터센터' 개발 스토리, 지금부터 풀어보겠습니다.
1. 프로젝트, 왜 시작했는데?
동기: '골때녀'는 4년이 넘게 방영되면서 수많은 경기 데이터를 쌓아왔지만, 체계적으로 정리되어 한눈에 볼 수 있는 곳이 없었습니다. 제가 직접 데이터를 정리하고, 깔끔한 웹사이트로 보여주고 싶었습니다.
목표:
'골때녀' 축구 기록 데이터를 팬들이 쉽게 볼 수 있도록 제공하기.
프론트엔드 개발자로서 혼자 풀스택 개발 경험 쌓기.
AI와 협업하며 개발 생산성을 극대화해보기.
실 사용자에게 만족을 주는 프로젝트를 완성하기.
개발 기간: 대략 1달 (매주 6~8시간 투자)
2. 기술 스택: Next.js는 왜 썼는데? 풀스택은 어떻게 했는데?
프론트엔드 개발자라면 다들 고민할 겁니다. "어떤 스택으로 시작하지?" 저는 이번 프로젝트에서 Next.js를 메인으로 선택했고, 다음과 같은 조합으로 빠르게 서비스를 구축했습니다.
프론트엔드:
React & TypeScript: 안정적이고 생산성 높은 개발 환경을 위해 선택했습니다.
Tailwind CSS & shadcn-ui: 빠르고 예쁜 UI를 만들기 위한 최적의 조합이라고 생각합니다. 디자인 시스템 구축에 대한 고민을 덜어주어 UI 개발에 집중할 수 있었습니다.(Cursor & Claude Code로 작업하기에도 좋았습니다.)
Storybook: 컴포넌트 단위 개발 및 문서화에 유용했습니다.
백엔드 & 데이터베이스 (feat. Supabase & Next.js API Routes):
"프론트엔드 개발자가 백엔드를 어떻게?" 고민되시겠지만, 저는 백엔드를 따로 구축하는 대신 Next.js의 API 폴더 안에 API를 구현했습니다. Next.js가 제공하는 이 기능 덕분에 하나의 프로젝트 안에서 프론트엔드와 백엔드를 모두 관리할 수 있었습니다.
Supabase: DB는 Supabase로 결정했습니다. PostgreSQL 기반의 강력한 데이터베이스를 쉽게 사용할 수 있었고, 인증(로그인) 기능까지 제공해 로그인 관련 작업을 매우 빠르게 처리할 수 있었습니다.
Prisma: Supabase와 연동하여 DB를 조작하는 ORM으로 Prisma를 사용했습니다. 타입스크립트 환경에서 DB 작업을 더욱 안전하고 편리하게 만들어주었습니다.
배포: 개발된 결과물은 Vercel을 통해 클릭 몇 번으로 빠르게 배포 완료!
(🔗 소스코드: https://github.com/wooder2050/goal-crush-data-center - 자세한 스택은 README.md에서 확인하실 수 있습니다.)
그리고 한 가지 꿀팁! Supabase에서 제공하는 Storage 기능을 활용해 선수 이미지, 팀 로고, 감독 이미지 등을 마치 S3처럼 업로드하고 관리했습니다. 이미지를 DB에 직접 저장하는 대신 URL로 관리하니 훨씬 효율적이었습니다.
3. AI, 넌 왜 나랑 일했는데? (Cursor & Claude Code와 DB 마이그레이션)
이번 프로젝트의 흥미로운 부분 중 하나는 바로 AI와의 협업입니다. 저는 Cursor와 Claude 코드를 번갈아가면서 사용하며 AI의 도움을 적극적으로 받았습니다.
특히 Supabase가 MCP(Multi-Cloud Platform)로 연결되어 있다는 점을 활용했는데요. AI가 직접 Supabase DB의 상태를 조회하고 분석하며 데이터베이스 마이그레이션 작업에 대한 가이드를 제공했습니다. AI의 제안을 바탕으로 제가 추가적으로 공부하거나 백엔드 직장 동료들에게 자문을 구하면서 기술적인 난관들을 헤쳐나갈 수 있었습니다. "AI가 DB까지 봐준다고?"라고 생각하실 수도 있지만, 실제 제가 경험한 AI의 능력은 상상 이상이었습니다.
4. 개발하며 겪었던 '골 때리는' 순간들 (도전과 성장)
개발 과정이 항상 순탄하지만은 않았습니다. 가장 큰 어려움은 바로 데이터 모델링이었습니다. 선수, 경기, 경기 데이터, 감독, 시즌 기록 등 워낙 많은 데이터들이 복잡하게 얽혀 있다 보니, 테이블을 어떻게 구성해야 효율적일지 고민이 많았습니다.
이때도 AI의 도움이 컸습니다. AI가 DB를 직접 보면서 최적의 테이블 구조에 대한 아이디어를 주었고, 저도 열심히 자료를 찾아보고 동료들에게 조언을 구하며 결국 만족스러운 데이터 모델을 완성할 수 있었습니다.
이 프로젝트를 통해 얻은 가장 큰 성과는 역시 풀스택 개발 경험입니다. 프론트엔드 개발자로서 백엔드와 데이터베이스를 직접 구축하고 배포까지 해보는 값진 경험을 할 수 있었죠. 특히 Supabase의 편리함과 Vercel의 빠른 배포, 그리고 AI의 도움 덕분에 전체 프로젝트를 예상보다 훨씬 빠르게 진행할 수 있었다는 점이 놀라웠습니다. 로그인 같은 복잡한 기능도 Supabase로 간편하게 처리할 수 있었던 점도 좋았습니다.
다만, 아쉬웠던 점도 있습니다. "시작 전에 좀 더 명확하게 기능 정의를 할 걸..." 프로젝트를 진행하면서 새로운 기능들을 계속 추가하다 보니, 초기에 생각했던 사용성과는 조금 달라지는 부분이 생겼습니다. 다음에는 꼭 사전에 기능 명세서를 꼼꼼하게 작성하는 습관을 들여야겠다고 다짐했습니다.
5. "골때녀" 데이터센터, 그래서 뭐가 좋은데? (결과와 반응)
드디어 완성된 "골 때리는 그녀들 데이터센터" (🔗 https://www.gtndatacenter.com/). 방문자들이 가장 유용하게 활용할 수 있는 기능은 두 가지입니다.
깔끔하게 정리된 경기 기록: 매주 방영되는 경기 데이터를 한눈에 볼 수 있도록 정리했습니다. 어떤 선수가 몇 골을 넣었는지, 경기 결과는 어땠는지 쉽게 확인할 수 있습니다.
새로운 인사이트를 주는 통계 페이지: 선수별, 팀별 역대 기록을 모두 볼 수 있는 통계 페이지를 제공합니다. 이 데이터를 통해 팬들은 몰랐던 새로운 사실이나 흥미로운 인사이트를 얻을 수 있을 겁니다.
프로젝트를 공개한 후, '골때녀' 팬 커뮤니티에서 "깔끔하고 보기 좋다"는 긍정적인 반응을 얻었을 때 정말 뿌듯했습니다. 제가 만든 서비스가 누군가에게 유용하게 쓰인다는 사실이 개발자로서 큰 보람으로 다가왔죠.
6. 앞으로의 계획: 모바일 앱으로 찾아올 "골때녀" 데이터센터!
저는 여기서 멈추지 않을 겁니다. 다음 스텝으로는 리액트 네이티브를 활용하여 모바일 앱 버전을 만들 계획입니다. 스마트폰으로도 '골때녀' 데이터를 편리하게 접할 수 있도록 더 많은 팬들을 찾아갈 예정입니다.
마무리: 프론트엔드 개발자, AI와 함께라면 뭐든 할 수 있다!
이번 프로젝트를 통해 제가 얻은 가장 큰 깨달음은 이겁니다.
"프론트엔드 개발자도 기획자, 디자이너, 백엔드 개발자, 인프라 담당자 없이! 다양한 서비스(Next.js, Supabase, Vercel 등)와 AI를 활용하면 아이디어를 놀라울 정도로 빠르게 현실화할 수 있다!"
만약 풀스택 개발이나 AI와의 협업에 관심 있는 다른 프론트엔드 개발자분들이 계시다면, 망설이지 말고 자신만의 아이디어로 사이드 프로젝트에 도전해보세요. 생각보다 훨씬 효율적으로, 그리고 재미있게 멋진 결과물을 만들어낼 수 있을 겁니다. 저처럼 AI를 적극 활용하면 개발 속도는 물론, 새로운 기술 학습에도 큰 도움을 받을 수 있을 거예요.
긴 글 읽어주셔서 감사합니다! 혹시 프로젝트에 대해 궁금한 점이 있다면 댓글로 남겨주세요!
안녕하세요! 글 재밌게 잘 보았습니다. 혹시 골때녀 데이터는 경기기록지를 OCR로 하나하나 수기로 입력하신걸까요? 데이터를 어떻게 입력하셨는지 궁금합니다 !