세그먼티드 컨트롤 UI 디자인: 선택과 결과를 명확하게

세그먼티드 컨트롤은 서로 관련된 소수의 선택지를 한눈에 보여 주고 현재 선택을 표시합니다. 차트의 조회 기간처럼 같은 맥락 안에서 값을 자주 전환할 때 적합합니다. 단일 선택 컨트롤에서는 다른 세그먼트를 누르면 이전 선택이 바뀌어야 합니다. 예상치 못하게 다른 페이지로 이동하거나 폼을 제출해서는 안 됩니다.

매장 매출 차트에 일, 주, 월 선택지가 있다고 생각해 보겠습니다. 차트는 같은 자리에 있고 조회 기간만 바뀝니다. UI 디자인 작업 공간에서 이 관계를 함께 설계하면 버튼 세 개의 외형만 다듬는 대신 날짜, 합계, 차트에 어떤 영향을 주는지 판단할 수 있습니다.

짧고 명확한 선택에 사용하기

중요한 것은 선택지 사이의 관계입니다. 일, 주, 월은 모두 ‘이 차트에 어느 기간을 표시할까?’라는 같은 질문에 답합니다. 내보내기, 설정, 새로고침은 서로 다른 작업입니다. 버튼이 한 줄에 들어간다는 이유만으로 세그먼트로 묶어서는 안 됩니다.

Fluent의 iOS 지침은 세그먼티드 컨트롤을 하나의 맥락에서 서로 배타적인 선택지를 제공하는 요소로 설명합니다. 다만 플랫폼 전체의 관례는 더 넓습니다. Apple 지침에는 macOS의 다중 선택이나 일시적인 동작을 실행하는 컨트롤도 포함됩니다. 여기서는 하나의 조회 기간을 선택하는 설계를 다룹니다.

둥근 컨테이너 모양이 동작을 결정하지는 않습니다. 매출, 재고, 고객처럼 독립적인 패널을 전환한다면 탭 패턴을 고려합니다. 저장된 보고 기간이 많다면 레이블이 있는 드롭다운이나 검색 가능한 선택기가 더 편리할 수 있습니다. 각 선택지에 설명이 필요하다면 라디오 버튼을 보여 주는 편이 좋습니다.

일·주·월의 범위를 구체적으로 정하기

짧은 레이블에는 중요한 모호함이 숨어 있을 수 있습니다. ‘주’는 이번 달력 주를 뜻할 수도 있고, 최근 7일을 뜻할 수도 있습니다. 1년 치 데이터를 주 단위로 묶는다는 의미일 수도 있습니다. 선택 상태를 그리기 전에 제품에 필요한 해석을 결정해야 합니다.

이 예제의 보고 기준일은 5월 14일입니다. 세 선택지는 매장의 보고 시간대를 기준으로 달력상의 기간을 선택합니다. 선택을 바꾸면 날짜 설명과 차트를 함께 업데이트합니다.

선택한 세그먼트	화면에 표시할 날짜	차트 집계 단위
일	5월 14일	시간별 매출
주	5월 11~17일	일별 매출
월	5월 1~31일	일별 매출

날짜 설명을 따로 두면 모든 세그먼트의 레이블을 늘리지 않아도 기간이 명확해집니다. 서로 다른 시간대에서 일하는 사용자가 있다면 차트 옆에 ‘보고 시간 기준: 런던’을 표시합니다. 한 주가 시작되는 요일도 의도적으로 정해야 합니다. 레이블만 번역한다고 지역의 달력 관례까지 정해지는 것은 아닙니다.

5월 14일이 아직 끝나지 않았으므로 이후 시간과 날짜에는 결과가 없습니다. 미래 구간은 매출 0으로 그리지 않고 비워 둡니다. 합계에는 ‘현재까지의 매출’이라고 표시해 진행 중인 한 달을 완료된 기간으로 오해하지 않게 합니다. 선택 표시가 슬라이드되는지 서서히 나타나는지보다 이런 구분이 더 중요합니다.

기간 선택과 설정 저장 구분하기

차트에서는 선택이 즉시 반영되는 편이 자연스럽습니다. 일별과 주별을 비교하는 사람이 ‘주’를 선택한 뒤 다시 적용 버튼까지 누를 필요는 없습니다. 컨트롤은 차트 제목 가까이에 두고 차트와 관련 요약만 업데이트합니다. 매장, 통화, 별도로 설정한 상품 필터는 그대로 유지합니다.

반면 보고서 설정 폼에 같은 모양의 컨트롤이 있다면 나중에 제출할 값을 입력받는 용도일 수 있습니다. ‘월’을 선택하면 작성 중인 보고 기간만 바뀌고, 폼의 저장 버튼을 눌러야 확정됩니다. 필드 레이블을 ‘기본 보고 기간’으로 쓰고 기존 폼의 저장 방식을 유지합니다. 다른 필드는 저장되지 않은 상태인데 이 필드 하나만 조용히 저장해서는 안 됩니다.

현재 선택된 값을 다시 누르면 선택을 유지합니다. ‘주’를 반복해서 누르는 것은 조회 기간을 해제하거나 요청을 새로 보내라는 뜻이 아닙니다. 데이터를 새로 불러올 필요가 있다면 이름이 분명한 별도 작업을 제공합니다. 그래야 하나의 세그먼트가 두 가지 역할을 맡지 않고 선택 동작을 예측할 수 있습니다.

선택과 키보드 포커스를 따로 보여 주기

선택한 세그먼트에는 지속적으로 보이는 표시가 필요합니다. 배경색을 채우고 레이블 대비를 충분히 확보하는 방법이 있습니다. 키보드 포커스에는 별도의 테두리를 사용합니다. 마우스 오버 피드백을 줄 수는 있지만, 선택 표시를 대체하거나 선택하지 않은 항목을 선택된 것처럼 보이게 해서는 안 됩니다.

이 단일 선택 값을 웹에서 구현한다면 개발자와 네이티브 라디오 입력 사용을 검토합니다. WAI-ARIA 라디오 그룹 패턴은 이름이 있는 그룹에서 최대 하나의 항목을 선택하는 방식을 설명합니다. 도구 모음 안에 있지 않은 일반적인 동작에서는 화살표 키로 다른 항목으로 이동하면서 선택하고, Tab 키로 그룹에 들어가거나 나옵니다. 알약 모양의 스타일을 얻으려고 탭 구현을 그대로 가져오면 안 됩니다.

디자인에는 ‘주’가 선택되고 포커스도 있는 상태와, ‘주’가 선택된 채 포커스만 그룹 밖으로 이동한 상태를 함께 보여 줍니다. 두 경우 모두 선택 배경은 남아 있어야 합니다. 그룹의 접근 가능한 이름은 ‘매출 차트 조회 기간’으로 정할 수 있습니다. 눈에 보이는 모든 레이블 안에 ‘선택됨’을 반복할 필요는 없습니다. 프로토타입으로 의도한 반응을 보여 주되, 키보드와 보조 기술 동작은 실제 구현된 컨트롤에서 확인해야 합니다.

선택한 기간과 실제 차트 결과 일치시키기

일별 차트를 보던 사용자가 ‘월’을 선택했다고 가정해 보겠습니다. 월을 즉시 선택 상태로 바꾸고 날짜를 5월 1~31일로 변경한 뒤, 차트 영역에 ‘월별 매출을 불러오는 중’을 표시합니다. 해당 영역의 높이는 유지합니다. 월이라는 제목 아래 일별 수치를 남겨 두면 그럴듯하지만 잘못된 결과를 보여 주게 됩니다.

월별 조회가 끝나기 전에 사용자가 ‘주’를 고르면 현재 요청 기간은 주가 됩니다. 늦게 도착한 월별 응답이 주별 차트를 덮어써서는 안 됩니다. 전달할 규칙은 간단합니다. 현재 선택한 기간에 해당하는 결과만 표시합니다. 지난 요청을 취소할지, 도착한 결과를 무시할지는 구현에서 결정할 수 있습니다.

요청에 실패하면 사용자가 원한 월 선택을 유지하고 차트 안에 ‘월별 매출을 불러오지 못했습니다’와 다시 시도 버튼을 보여 줍니다. 다른 기간 선택지도 계속 사용할 수 있어야 합니다. 요청은 성공했지만 매출이 없다면 ‘이 기간에는 매출이 없습니다’를 표시합니다. 조회 실패와 실제 매출이 0인 기간에 같은 빈 차트 메시지를 사용해서는 안 됩니다.

좁은 화면에서도 레이블을 읽을 수 있게 하기

일, 주, 월은 보통 같은 너비의 세그먼트에 무리 없이 들어갑니다. 기기 전체 너비를 기준으로 보지 말고 실제 차트 카드의 내부 여백까지 포함해 확인합니다. 날짜 설명과 선택기가 공간을 다툰다면 날짜를 별도의 줄에 둡니다.

레이아웃을 확정하기 전에 실제 번역 문구와 확대된 글자를 넣어 봅니다. 의미 있는 단어를 줄이기 전에 불필요한 아이콘과 과도한 좌우 여백을 줄입니다. 영문에서 ‘D / W / M’처럼 축약하면 공간은 절약되지만 사용자가 뜻을 해석해야 합니다. 데스크톱에서 예쁜 비율을 유지하려고 글자나 터치 영역을 줄이지 않습니다.

나중에 분기, 연도, 사용자 지정, 여러 사전 설정이 추가된다면 컴포넌트를 다시 선택합니다. 선택지가 더 이상 한 줄에 들어가지 않을 때는 이름이 있는 기간 선택기가 명확한 문구를 유지하는 데 도움이 됩니다. 하나의 세그먼티드 컨트롤을 두 줄로 나누면 그룹 관계와 선택 상태를 읽기 어려워집니다. 작은 화면의 표시 방식을 바꾸더라도 각 기간의 의미는 유지해야 합니다.

Pixso에서 차트와 기간 선택을 함께 설계하기

Pixso에서 제목, 날짜 설명, 합계, 세 개의 세그먼트가 있는 매출 차트 카드 하나를 만듭니다. Auto Layout으로 간격과 레이블 길이 변화를 살펴보고 재사용 가능한 컴포넌트로 세그먼트 구조를 일관되게 유지합니다. 예제의 실제 날짜를 계속 보여 줍니다. ‘옵션 1’이라고 쓰면 해결해야 할 기간의 모호함이 드러나지 않습니다.

주별 화면 옆에 월별 로딩 화면과 조회를 마친 월별 화면을 배치합니다. 포커스가 있는 주 세그먼트도 추가해 일반적인 선택 상태와 테두리를 비교할 수 있게 합니다. 프레임마다 컨트롤 위치를 유지하면 페이지가 바뀌는 것이 아니라 기간만 바뀐다는 점이 전달됩니다.

‘오늘 매출과 이번 주 매출을 비교한 다음 월별 매출을 확인한다’는 실제 사용 순서를 검토합니다. 이어서 응답이 느린 경우와 요청이 실패한 경우도 살펴봅니다. 각 단계에서 차트가 어느 날짜를 나타내는지 검토자에게 물어봅니다. 선택 상태와 날짜 설명만으로 답할 수 있다면 컴포넌트가 제 역할을 하고 있는 것입니다. 그래프 모양으로 추측해야 한다면 애니메이션을 다듬기 전에 그 관계부터 수정합니다.

Pixso에서 차트 기간 선택기 설계하기 →