탭은 위, 내용은 아래

KRDS CP-227 — 수평 탭을 사용하는 경우 좌에서 우의 순서로 제공하며, 콘텐츠는 탭 하단으로 배치하고 있다.

0. 들어가며 — 탭 위젯 그룹의 첫 규칙

이번 347편부터 탭(Tab) 그룹(CP-227~237, 11개)으로 들어갑니다. 한 가지 짚을 점 — 이 ‘탭’은 앞서 다룬 탭 바(Tab bars, 모바일 하단 내비, CP-134~143) 와 다릅니다. 여기 ’탭’은 같은 화면에서 콘텐츠 패널을 전환하는 탭 위젯입니다 — 하나의 영역에서 ’기본정보 / 상세 / 후기’ 같은 탭을 눌러 그 자리의 내용을 바꾸는 것이죠(WAI-ARIA role="tablist"/tab/tabpanel).

첫 규칙은 수평 탭은 좌→우 순서로, 콘텐츠는 탭 하단에 배치하라는 내용입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 수평 탭 좌→우, 콘텐츠 하단

CP-227 (컴포넌트 > 탭) “수평 탭을 사용하는 경우 좌에서 우의 순서로 제공하며, 콘텐츠는 탭 하단으로 배치하고 있다.”

탭을 가로로 배열하는 수평 탭에서는 탭 항목을 왼쪽→오른쪽 순서로 나열하고, 선택된 탭의 콘텐츠(패널)를 탭 줄 아래에 배치하라는 뜻입니다.

정리: 수평 탭은 좌→우로, 콘텐츠는 탭 아래에 두라. 이게 CP-227입니다.

2. 왜 좌→우, 콘텐츠 하단인가

탭 위젯은 — 탭 줄(여러 탭 항목)과 탭 패널(선택된 탭의 콘텐츠)로 구성됩니다. 이 둘의 배치가 관습에 맞아야 사용자가 직관적으로 이해하죠.

① 좌→우 순서. 한국어·영어는 왼쪽에서 오른쪽으로 읽습니다. 수평 탭을 좌→우로 배열하면 — 사용자가 자연스러운 읽기 흐름으로 탭들을 훑죠. 첫 번째 탭(보통 기본/중요)이 왼쪽에, 이후 탭이 순서대로 오른쪽에 옵니다. 이 순서는 페이지네이션(CP-132)·탭 바(CP-140)에서 본 좌→우 흐름 관습과 같죠. 또 — 탭의 논리적 순서(중요도·진행 순)가 있다면 그 순서대로 좌→우로 배열해, 사용자가 순서를 시각적으로 읽게 합니다.

② 콘텐츠 하단 배치. 수평 탭에서 선택된 탭의 콘텐츠는 탭 줄 바로 아래에 나타나야 합니다. 이유:

읽기 흐름 — 사용자는 위→아래로 읽습니다. 탭 줄(위)에서 탭을 고르고 → 그 아래로 콘텐츠를 읽는 ‘선택 → 내용’ 순서가 자연스럽죠. 콘텐츠가 탭 위나 옆에 나오면 흐름이 역행·단절됩니다.

관계 인지 — 콘텐츠가 선택된 탭 바로 아래에 붙어 나타나면, ’이 탭의 내용이 이것’이라는 관계가 명확히 읽힙니다(게슈탈트 근접성, 아코디언 헤더-패널 CP-197 정신). 콘텐츠가 멀리 떨어지면 어느 탭 것인지 흐려지죠.

관습 — ’탭은 위, 내용은 아래’는 폴더 탭(서류철)에서 유래한 보편적 관습입니다. 사용자가 이미 학습한 패턴 이라 직관적이죠.

이 배치는 — 탭과 패널의 관계를 시각적으로 명확히 합니다(CP-230의 배경색 동일, CP-237의 ARIA 관계와 함께). 탭 줄에서 선택한 탭이 강조되고(CP-234), 그 아래 콘텐츠가 바뀌면, 사용자는 ‘탭을 눌러 그 자리의 내용을 전환’ 한다는 탭 위젯의 동작을 자연스럽게 이해하죠.

수직 탭과의 짝. CP-227(수평)은 다음 편 CP-228(수직 탭: 상→하 순서, 콘텐츠 우측)과 짝을 이룹니다. 탭은 가로(수평) 또는 세로(수직)로 배열할 수 있고, 각각 콘텐츠 위치가 다르죠 — 수평은 콘텐츠가 아래, 수직은 콘텐츠가 오른쪽. 공통 원리는 ’탭을 읽는 흐름 끝에 콘텐츠를 배치’하는 것입니다(수평은 위→아래라 아래, 수직은 좌→우라 오른쪽).

탭의 적절한 용도. 탭 위젯은 ’같은 맥락의 콘텐츠를 여러 묶음으로 나눠 한 자리에서 전환’하는 데 적합하죠. 다만 — 서로 다른 탭의 정보를 비교해야 하면 탭이 부적절하고(CP-229), 너무 많은 탭은 탐색 컨트롤이 필요하죠 (CP-233). 이 배치 규칙(227·228)은 그 탭 위젯의 기본 레이아웃을 정합니다.

정리하면 — 수평 탭은 읽기 흐름과 관습에 맞춰 좌→우로 배열하고 콘텐츠를 탭 하단에 둬, 탭-패널 관계와 동작을 직관적으로 전해야 합니다.

3. 점검 / 개선

무엇을 점검하나

좌→우 순서 — 수평 탭이 왼쪽→오른쪽으로 배열됐는가.

콘텐츠 하단 — 선택된 탭의 콘텐츠가 탭 줄 바로 아래에 나타나는가.

관계 명확 — 콘텐츠가 선택 탭과 인접해 관계가 읽히는가.

개선 방향

수평 탭을 좌→우 논리 순서로 배열. 패널을 탭 줄 바로 아래 배치.

탭-패널 인접 + 관계 표현(CP-230·237) 병행.

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

역할	책임
디자이너	수평 탭 배치·콘텐츠 위치 정의
퍼블리셔/개발	좌→우·하단 배치 구현

기관 유형	CP-227 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (수평 탭 위젯 사용 시)

탭 위젯(콘텐츠 전환)을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 수평 탭이 좌→우로 배열됐나요?

□ 선택된 탭의 콘텐츠가 탭 줄 바로 아래에 나타나나요?

□ 콘텐츠가 선택 탭과 인접해 관계가 읽히나요?

❓ FAQ

Q1. 이 ’탭’이 탭 바(CP-134~)와 같은 건가요? 다릅니다. 탭 바는 모바일 하단 내비(화면 이동), 이 탭은 같은 화면에서 콘텐츠 패널을 전환하는 위젯(role=tablist)입니다. Q2. 콘텐츠를 탭 위에 두면 안 되나요? 위→아래 읽기 흐름과 폴더 탭 관습상 콘텐츠는 탭 아래가 맞습니다. Q3. 수직 탭은요? 수직 탭은 상→하 순서, 콘텐츠는 오른쪽입니다(CP-228).

6. 마무리

CP-227의 메시지:

탭은 위, 내용은 아래 — 수평 탭은 좌→우로, 콘텐츠는 탭 하단에.

수평 탭은 읽기 흐름(좌→우, 위→아래)과 폴더 탭 관습에 맞춰 좌→우 배열·콘텐츠 하단 배치를 하면, 탭-패널 관계와 ’탭으로 내용 전환’이라는 동작이 직관적으로 읽히죠. 다음 편은 수직 탭의 배치입니다.

다음 편 예고 ▶ 「348. (CP-228) 수직 탭을 사용하는 경우 상에서 하의 순서로 제공하며, 콘텐츠는 탭 우측으로 배치하고 있다.」

ViewCheck는 수평 탭이 좌→우·콘텐츠 하단으로 배치되는지를 진단합니다.

📚 참고 출처

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

WAI-ARIA APG — Tabs Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/tabs/

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

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