페이지네이션과 무한 스크롤을 검색 친화적으로 설계하는 기준

검색 친화적인 목록은 자바스크립트가 다음 항목을 그려 주는 목록이 아니라, 각 페이지의 콘텐츠를 일반 링크로 발견할 수 있는 목록입니다. 기본 페이지에는 첫 묶음이 서버에서 렌더링되고, 다음 페이지는 고유 URL과 <a> 링크로 접근되어야 합니다. 무한 스크롤은 편의 기능으로 추가하되, 링크 기반 페이지네이션과 콘텐츠 종료 상태를 남겨야 합니다.

Google은 페이지네이션된 시리즈의 각 페이지를 별도 URL로 다루고, 페이지 간 탐색 링크가 있으면 크롤러가 발견할 수 있다고 설명합니다.페이지네이션 구현 가이드를 적용하면 UI 선택과 검색 노출의 책임을 분리할 수 있습니다.

크롤러가 도달할 수 있는 URL 아키텍처를 만든다

/articles?page=2처럼 서버가 실제 항목을 반환하는 주소를 정의하고, 첫 페이지·중간 페이지·마지막 페이지의 응답을 확인합니다. 페이지 번호를 화면 상태에만 보관하면 새로고침과 공유가 깨지고 검색엔진이 두 번째 묶음을 발견할 단서가 사라집니다. 필터와 정렬은 검색 대상인지 여부를 먼저 정한 뒤 색인 가능한 조합만 허용합니다.

• 각 페이지에 자기 자신을 가리키는 canonical을 둔다

• 다음·이전 링크를 실제 href로 제공하고 버튼만으로 대체하지 않는다

• 마지막 페이지에는 더 불러올 항목이 없다는 상태를 표시한다

다음 링크가 만드는 탐색 그래프를 보존한다

초기 HTML에 첫 목록과 다음 페이지 링크를 넣은 뒤, 자바스크립트가 링크를 관찰해 추가 로드하도록 설계합니다. 요청 중에는 중복 요청을 막고, 실패하면 링크를 다시 눌러 재시도할 수 있어야 합니다. 접근성 관점에서도 키보드 사용자가 콘텐츠 끝에 도달하고 새 항목을 알 수 있어야 합니다. 이 글에서 접근성 상태를 코드로 판정하는 기준은 W3C의 이름·역할·값 요구사항을 참고합니다.WCAG 2.2

샘플: 24개 목록의 결정과 산출물

예시 입력은 한 페이지에 12개씩 총 24개인 글 목록입니다. 결정은 /articles와 /articles?page=2를 서버 렌더링하고, 화면에서는 첫 페이지의 다음 링크를 관찰해 두 번째 페이지를 이어 붙이는 것입니다. 중간 산출물은 두 URL의 HTML 스냅샷과 링크 목록이며, 기대 결과는 자바스크립트를 끈 상태에서도 두 번째 페이지에 접근하고, 켠 상태에서는 같은 항목을 중복 삽입하지 않는 것입니다.

필터·정렬의 색인 정책과 실패 경계를 정한다

실패 사례는 초기 화면에 빈 컨테이너만 두고 스크롤 이벤트가 발생할 때 API를 호출하는 방식입니다. 크롤러, 공유 링크, 키보드 사용자는 목록에 접근하지 못합니다. 복구는 서버 렌더링 링크를 먼저 복원하고, 로딩 실패 시 다음 링크를 노출하는 것입니다. 항목 순서가 개인화되거나 짧은 세션에서만 의미가 있다면 전체 목록을 색인 대상으로 만들지 말고 검색 제외와 UX 목적을 분리합니다.

검색 발견 여부를 재현해 완료를 기록한다

완료 조건은 페이지 1·2·마지막 URL이 직접 200을 반환하고 고유 콘텐츠를 보여 주며, 모든 다음 링크가 실제 href로 존재하고, canonical과 내부 링크가 의도한 주소를 가리키는 상태입니다. 자바스크립트 활성·비활성, 요청 실패·재시도, 키보드 이동을 각각 재현해 결과를 기록하면 검색 친화적인 목록 설계가 검증 완료됩니다.