메인 페이지 insurance 글 섹션 중복 노출 버그 수정

메인 페이지에서 insurance 카테고리 글이 latest 섹션과 후속 섹션에 동시에 노출되는 버그를 잡았다.

왜 생겼나

콘텐츠가 카테고리 단위로 늘어나다 보면 메인 페이지 레이아웃이 슬금슬금 복잡해진다. 보통 메인 페이지는 "최신 글" 섹션 하나만 두고 시작하는데, 시간이 지나면서 "카테고리별 추천", "특정 토픽 모아보기" 같은 후속 섹션들이 붙는다. 문제는 이 후속 섹션들이 latest 섹션과 데이터 소스를 공유할 때, 같은 글이 두 군데에 동시에 노출된다는 것이다.

이번 케이스가 딱 그랬다. insurance 카테고리 글이 최신 글이기도 하니까 latest 섹션에 올라갔고, insurance 전용 후속 섹션에서도 그 글을 다시 끌어오고 있었다. 사용자 입장에서는 스크롤을 내리다가 같은 카드를 두 번 보게 되는 상황. 신뢰도 측면에서도 좋지 않고, 제한된 지면에서 다양한 글을 노출해야 한다는 콘텐츠 전략과도 어긋난다.

무엇을 바꿨나

수정은 src/pages/index.astro 한 파일에 집중됐다. 변경 통계가 별도로 있진 않지만, 파일 범위가 단일 페이지 컴포넌트라는 게 중요한 단서다. 핀포인트 수정이라는 뜻이고, 영향 범위가 명확하다.

핵심은 excludeSlugs 옵션이다. latest 섹션에서 렌더링된 글의 slug를 수집한 뒤, 후속 섹션 쿼리에 excludeSlugs로 넘겨서 중복을 방지하는 패턴. 대략 이런 흐름이다.

// latest 섹션에서 이미 노출한 slug 수집
const latestPosts = await getLatestPosts({ limit: N });
const latestSlugs = latestPosts.map((p) => p.slug);

// 후속 섹션(insurance 등)에서 해당 slug 제외
const insurancePosts = await getPostsByCategory("insurance", {
  excludeSlugs: latestSlugs,
});

이 패턴의 장점은 섹션 순서에 의존적이라는 점이다. latest가 먼저 렌더링되고, 그 결과를 후속 섹션이 참조한다. 순서가 명확하게 정해져 있으니 어느 섹션에서 해당 글을 "소비"했는지 추적하기 쉽다.

이런 중복 문제가 왜 반복되는가

중복 노출은 "페이지 설계가 단계적으로 확장될 때" 거의 반드시 생기는 문제다. 처음엔 섹션이 하나라 괜찮다가, 섹션이 추가될 때마다 기존 섹션과의 교집합을 의식적으로 처리하지 않으면 터진다. 개인 블로그 수준이든 콘텐츠 규모가 큰 서비스든 이 패턴은 동일하다.

버그 제보를 받기 전에 잡으면 좋은데, 이런 종류의 UI 중복은 QA 시나리오에서 잘 안 잡힌다. "같은 글이 두 번 나오는지"를 명시적으로 체크하는 케이스를 추가해두지 않으면 그냥 통과된다. 이번 수정 이후엔 메인 페이지에 섹션이 하나 더 붙을 때, excludeSlugs 연결을 같이 처리하는 걸 작업 체크리스트에 박아두기로 했다.

단일 파일 수정이지만, 콘텐츠 전략과 UX 일관성에 직결되는 작업이었다. 작은 diff가 항상 작은 영향인 건 아니다.

끝.

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

• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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