홈은 왼쪽 끝, 전체는 오른쪽 끝

KRDS CP-140 — [모바일] 탭바에 홈 버튼, 전체 버튼이 사용되는 경우 각각 가장 왼쪽, 가장 오른쪽 항목으로 배치하고 있다.

0. 들어가며 — 양 끝은 정해진 자리가 있다

이번 260편은 탭 바에 홈 버튼·전체 버튼이 있으면 각각 가장 왼쪽·가장 오른쪽에 배치하라는 규칙입니다.

탭 바에서 ‘홈’과 ’전체(메뉴)’는 특별한 위상의 메뉴입니다 — 홈은 ’출발점/돌아갈 곳’, 전체는 ’나머지 모든 메뉴로 가는 입구’죠. 이 둘은 관습적으로 정해진 자리가 있습니다 — 홈은 맨 왼쪽, 전체는 맨 오른쪽. CP-140은 이 양 끝 고정 배치를 규정해 사용자가 익숙한 위치에서 찾게 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 홈 왼쪽 끝, 전체 오른쪽 끝

CP-140 (컴포넌트 > 탭 바) [모바일] “탭바에 홈 버튼, 전체 버튼이 사용되는 경우 각각 가장 왼쪽, 가장 오른쪽 항목으로 배치하고 있다.”

탭 바에 홈 버튼이 있으면 가장 왼쪽에, 전체(메뉴) 버튼이 있으면 가장 오른쪽에 배치해, 관습에 맞는 예측 가능한 위치를 제공하라는 뜻입니다.

정리: 홈은 맨 왼쪽, 전체는 맨 오른쪽에 배치하라. 이게 CP-140입니다.

2. 왜 홈은 왼쪽, 전체는 오른쪽인가

탭 바의 양 끝(맨 왼쪽·맨 오른쪽)은 시각적으로 가장 눈에 띄고 손이 닿기 쉬운 ’특별한 자리’입니다. 그래서 가장 중요하거나 기준이 되는 메뉴를 양 끝에 두는 관습이 자리 잡았죠. 홈과 전체가 각각 그 자리를 차지합니다.

① 홈 = 가장 왼쪽. ’홈’은 사이트/앱의 출발점이자 돌아갈 기준점입니다. 사용자가 어디서 길을 잃든 ’홈으로 가면 처음으로 돌아간다’는 안전한 닻이죠. 왼→오로 읽는 문화에서 왼쪽 끝은 ’시작’의 위치입니다 — 읽기가 시작되는 곳, 첫 번째 자리죠. 그래서 ’출발점’인 홈을 맨 왼쪽에 두면 의미가 맞습니다. 또 헤더 로고가 보통 왼쪽 상단에서 홈 링크 역할을 하듯, 하단 탭 바에서도 홈을 왼쪽에 두는 것이 일관됩니다. 사용자는 ’홈은 왼쪽 끝’을 학습해, 어느 화면에서든 왼쪽 끝을 눌러 처음으로 돌아가죠.

② 전체 = 가장 오른쪽. ‘전체(전체 메뉴/더보기)’는 탭 바에 담지 못한 나머지 모든 메뉴로 가는 입구입니다 (CP-137에서 본, 5개를 넘는 메뉴를 담는 곳). 이는 ’확장/더 많은 것’의 성격이라, 오른쪽 끝에 두는 것이 관습이죠 — 왼→오 흐름에서 오른쪽은 ’끝/그 다음/더’의 위치입니다. 또 햄버거 메뉴가 흔히 오른쪽에 놓이는 것과도 일관되죠. 사용자는 ’더 많은 메뉴가 필요하면 오른쪽 끝’ 을 학습합니다.

③ 양 끝 고정의 가치 — 예측성. 핵심은 이 배치가 일관되고 예측 가능해야 한다는 점입니다(브레드크럼 위치 CP-081, 페이지네이션 순서 CP-132에서 반복된 원리). 홈이 어떤 화면에선 왼쪽, 어떤 화면에선 가운데에 있으면 사용자는 매번 찾아야 하죠. 홈을 늘 왼쪽 끝, 전체를 늘 오른쪽 끝에 고정하면 — 사용자는 보지 않고도 손이 그 위치로 갑니다. 양 끝은 특히 자주 쓰는 기준 메뉴(홈으로 복귀, 전체 메뉴 탐색)라, 고정된 위치가 큰 편의를 주죠.

’사용되는 경우’라는 조건 — 모든 탭 바에 홈·전체 버튼이 있는 건 아닙니다. 서비스에 따라 홈만 있거나, 전체만 있거나, 둘 다 없을 수도 있죠. CP-140은 그것들이 있을 때 위치를 규정합니다 — 있으면 홈은 왼쪽 끝, 전체는 오른쪽 끝으로요. 그 사이의 다른 핵심 메뉴들(검색·알림 등)은 가운데에 배치되죠. 양 끝을 기준 메뉴가 잡고, 가운데를 일반 핵심 메뉴가 채우는 구조입니다.

정리하면 — 홈(출발점)은 왼쪽 끝, 전체(확장 입구)는 오른쪽 끝이라는 관습적·일관된 배치로, 사용자가 익숙한 위치에서 기준 메뉴를 찾게 합니다.

3. 점검 / 개선

무엇을 점검하나

홈 왼쪽 끝 — 홈 버튼이 있으면 가장 왼쪽에 있는가.

전체 오른쪽 끝 — 전체 버튼이 있으면 가장 오른쪽에 있는가.

일관성 — 모든 화면에서 이 위치가 고정되는가.

개선 방향

홈을 탭 바 첫 항목(왼쪽 끝), 전체를 마지막 항목(오른쪽 끝)으로 고정.

가운데에 검색·알림 등 일반 핵심 메뉴 배치.

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

역할	책임
디자이너/기획	홈·전체 양 끝 고정 배치 정의
퍼블리셔/개발	탭 순서 고정 구현

기관 유형	CP-140 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (홈·전체 버튼 사용 시)

탭 바에 홈·전체 버튼을 두는 사이트·앱이 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 홈 버튼이 있으면 가장 왼쪽에 있나요?

□ 전체 버튼이 있으면 가장 오른쪽에 있나요?

□ 모든 화면에서 이 위치가 고정되나요?

❓ FAQ

Q1. 홈을 가운데 두면 안 되나요? 홈은 출발점이라 왼쪽 끝이 관습입니다. 가운데에 두면 사용자가 예상한 위치와 달라 찾기 어렵습니다. Q2. 전체 버튼이 뭔가요? 탭 바에 담지 못한 나머지 메뉴로 가는 입구(‘전체 메뉴/더보기’)입니다. CP-137의 5개 초과 메뉴를 담죠. Q3. 홈·전체가 없으면요? ’사용되는 경우’의 규칙이라, 없으면 해당하지 않습니다. 있을 때 양 끝에 둡니다.

6. 마무리

CP-140의 메시지:

홈은 왼쪽 끝, 전체는 오른쪽 끝 — 기준 메뉴를 양 끝에 고정하라.

홈(출발점)과 전체(확장 입구)는 탭 바의 기준 메뉴입니다. 왼→오 흐름에 맞춰 홈은 왼쪽 끝, 전체는 오른쪽 끝에 고정하면 사용자가 익숙한 위치에서 찾죠. 일관된 양 끝 배치가 예측 가능한 내비게이션을 만듭니다. 다음 편은 탭 바의 하단 고정입니다.

다음 편 예고 ▶ 「261. (CP-141) [모바일] 탭바는 화면 하단에 위치를 고정하여 제공하며, 스크롤 동작 시 숨겨지지 않도록 표현하고 있다.」

ViewCheck는 탭 바의 홈·전체 버튼이 양 끝에 배치되는지를 진단합니다.

📚 참고 출처

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

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

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