붕 뜬 푸터를 막아라

KRDS CP-033 — 본문의 높이가 뷰포트 높이보다 짧은 경우 푸터가 뷰포트 하단에 고정되게 구현되어 있다.

0. 들어가며 — 내용이 짧을 때 생기는 문제

이번 153편은 본문이 짧을 때 푸터를 뷰포트(화면) 하단에 고정하는 규칙입니다.

푸터는 본문 하단에 옵니다(152편). 그런데 본문 내용이 화면 높이보다 짧으면 — 푸터가 본문 바로 아래, 즉 화면 중간쯤에 떠버립니다. 그 아래로 빈 공간이 남죠. 어색합니다. CP-033은 이럴 때 푸터를 화면 맨 아래에 붙여 ’스티키 푸터’로 만들라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 뷰포트 하단 고정

CP-033 (컴포넌트 > 푸터) “본문의 높이가 뷰포트 높이보다 짧은 경우 푸터가 뷰포트 하단에 고정되게 구현되어 있다.”

본문이 화면보다 짧을 때, 푸터가 본문 바로 밑이 아니라 화면(뷰포트) 맨 아래에 붙게 하라는 뜻입니다.

정리: 본문이 짧으면 푸터를 뷰포트 하단에 고정하라. 이게 CP-033입니다.

2. 스티키 푸터란, 왜 필요한가

웹페이지에서 흔히 생기는 어색한 상황이 있습니다 — 콘텐츠가 적은 페이지(예: 검색 결과 없음, 간단한 안내 페이지)에서, 본문이 화면 높이를 다 채우지 못하면 푸터가 본문 바로 아래(화면 중간쯤)에 떠버리고, 푸터 아래로 넓은 빈 공간(보통 흰 배경)이 남는 것이죠. 마치 페이지가 ‘잘린 듯’ 어색하게 보입니다.

이를 막는 기법이 스티키 푸터(sticky footer) 입니다. 본문이 짧을 때는 푸터를 화면 맨 아래(뷰포트 하단)에 ‘밀어’ 붙이고, 본문과 푸터 사이의 빈 공간을 본문 영역이 채우게 하는 것이죠. 그러면 푸터 아래에 빈 공간이 생기지 않고, 푸터가 항상 화면 바닥에 자리합니다.

중요한 점은, 이것이 ’항상 고정(fixed)’과는 다르다는 것입니다 — 본문이 화면보다 길 때는 푸터가 정상적으로 본문 끝(스크롤 맨 아래)에 오고, 본문이 화면보다 짧을 때만 뷰포트 하단에 붙죠. 즉, 콘텐츠 양에 따라 자동으로 적절히 동작합니다. 본문이 길면 스크롤 끝에, 짧으면 화면 바닥에 — 어느 경우든 푸터가 어색하게 뜨지 않습니다.

구현은 CSS Flexbox나 Grid로 합니다 — 예를 들어 <body>를 display:flex; flex-direction:column; min-height:100vh로 만들고 <main>에 flex:1을 주면, 본문이 남는 공간을 채우고 푸터는 자연히 바닥에 붙죠. 과거엔 복잡한 트릭이 필요했지만, 지금은 Flexbox로 간단히 구현됩니다.

이 규칙은 시각적 완성도와 관련됩니다 — 콘텐츠가 적은 페이지에서도 레이아웃이 깔끔하게 화면을 채워, 사용자가 ‘미완성·오류 페이지’로 오인하지 않게 하는 것이죠. 152편(위치의 기본)에 더해, CP-033은 ’본문 길이에 관계없이 푸터가 항상 적절한 자리에 있게’ 완성합니다.

3. 점검 / 개선

무엇을 점검하나

짧은 본문 대응 — 본문이 짧은 페이지에서 푸터가 화면 바닥에 붙는가.

빈 공간 없음 — 푸터 아래에 어색한 빈 공간이 없는가.

긴 본문 정상 — 본문이 길 때는 푸터가 스크롤 끝에 정상 위치하는가.

Before / After

/* ✅ Flexbox 스티키 푸터 */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } /* 본문이 남는 공간을 채움 */ footer { flex-shrink: 0; }

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

역할	책임
퍼블리셔/개발	Flexbox/Grid로 스티키 푸터 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문이 짧은 페이지에서 푸터가 화면 바닥에 붙나요?

□ 푸터 아래에 어색한 빈 공간이 없나요?

□ 본문이 길 때는 푸터가 스크롤 끝에 정상 위치하나요?

❓ FAQ

Q1. position:fixed로 항상 고정하면 안 되나요? 안 됩니다. 본문이 길 때 푸터가 화면을 가립니다. 본문이 짧을 때만 바닥에 붙는 ‘스티키’ 방식이어야 합니다. Q2. 어떻게 구현하나요? CSS Flexbox(min-height:100vh + main{flex:1})로 간단히 구현됩니다. Q3. KRDS를 채택하면 자동인가요? 표준 레이아웃은 스티키 푸터를 적용합니다.

6. 마무리

CP-033의 메시지:

붕 뜬 푸터를 막아라 — 본문이 짧아도 푸터는 화면 바닥에, 길면 스크롤 끝에.

본문이 화면보다 짧으면 푸터가 중간에 떠 어색해지므로, 스티키 푸터로 화면 바닥에 붙입니다. 본문이 길 땐 정상 위치(스크롤 끝)에 오고요. Flexbox로 간단히 구현되며, 콘텐츠 양과 무관하게 깔끔한 레이아웃을 만들죠.

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. 마무리

관련 글

다음 호는 언제?

방대한 자료를 효율적으로

적힌 대로 가야 한다