목록 끝, 가운데에

KRDS CP-117 — 유형에 상관없이 목록 하단에 중앙 정렬하여 제공하고 있다.

0. 들어가며 — 다 보고 나면 거기 있어야 한다

이번 237편은 페이지네이션을 유형에 상관없이 목록 하단에 중앙 정렬하라는 규칙입니다.

페이지네이션은 ’이 페이지의 목록을 다 봤으니 다음 페이지로’를 위한 도구입니다. 그렇다면 사용자가 목록을 다 훑은 끝 지점 — 즉 목록 하단에 있어야 자연스럽죠. 그리고 좌·우 치우침 없이 중앙에 두는 것이 관습이자 시각적 균형에 맞습니다. CP-117은 목록 유형이 무엇이든(게시판·카드·검색결과 등) 이 배치를 일관되게 적용하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 하단 중앙 정렬

CP-117 (컴포넌트 > 페이지네이션) “유형에 상관없이 목록 하단에 중앙 정렬하여 제공하고 있다.”

목록의 형태(테이블·카드·리스트 등)와 무관하게, 페이지네이션을 항상 목록 하단에 두고 가로 중앙 정렬해 일관되게 제공하라는 뜻입니다.

정리: 페이지네이션은 목록 하단·중앙에 일관되게 배치하라. 이게 CP-117입니다.

2. 왜 하단 중앙인가

페이지네이션의 위치는 사용자의 읽기 흐름과 관습, 일관성을 함께 고려해 정해집니다.

① 하단 읽기 흐름의 끝. 사용자는 목록을 위에서 아래로 훑습니다. 한 페이지의 항목들을 다 보고 나면 ‘이제 다음 페이지로 가야지’ 하는 시점이 오죠 바로 목록의 맨 아래입니다. 페이지네이션이 거기 있으면, 사용자가 목록을 다 읽은 자연스러운 지점에서 바로 다음 행동(페이지 이동)으로 이어집니다. 만약 페이지네이션이 목록 위 (상단)에만 있으면 사용자는 목록을 다 보고 다음으로 가려는데, 다시 위로 스크롤해 올라가야 하죠. 흐름이 끊깁니다. (목록이 매우 길면 상단에도 보조로 둘 수 있지만, 기본은 하단입니다.)

② 중앙 — 시각적 균형과 관습. 페이지네이션을 가로 중앙에 정렬하는 것은 오랜 웹 관습입니다. 숫자 링크들이 양쪽으로 펼쳐지는 형태라, 중앙 정렬이 시각적으로 안정적이고 균형 잡혀 보이죠. 또 사용자가 ‘페이지네이션은 목록 아래 가운데’ 라고 학습한 위치라, 거기 두면 망설임 없이 찾습니다. 좌측이나 우측에 치우치면 어색하고 찾기 어렵습니다.

③ ‘유형에 상관없이’ — 일관성. 이 부분이 CP-117의 강조점입니다. 한 사이트 안에는 여러 유형의 목록이 있습니다 — 표(table)로 된 게시판, 카드 그리드로 된 갤러리, 텍스트 리스트로 된 검색 결과 등이죠. 이들의 모양은 제각각이지만, 페이지네이션의 위치(하단 중앙)는 동일해야 합니다. 그래야 사용자가 어떤 목록 페이지에 가든 ‘페이지네이션은 늘 여기’ 라는 일관된 경험을 하죠. 목록 유형마다 페이지네이션 위치가 다르면(어디는 하단 중앙, 어디는 우측 하단, 어디는 상단) 사용자는 매번 찾아야 합니다. 이는 사이드 메뉴 위치 고정(CP-081 맥락)이나 내비게이션 일관성 원칙의 페이지네이션 버전입니다.

정리하면 — 페이지네이션은 사용자가 목록을 다 본 지점(하단)에, 균형 잡히고 관습적인 위치(중앙)에, 모든 목록 유형에서 동일하게 배치돼야 합니다. 이 일관성이 ’예측 가능한 내비게이션’을 만들죠.

연결 규칙 — 이 배치 일관성은 CP-118(한 화면에 하나만)과 짝을 이룹니다. 위치가 하단 중앙으로 정해지고, 그것이 한 화면에 하나만 있으면, 사용자는 혼란 없이 페이지네이션을 인지하고 씁니다. 모바일에서는 좁은 너비에 맞춰 수직 배치(CP-121) 등 형태가 바뀌지만, ’하단·중앙 정렬’의 기본 정신은 유지됩니다.

3. 점검 / 개선

무엇을 점검하나

하단 배치 — 페이지네이션이 목록 하단에 있는가.

중앙 정렬 — 가로 중앙으로 정렬됐는가.

유형 일관성 — 표·카드·리스트 등 모든 목록 유형에서 동일 위치인가.

개선 방향

페이지네이션을 목록 컨테이너 하단·중앙 정렬로 공통 컴포넌트화.

목록 유형별로 위치가 달라지지 않게 템플릿 통일.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	하단 중앙·유형 일관 배치 정의
퍼블리셔/개발	공통 페이지네이션 배치 구현

기관 유형	CP-117 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (페이지네이션 사용 시)

여러 유형의 목록에 페이지네이션을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 페이지네이션이 목록 하단에 있나요?

□ 가로 중앙 정렬됐나요?

□ 표·카드·리스트 등 모든 목록 유형에서 동일 위치인가요?

❓ FAQ

Q1. 상단에 두면 안 되나요? 사용자가 목록을 다 본 지점은 하단입니다. 하단이 기본이고, 긴 목록은 상단에 보조로 둘 수 있습니다. Q2. 좌측/우측 정렬은요? 시각 균형과 관습상 중앙이 표준입니다. 좌·우 치우침은 찾기 어렵고 어색합니다. Q3. 모바일도 하단 중앙인가요? 위치는 하단을 유지하되, 좁은 너비에 맞춰 수직 배치(CP-121) 등 형태가 바뀔 수 있습니다.

6. 마무리

CP-117의 메시지:

목록 끝, 가운데에 — 유형 상관없이 하단 중앙 정렬로 일관되게.

페이지네이션은 사용자가 목록을 다 본 지점(하단)에, 균형 잡힌 위치(중앙)에 있어야 자연스럽습니다. 그리고 표· 카드·리스트 어떤 목록 유형이든 같은 위치여야 예측 가능하죠. 일관된 배치가 곧 찾기 쉬운 내비게이션입니다. 다음 편은 한 화면에 페이지네이션을 하나만 두는 규칙입니다.

다음 편 예고 ▶ 「238. (CP-118) 한 화면에서 하나만 사용하고 있다.」

ViewCheck는 페이지네이션이 목록 하단 중앙에 일관 배치됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 페이지네이션(Pagination) 가이드 — https://www.krds.go.kr/html/site/component/component_10.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준