개발 slecs

메인 페이지 gov 글 중복 노출 버그 수정

목차

메인 페이지에서 gov 관련 글이 카드 목록에 중복으로 노출되던 문제를 잡았다.


배경: 왜 중복이 생겼나

콘텐츠 기반 사이트에서 메인 페이지는 보통 "추천 글" 또는 "최신 글" 같은 섹션을 여러 개 두는 구조다. gov 메인 글처럼 특정 카테고리에서 하이라이트로 먼저 끌어올린 글이 있으면, 아래 일반 카드 목록 쿼리에서 그 글이 다시 한 번 포함되어 버리는 일이 종종 생긴다.

이번 케이스도 구조적으로 동일했다. gov 섹션에서 고정으로 노출하는 글 슬러그가 있었는데, 하단 카드 리스트를 렌더링할 때 해당 슬러그를 걸러내는 로직이 빠져 있었던 것. 사용자 입장에서는 같은 글이 한 페이지에 두 번 나오는 셈이라 UI 신뢰도를 깎는 버그였다.


작업 내용: excludeSlugs 도입

변경은 두 파일에 걸쳐 이뤄졌다.

파일 역할 이번 변경 의미
src/lib/db.ts 글 목록 조회 로직 excludeSlugs 파라미터 추가, 필터링 처리
src/pages/index.astro 메인 페이지 렌더링 gov 고정 슬러그를 excludeSlugs로 넘기도록 수정

db.ts 쪽에 파라미터를 추가한 건 재사용성을 고려한 판단이었다. 인라인으로 index.astro에서 직접 필터링해도 동작은 하지만, 이후 다른 페이지에서도 비슷한 "특정 슬러그 제외" 요구가 생길 수 있다. 쿼리 레이어에서 한 번 처리해두면 페이지 레이어는 단순하게 유지된다.

// src/lib/db.ts (패턴 예시)
export async function getPosts({
  excludeSlugs = [],
}: {
  excludeSlugs?: string[];
} = {}) {
  const posts = await getAllPosts();
  return posts.filter((post) => !excludeSlugs.includes(post.slug));
}
---
// src/pages/index.astro (패턴 예시)
const GOV_FEATURED_SLUG = "some-gov-post";
const cardPosts = await getPosts({ excludeSlugs: [GOV_FEATURED_SLUG] });
---

슬러그를 하드코딩으로 넘기는 게 맞냐는 의문도 잠깐 들었는데, gov 메인 글 자체가 명시적으로 고정된 콘텐츠라는 점을 감안하면 이 시점에서는 이게 가장 명확한 표현이라고 봤다. "설정으로 빼야 하나"까지 고민했지만 오버엔지니어링이 될 것 같아서 일단 패스.


회고

핀포인트 수정처럼 보이지만, 이런 버그는 사실 "섹션이 하나일 때는 문제없다가 둘이 되는 순간 터진다"는 패턴이다. 처음 메인 페이지를 설계할 때 gov 섹션과 일반 카드 목록이 독립된 데이터 소스를 공유할 수 있다는 걸 명시적으로 다루지 않은 게 근본 원인이었다.

이런 류의 중복 노출 버그는 코드리뷰 시점에 잡기가 애매한 편이다. 로직 자체는 멀쩡하고, 렌더링 결과를 직접 눈으로 봐야 보이기 때문이다. 팀에서 페이지 단위로 스크린샷 비교나 E2E를 돌리는 게 없다면, 이런 건 QA 또는 운영 중에 발견되는 경우가 대부분이다.

excludeSlugs처럼 "제외 목록"을 명시적으로 받는 API 설계는 단순하지만 꽤 실용적이다. 필터 조건을 호출부에서 선언적으로 표현할 수 있고, 테스트 작성도 쉬워진다. 반대로 내부에서 암묵적으로 제외 처리를 하면 나중에 "왜 이 글이 안 나오지?"를 추적하는 데 시간을 쓰게 된다. 작은 결정이지만 이 방향이 맞다고 생각한다.

다음


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

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

댓글 0

첫 댓글 달아줘.