세그먼트 컨트롤 시스템

세그먼트 컨트롤 시스템은(는) 무엇을 하나요?

목적

세그먼트 컨트롤 시스템은 컴팩트하고 상호 배타적인 선택기(버튼 그룹, 슬라이딩 토글 또는 세그먼트 버튼이라고도 함)를 위한 디자인 방법론을 제공합니다. 탐색 메뉴나 콘텐츠 패널 탭과 달리 세그먼트 컨트롤은 단일 컨텍스트나 폼 내에서 인라인 수정자 역할을 합니다. 사용자는 디스플레이 형식을 즉시 변경하거나, 단일 데이터셋을 필터링하거나, 매우 제한된 공간 내에서 입력 옵션을 선택할 수 있습니다.

체계적인 접근 방식은 이러한 컨트롤이 응집력 있는 시각적 관계, 명확한 상호 작용 어포던스, 원활한 레이아웃 확장, 그리고 일반 버튼이나 탭 탐색으로 오인되지 않도록 하는 적절한 의미론적 접근성 패턴을 갖추도록 보장합니다.

사용 사례

• 뷰 전환: 동일한 콘텐츠의 디스플레이 프레젠테이션 전환 (예: "그리드 vs. 목록 vs. 지도" 또는 "보드 vs. 캘린더").
• 가격 및 청구 토글: 가격 표시를 직접 변경하는 청구 빈도 선택 (예: "월별 vs. 연간").
• 마이크로 필터링 / 하위 세분화: 특정 하위 카테고리 내에서 활성 목록 필터링 (예: 메시지의 "전체 vs. 읽지 않음 vs. 별표").
• 인라인 옵션 선택: 폼에서 부피가 큰 드롭다운 선택 메뉴를 2~5개의 우선 순위가 높은 선택 항목으로 대체 (예: "소형 vs. 중형 vs. 대형").
• 대화형 상태 스위처: 라이브 차트에서 활성 메트릭 매개변수 수정 (예: 시간대 "7일 vs. 30일 vs. 1년").

사용하지 말아야 할 경우

• 전체 페이지 탐색: 항목을 클릭하면 페이지 URL이 변경되거나 현재 보기 컨텍스트에서 사용자가 이동하는 경우 site-navigation-system을 사용하세요.
• 대형 콘텐츠 패널 전환: 옵션을 전환할 때 설정 패널이나 문서 탭과 같은 복잡한 레이아웃의 완전히 다른 콘텐츠 블록이 표시되는 경우 tab-ui-system을 사용하세요.
• 높은 옵션 개수: 5개 이상의 옵션이 있는 경우 시각적 혼잡과 가로 텍스트 오버플로를 방지하기 위해 드롭다운 선택 또는 필터 서랍을 사용하세요.
• 다중 선택 설정: 사용자가 동시에 두 개 이상의 활성 옵션을 선택할 수 있는 경우 그룹화된 체크박스 또는 태그(badge-and-tag-system)를 사용하세요.
• 이진 동적 토글: "알림 활성화"와 같이 즉시 백그라운드 프로세스를 트리거하는 단일 켜기/끄기 설정의 경우 표준 토글 스위치(accessible-switch-implementation)를 사용하세요.

입력

1. 옵션 인벤토리: 상호 배타적인 레이블, 아이콘 또는 값의 목록 (일반적으로 2~5개 항목).
2. 컨트롤 범위: 컨트롤이 폼 입력, 레이아웃 뷰 수정자 또는 메트릭 스위처 중 어떤 역할을 하는지.
3. 컨테이너 제약 조건: 정확한 너비 및 레이아웃 환경 (예: 검색창 옆 인라인, 가격 카드 중앙, 모바일 전체 너비).
4. 스타일 토큰: 타이포그래피 스케일, 간격 변수(fluid-spacing-system), 상호 작용 상태(interactive-state-system) 및 색상 토큰.

출력

1. 컨트롤 해부도 사양: 트랙(배경 컨테이너), 세그먼트(개별 버튼) 및 활성 표시기(슬라이딩 또는 강조 표시된 배경)의 시각적 정의.
2. 행동 ARIA 매핑: 올바른 ARIA 역할(role="radiogroup" vs. role="tablist") 및 키보드 탐색 규칙 선택.
3. 상태 전이 매트릭스: 기본, 호버, 활성/선택됨, 포커스 및 비활성화됨 상태에 대한 스타일 정의.
4. 반응형 흐름 규칙: 가로 확장, 전체 너비 유동적 동작 및 모바일 재배치 또는 <select>로의 폴백에 대한 사양.

워크플로우

1. 의미론적 의도 파악

컨트롤이 값을 수정하는지 또는 디스플레이 뷰를 수정하는지 확인합니다.

• 폼 입력 또는 마이크로 필터: 의미론적으로 라디오 그룹 역할을 합니다. 저장되거나 제출 시 전송되는 값을 변경하거나 인라인 목록을 즉시 다시 필터링합니다.
• 뷰 컨트롤러: 의미론적으로 탭 목록 역할을 합니다. 동일한 컨테이너 내에서 활성 표시 패널 또는 프레젠테이션을 전환합니다.

2. 시각적 해부도 설계

고도로 다듬어지고 통일된 시각적 구성 요소를 구축합니다. 디자인은 세 가지 핵심 레이어로 구성됩니다.

• 트랙: 미묘한 배경색(예: 대비가 낮은 회색), 작은 패딩(보통 2px~4px) 및 둥근 모서리(반원형 또는 알약형)를 가진 단일 가로 컨테이너입니다.
• 세그먼트: 트랙 내부에 나란히 배치된 버튼입니다. 동일한 너비를 공유하거나(균등 정렬) 일관된 패딩으로 콘텐츠 너비에 맞게 조정되어야 합니다.
• 활성 표시기: 텍스트 아래에 위치하여 시각적으로 들어 올리는, 뚜렷한 배경(종종 흰색 또는 기본 테마 색상)과 미묘한 그림자(elevation-and-depth-system)가 있는 슬라이딩 물리적 카드 또는 강조 표시입니다.

3. 상태 및 모션 동작 설정

모든 상호 작용 단계에 대해 뚜렷한 시각적 피드백을 구성합니다.

• 기본 상태: 비활성 텍스트는 충분히 높은 대비비(최소 4.5:1)의 보조 중립 색상을 사용합니다.
• 호버 상태: 클릭 가능성을 나타내기 위해 대상 세그먼트에 미묘한 호버 배경 강조 표시를 적용합니다.
• 선택됨 상태: 텍스트는 기본/굵은 스타일로 변경되고 활성 표시기가 그 뒤로 슬라이드됩니다.
• 포커스 상태: 키보드로 탐색할 때 활성 세그먼트 주위에 뚜렷하고 대비가 높은 포커스 윤곽선을 그립니다. 포커스 표시기는 트랙 경계 밖으로 잘려나가지 않아야 합니다.
• 비활성화됨 상태: 흐리게 표시(일반적으로 40%)되고 커서 포인터가 비활성화됩니다.

4. 코드 및 핸드오프 주석

구현을 위한 구조적 요구 사항에 주석을 답니다.

• 균등 너비 분배: 적절한 경우 세그먼트를 균등하게 분배하기 위해 플렉스박스 정렬(flex: 1 1 0%)을 지정합니다.
• 슬라이딩 표시기 전환: 슬라이딩 활성 표시기 카드에 대한 CSS 전환 규칙(transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1))을 지정하여 left/width 속성을 직접 변경하는 대신 하드웨어 가속 속성(transform 및 opacity)을 활용하여 누적 레이아웃 이동(CLS)을 트리거하지 않도록 합니다.

5. 반응형 동작 계획

작은 뷰포트에서 세그먼트 컨트롤이 축소되는 방식을 정의합니다.

• 유동적 균등 정렬: 모바일 화면에서 트랙과 세그먼트를 100% 너비로 확장하여 전체 너비 하단 막대 또는 헤더 구성 요소 역할을 하도록 합니다.
• 레이블 잘림 및 최소 너비: 세그먼트 내에서 텍스트 줄 바꿈으로 인해 여러 줄이 쌓이지 않도록 엄격한 최소 너비를 적용합니다.
• 오버플로 드롭다운 폴백: 옵션이 시각적 손상 없이 320px 뷰포트에 맞지 않는 경우 반응형 CSS 미디어 쿼리를 사용하여 세그먼트 컨트롤 레이아웃을 기본 <select> 드롭다운으로 전환합니다.

결정 규칙

라디오 그룹 vs. 탭 목록 패턴

기준	라디오 그룹 패턴 사용 (role="radiogroup")	탭 목록 패턴 사용 (role="tablist")
주요 기능	데이터 속성을 편집하거나 목록을 인라인으로 필터링합니다.	구별되는 레이아웃 뷰 또는 패널 간을 전환합니다.
폼 통합	<form> 내부에 통합되거나 입력으로 작동합니다.	표준 폼 외부에 있으며 레이아웃 보기 모드를 관리합니다.
ARIA 역할	부모: role="radiogroup", 자식: role="radio" (aria-checked="true/false" 사용).	부모: role="tablist", 자식: role="tab" (aria-selected="true/false" 사용).
키보드 탐색	화살표 키가 즉시 선택을 이동합니다. Tab 키는 그룹을 종료합니다.	화살표 키가 즉시 포커스를 이동합니다. 스페이스바/Enter 키가 활성화합니다.

시각적 레이아웃: 고정 균등 너비 vs. 자동 유동 너비

• 고정 균등 너비: 짧고 균일한 레이블(예: "7일", "30일", "90일" 또는 "그리드", "목록")에 가장 적합합니다. 모든 세그먼트의 너비가 동일하여 시각적 대칭을 제공합니다.
• 자동 유동 너비: 레이블의 문자 길이가 크게 다른 경우(예: "모든 항목" vs. "승인 보류 중")에 가장 적합합니다. 각 세그먼트는 일관된 패딩(예: 12px 16px)으로 텍스트를 감쌉니다.

제약 조건

• 대비비: 활성 및 비활성 텍스트 세그먼트 모두 배경에 대해 WCAG AA 최소 대비비 4.5:1을 충족해야 합니다.
• 터치 대상 크기: 모든 개별 세그먼트는 최소 24x24px의 상호 작용 영역(WCAG 2.2 SC 2.5.8)을 제공해야 하지만, 모바일에서 원활한 손가락 탭을 위해 최소 높이 40px~44px를 적극 권장합니다.
• 포커스 표시기: 현재 선택된 세그먼트 또는 활성 포커스 대상에 키보드 포커스가 명확하게 표시되어야 합니다. 포커스 링이 인접 세그먼트 뒤에 잘리거나 숨겨지지 않도록 하세요.
• 텍스트 줄 바꿈 금지: 세그먼트 텍스트는 한 줄이어야 하며 버튼 내에서 여러 줄로 줄 바꿈되어서는 안 됩니다. 이는 수직 리듬을 깨고 시각적 겹침을 유발합니다.
• 동작 감소: 애니메이션 슬라이딩 표시기가 구현된 경우 @media (prefers-reduced-motion: reduce)를 통해 사용자 OS 기본 설정을 존중하여 슬라이딩 효과를 비활성화하고 대신 즉시 불투명도 또는 윤곽선 강조 표시로 전환합니다.

일반적인 실패 패턴

• 레이아웃 이동(CLS): 활성 세그먼트를 변경하면 활성 버튼의 너비가 변경되어 인접 요소가 왼쪽이나 오른쪽으로 튀게 됩니다.
• 탐색 오류: 주요 글로벌 페이지 탐색을 세그먼트 컨트롤처럼 스타일링하여 사용자가 페이지 내에서 즉각적인 콘텐츠 변경을 기대하게 하여 혼란을 줍니다.
• 선택됨 어포던스 누락: 미묘한 글꼴 두께 변경이나 낮은 대비의 표시기만 사용하여 저시력 사용자가 어떤 옵션이 선택되었는지 식별하기 어렵게 만듭니다.
• 키보드 트랩: 컨트롤 내부에 표준 키보드 화살표 키 바인딩을 추가하지 않아 키보드 전용 사용자가 모든 옵션을 개별적으로 Tab 키로 이동해야 합니다.
• 모바일 압착: 4-세그먼트 컨트롤이 모바일에서 레이블이 겹치거나, 읽을 수 없을 정도로 잘리거나, 트랙 경계 밖으로 잘려나갈 때까지 축소되도록 허용합니다.

검증 기준

• 컨트롤의 기능(라디오 그룹 vs. 탭 목록)에 따라 명확한 의미론적 ARIA 패턴이 선택되었습니다.
• 개별 세그먼트가 최소 24x24px 터치 대상 크기를 충족합니다(모바일에서는 44px 선호).
• 비활성 및 활성 텍스트 대비가 WCAG AA를 준수합니다(>= 4.5:1 비율).
• 활성 표시기는 슬라이딩 전환 중 누적 레이아웃 이동(CLS)을 방지하기 위해 하드웨어 가속 CSS 속성(transform)을 사용합니다.
• 반응형 동작이 정의되었습니다(유동적 균등 정렬, 최소 너비 또는 드롭다운 선택 폴백).
• 세그먼트 내부의 텍스트는 세로 줄 바꿈이나 잘림 없이 한 줄로 유지됩니다.
• @media (prefers-reduced-motion: reduce) 전환 폴백이 명시적으로 처리되었습니다.