UI 가이드요소
세그먼티드 컨트롤Segmented Control
세그먼티드 컨트롤은 2~5개의 배타적 선택지를 한 줄로 붙은 버튼 그룹으로 보여주고 그중 하나만 선택되게 하는 UI입니다. 같은 데이터를 다른 방식으로 보는 전환(목록/그리드, 주간/월간)에 씁니다.
- 이렇게 생겼습니다
- 알약 모양 안에서 선택 표시가 미끄러지는 붙은 버튼 묶음.
- 프롬프트에 쓰는 이름
- Segmented Control · 다른 이름: 세그먼트 버튼, Segmented Button, 토글 그룹
버튼들이 조각(segment)으로 나뉜 하나의 컨트롤이라는 뜻입니다. iOS 설정 화면에서 자주 보이는, 알약 모양 안에서 선택 표시가 미끄러지는 그 UI입니다.
언제 쓰나요
서로 배타적이고, 개수가 적고, 즉시 적용되는 선택에 씁니다. 목록/그리드 보기 전환, 주간/월간/연간 차트 전환 같은 것입니다. 선택지가 6개를 넘으면 드롭다운으로, 페이지 자체가 바뀌는 이동이면 탭으로 가는 것이 맞습니다.
AI에게 시키기
차트 상단에 기간 선택용 세그먼티드 컨트롤을 만들어줘.
- 옵션: 주간 / 월간 / 연간 (항상 하나만 선택됨)
- 알약형 컨테이너 안에서 선택 인디케이터가 슬라이드 애니메이션으로 이동
- 선택 즉시 차트 데이터 갱신 (별도 적용 버튼 없음)
"버튼 세 개 나란히 놓아줘"라고 하면 독립된 버튼 세 개가 나옵니다. 하나만 선택된다는 규칙과 인디케이터가 움직인다는 말이 들어가야 이 모양이 됩니다.
혼동 주의
- 탭(Tabs): 화면·페이지 영역 자체를 전환합니다. 세그먼티드 컨트롤은 같은 화면 안의 보기·옵션 전환입니다.
- 라디오 버튼(Radio): 같은 "하나만 선택" 의미지만 폼 제출용입니다. 즉시 적용되는 전환에는 세그먼티드 컨트롤이 자연스럽습니다.
- 토글·스위치(Switch): 켬·끔 두 상태 전용입니다.