탭은 왼쪽 세로, 내용은 오른쪽

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

0. 들어가며 — 세로로 늘어선 탭

이번 348편은 앞 편(CP-227)의 짝입니다. 수직 탭은 상→하 순서로, 콘텐츠는 탭 우측에 배치하라는 규칙이죠.

탭은 가로(수평)뿐 아니라 세로(수직)로도 배열할 수 있습니다 탭 항목들을 왼쪽에 세로로 쌓고, 선택된 탭의 콘텐츠를 오른쪽에 보여주는 형태죠. 탭이 많거나 넓은 화면에서 유용합니다. CP-228은 수직 탭의 배치 상→하 순서, 콘텐츠 우측 를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 수직 탭 상→하, 콘텐츠 우측

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

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

정리: 수직 탭은 상→하로, 콘텐츠는 탭 우측에 두라. 이게 CP-228입니다.

2. 왜 상→하, 콘텐츠 우측인가

수직 탭은 수평 탭(CP-227)과 같은 원리를 세로 배열에 적용합니다 — ’탭을 읽는 흐름의 끝에 콘텐츠를 배치’하는 것이죠.

① 상→하 순서. 세로로 쌓인 탭은 위에서 아래로 읽습니다(위→아래 읽기 흐름). 그래서 첫 번째 탭(기본/중요)이 맨 위에, 이후 탭이 순서대로 아래에 옵니다. 사용자가 자연스럽게 위→아래로 탭들을 훑죠. 수평 탭의 좌→우(CP-227) 에 대응하는, 세로 배열의 자연스러운 순서입니다.

② 콘텐츠 우측 배치. 수직 탭에서 선택된 콘텐츠는 탭 줄의 오른쪽에 나타나야 합니다. 이유:

읽기 흐름 — 왼쪽에서 오른쪽으로 읽는 문화에서, 왼쪽 세로 탭에서 탭을 고르고 → 오른쪽으로 콘텐츠를 읽는 ‘선택(좌) → 내용(우)’ 흐름이 자연스럽죠. 수평 탭이 ’위 선택 → 아래 내용’이었다면, 수직 탭은 ’왼쪽 선택 → 오른쪽 내용’입니다. 둘 다 ’읽기 흐름의 끝에 콘텐츠’를 둡니다.

관계 인지 — 콘텐츠가 선택된 탭 옆(오른쪽)에 나타나면, ’이 탭의 내용이 이것’이라는 관계가 읽히죠(근접성). 수직 탭에서 콘텐츠를 탭 아래나 멀리 두면 관계가 흐려집니다.

공간 활용 — 수직 탭 + 우측 콘텐츠는 넓은 가로 공간을 효율적으로 씁니다. 왼쪽 좁은 탭 영역 + 오른쪽 넓은 콘텐츠 영역으로요. 사이드 메뉴(CP-107의 좌측 사이드)와 유사한 좌우 분할 구조죠.

수직 탭을 언제 쓰나. 수직 탭은 — 탭 항목이 많거나(세로로 쌓으면 더 많이 들어감), 탭 레이블이 길거나, 넓은 화면에서 좌우 분할이 유리할 때 적합합니다. 반대로 탭이 적고 가로 공간이 제한적이면 수평 탭(CP-227)이 낫죠. 디자인 맥락에 맞게 수평/수직을 고릅니다.

반응형 고려. 수직 탭은 가로 공간을 좌우로 나누므로 — 좁은 화면(모바일)에서는 좌우 분할이 어렵죠. 그래서 모바일에서는 수직 탭을 수평 탭으로 전환하거나, 아코디언 형태로 바꾸는 등 반응형 대응을 하기도 합니다. 어느 형태든 — 탭-패널 관계와 동작이 명확해야 하죠.

공통 접근성. 수평이든 수직이든, 탭 위젯의 접근성 요건은 동일합니다 — 선택 상태를 색 외 단서로(CP-234), 키보드 탐색(CP-235), 초점 표시(CP-236), ARIA 역할·관계(CP-237). 배치(227·228)는 시각 레이아웃을, 이 규칙들이 접근성을 담당하죠. WAI-ARIA 탭 패턴은 수직 탭의 경우 키보드 화살표가 좌우가 아니라 상하로 작동하는 등(배열에 맞춰) 세부 차이도 안내합니다.

정리하면 — 수직 탭은 읽기 흐름에 맞춰 상→하로 배열하고 콘텐츠를 탭 우측에 둬, 탭-패널 관계와 동작을 직관적 으로 전하며, 넓은 가로 공간을 효율적으로 활용해야 합니다.

3. 점검 / 개선

무엇을 점검하나

상→하 순서 — 수직 탭이 위→아래로 배열됐는가.

콘텐츠 우측 — 선택된 탭의 콘텐츠가 탭 줄 오른쪽에 나타나는가.

반응형 — 좁은 화면에서 수평/아코디언 등으로 적절히 전환되는가.

개선 방향

수직 탭을 상→하 논리 순서로. 패널을 탭 우측에 배치.

좁은 화면 반응형 전환(수평·아코디언). 탭-패널 관계 표현 병행.

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

역할	책임
디자이너	수직 탭 배치·반응형 전환 정의
퍼블리셔/개발	상→하·우측 배치·반응형 구현

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

수직 탭 위젯을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 수직 탭이 상→하로 배열됐나요?

□ 선택된 탭의 콘텐츠가 탭 줄 오른쪽에 나타나나요?

□ 좁은 화면에서 수평/아코디언 등으로 적절히 전환되나요?

❓ FAQ

Q1. 수직 탭은 언제 쓰나요? 탭이 많거나, 레이블이 길거나, 넓은 화면에서 좌우 분할이 유리할 때 적합합니다. Q2. 콘텐츠를 탭 아래에 두면 안 되나요? 수직 탭은 좌(선택)→우(내용) 흐름이라 콘텐츠가 오른쪽이 맞습니다. Q3. 모바일에서도 수직인가요? 좁으면 좌우 분할이 어려워, 수평·아코디언 등으로 전환하기도 합니다.

6. 마무리

CP-228의 메시지:

탭은 왼쪽 세로, 내용은 오른쪽 — 수직 탭은 상→하로, 콘텐츠는 탭 우측에.

수직 탭은 읽기 흐름에 맞춰 상→하 배열·콘텐츠 우측 배치를 하면, 탭-패널 관계와 동작이 직관적이고 넓은 공간을 효율적으로 쓰죠. 좁은 화면은 반응형 전환합니다. 다음 편은 탭의 부적절한 용도 — 정보 비교입니다.

다음 편 예고 ▶ 「349. (CP-229) 서로 다른 탭에 속한 콘텐츠의 정보를 비교해야 하는 경우 사용하고 있지 않다.」

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컴포넌트,웹표준