사이트의 발, 푸터

KRDS CP-032 — 푸터는 페이지의 마지막 요소이므로 본문 하단에 배치하고 있다.

0. 들어가며 — 헤더에서 푸터로

이번 152편부터는 푸터(Footer) 그룹 13개(CP-032~044)입니다.

헤더가 사이트의 머리(최상단 내비게이션)였다면, 푸터는 사이트의 발(최하단 마무리)입니다. 연락처, 정책 링크, 저작권, 운영 기관 정보 등 ‘페이지를 마무리하는’ 정보가 모이는 곳이죠. 그 첫 규칙 CP-032는 가장 기본 — 푸터를 본문 하단(페이지 마지막)에 배치하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 본문 하단 배치

CP-032 (컴포넌트 > 푸터) “푸터는 페이지의 마지막 요소이므로 본문 하단에 배치하고 있다.”

푸터를 페이지의 가장 마지막, 본문 아래에 배치하라는 뜻입니다.

정리: 푸터는 페이지의 마지막 요소로 본문 하단에 배치하라. 이게 CP-032입니다.

2. 왜 본문 하단인가 — 당연하지만 중요한 위치

푸터가 페이지 맨 아래에 있는 것은 너무 당연해 보입니다. 하지만 이 ’당연함’에는 의미가 있습니다.

푸터의 역할은 ’페이지를 마무리하며 부가 정보를 제공’하는 것입니다. 연락처·정책·저작권·운영 기관 같은 정보는 사용자가 주요 콘텐츠를 다 보고 난 뒤에 찾는 보조 정보죠. 그래서 페이지의 가장 마지막, 본문이 끝나는 지점 아래에 두는 것이 자연스럽습니다. 사용자가 콘텐츠를 끝까지 읽고 내려오면 자연스럽게 만나는 위치입니다.

이는 구조적으로도 의미가 있습니다 — 푸터의 의미(<footer>)는 ’HTML 문서나 구역의 바닥글’이고, 페이지의 마지막 요소라는 위치와 정확히 맞아떨어지죠. 헤더(<header>, 머리말) → 메인(<main>, 본문) → 푸터 (<footer>, 바닥글)라는 시맨틱 구조가 위→아래 순서와 일치합니다(레이아웃 편의 시맨틱 마크업 원리).

’페이지의 마지막 요소’라는 점도 중요합니다. 푸터 뒤에 또 다른 콘텐츠가 오면 안 됩니다 — 푸터는 ’여기서 페이지가 끝난다’는 마무리 신호인데, 그 뒤에 뭔가 더 있으면 신호가 무의미해지죠. 스크린리더 사용자도 푸터를 ’페이지 끝’의 랜드마크로 인식하므로(CP-043), 푸터 뒤에 콘텐츠가 있으면 혼란스럽습니다.

CP-032는 이 기본을 명시합니다 — 푸터는 본문 하단, 페이지의 마지막. 다음 편(CP-033)에서는 본문이 짧을 때 푸터가 화면 아래로 떠버리지 않게 하는 ‘스티키 푸터’ 기법을 다룹니다. 위치의 기본(CP-032)과 짧은 본문 대응 (CP-033)이 함께 푸터의 자리를 완성하죠.

3. 점검 / 개선

무엇을 점검하나

본문 하단 — 푸터가 본문(<main>) 아래에 있는가.

마지막 요소 — 푸터 뒤에 다른 콘텐츠가 없는가.

시맨틱 순서 — header→main→footer 구조인가.

Before / After

<body> <header>...</header> <main>...본문...</main> <footer>...연락처·정책·저작권...</footer>  </body>

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

역할	책임
퍼블리셔/개발	푸터를 본문 하단·페이지 마지막에 마크업

기관 유형	CP-032 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 푸터가 본문 아래에 있나요?

□ 푸터 뒤에 다른 콘텐츠가 없나요?

□ header→main→footer 순서인가요?

❓ FAQ

Q1. 너무 당연한 규칙 아닌가요? 기본이지만, 시맨틱 구조(<footer>가 페이지 마지막)와 스크린리더 랜드마크 인식을 위해 명시합니다. Q2. 푸터가 여러 개여도 되나요? 페이지 전체의 푸터는 하나입니다. (구역별 <footer>는 가능하나, 페이지 바닥글은 마지막에 하나.) Q3. KRDS를 채택하면 자동인가요? 표준 레이아웃은 푸터를 페이지 마지막에 배치합니다.

6. 마무리

CP-032의 메시지:

사이트의 발, 푸터 — 본문을 마무리하는 마지막 자리에.

푸터는 페이지를 마무리하며 부가 정보를 제공하므로, 본문 하단·페이지의 마지막 요소로 배치합니다. header→main→ footer라는 시맨틱 구조와 위→아래 순서가 일치하고, 스크린리더도 ‘페이지 끝’ 랜드마크로 인식하죠.

다음 편은 짧은 본문에서 푸터를 화면 아래 고정하는 기법을 다룹니다. CP-033 — “본문 높이가 뷰포트보다 짧으면 푸터가 뷰포트 하단에 고정되게 구현한다.”

다음 편 예고 ▶ 「153. (CP-033) 본문의 높이가 뷰포트 높이보다 짧은 경우 푸터가 뷰포트 하단에 고정되게 구현되어 있다.」

ViewCheck는 푸터가 본문 하단·페이지 마지막에 배치됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 푸터(Footer) 가이드 — https://www.krds.go.kr/html/site/component/component_04.html

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

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

사이트의 발, 푸터

0. 들어가며 — 헤더에서 푸터로

1. 규칙 원문 — 본문 하단 배치

2. 왜 본문 하단인가 — 당연하지만 중요한 위치

3. 점검 / 개선

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

5. 30초 자가진단 + FAQ

6. 마무리

관련 글

다음 호는 언제?

방대한 자료를 효율적으로

적힌 대로 가야 한다