사이드 프로젝트 | NBA Game Picker (4) - Matchup Score 설명 페이지 구성

안녕하세요.

 

지난 글에서는
NBA Game Picker 프로젝트에서

• 홈 화면
• 경기 목록 페이지
• 경기 상세 페이지

까지 어떻게 확장했는지 정리했습니다.

 

이번 글에서는 그다음 단계로 진행한

Matchup Score  설명 페이지(/about-score) 구성 과정

을 정리해보려고 합니다.

 

이 프로젝트는 단순히 NBA 경기 일정을 보여주는 것이 아니라,
오늘 가장 볼 만한 경기를 추천하는 것이 핵심입니다.

 

그래서 추천 점수를 보여주는 것만으로는 부족했고,
사용자가 그 점수를 이해할 수 있는 페이지가 필요하다고 생각했습니다.

---

1. /about-score 페이지가 필요했던 이유

홈 화면과 상세 페이지에는
Watchability Score가 이미 표시되고 있었습니다.

표시된 점수

예를 들어 사용자는 홈에서 추천 경기를 보면서
이런 궁금증을 가질 수 있습니다.

• 왜 이 경기가 91점인지
• 이 점수는 어떤 기준으로 붙은 것인지
• 단순히 인기 팀 경기라서 높은 것인지
• 점수가 높다는 것이 정확히 무엇을 의미하는지

이런 질문에 답하지 못하면
점수는 결국 그냥 숫자로만 보이게 됩니다.

 

그래서 /about-score 페이지는
단순한 보조 페이지라기보다,

추천 점수를 해석할 수 있게 만드는 페이지

로 구성해야 한다고 생각했습니다.

 

즉 이 페이지의 목적은

• Watchability Score가 무엇인지 설명하고
• 어떤 요소로 점수가 구성되는지 보여주고
• 사용자가 그 숫자를 읽을 수 있게 만드는 것

이었습니다.

---

2. 페이지 설계 전 정리한 핵심 내용

이 페이지를 만들기 전에
먼저 “사용자가 여기서 무엇을 알아야 하는가”를 정리했습니다.

 

핵심은 크게 4가지였습니다.

1) Watchability Score의 역할

이 점수가 단순 수치가 아니라
오늘 볼 경기를 빠르게 고르기 위한 기준이라는 점

2) 점수를 구성하는 요소

현재 기준으로는 다음 3가지를 핵심 요소로 잡았습니다.

• Closeness
• Scoring
• Momentum

3) 각 요소의 의미

예를 들면

• Closeness → 접전 가능성
• Scoring → 득점 기대치
• Momentum → 최근 흐름

처럼 해석할 수 있어야 했습니다.

4) 점수 해석 기준

예를 들어

• 90점 이상 → 가장 먼저 볼 만한 경기
• 80점대 → 충분히 기대할 수 있는 경기
• 70점대 → 상황에 따라 볼 가치가 있는 경기

처럼 점수를 읽을 수 있도록 정리해야 했습니다.

 

즉 이 페이지는
긴 설명을 읽는 페이지보다

점수 구조를 빠르게 이해하는 페이지

가 되어야 한다고 생각했습니다.

---

3. 초기 구성에서 아쉬웠던 부분

초기에는 설명문과 카드 위주로 페이지를 구성했습니다.

예를 들어

• Watchability Score 개요
• Closeness / Scoring / Momentum 설명
• 샘플 점수 계산
• 해석 기준

이런 구조로 정리했습니다.

정보 자체는 충분했지만, 실제로 구현해보니 아쉬운 점도 있었습니다.

1) 텍스트가 많아 보였다

내용은 맞았지만
전체적으로 읽어야 이해되는 구조라서
가독성이 조금 떨어졌습니다.

2) 프로젝트 성격이 잘 드러나지 않았다

일반적인 설명 페이지처럼 보였고,
NBA 프로젝트 특유의 분위기나 개성이 약했습니다.

3) 카드 구성이 단조로웠다

정보는 나뉘어 있었지만
시각적인 위계가 약해서
어디부터 봐야 할지 바로 들어오지 않았습니다.

 

즉, 설명은 가능했지만
프로젝트의 성격을 더 잘 보여주는 방식으로 정리할 필요가 있었습니다.

---

4. 설명 페이지의 방향성 정리

이후에는 /about-score 페이지를
단순 설명 카드 모음이 아니라,

프로젝트의 핵심 컨셉을 더 잘 보여주는 구조로 정리하려고 했습니다.

이번 작업에서 중요하게 본 기준은 다음과 같습니다.

1) 설명보다 구조가 먼저 보여야 한다

사용자가 긴 문장을 읽기 전에
이 페이지가 무엇을 설명하는지 먼저 보여야 했습니다.

2) 점수 요소가 한눈에 들어와야 한다

Closeness, Scoring, Momentum
이 세 가지가 핵심이라는 점이 바로 보여야 했습니다.

3) 샘플 점수 예시가 있어야 한다

실제 경기 예시를 통해
점수가 어떻게 구성되는지 보여줄 필요가 있었습니다.

4) 프로젝트 분위기와 연결되어야 한다

NBA 기반 프로젝트인 만큼
단순 문서형 설명 페이지보다는
스포츠 서비스에 가까운 분위기를 유지하고 싶었습니다.

---

5. 최종 페이지 구조

최종적으로 /about-score 페이지는
다음과 같은 흐름으로 구성했습니다.

1) 상단 소개 영역

Watchability Score가 무엇인지 간단히 설명하고,
이 페이지가 어떤 역할을 하는지 보여주는 영역

2) 핵심 요소 3가지

• Closeness
• Scoring
• Momentum

각 요소의 의미와 반영 예시를 카드 형태로 정리

3) 샘플 경기 점수 예시

특정 경기의 점수를 예시로 보여주고,
각 항목이 점수에 어떻게 반영되는지 시각적으로 설명

4) 점수 해석 기준

90+, 80s, 70s, 60↓
처럼 점수를 어떻게 읽으면 되는지 정리

5) 페이지가 필요한 이유

이 프로젝트가 단순 일정 서비스가 아니라
추천 중심 서비스라는 점을 다시 정리하는 마무리 섹션

이렇게 정리하고 나니
페이지 역할이 훨씬 분명해졌습니다.

---

6. 이번 작업의 핵심 포인트

1) 설명문을 줄이고 구조를 먼저 보이게 했다

이 페이지에서 가장 중요했던 것은
정보를 많이 넣는 것이 아니라
한눈에 이해되는 구조를 만드는 것이었습니다.

예를 들어 긴 문단으로 설명하는 것보다

• 핵심 요소 3개
• 짧은 설명
• 반영 예시
• 샘플 점수
• 해석 기준

처럼 나눠 보여주는 방식이 더 효과적이었습니다.

---

2) 점수는 숫자보다 해석이 중요했다

점수 자체를 붙이는 것은 어렵지 않지만,
그 점수를 사용자가 이해하고 받아들이게 만드는 것은 다른 문제였습니다.

 

그래서 이번 작업은
단순히 UI를 추가한 것이 아니라,

추천 로직을 사용자 관점에서 설명하는 작업

에 더 가까웠습니다.

---

3) 프로젝트 성격이 드러나도록 정리했다

이 페이지는 설명용 페이지이지만,
프로젝트 전체 흐름 안에서 보면
서비스의 핵심 개념을 가장 직접적으로 보여주는 페이지이기도 합니다.

 

그래서 일반적인 문서형 페이지보다는
NBA 프로젝트 안에 들어 있는 페이지처럼 보이도록
색감과 구조도 함께 정리했습니다.

---

7. 구현 과정에서 느낀 점

1) 추천 서비스는 설명 가능한 구조가 있어야 한다

홈에서 추천 경기를 보여주고,
상세 페이지에서 추천 이유를 보여주는 것도 중요하지만,
그보다 더 중요한 것은

그 추천 기준을 별도로 설명할 수 있느냐

였습니다.

 

/about-score 페이지를 만들고 나니
프로젝트가 단순한 UI 중심이 아니라
추천 기준을 가진 서비스처럼 보이기 시작했습니다.

---

2) 설명 페이지가 프로젝트 흐름을 더 또렷하게 만든다

처음에는 이 페이지가 꼭 필요할까 싶었지만,
실제로 만들고 나니 프로젝트의 핵심 컨셉이 훨씬 분명해졌습니다.

 

홈과 상세 페이지는
“무엇을 추천하는지”를 보여주고,

/about-score는
“왜 이렇게 추천하는지”를 설명하는 역할을 하게 되었습니다.

 

즉 이 페이지가 추가되면서
프로젝트 전체 흐름이 더 명확해졌다고 느꼈습니다.

---

8. 현재까지의 프로젝트 흐름

지금까지 정리된 흐름은 다음과 같습니다.

1단계

프로젝트 기획과 서비스 방향 정리

2단계

홈 화면 구조와 컴포넌트 분리

3단계

경기 목록과 상세 페이지 설계

4단계

Watchability Score 설명 페이지 구성

즉, 이제는 단순히 홈 화면이 있는 프로젝트가 아니라

• 홈
• 목록
• 상세
• 점수 설명

까지 이어지는 기본 구조가 갖춰진 상태입니다.

---

9. 다음 단계

현재까지는 추천 점수를

• 홈에서 보여주고
• 상세에서 활용하고
• 설명 페이지에서 해석할 수 있게

정리한 상태입니다.

다음 단계에서는

• 상세 페이지 데이터 확장
• favorites 기능
• 상태 관리 구조 정리
• 실제 API 연결 준비
• Watchability Score 계산 로직 고도화

등으로 확장해보려고 합니다.

특히 다음부터는
점수를 “보여주는 단계”를 넘어서,
점수 계산에 들어가는 데이터 구조를 더 구체적으로 정리하는 것이 중요하다고 생각합니다.

---

10. Watchability Score 페이지를 만들며 느낀 점

이번 작업을 통해 느낀 점은
추천 서비스에서 점수는 단순 숫자가 아니라
사용자의 선택을 돕는 기준이어야 한다는 것이었습니다.

 

그리고 그 기준이 제대로 전달되려면
점수를 보여주는 것만으로는 부족하고,
그 점수를 설명할 수 있는 구조가 필요하다는 것도 느꼈습니다.

 

/about-score 페이지는
그런 의미에서 프로젝트의 보조 페이지이면서도,
프로젝트 핵심 개념을 가장 분명하게 보여주는 페이지라고 생각합니다.

 

다음 글에서는
상세 페이지 데이터를 더 확장하고,
추천 경기의 설득력을 높이기 위해 어떤 정보를 추가했는지 정리해보려고 합니다.