사이드 프로젝트 | NBA Game Picker (1) - 프로젝트 기획과 서비스 방향

안녕하세요.
이번 글에서는 제가 진행하고 있는 사이드 프로젝트인
NBA Game Picker를 소개해보려고 합니다.

 

이 프로젝트는
NBA 경기 데이터를 기반으로
오늘 가장 볼 만한 경기를 추천해주는 웹 서비스입니다.

 

단순히 경기 일정을 나열하는 것이 아니라,
사용자가 빠르게 경기를 선택할 수 있도록

추천 중심의 UX로 설계한 것이 핵심입니다.

 

 

아래 링크에서 실제 서비스와 코드를 함께 확인하실 수 있습니다.

---

🔗 서비스 바로가기
https://nba-game-picker.vercel.app

🔗 GitHub
https://github.com/Ryuintae/nba-game-picker

---

1. 왜 이 프로젝트를 만들었는가

NBA를 자주 보면서 항상 느꼈던 불편함이 있었습니다.

• 오늘 경기 많네… 근데 뭐 보지?
• 접전 경기 뭐지?
• 득점 많이 나올 경기 어디지?

기존 스포츠 앱들은 대부분

• 경기 일정
• 팀 정보
• 결과

이 정도만 제공하는 경우가 많습니다.

 

하지만 실제로 사용자가 원하는 건

“오늘 가장 재미있는 경기가 무엇인지” 입니다.

 

그래서 단순한 일정 서비스가 아니라

경기를 “선택”할 수 있게 도와주는 서비스를 만들고자 했습니다.

---

2. 프로젝트 목표

이 프로젝트의 핵심 목표는 다음과 같습니다.

• 오늘 가장 볼 만한 경기 추천
• 경기별 재미 지수 (Watchability Score) 제공
• 여러 데이터를 한 화면에서 빠르게 비교 가능

즉,

**“정보 제공”이 아니라 “선택을 도와주는 서비스”**를 만드는 것이 목표입니다.

---

3. 기술 스택

이번 프로젝트는 프론트엔드 중심으로 진행했습니다.

사용 기술

• Next.js (App Router)
• TypeScript
• Tailwind CSS
• next-themes (다크/라이트 모드)
• Vercel 배포
• PWA 적용

적용 예정 기술

• Zustand (클라이언트 상태 관리)
• TanStack Query (서버 상태 관리)

선택 이유

• Next.js → 페이지 구조 + 확장성
• TypeScript → 데이터 구조 명확화
• Tailwind → 빠른 UI 구성
• next-themes → 테마 전환
• Vercel → 간편한 배포
• Zustand → UI 상태 관리 단순화
• TanStack Query → API 데이터 관리 최적화

---

4. PWA 적용

이번 프로젝트는 웹 서비스로만 끝내지 않고,
PWA(Progressive Web App) 형태로도 적용하고 있습니다.

 

PWA를 적용한 이유는
사용자가 브라우저에서만 접속하는 것이 아니라,

홈 화면에 추가해서 앱처럼 접근할 수 있는 경험을 주고 싶었기 때문입니다.

현재는 다음과 같은 기본 설정을 적용한 상태입니다.

• manifest.ts 구성
• 앱 아이콘 설정
• PwaRegister 컴포넌트를 통한 등록 처리
• InstallPrompt 버튼 구성
• HTTPS 환경에서 설치 가능하도록 Vercel 배포

즉,
지금은 추천형 웹 서비스이면서 동시에 앱처럼 설치할 수 있는 형태까지 기본 기반을 마련한 상태입니다.

 

---

5. 현재 홈 화면 구성

현재 홈 화면은 단순 소개 페이지가 아니라
스포츠 데이터 대시보드 형태로 구성했습니다.

 

구성은 다음과 같습니다.

• 오늘 경기 리스트 (가로 스크롤)
• 오늘의 추천 경기
• 팀 순위
• 득점 리더
• 매치업 데이터
• 최근 경기 결과

즉,

앱에 들어오자마자 바로 사용할 수 있는 구조로 설계했습니다.

---

6. 프로젝트 구조

현재 프로젝트 구조는 다음과 같습니다.

 

src
├─app
│ globals.css
│ icon.png
│ layout.tsx
│ manifest.ts
│ page.tsx
│ providers.tsx
│
├─components
│ InstallPrompt.tsx
│ PwaRegister.tsx
│ ThemeToggle.tsx
│
└─features
└─nba
├─constants
│ team-brand.ts
│
├─data
│ └─home
│ featured-game.ts
│ games.ts
│ scoring-leaders.ts
│ team-rankings.ts
│
├─lib
│ score.ts
│ team-brand.ts
│
└─types
home.ts

 

---

7. 구조를 이렇게 나눈 이유

처음에는 모든 데이터를 page.tsx 안에 넣었지만,
파일이 커지면서 유지보수가 어려워졌습니다.

 

그래서 다음과 같이 구조를 나눴습니다.

1) data

화면에서 사용하는 mock 데이터 분리

• featuredGame
• games
• teamRankings
• scoringLeaders

---

2) constants

공통적으로 사용하는 값 관리

• 팀 브랜드 컬러
• UI 기준 값

---

3) lib

로직 분리

• 점수 계산
• 데이터 처리

---

4) types

데이터 구조 정의

• 타입 명확화
• 안정적인 개발

---

이렇게 분리하면서

page.tsx는 렌더링 역할에만 집중하도록 구조를 개선했습니다.

---

8. 현재는 mock 데이터 기반으로 구현

현재 단계에서는 실제 API를 연결하지 않고
mock 데이터 기반으로 UI를 먼저 구성했습니다.

 

이렇게 진행한 이유는 다음과 같습니다.

• UI 구조를 먼저 확정하기 위해
• 데이터 형태를 미리 설계하기 위해
• API 변경에 영향을 받지 않도록 하기 위해

즉,

“UI → 데이터 구조 → API 연동” 순서로 개발하고 있습니다.

---

9. 구현하면서 느낀 점

1) 데이터 구조 설계가 중요하다

처음에는 화면부터 만들었지만,
결국 중요한 건

데이터를 어떻게 설계하고 관리하느냐였습니다.

---

2) 서비스형 UI와 랜딩 UI는 완전히 다르다

랜딩 페이지는
설명 중심

 

서비스 홈은
데이터 중심

이 차이를 직접 경험한 것이 가장 큰 수확이었습니다.

---

10. 현재 구현 상태

현재까지 진행된 내용은 다음과 같습니다.

• Next.js 프로젝트 세팅
• Tailwind 적용
• 다크/라이트 모드 구현
• Vercel 배포 완료
• PWA 기본 적용
• 홈 화면 대시보드 구조 구현
• mock 데이터 기반 UI 구성
• 데이터 / 상수 / 유틸 분리 완료

---

11. 마무리

이 프로젝트를 진행하면서 가장 크게 느낀 점은

좋은 서비스는 데이터를 어떻게 보여주느냐에 달려있다는 것이었습니다.

 

단순히 정보를 나열하는 것이 아니라,
사용자가 빠르게 판단할 수 있도록 구조를 만드는 것이 중요하다고 느꼈습니다.

 

현재는 전체 구조와 UI 방향을 잡는 단계까지 진행했고,
다음 단계에서는

홈 화면의 Card, GameRow, RankingList, ScoringLeaders 컴포넌트 분리 과정을 정리해보려고 합니다.

 

이 과정을 통해
UI 구조를 어떻게 나누고 재사용성을 높였는지에 대해
좀 더 자세하게 다뤄볼 예정입니다.