Tabs

Tabs (탭)

탭은 관련 콘텐츠를 정리하는 데 사용하는 컴포넌트예요. 같은 맥락 안에 나타나는 정보 그룹 사이를 사용자가 이동할 수 있게 해줍니다.

출처: Tabs

본문

개요 (Overview)

탭은 서로 다르지만 관련 있는 콘텐츠를 그룹화해서, 사용자가 페이지를 떠나지 않고 뷰 사이를 이동할 수 있게 해줘요. 탭은 전체 페이지 레이아웃이나 모달(modal), 카드(card), 사이드 패널 같은 컴포넌트 안에서 사용할 수 있습니다.

언제 사용할까요 (When to use)

인지 부하를 줄이기 위해 탭을 사용해 관련 정보를 서로 다른 카테고리로 그룹화하세요. 탭은 폼, 설정, 대시보드 같은 콘텐츠를 정리하는 데 사용할 수 있어서, 사용자가 작업 흐름에서 벗어나지 않고 과제를 완료할 수 있습니다.

언제 사용하지 말아야 할까요 (When not to use)

같은 콘텐츠 필터링하기 (Filtering the same content)

같은 콘텐츠의 서로 다른 형식을 전환하거나 같은 콘텐츠를 필터링할 때는 콘텐츠 스위처 (content switcher)를 대신 사용하세요. 콘텐츠 스위처는 탭과 함께 자주 쓰이지만, 보통 탭의 콘텐츠 안에서 관련 콘텐츠를 정리하는 더 낮은 위계로 기능해요.

진행 상황 표시하기 (Indicating progress)

사용자가 단계별 선형 프로세스를 단계적으로 진행해야 한다면 프로그레스 인디케이터 (progress indicator)를 사용하세요. 탭은 정보를 위계적으로 정리하지만 콘텐츠를 설계하고 소비하는 방식은 유연하게 남습니다.

정보 비교하기 (Comparing information)

사용자가 서로 다른 그룹의 정보를 비교해야 한다면 탭을 사용하지 마세요. 과제를 완료하려고 앞뒤로 계속 클릭해야 하는 결과가 생기니까요.

변형 (Variants)

Variant	Purpose
Line	단독으로 쓰이면서 다른 컴포넌트 안에 중첩될 수도 있는 탭이에요. 주로 컴포넌트 안에서, 또는 다른 어떤 컴포넌트와도 연결되지 않고 전체 페이지를 레이아웃으로 쓰는 콘텐츠에 사용됩니다.
Contained	정의된 콘텐츠 영역에 흔히 쓰는 강조된 탭이에요.
Vertical	콘텐츠를 훑어보기 위한 세로 방향의 탭리스트예요.

포맷 (Formatting)

탭 컴포넌트는 선택됨(selected)과 선택 안 됨(unselected)이라는 두 개의 뚜렷한 구역으로 구성돼요. 기본적으로 항상 하나의 탭이 선택되어 있습니다. 제거 가능(dismissible)하지 않은 탭 그룹에는 항상 최소 두 개의 탭이 있고, 제거 가능한 탭 그룹에는 최소 하나가 있어요. 아이콘은 선택사항입니다.

라인 탭의 구조 (Anatomy of line tabs)

1. 라인 탭

A. 라벨 C. 인디케이터 D. 스크롤 버튼

2. 아이콘만 있는 라인 탭

C. 인디케이터 E. 아이콘

3. 아이콘이 있는 라인 탭

A. 라벨 C. 인디케이터 E. 아이콘 F. 탭 패널

컨테이너드 탭의 구조 (Anatomy of contained tabs)

1. 컨테이너드 탭

A. 라벨 C. 인디케이터 D. 스크롤 버튼

2. 아이콘만 있는 컨테이너드 탭

C. 인디케이터 E. 아이콘

3. 아이콘과 보조 라벨이 있는 컨테이너드 탭

A. 라벨 B. 보조 라벨(선택) C. 인디케이터 E. 아이콘(선택) F. 탭 패널

세로 탭의 구조 (Anatomy of vertical tabs)

세로 탭

A. 라벨 C. 인디케이터 F. 탭 패널 G. 확장된 탭리스트 배경

정렬 (Alignment)

탭은 자동 너비(auto-width) 또는 그리드 인지 너비(grid aware width)의 두 가지 너비 정렬이 가능해요. 컨테이너드 탭은 두 정렬 중 하나를 사용할 수 있지만, 라인 탭은 항상 자동 너비 정렬을 써야 합니다.

자동 너비 정렬 (Auto-width alignment)

자동 너비 정렬은 라인 탭과 컨테이너드 탭 모두의 기본 동작이에요. 각 탭은 라벨의 문자 수에 따라 크기가 달라지지만 라벨 양쪽에는 일관된 패딩을 갖습니다. 기본으로 선택되는 첫 라벨은 그리드에 정렬되어야 해요. 탭이 끝나는 위치는 다양하며 그리드에서 끝나지 않을 수도 있습니다.

그리드 인지 너비 정렬 (Grid aware width alignment)

기본 자동 너비 정렬 동작 대신 컨테이너드 탭은 그리드 인지 정렬을 가질 수 있어요. 탭은 그룹으로서 일련의 컬럼에 걸치며, 각 탭의 너비는 동일합니다. 첫 탭의 라벨은 사용 중인 첫 컬럼에 정렬되어야 하고, 그룹의 마지막 탭은 항상 컬럼의 가장자리에서 끝납니다. 그 사이의 탭은 그에 따라 흐르며 그리드와 정렬될 수도 아닐 수도 있지만, 항상 같은 너비 크기입니다.

2x 그리드를 사용해 콘텐츠를 두 컬럼의 배수로 간격을 두고, 가능하면 탭 요소의 시작과 끝을 탭 아래 콘텐츠와 정렬해 시각적 리듬을 만드세요. 중단점에 따라 세로 탭은 16-컬럼 그리드의 4개 또는 2개 컬럼에 걸치는 그리드 컬럼에 정렬되며, 8개 또는 12개 컬럼 너비가 될 수 있는 탭 패널에 연결됩니다. 중단점과 반응형에 대한 자세한 내용은 세로 탭을 참고하세요.

그리드 인지 컨테이너드 탭은 다음과 같은 경우에 사용하세요.

• 탭이 네 개 이하일 때
• 탭리스트가 라벨을 좁히지 않고 2x 그리드에 쉽게 들어갈 수 있을 때
• 라벨이 짧고 간결할 때
• 페이지의 다른 요소가 탭리스트에 정렬될 수 있을 때

탭 라벨 정렬 (Alignment with tab labels)

버튼과 마찬가지로 탭의 정렬은 어디에 나타나는지, 그리고 다른 컴포넌트 안에 포함되었는지에 따라 달라져요. 일반 규칙으로, 라인 탭과 컨테이너드 탭 모두의 첫 라벨은 그리드와 그 아래 텍스트에 정렬됩니다. 탭이 카드 같은 다른 컴포넌트 안에 있다면 컴포넌트 안에서 사용 중인 그리드를 따르고, 라벨을 컴포넌트 안의 텍스트와 정렬하세요. 세로 탭 라벨도 그리드에 정렬되므로, 탭리스트의 모든 라벨은 같은 그리드 컬럼에 정렬됩니다.

탭 라벨은 그리드에 정렬하세요. 탭 컨테이너는 그리드에 정렬하지 마세요.

컴포넌트 안에서의 정렬 (Alignment within a component)

컴포넌트 안(예: 모달)에서 라인 탭을 사용할 때 첫 라벨은 항상 그 공간의 다른 콘텐츠에 정렬되어야 해요. 컨테이너드 탭을 사용하지 마세요. 컨테이너의 여백에 따라 필요하면 라인 탭의 가장자리가 공간의 가장자리까지 번질 수도 있습니다. 위계적 명확성을 더하고 탭을 다른 콘텐츠와 균형 잡기 위해 마지막 탭의 끝에서 콘텐츠 영역의 가장자리까지 후행 구분선(trailing rule)을 추가할 수 있습니다.

콘텐츠 (Content)

주요 요소 (Main elements)

라벨 (Labels)

• 명확하고 구체적인 짧은 탭 라벨을 사용하세요. 라벨은 한두 단어가 좋은데, 훑어보기 쉽기 때문이에요. 세로 탭은 탭 안에서 더 많은 문자를 허용하지만, 잘림을 피하고 다양한 언어의 라벨을 위한 공간을 확보하려면 가능한 한 간결하게 유지하세요.
• 텍스트 라벨은 사용자가 볼 뷰와 그 뷰에 담긴 콘텐츠를 명확히 전달해야 해요.

보조 라벨 (Secondary labels)

• 컨테이너드 탭은 명확성을 더하거나 사용자가 올바른 선택을 하도록 돕기 위해 보조 라벨을 가질 수 있습니다.

오버플로 콘텐츠 (Overflow content)

라인 탭과 탭 라벨은 가로 스크롤을 허용하기 때문에 잘림이 필요 없어요. 탭 자체는 그에 따라 커지거나 작아질 수 있습니다. 다만 세로 탭 안에서 라벨이 너무 길면 라벨은 두 줄로 넘친 다음 줄임표로 잘립니다. 마우스로는 호버 시 브라우저 툴팁에서 전체 제목이, 키보드로는 포커스 시 툴팁에서 전체 제목이 펼쳐집니다.

추가 가이드 (Further guidance)

더 자세한 콘텐츠 가이드는 Carbon의 콘텐츠 가이드라인을 참고하세요.

보편적 동작 (Universal behaviors)

상태 (States)

탭에는 선택됨(selected)과 선택 안 됨(unselected) 두 가지 주요 상태가 있어요. 그 외 인터랙티브 상태로는 호버, 포커스, 비활성이 있습니다. 기본 뷰는 하나의 탭이 미리 선택되어 있으며 보통 첫 탭이에요. 한 번에 한 탭만 선택할 수 있습니다. 사용자가 새 항목을 선택하면 이전 탭은 자동으로 선택 해제됩니다. 사용자가 탭에서 벗어나 탐색해도 사용자가 바꿀 때까지 선택된 탭으로 남아 있어요.

이 컴포넌트의 다양한 상태에 대한 상세한 시각 정보는 스타일 탭을 참고하세요.

State	When to use
Selected	사용자가 클릭하거나 화살표 키를 사용해 탭을 활성화할 때예요.
Unselected	사용자가 다른 탭으로 이동해 그 탭이 비활성일 때예요.
Hover	사용자가 마우스 커서로 탭 위를 지나가며 상호작용하려 할 때예요.
Focus	사용자가 탭을 클릭하거나 왼쪽/오른쪽 화살표로 키보드 탐색하면 포커스되어 컴포넌트로 성공적으로 이동했음을 나타내요.
Disabled	권한, 의존성, 선행 조건 때문에 사용자가 탭과 상호작용할 수 없을 때예요. 비활성 상태는 컴포넌트의 인터랙티브 기능을 완전히 제거합니다. 스타일은 WCAG 대비 준수 대상이 아닙니다.

스크롤 (Scrollable)

페이지에 들어갈 수 있는 것보다 더 많은 탭이 필요하거나 새 브라우저 크기에 적응해야 하면 라인 탭과 컨테이너드 탭은 스크롤 가능해져야 해요. 화면 밖에 있을 수 있는 탭을 따라 탐색하도록 왼쪽과 오른쪽 화살표가 나타납니다.

인터랙션 (Interactions)

마우스 (Mouse)

사용자는 컨테이너 영역의 아무 곳이나 클릭해서 상태 변경을 일으킬 수 있어요.

키보드 (Keyboard)

기본적으로 하나의 탭이 선택되어 있어야 해요. 사용자는 왼쪽 또는 오른쪽 화살표 키를 눌러 탭 사이를 탐색할 수 있습니다. 추가 키보드 인터랙션은 접근성 탭을 참고하세요.

자동과 수동 (Automatic and manual)

자동과 수동 탭리스트는 탭 항목이 활성화되는 방식에서 다릅니다.

자동 탭리스트에서는 포커스와 선택이 동기화돼요. 사용자가 탭으로 화살표 이동하면 그 탭이 선택되고, 탭 아래의 탭 패널은 자동으로 업데이트됩니다. 탭 패널 콘텐츠가 빠르게 로드될 수 있어 사용자가 지연 없이 정보를 빠르게 훑어 결정을 내릴 수 있을 때 자동 탭을 사용하세요.

수동 탭리스트는 밑에 있는 탭 패널을 업데이트하지 않고 사용자가 탭 항목 사이를 화살표 이동할 수 있게 해요. 사용자가 화살표로 탐색하면 포커스가 다음 탭으로 이동하는 동안 선택된 탭은 선택된 채로 유지됩니다. 포커스된 탭을 선택(그리고 탭 밑의 탭 패널을 업데이트)하려면 사용자가 Enter 또는 Space를 누르면 됩니다. 탭 패널의 정보를 로드하는 데 더 오래 걸릴 때 수동 탭을 사용하세요. 그러면 키보드 사용자나 스크린 리더가 콘텐츠 로드를 기다리지 않고 탭리스트를 탐색할 수 있어요. 자동과 수동 탭리스트에 대한 자세한 내용은 접근성 탭의 키보드 인터랙션 섹션을 참고하세요.

추가 정보는 접근성 탭을 참고하세요.

반응형 동작 (Responsive behavior)

반응형 상황에서는 가로 탭이 여러 줄로 감싸지거나 위로 쌓여서는 안 되고, 대신 가로로 스크롤되어야 해요. 세로 탭은 세로 고정 구조 때문에 가로로 스크롤되지 않으며 항상 쌓입니다.

중단점 (Breakpoints)

그리드 인지 너비 정렬을 가진 탭을 사용할 때는 다음 반응형 규칙을 따르세요.

• Max, XLG, LG 중단점: 그리드 인지 탭을 여덟 개 이하로 사용하세요.
• MD, SM 중단점: 그리드 인지 탭은 더 작은 화면의 여분 공간을 줄이기 위해 자동으로 자동 너비 정렬로 바뀝니다.

라인 탭 (Line tabs)

라인 탭은 단독으로 쓰이면서 다른 컴포넌트 안에 중첩될 수도 있는 탭이에요. 모달이나 헤더 같은 컴포넌트 안에서 흔히 쓰이지만, 다른 어떤 컴포넌트와도 연결되지 않고 전체 페이지를 레이아웃으로 쓰는 큰 콘텐츠 영역에도 사용할 수 있습니다. 라인 탭은 유연성이 매우 높고 배경 또는 레이어 토큰 위에 배치될 수 있어 다양한 시나리오에서 쉽게 사용할 수 있어요. 선택된 탭 아래의 콘텐츠 영역인 탭 패널을 정의하기 위해 탭리스트에서 패널 끝까지 이어지는 라인을 사용할 수 있는데, 이는 현재 Carbon 라인 탭 컴포넌트의 일부가 아니므로 원하면 팀이 직접 추가해야 합니다.

컨테이너드 탭 (Contained tabs)

컨테이너드 탭은 서브 페이지 같은 정의된 콘텐츠 영역에 흔히 쓰이는 강조된 탭이에요. 컨테이너드 탭은 항상 선택된 탭과 같은 레이어 토큰을 사용하는 탭 패널(배경 컨테이너)에 연결됩니다. 컨테이너드 탭은 레이어 위에 있기 때문에 탭 콘텐츠는 배경에서 두드러지고 높은 시각적 위계를 유지하는 경향이 있는 반면, 라인 탭은 콘텐츠에 더 쉽게 녹아듭니다. 레이어링 모델 때문에 콘텐츠가 특히 작은 영역에서 시각적으로 너무 복잡해지지 않도록 탭 안에서 사용하는 레이어를 주의하세요.

세로 탭 (Vertical tabs)

세로 탭은 왼쪽에 세로로 정렬된 탭으로, 사용자가 위에서 아래로 정보를 훑어볼 수 있게 해줘요. 이 세로 방향은 get started 패턴처럼 정보를 빠르게 둘러보고 접근하기에 좋아요. 내비게이션 대신 세로 탭을 사용하지 마세요.

탭 패널은 탭이 전환될 때 높이를 유지해야 콘텐츠 밖의 콘텐츠가 일관된 위치를 유지해요. 세로 탭리스트와 패널 높이는 콘텐츠가 가장 많은 탭에 의해 결정되어야 합니다. 탭 패널 안에서 과도한 스크롤을 피하려면 너무 많은 콘텐츠로 과부하시키지 마세요. 탭 패널이 허용하는 것보다 더 많은 공간이 필요하면 전체 페이지 레이아웃을 허용하는 라인 또는 컨테이너드 탭을 고려해 보세요. 탭리스트와 탭 패널은 모두 항상 같은 레이어 위에 있어요. 특대 및 대형 중단점에서 세로 탭리스트는 16-컬럼 그리드의 4개 컬럼에 걸칩니다. 중간 중단점에서는 세로 탭리스트가 2개 컬럼에 걸칩니다. 소형 중단점에서는 세로 탭리스트가 스크롤되는 컨테이너드 탭을 사용합니다.

수정자 (Modifiers)

아이콘이 있는 탭 (Tabs with icons)

라인 탭이나 컨테이너드 탭에서 아이콘을 사용할 수 있어요. 아이콘은 항상 탭의 오른쪽에 고정되며 라벨의 위, 아래, 왼쪽에는 나타나지 않습니다.

아이콘만 있는 탭 (Icon-only tabs)

라인 탭과 컨테이너드 탭 모두에서 아이콘만 있는 탭을 사용할 수 있어요. 아이콘은 쉽게 인식되고 전역적으로 받아들여져야 합니다. 아이콘만 있는 탭은 작고 정의된 공간과 컴포넌트에서 가장 잘 작동해요. 명확성을 더하려면 호버와 포커스 시 아이콘 설명에 항상 툴팁을 사용하세요.

보조 라벨 (Secondary labels)

그리드에 정렬되는 컨테이너드 탭은 보조 라벨을 허용해요. 라인 탭, 자동 너비 컨테이너드 탭, 세로 탭에는 보조 라벨을 사용하지 마세요.

제거 가능한 탭 (Dismissible tabs)

제거 가능한 탭은 사용자가 탭을 닫을 수 있게 해서 집중되고 관련성 높은 경험을 제공해요. 사용자는 전반적인 레이아웃이나 구조를 크게 바꾸지 않고도 향후 콘텐츠 추가나 수정을 수용하며 필요에 따라 컨테이너드 또는 라인 탭을 추가하거나 제거할 수 있습니다.

언제 사용할까요

• 사용자가 여러 섹션이나 모듈을 만들어야 하는 복잡한 인터페이스에서 유연성과 확장성을 제공하려면 제거 가능한 탭을 사용하세요.
• 사용자가 만들거나 선별한 콘텐츠에 제거 가능한 탭을 사용하세요.
• 특정 데이터 세트나 검색 결과에 집중하는 데 사용하세요.

언제 사용하지 말아야 할까요

• 탭에 자주 쓰거나 중요한 정보가 있을 때는 사용하지 마세요.
• 내비게이션으로 사용하지 마세요.

아이콘이 있는 제거 가능 탭 (Dismissible tabs with icons)

Carbon은 제거 가능 탭 안에 아이콘을 포함하는 옵션을 제공해요. 모든 탭에 아이콘이 포함될 때만 제거 가능 탭 안에서 아이콘을 사용하세요. 아이콘이 없는 제거 가능 탭과 아이콘이 있는 제거 가능 탭을 섞지 마세요.

탭 제거 (Dismissing a tab)

탭을 제거할 때, 탭 안에 담긴 정보에 더 이상 접근할 수 없게 되거나 검색하기 어려울 때 인라인 경고나 모달을 사용할 수 있어요. 경고, 특히 모달은 방해가 매우 크므로, 제거가 오류, 의도하지 않은 삭제, 저장되지 않은 변경을 일으킬 때에만 사용하세요.

새 탭 트리거 (Triggering a new tab)

새 탭을 트리거하는 방법은 다양해요. 트리거 버튼은 사용 사례에 따라 모양과 크기를 시각적으로 바꿀 수 있습니다. 트리거를 새 탭에 충분히 가깝게 유지해 추가 동작이 새 탭 항목과 연결되도록 하세요. 탭의 순서는 사용 사례에 따라 오름차순 또는 내림차순일 수 있지만 순차적이고 논리적인 순서를 유지하세요.

모든 탭이 제거 가능하다면, 탭이 사라진 후 사용자가 새 탭을 어떻게 트리거하는지 이해하는지 확인하세요. 컨테이너나 플레이스홀더 탭 같은 시각적 단서를 제공해 사용자가 트리거 버튼이 예상한 위치에 새 탭을 만든다는 것을 명확히 이해하게 하세요.

관련 (Related)

콘텐츠 스위처와 탭 (Content switcher versus tabs)

콘텐츠 스위처는 사용자가 비슷하거나 관련된 콘텐츠의 대체 뷰를 비교하고 전환할 수 있게 해줘요. 탭으로 그룹화된 콘텐츠는 같은 더 큰 맥락의 일부이지만 콘텐츠는 겹치지 않습니다.

프로그레스 인디케이터와 탭 (Progress indicator versus tabs)

프로그레스 인디케이터 콘텐츠는 논리적 진행으로 이동하며, 사용자가 과제 완료를 진행하도록 안내하는 다음 단계를 보여줘요. 탭은 사용자가 탐색할 수 있는 그룹으로 콘텐츠를 정리하며 진행형 과제를 지원하지 않습니다.

참고 자료 (References)

Jakob Nielson, Tabs, Used Right (Nielsen Norman Group, 2016)

더 알아보기 (Learn more)

탭은 관련 콘텐츠를 그룹화해 페이지를 떠나지 않고 뷰를 전환하게 해주는 컴포넌트예요. 라인·컨테이너드·세로라는 세 변형을 용도에 맞게 고르고, 같은 콘텐츠를 필터링할 때는 콘텐츠 스위처를, 선형 진행에는 프로그레스 인디케이터를 대신 고려하세요. 라벨은 한두 단어로 짧게 유지하고 중단점에 따라 그리드 인지 정렬과 스크롤 동작을 잘 활용하는 게 좋습니다.