늘 하단에 떠 있어야

KRDS CP-141 — [모바일] 탭바는 화면 하단에 위치를 고정하여 제공하며, 스크롤 동작 시 숨겨지지 않도록 표현하고 있다.

0. 들어가며 — 스크롤하면 사라지는 내비게이션

이번 261편은 탭 바를 화면 하단에 고정하고, 스크롤해도 숨겨지지 않게 하라는 규칙입니다.

탭 바는 주요 화면으로 가는 핵심 내비게이션이라, 사용자가 언제든 바로 쓸 수 있어야 하죠. 그런데 탭 바가 본문과 함께 스크롤되어 위로 사라지거나, 스크롤 시 숨겨지면 — 사용자는 탭을 쓰려고 매번 맨 아래로 스크롤해야 합니다. CP-141은 탭 바를 화면 하단에 항상 떠 있게(고정) 해 늘 접근 가능하게 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 하단 고정·스크롤 시 미숨김

CP-141 (컴포넌트 > 탭 바) [모바일] “탭바는 화면 하단에 위치를 고정하여 제공하며, 스크롤 동작 시 숨겨지지 않도록 표현하고 있다.”

탭 바를 화면 하단에 고정(fixed/sticky)해 본문 스크롤과 무관하게 항상 같은 위치에 떠 있게 하고, 스크롤할 때 사라지지 않게 하라는 뜻입니다.

정리: 탭 바는 화면 하단에 고정해 스크롤해도 늘 보이게 하라. 이게 CP-141입니다.

2. 왜 하단에 고정해야 하나

탭 바의 본질은 ‘언제든 즉시 쓸 수 있는 주요 내비게이션’입니다. 사용자가 어느 화면을 보고 있든, 긴 본문을 얼마나 스크롤했든, ’홈으로 가자’, ‘검색하자’, ‘알림 보자’ 하는 순간 바로 탭을 누를 수 있어야 하죠. 이 ’즉시 접근성’이 탭 바의 가치이고, 그러려면 탭 바가 항상 같은 자리(화면 하단)에 보여야 합니다.

① 하단 위치 — 엄지 도달 영역. 모바일은 한 손(특히 엄지)으로 조작하는 경우가 많습니다. 화면 하단은 엄지가 가장 편하게 닿는 영역이죠(상단은 손을 뻗어야 함). 그래서 자주 쓰는 주요 내비게이션을 하단에 두면 조작이 편 합니다. iOS·안드로이드의 하단 탭 바 관습도 이 때문이죠.

② 고정(fixed) — 스크롤과 무관. 핵심 문제는 ‘스크롤’입니다. 만약 탭 바가 본문의 일부처럼 문서 흐름 안에 있으면, 본문을 스크롤할 때 탭 바도 함께 위로 밀려 올라가 화면 밖으로 사라지죠. 그러면 사용자는 탭을 쓰려고 긴 본문을 맨 아래까지 스크롤해야 합니다 — 매우 불편하고, 탭 바의 ’즉시 접근’ 가치가 사라지죠. 그래서 탭 바를 position: fixed(또는 sticky)로 뷰포트 하단에 고정해, 본문이 그 뒤에서 스크롤되더라도 탭 바는 항상 같은 자리에 떠 있게 합니다.

③ 스크롤 시 미숨김. 일부 앱은 ‘아래로 스크롤하면 탭 바를 숨기고 위로 스크롤하면 다시 보이는’(auto-hide) 패턴을 쓰기도 합니다 — 본문 공간을 넓히려는 의도죠. 하지만 KRDS는 스크롤 시 숨겨지지 않게 하라고 명시 합니다. 이유는 — 탭 바가 숨었다 나타났다 하면 사용자가 ‘탭을 쓰려는데 어디 갔지?’ 하고 혼란스럽고, 숨은 상태에서 탭을 쓰려면 일부러 위로 스크롤하는 추가 동작이 필요하기 때문이죠. 주요 내비게이션은 항상 보이는 것이 예측 가능하고 안전합니다. 그래서 탭 바는 스크롤 방향과 무관하게 늘 하단에 노출돼야 합니다.

구현·주의 사항. position: fixed; bottom: 0으로 하단 고정하되 — (1) 본문 콘텐츠의 맨 아래가 탭 바에 가려지지 않게 본문에 하단 여백(탭 바 높이만큼)을 주어야 하고, (2) iOS의 홈 인디케이터(하단 안전 영역)를 고려해 safe-area-inset-bottom 패딩을 주어 탭이 시스템 영역과 겹치지 않게 하죠. (3) 키보드가 올라올 때(입력 시)는 탭 바를 적절히 처리해 입력 영역을 가리지 않게 합니다.

이 규칙은 탭 바의 ’항상성’을 보장합니다 — 균등 배치(CP-134), 핵심 5개(CP-137), 양 끝 기준 메뉴(CP-140)로 구성된 탭 바가, 하단에 고정돼 늘 보임으로써 비로소 ’언제든 쓰는 주요 내비게이션’으로 완성되죠.

3. 점검 / 개선

무엇을 점검하나

하단 고정 — 탭 바가 화면 하단에 fixed/sticky로 고정되는가.

스크롤 미숨김 — 본문을 스크롤해도 탭 바가 사라지지 않는가.

가림 방지 — 본문 하단이 탭 바에 가려지지 않고, 안전 영역을 고려했는가.

개선 방향

탭 바 position: fixed; bottom: 0 + 본문 하단 여백(탭 높이만큼).

safe-area-inset-bottom 적용. auto-hide 패턴 제거(항상 노출).

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

역할	책임
디자이너	하단 고정·항상 노출 정책 정의
퍼블리셔/개발	fixed 고정·여백·안전 영역 구현

기관 유형	CP-141 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 탭 바 사용 시)

모바일 하단 탭 바를 쓰는 사이트·앱이 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 탭 바가 화면 하단에 고정되나요?

□ 본문을 스크롤해도 탭 바가 사라지지 않나요?

□ 본문 하단이 탭 바에 가려지지 않고 안전 영역을 고려했나요?

❓ FAQ

Q1. 스크롤 시 숨겨 본문을 넓히면 안 되나요? KRDS는 미숨김을 명시합니다. 숨었다 나타나면 혼란스럽고 추가 동작이 필요해, 항상 노출이 안전합니다. Q2. 본문이 탭 바에 가려져요. 본문에 탭 바 높이만큼 하단 여백을 줘서 가림을 막습니다. Q3. iOS 홈 인디케이터와 겹쳐요. safe-area-inset-bottom 패딩으로 시스템 안전 영역을 피합니다.

6. 마무리

CP-141의 메시지:

늘 하단에 떠 있어야 — 탭 바를 화면 하단에 고정해 스크롤해도 보이게.

탭 바는 언제든 즉시 쓰는 주요 내비게이션입니다. 본문과 함께 스크롤되어 사라지거나 숨겨지면 즉시 접근성이 무너지죠. 화면 하단에 고정해 항상 노출하고, 본문 가림·안전 영역도 챙겨야 합니다. 다음 편부터는 탭 바의 접근성 — 역할 인지입니다.

다음 편 예고 ▶ 「262. (CP-142) 탭바의 역할을 스크린 리더에서 인지할 수 있도록 제공하고 있다.」

ViewCheck는 탭 바가 하단에 고정되어 스크롤 시 숨겨지지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 탭 바(Tab bars) 가이드 — https://www.krds.go.kr/html/site/component/component_11.html

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

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