홈 리스트에 카테고리명이 제대로 표시되도록

홈 페이지 리스트에서 카테고리 이름을 raw slug 대신 proper display name으로 보여주도록 고쳤다. 작은 수정이지만 사용자 경험과 데이터 표현 레이어를 분리하는 관점에서 생각해볼 점이 있었다.

문제: Slug와 Display Name의 혼동

처음에 홈 리스트에는 guides-ai-tools, tutorials-python 같은 slug가 그대로 노출되고 있었다. Slug는 URL이나 데이터베이스 식별자용으로 설계됐기 때문에 사용자 화면에 보이면 어색하다. 특히 하이픈으로 연결된 형태는 시각적으로도, 읽기 편의성 측면에서도 떨어진다.

반면 Guides/AI Tools, Tutorials/Python 같은 proper name은 사용자가 직관적으로 이해할 수 있는 형태다. 카테고리를 빠르게 인식하고 탐색할 수 있다. 이게 홈 리스트의 본래 목적이니까.

수정 내용: Display Layer 분리

src/pages/index.astro에서 카테고리를 렌더링할 때, slug를 직접 넣던 걸 proper name으로 변환하는 로직을 추가했다.

이런 식의 변경:

<!-- Before: raw slug 노출 -->
<div class="category">{post.category}</div>

<!-- After: display name으로 변환 -->
<div class="category">{getCategoryDisplayName(post.category)}</div>

여기서 getCategoryDisplayName() 같은 헬퍼 함수는 slug를 사람이 읽을 수 있는 형태로 변환한다.

데이터 레이어와 표현 레이어를 분리하기

이번 수정을 통해 다시 한번 체감한 게, 내부 데이터 표현(slug, ID, 코드명)과 사용자에게 보여주는 화면(display name, label)은 명확히 분리돼야 한다는 점이다.

단순해 보이지만 코드가 커질수록 중요해진다. 예를 들어:

팀과 일하면서 본 패턴이기도 한데, slug가 노출되는 화면을 두고 "사용자가 이걸 보는 게 맞나?"라는 피드백이 들어올 때가 많다. 처음부터 분리했으면 한 두 번의 리뷰 루프를 줄였을 거라는 생각이 든다.

비슷한 처리 사례

같은 맥락으로 다루는 케이스들:

• 상태 코드 vs 상태명: status = "active" (내부) → statusLabel = "활성화됨" (화면)
• 타입 식별자 vs 타입명: type = "guide_article" (저장소) → typeName = "가이드 문서" (목록)
• 경로 식별자 vs 경로명: path = "/docs/setup" (라우팅) → breadcrumb = "문서 > 설정" (UI)

이들을 처음부터 분리해두면 나중에 디자인 변경, 다국어 지원, 검색 최적화 같은 요구사항이 들어올 때 대응이 훨씬 쉽다.

간단한 개선인데 의미 있는 이유

이번 고치기가 특별한 기술적 도전은 없었지만, 작은 부분에서의 신경 쓰임이 누적되면 사용자 경험의 차이를 만든다고 생각한다. 홈 리스트는 사이트에 오는 사람이 가장 먼저 보는 곳이다. 여기서 카테고리명이 깔끔하고 명확하면 전체 서비스의 완성도가 한 단계 올라 보인다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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