고아 페이지를 허브로 연결해 색인 개선
목차
최근에 K-pop 데이터 플랫폼에서 앨범, 엔터테인먼트사, 팬덤 같은 주요 엔티티들의 인덱스 페이지를 새로 만들고, 멤버/그룹 페이지와 상호 링크로 연결하는 작업을 했다. 한두 줄로 보면 단순한 기능 추가지만, 사실 이건 사이트 구조 설계 관점에서 꽤 중요한 변화였다.
내부 네비게이션의 블라인드 스팟
처음 상황을 생각해보면, 우리 사이트에는 여러 페이지가 존재했지만 일부는 "고아 페이지(orphan page)"였다. 즉, 상단 메뉴나 다른 페이지의 링크로 도달할 수 없었다. 물론 URL을 직접 알면 접근할 수 있지만, 사용자 입장에서는 발견하기 어렵고, 검색 엔진 크롤러 관점에서도 실제로는 갈 수 없는 "미발견 섬" 같은 상태였다.
이런 상황이 왜 생겼냐면, 초기 설계 단계에서는 멤버나 그룹 같은 주요 엔티티에 집중했고, 그들의 여집합인 "전체 앨범 목록", "모든 회사 목록" 같은 인덱스 페이지는 나중으로 미뤄졌기 때문이다. 나중이 오지 않는 건 흔한 일이고, 결국 누군가는 이 구멍을 메워야 한다.
인덱스 허브와 크로스링크 전략
이번 작업에서 한 것은 크게 두 가지다. 먼저 세 개의 인덱스 페이지를 만들었다:
| 페이지 | 역할 | 영향 받은 컴포넌트 |
|---|---|---|
| AlbumsListPage | 모든 앨범의 카탈로그 | 멤버 페이지에서 참조 가능 |
| CompaniesListPage | 모든 그룹이 속한 회사 목록 | 그룹 페이지에서 "같은 회사 다른 그룹" 표시 |
| FandomsListPage | 팬덤 네트워크 개요 | 멤버/그룹 페이지에서 "이 멤버의 팬덤" 발견 가능 |
그 다음은 이 새로운 페이지들을 기존 페이지와 네트워크화했다. 멤버 페이지에서는 "이 멤버의 앨범" 링크를 앨범 인덱스로 보낼 수 있고, 그룹 페이지에서는 "같은 회사의 다른 그룹들"을 클릭하면 회사 페이지로 가서 그 회사의 모든 아티스트를 한눈에 볼 수 있게 했다.
사용자 입장에서는 단순해 보이지만, 구현 측면에서는 여러 파일을 손봐야 했다. GroupPage, MemberPage 컴포넌트에 새로운 링크를 추가했고, ui.ts (국제화 텍스트)에 "View all albums", "See related companies" 같은 라벨을 추가했다.
왜 이게 중요한가
이 패턴은 작은 변화처럼 보이지만 세 가지 문제를 동시에 푼다:
- SEO 개선: 크롤러가 이제 모든 페이지에 최소 두 개 이상의 내부 링크로 도달할 수 있다. 전에는 "앨범" 페이지가 고립되어 있었다면, 이제는 멤버→앨범→회사→팬덤 같은 경로가 탄생한다.
- 사용자 탐색 경험: 사용자가 한 그룹을 보다가 "어? 이 회사의 다른 그룹은 뭐가 있을까?" 궁금해지면 클릭 한 번으로 갈 수 있다. 정보 구조가 시각화되는 느낌.
- 데이터 품질 신뢰도: 인덱스 페이지가 있다는 건 "이 사이트는 모든 앨범/회사/팬덤을 체계적으로 관리한다"는 신호다. 사용자와 크롤러 모두에게.
팀 리딩 관점의 배운 점
이 작업을 하면서 깨달은 건, "나중에 하자"는 결정이 초반에는 시간을 절약하지만, 결국 사이트 구조가 복잡해지면서 기술 부채로 변한다는 것이다. 초기 설계 단계에서 "이 엔티티들의 인덱스 페이지가 필요할까?"라고 한 번 더 물었다면, 이 작업은 처음부터 로드맵에 포함되었을 거다.
또한 이런 작업을 하다 보니, 파일 변경이 작더라도 여러 파일에 걸친 조정이 필요하다는 걸 느낀다. AlbumsListPage 하나를 만든다는 건, GroupPage와 MemberPage의 로직도 건드리고, i18n 텍스트도 추가해야 한다는 뜻이다. 이게 왜 중요하냐면, 코드 리뷰할 때 "변경이 작네요" 하고 지나가면 안 되고, 전체 링크 맥락에서 검토해야 한다는 교훈이다.
팀과 공유할 때도 "단순 페이지 3개 추가"보다는 "고아 페이지 문제를 크로스링크로 해결했고, SEO와 UX 모두 개선됨"이라고 프레이밍하는 게 중요하다. 그래야 비슷한 상황에서 다른 팀원도 같은 패턴을 자연스럽게 적용할 수 있다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.