캐릭터 도감 페이지를 별도 라우트로 분리해 컬렉션 기능 추가

사용자가 공략한 캐릭터를 한눈에 보고 진행 상황을 추적할 수 있도록 개인 도감(명예의 전당) 기능을 추가했다. 새로운 페이지를 만들고 기존 라우팅과 데이터 구조를 어떻게 통합했는지, 그리고 이 과정에서 내가 고민한 아키텍처 결정들을 정리해 본다.

왜 이 기능이 필요했나

게임/수집형 앱에서 사용자들은 자신의 진행 상황을 가시적으로 보고 싶어 한다. 단순히 캐릭터를 확보하는 것만으로는 부족하고, 그걸 "컬렉션"으로 소장하고 표시하고 비교하고 싶어 하는 심리가 있다. 우리 팀도 초기 사용자 피드백에서 "내가 어떤 캐릭터를 가지고 있는지 한눈에 보고 싶다", "다른 사람들과 비교하고 싶다"는 요청이 자주 나왔다.

그래서 메인 페이지(app/page.tsx)와는 별개로, 개인 도감 전용 페이지(collection/page.tsx)를 만들기로 했다. 이렇게 하면 두 페이지가 독립적으로 발전할 수 있고, 나중에 도감에만 필요한 필터, 정렬, 상세 정보 같은 기능들도 별도로 추가하기 쉬워진다.

아키텍처: 파일 분리와 데이터 공유

변경한 세 개 파일의 역할을 먼저 정리해 보자.

가장 중요한 결정은 characters.ts를 분리한 것이다. 처음에는 각 페이지에서 캐릭터 데이터와 로직을 따로 관리할 수도 있었지만, 그렇게 하면 나중에 캐릭터 정보가 변경될 때마다 여러 곳을 수정해야 한다. 팀원들과의 코드리뷰 때 "단일 진실 공급원(Single Source of Truth)"을 지켜야 한다는 이야기가 나왔고, 그래서 캐릭터 관련 모든 로직을 한 곳에 집중시키기로 했다.

// 예상 구조: src/lib/characters.ts
// - 캐릭터 기본 데이터 (이름, 등급, 이미지 등)
// - 사용자가 보유한 캐릭터 조회 함수
// - 필터/정렬 로직

페이지 구조: 점진적 확장을 염두에

메인 페이지는 전체 게임의 허브 역할을 한다. 그래서 app/page.tsx 에는 도감으로의 명확한 링크나 CTA(Call-To-Action)를 추가했다. 사용자가 "내 캐릭터는 어디서 보지?" 하고 헤맬 필요 없이, 메인에서 바로 도감으로 갈 수 있도록.

도감 페이지(collection/page.tsx)는 처음엔 간단할 수 있지만, 나중에 이 페이지에만 필요한 기능들이 차곡차곡 쌓일 것 같다:
- 캐릭터별 강화 레벨 표시
- 보유 중복 개수 표기
- 캐릭터 검색/필터
- 정렬 옵션 (레어도, 입수 순서, 자주 사용 순 등)

지금 구조라면 collection/page.tsx 만 손대도 되니까 영향 범위가 최소화된다. 앞으로 메인 페이지가 다른 요구사항으로 바뀌어도 도감 기능과 부딪힐 일이 적다.

내가 놓쳤을 수 있는 것들

이 작업을 하면서 팀과 나누었던 주의점들:

1. 로딩 상태 관리: 초기 캐릭터 목록을 가져올 때 얼마나 걸릴까? 특히 사용자 개수가 늘어날수록 자신의 캐릭터 데이터를 조회하는 비용이 커진다. 처음부터 스켈레톤 UI나 로딩 상태를 생각해두면 나중에 성능 최적화할 때 수정폭이 작다.

2. 데이터 일관성: 메인 페이지와 도감 페이지가 같은 캐릭터 정보를 보여줄 때, 실제로 일치하는가? characters.ts 가 정말 유일한 진실 공급원 역할을 하는지 테스트로 확인해야 한다.

3. 확장성: 나중에 길드, 팀 도감 같은 기능이 추가될 때, "개인"이라는 개념을 어디까지 명확히 분리할 것인가? 지금은 개인용이지만, 함수 네이밍이나 구조를 조금 더 generic 하게 잡아두면 리팩토링이 쉬워진다.

마무리

이번 작업은 단순한 "페이지 추가"를 넘어, 앞으로 어떻게 기능을 확장할 기초를 다지는 과정이었다. 두 개의 페이지가 일관된 캐릭터 데이터를 바라보도록 하고, 각 페이지가 자신의 책임에만 집중하도록 구조를 짰다. 팀원들의 코드리뷰 피드백도 있었고, 덕분에 "이거 나중에 고쳐야 하나?" 싶던 부분들을 지금 정리할 수 있었다.

앞으로 사용자들이 도감에서 원하는 기능들이 나올 텐데, 그때마다 characters.ts 와 collection/page.tsx 를 손대면 메인은 안 건드려도 된다. 그게 이 설계의 목표였다.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.