Content switcher
Content switcher (콘텐츠 스위처)
콘텐츠 스위처는 사용자가 화면의 같은 공간 안에서 두 개 이상의 콘텐츠 섹션을 전환할 수 있게 해주는 컴포넌트예요. 비슷하거나 관련된 콘텐츠의 대체 뷰를 번갈아 보여주며, 한 번에 하나의 콘텐츠 섹션만 표시합니다.
출처: Content switcher
본문
개요 (Overview)
콘텐츠 스위처는 비슷하거나 관련된 콘텐츠의 대체 뷰 사이를 전환할 수 있게 해주며, 한 번에 하나의 콘텐츠 섹션만 보여줘요.
UI에서 콘텐츠 스위처 예시
언제 사용할까요 (When to use)
콘텐츠 스위처는 그리드 뷰와 테이블 뷰처럼 서로 다른 형식 사이를 사용자가 전환하도록 할 때 자주 사용돼요. 또한 큰 콘텐츠 그룹을 좁히거나 관련 콘텐츠를 정렬하는 데도 자주 쓰입니다. 예를 들어 메시징 도구는 콘텐츠 스위처를 사용해 메시지를 "모두(All)", "읽음(Read)", "안 읽음(Unread)"의 세 뷰로 나눌 수 있어요.
언제 사용하지 말아야 할까요 (When not to use)
구분되는 콘텐츠 영역 (Distinct content areas)
서브페이지처럼 구분되는 콘텐츠 영역 사이를 이동할 때는 콘텐츠 스위처 대신 탭(tabs)을 사용하세요. 탭은 파일 캐비닛의 섹션 메타포를 따르며, 두 탭에 같은 문서가 들어갈 수 없기 때문에 정보 위계에서 탭의 역할은 콘텐츠를 구분하는 것입니다.
콘텐츠 스위처는 탭과 함께 더 낮은 위계로 자주 사용되어, 해당 탭 콘텐츠 안에서 관련 콘텐츠를 정렬하는 데 쓰여요.
이진 동작 (Binary actions)
"예/아니오"나 "켜짐/꺼짐" 같은 이진 동작이나 선택에는 콘텐츠 스위처 대신 토글(toggle)을 사용하세요. 콘텐츠 스위처는 그리드와 목록 뷰 전환 같은 이진 뷰에 사용될 수 있지만, 이진 입력 컨트롤로는 사용하면 안 돼요.
포맷 (Formatting)
구조 (Anatomy)
콘텐츠 스위처의 구조
- 선택된 콘텐츠 탭(Selected content tab): 한 번에 하나의 콘텐츠 탭만 선택될 수 있으며 항상 하나는 선택되어 있어야 해요.
- 콘텐츠 탭(Content tab): 각 콘텐츠 뷰를 위한 선택 가능한 컨테이너.
- 라벨 텍스트(Label text): 콘텐츠 뷰를 설명하는 텍스트 또는 아이콘.
- 콘텐츠 뷰(Content view): 컴포넌트로 구성될 수 있는 영역으로, 보통 콘텐츠 스위처 바로 아래에 있어요. 선택에 따라 뷰가 바뀝니다.
크기 (Sizing)
높이 (Height)
콘텐츠 스위처에는 작은(32px), 중간(40px), 큰(48px) 세 가지 높이 크기가 있어요. 레이아웃의 밀도나 스위처의 중요도에 가장 잘 맞는 크기를 선택하세요.
- Default
- Icon
텍스트 너비 (Text width)
그룹의 각 콘텐츠 탭은 같은 너비여야 해요. 가장 긴 라벨 텍스트를 가진 콘텐츠 탭은 라벨 오른쪽에 최소 16px 간격이 있어야 합니다.
가장 긴 라벨 텍스트를 기준으로 콘텐츠 탭 너비를 정하세요.
각 콘텐츠 탭마다 다른 너비를 사용하지 마세요.
아이콘 너비 (Icon width)
그룹의 각 콘텐츠 탭은 같은 고정 너비여야 해요. 콘텐츠 탭 컨테이너를 서로 다른 비율로 늘리지 마세요.
높이가 항상 너비와 같도록 고정 너비 컨테이너를 유지하세요.
높이와 같지 않도록 다른 컨테이너 크기를 사용하거나 컨테이너 너비를 늘리지 마세요.
정렬 (Alignment)
콘텐츠 스위처는 그리드 컬럼에 정렬하거나 거터(gutter)에 걸치게 해서 타이포그래피 정렬을 만들 수 있어요. 어떤 정렬이 가장 좋은지 결정하려면 레이아웃과 위계 신호를 사용하세요. 콘텐츠 스위처는 포함된 공간에서 가장자리에 딱 붙으면 안 되며, 대신 컨테이너의 다른 콘텐츠와 왼쪽 정렬해야 해요.
스위처를 페이지의 다른 콘텐츠와 세로로 정렬하세요.
스위처를 컨테이너 가장자리에 플러시 정렬하지 마세요.
콘텐츠에 정렬하기 (Aligning to the content)
콘텐츠 중심 너비에서는 가장 긴 라벨 텍스트를 가진 콘텐츠 탭이 라벨 오른쪽에 16px 간격을 두고, 다른 모든 탭의 너비가 그 가장 넓은 탭과 일치해야 해요.
예시는 콘텐츠 중심 스위처의 텍스트가 그리드와 정렬되지 않음을 보여줘요.
그리드에 정렬하기 (Aligning to the grid)
그리드 인지 너비에서는 콘텐츠 스위처가 일련의 컬럼을 가로지르며, 각 탭의 크기가 같아요. 배치에 따라 첫 번째 탭 또는 탭의 라벨은 사용 중인 첫 번째 컬럼과 정렬되어야 하며, 그룹의 마지막 탭은 항상 컬럼의 가장자리에서 끝나야 해요. 사이의 탭들은 그에 따라 흐르며 그리드와 정렬될 수도 있고 아닐 수도 있지만, 항상 같은 너비를 유지합니다.
예시는 그리드 인지 스위처의 텍스트가 그리드에 정렬됨을 보여줘요.
배치 (Placement)
콘텐츠 스위처가 제어하는 섹션에 대해 명확한 위계를 만들려면 콘텐츠 영역 위에 스위처를 배치하세요. 콘텐츠 영역의 왼쪽이나 오른쪽에 정렬할 수 있지만, 콘텐츠 공간의 중앙에 배치해서는 안 됩니다.
콘텐츠 (Content)
주요 요소 (Main elements)
라벨 텍스트 (Label text)
- 간결하고 구체적으로, 라벨 텍스트는 두세 단어로 제한하세요.
- 라벨 텍스트는 사용자가 보게 될 뷰와 그 뷰에 담긴 콘텐츠를 전달해야 해요.
- 라벨 텍스트는 가능한 한 적은 문자 수의 명사 또는 명사구여야 해요. 라벨을 액션으로 표현하거나 액션 버튼으로 오인될 수 있는 긴 문자열로 표현하는 것은 피하세요.
라벨을 명사 또는 명사구로 표현하세요.
라벨을 액션으로 표현하지 마세요.
넘침 콘텐츠 (Overflow content)
콘텐츠 탭의 라벨 텍스트가 너무 길면 생략 부호(ellipsis)를 추가하고 브라우저 기반 툴팁으로 전체 문자열을 보여주세요. 라벨이 컨트롤 탭 안에 맞기 너무 길다면 아이콘 수정자를 사용하는 것을 고려하세요.
콘텐츠 스위처 라벨 텍스트 잘라내기
추가 가이드 (Further guidance)
더 자세한 콘텐츠 지침은 Carbon의 콘텐츠 가이드라인을 참고하세요.
동작 (Behaviors)
상태 (States)
콘텐츠 스위처에는 선택 안 됨(unselected)과 선택됨(selected)이라는 두 가지 주요 활성 상태가 있어요. 다른 인터랙션 상태로는 호버, 포커스, 비활성(disabled)이 있습니다. 상태에 대해 더 알아보려면 스타일(Style) 탭을 참고하세요.
| 상태 (State) | 언제 사용하나요 (When to use) |
|---|---|
| Unselected | 첫 번째 콘텐츠 탭이 자동으로 선택될 때. |
| Selected | 첫 번째 이후의 콘텐츠 탭이 선택되지 않았을 때. |
| Hover | 사용자가 선택되지 않은 콘텐츠 탭 위에 커서를 올렸을 때. |
| Focus | 사용자가 오른쪽/왼쪽 화살표를 누르거나 콘텐츠 탭을 클릭하면 포커스가 되어, 대상 콘텐츠 탭으로 성공적으로 이동했음을 나타낸다. |
| Disabled | 사용자가 전체 콘텐츠 스위처 또는 콘텐츠 탭과 상호작용할 수 없을 때. 전체 스위처나 콘텐츠 탭이 일시적으로 비활성화되거나 사용할 수 없을 수 있다. |
인터랙션 (Interactions)
마우스 (Mouse)
사용자는 콘텐츠 탭을 클릭해 콘텐츠 스위처 탭을 활성화하고 사이를 이동할 수 있어요.
키보드 (Keyboard)
사용자는 tab을 눌러 콘텐츠 스위처를 활성화한 다음 left 또는 right 화살표를 눌러 콘텐츠 스위처 탭 사이를 이동할 수 있어요.
사용자는 선택된 콘텐츠 탭의 포커스 시 선택을 자동으로 변경하도록 하거나, 선택되지 않은 콘텐츠 탭의 포커스 상태를 탭 사이에서 수동으로 변경하도록 선택할 수 있어요. 추가 키보드 인터랙션은 접근성(Accessibility) 탭을 참고하세요.
반응형 동작 (Responsive behavior)
아이콘 콘텐츠 스위처는 컴팩트하고 화면 공간을 많이 차지하지 않으므로 여러 화면 크기에서 잘 동작해요. 필요한 곳에서는 아이콘 콘텐츠 스위처를 콘텐츠 스위처의 반응형 대체물로 사용할 수도 있습니다.
예시는 더 작은 화면 크기에서 텍스트 콘텐츠 스위처가 아이콘 콘텐츠 스위처로 바뀌는 것을 보여줘요.
기본 선택 (Default selection)
기본 뷰는 보통 하나의 탭, 주로 첫 번째 탭을 미리 선택해요. 한 번에 하나의 콘텐츠 탭만 선택되어 그 콘텐츠를 표시합니다. 사용자가 새 항목을 선택하면 이전 탭은 자동으로 선택 해제되고 새 항목이 선택됩니다. 스위처의 첫 번째 콘텐츠 탭은 사용에 따라 결정되어 일관되게 기본 선택으로 제공되어야 해요.
클릭 가능 영역 (Clickable areas)
콘텐츠 탭은 컨테이너 안 어디든 클릭 가능해요.
텍스트·아이콘 콘텐츠 스위처와 그 클릭 가능 영역
수정자 (Modifiers)
고대비·저대비 (High and low contrast)
콘텐츠 스위처는 기본적으로 고대비(high contrast) 스타일로 설정돼요. 그러나 Carbon은 저대비(low contrast) 스타일도 지원합니다. 고대비 콘텐츠 스위처는 페이지 상단이나 페이지 헤더 안처럼 페이지 위계의 더 높은 레벨 배치에 가장 적합해요. 확신이 없으면 고대비 스타일을 사용하세요.
고대비 콘텐츠 스위처(위); 저대비 콘텐츠 스위처(아래)
저대비 콘텐츠 스위처는 카드, 모달, 그리고 컴포넌트가 기본·보조 버튼 근처에 배치될 때처럼 시각적으로 덜 방해가 되어야 하는 곳에서 사용할 수 있어요.
UI에서 저대비 콘텐츠 스위처 예시
아이콘이 있는 콘텐츠 스위처 (Content switcher with icons)
비슷하거나 관련된 콘텐츠의 대체 뷰를 나타내기 위해 라벨 텍스트 대신 아이콘을 사용하세요. 아이콘 콘텐츠 스위처는 공간이 제한적이거나, 아이콘이 섹션을 적절히 설명할 수 있을 때(예: 목록 뷰 대 카드 뷰) 자주 사용돼요.
일관된 아이콘 또는 텍스트 콘텐츠 스위처 섹션을 사용하세요.
아이콘과 텍스트 콘텐츠 스위처 섹션을 섞지 마세요.
관련 컴포넌트 (Related)
탭 (Tabs)
탭은 관련 콘텐츠를 정리하는 데 사용돼요. 같은 컨텍스트 안에 나타나는 정보 그룹 사이를 사용자가 이동할 수 있게 해줍니다. 자세한 지침은 Carbon의 탭을 참고하세요.
토글 (Toggle)
토글은 두 가지 가능한 상태 사이를 빠르게 전환하는 데 사용돼요. "켜짐/꺼짐" 스위치에 주로 쓰입니다. 자세한 지침은 Carbon의 토글을 참고하세요.
더 알아보기 (Learn more)
콘텐츠 스위처는 같은 공간 안에서 관련 콘텐츠의 대체 뷰를 전환할 때 효과적이에요. 라벨은 간결한 명사구로 쓰고, 구분되는 콘텐츠 영역에는 탭을, 이진 동작에는 토글을 사용하세요. 아이콘·텍스트 변형과 고대비·저대비 스타일을 상황에 맞게 선택하면 됩니다.