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