개발 slecs

고아 페이지를 허브로 연결해 색인 개선

목차

최근에 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

첫 댓글 달아줘.