단일선택·복수선택·긴 목록을 구분하는 옵션 설계

컨트롤을 고르기 전에 몇 개를 선택해야 하는지 한 문장으로 씁니다

옵션 영역이 복잡한 첫 번째 이유는 선택지 수가 아니라 선택 규칙이 보이지 않기 때문입니다. 사용자가 반드시 한 개만 골라야 하는지, 필요한 항목을 여러 개 고를 수 있는지, 아무것도 선택하지 않아도 되는지 먼저 정합니다. 이 규칙을 ‘옵션을 선택하세요’라는 포괄적인 문장으로 숨기지 않습니다. ‘색상 1개 선택’, ‘추가 구성품은 여러 개 선택 가능’, ‘배송 지역 선택’처럼 선택 개수와 대상이 보이는 레이블을 작성합니다.참고: GOV.UK Design System · Radios · GOV.UK Design System · Select

이 글은 실제 상품이나 고객 데이터를 사용하지 않습니다. 자체 예제로 본체 색상 3개 중 1개, 추가 구성 2종 중 필요한 만큼, 배송 지역 12개 중 1개를 고르는 세 질문을 사용합니다. 색상별 판매량, 가장 인기 있는 구성, 추천 전환율을 만들지 않습니다. 실제 페이지에서는 판매 가능한 재고, 옵션 조합, 가격 데이터, 배송 정책을 같은 시점의 데이터로 확인해야 합니다. 선택 규칙과 시스템 제약이 다르면 화면 문구가 아니라 상품 데이터를 먼저 수정합니다.

radio·checkbox·select는 화면 크기가 아니라 선택 의미로 구분합니다

GOV.UK 디자인 시스템의 라디오 지침은 목록에서 하나만 선택할 때 라디오를 사용하고, 여러 개를 선택할 수 있으면 체크박스를 사용하라고 안내합니다. 라디오와 체크박스의 모양 차이만으로 선택 개수를 알 것이라고 가정하지 말고 필요한 경우 ‘한 개 선택’ 같은 힌트를 제공하라고 설명합니다. 또한 라디오를 미리 선택하면 사용자가 질문을 놓치거나 잘못 제출할 가능성이 있으므로 주의하도록 합니다. 자체 예제의 본체 색상은 사용자가 의식적으로 하나를 고르게 하고 기본 추천값을 만들지 않습니다.참고: GOV.UK Design System · Radios

GOV.UK select 지침은 여러 항목 선택을 위한 select multiple 사용을 피하고 다른 방법, 예를 들어 체크박스를 검토하라고 안내합니다. select는 화면을 짧게 만드는 장치로 자동 선택하지 않습니다. 옵션을 펼쳐 비교해야 하거나 선택지별 설명이 중요하면 라디오 목록이 더 분명할 수 있습니다. 반대로 국가나 지역처럼 길고 익숙한 목록에서 한 항목을 고르고 부가 설명이 짧다면 select를 후보로 둘 수 있습니다. 실제 컨텍스트에서 키보드, 확대, 화면 판독기와 함께 검수해야 합니다.참고: GOV.UK Design System · Select

옵션명은 내부 코드가 아니라 실제 차이·수량·가격을 설명합니다

A형, B형, 기본, 프리미엄처럼 내부에서는 익숙하지만 차이를 설명하지 못하는 이름을 그대로 노출하지 않습니다. 옵션명에는 사용자가 비교할 수 있는 속성을 넣습니다. 색상이라면 실제 색상명, 크기라면 측정값과 단위, 구성이라면 포함 품목, 가격이 다르면 추가 또는 차감 금액을 가까이 표시합니다. 사진에만 차이를 맡기지 않고 텍스트로도 제공합니다. ‘추천’, ‘베스트’, ‘가성비’ 레이블을 쓰려면 기준과 데이터 기간이 있어야 하며 이 글의 자체 예제에서는 사용하지 않습니다.

옵션명을 바꿀 때 장바구니, 주문 확인, 결제 영수증, 재고 관리 이름과 연결이 유지되는지 확인합니다. 화면에서 ‘폭 24cm’라고 골랐는데 주문 확인에는 ‘A형’만 나오면 사용자는 선택을 재검증하기 어렵습니다. 내부 코드를 완전히 없앨 필요는 없지만 사용자에게 보이는 레이블과 주문 기록에 같은 식별 가능한 설명이 있어야 합니다. 색상명도 화면마다 달라지지 않게 기준을 정하고, 모니터에 따라 실제 색이 다를 수 있다는 한계는 구체적으로 표시합니다.

가격·재고·구성 변화는 선택 상태와 동시에 갱신되어야 합니다

옵션을 고른 뒤 가격이나 구성품이 바뀐다면 현재 선택과 변화를 같은 상태로 보여 줍니다. 초기 상품가만 크게 남고 추가금이 작은 글씨로 떨어져 있지 않은지 확인합니다. 품절 옵션은 단순히 회색으로만 만들지 않고 ‘품절’ 텍스트와 선택할 수 없는 이유를 제공합니다. 재입고 날짜가 확정되지 않았으면 ‘곧 입고’ 같은 약속을 만들지 않습니다. 선택을 바꾸면 합계, 구성 요약, 장바구니로 전달되는 값이 모두 함께 바뀌는지 재현합니다.

1. 초기 상태에서 아무 옵션도 고르지 않았을 때 가격과 안내 문구를 기록합니다.
2. 각 단일 옵션을 한 번씩 선택하고 표시 가격, 추가금, 구성 요약, hidden input 값을 대조합니다.
3. 복수 옵션을 0개, 1개, 최대 허용 수로 선택해 합계와 선택 수 안내를 확인합니다.
4. 품절 옵션을 키보드와 포인터로 선택할 수 없는지, 품절 이유가 텍스트로 보이는지 확인합니다.
5. 선택을 모두 바꾸거나 해제한 뒤 이전 가격과 구성 설명이 화면에 남지 않는지 확인합니다.
6. 장바구니 미리보기 또는 안전한 테스트 상태에서 선택 이름, 수량, 가격을 다시 대조합니다.

조건부 질문은 선택을 돕는 경우에만 한 단계씩 보여 줍니다

특정 옵션을 골랐을 때 추가 입력이 필요한 경우가 있습니다. 예를 들어 선물 포장을 선택한 뒤 메시지를 입력하도록 할 수 있습니다. 하지만 조건부 영역 안에 여러 질문, 가격, 동의, 배송 일정을 한꺼번에 숨기면 현재 선택이 무엇을 바꾸는지 알기 어렵습니다. GOV.UK 라디오 지침은 조건부로 관련 질문을 보여 줄 수 있지만 복잡하거나 여러 부분으로 된 질문은 다음 페이지에 두고, 질문이 아닌 다른 내용을 임의로 숨기지 말라고 안내합니다.참고: GOV.UK Design System · Radios

자체 예제에서는 ‘선물 포장 추가’ 체크박스를 선택했을 때 짧은 메시지 입력 하나만 나타나도록 합니다. 포장 추가금은 선택 전부터 옵션 레이블에 보이고, 나타난 입력에는 글자 수와 선택 사항 여부를 적습니다. 체크를 해제하면 입력값을 유지할지 삭제할지 정책을 정하고 사용자가 예측할 수 있게 합니다. 선택 때문에 총비용이나 배송 시점이 바뀐다면 조건부 영역 안에만 숨기지 않고 가격 요약과 배송 안내도 동시에 갱신합니다.참고: GOV.UK Design System · Radios

320px과 키보드에서 선택·해제·오류 복구를 끝까지 재현합니다

옵션 카드는 포인터로 눌렀을 때만 확인하지 않습니다. 라디오는 Tab으로 그룹에 들어간 뒤 화살표 키로 이동하고, 체크박스는 Tab과 Space로 선택·해제하며, select는 키보드로 열고 항목을 이동해 확정합니다. 입력과 시각 카드 상태가 어긋나지 않는지 확인합니다. 라벨을 눌러도 올바른 입력이 바뀌어야 하며, 카드 전체를 클릭 영역으로 만들었다면 내부 링크나 수량 조절 버튼과 충돌하지 않아야 합니다.참고: GOV.UK Design System · Radios · GOV.UK Design System · Select

1. 브라우저 폭을 320과 390픽셀로 설정하고 가장 긴 옵션명을 사용합니다.
2. 마우스를 치운 뒤 Tab, Shift+Tab, 화살표, Space, Enter만으로 모든 상태를 만듭니다.
3. 각 상태에서 보이는 레이블, 실제 input 값, 가격, 구성 요약을 한 행에 기록합니다.
4. 필수 항목을 비운 채 진행해 오류 문구가 그룹 이름과 해결 방법을 알려 주는지 확인합니다.
5. 200퍼센트 확대에서 카드 겹침, 숨은 스크롤, 초점 잘림을 확인합니다.
6. 선택을 초기화한 뒤 이전 상태가 남지 않는지 확인합니다.

옵션별 상태 행이 모두 통과해야 공개합니다

옵션 검수는 대표 조합 하나로 끝내지 않습니다. 판매 가능한 각 옵션에 대해 레이블, 값, 가격 차이, 구성품, 재고 상태, 이미지, 장바구니 전달값을 한 행으로 만듭니다. 조합이 너무 많으면 규칙별 경계값을 선택하되 어떤 조합을 생략했는지 기록합니다. 가장 짧은 이름뿐 아니라 가장 긴 이름, 추가금 최대값, 품절, 무료, 조건부 질문이 나타나는 상태를 포함합니다. 오류가 있는 행을 숨기거나 판매 가능으로 남겨 둔 채 공개 완료라고 보고하지 않습니다.

• 선택 개수와 필수 여부가 질문 문장에 적혀 있다
• 한 개 선택은 radio, 복수 선택은 checkbox 등 의미에 맞는 기본 컨트롤을 사용한다
• 옵션명이 차이·수량·가격을 설명하고 내부 코드만 노출하지 않는다
• 추천·인기 레이블에는 확인 가능한 기준이 있거나 레이블을 제거한다
• 선택 상태와 표시 가격·구성·장바구니 값이 동시에 바뀐다
• 품절은 텍스트 이유와 선택 불가 상태가 함께 제공된다
• 320·390픽셀과 키보드에서 선택·해제·오류 복구가 가능하다
• 자체 예제와 실제 상품 데이터를 명확히 구분한다

옵션 선택 규칙과 회복 경로을 확인한 순서

1. 색상을 두 번 선택해 하나만 남는지 봅니다. 라디오와 추가 구성 체크박스의 규칙을 혼합하지 않습니다.
2. 받침 2,000원·밴드 1,000원을 모두 골라 본체 28,000원과 합계 31,000원을 대조합니다.
3. 배송 지역을 바꾸어 요약을 확인합니다. 표시 상품 금액에는 배송비가 없으므로 실제 주문 총액으로 확대하지 않습니다.

옵션 선택 규칙과 회복 경로 판단에서 제외한 범위

• 자체 옵션과 가격 차이는 입력 방식 설명을 위한 예제이며 실제 상품, 재고 또는 고객 선호를 나타내지 않습니다.
• 공식 디자인 시스템 지침은 출발점이며 실제 서비스의 사용자, 보조기술, 상품 규칙에 맞춘 별도 검수가 필요합니다.
• 키보드와 작은 화면 검수는 동작과 정보 일치를 확인하지만 사용자의 인지 부담이나 구매 행동을 입증하지 않습니다.
• 상품 조합이 많은 운영 환경에서는 전체 조합 또는 명시한 경계값 테스트가 필요하며 생략한 조합은 미검증으로 남깁니다. 검증하지 않은 선택 상태는 정상으로 추정하지 않습니다.

옵션 선택 규칙과 회복 경로에 사용한 원문

원문별 확인일과 참고 범위를 아래에 표시했습니다. 예제 입력값은 설명을 위한 설정이며 원문 기관의 제품 평가를 뜻하지 않습니다.

1. RadiosGOV.UK Design System · 확인 2026-08-20

   하나만 선택하는 질문, 선택 개수 안내, 기본 선택 주의, 조건부 질문과 키보드 동작의 공식 지침을 참고했습니다.

2. SelectGOV.UK Design System · 확인 2026-08-20

   긴 단일선택 목록에서 select를 검토하는 범위와 다중 선택 select를 피하라는 공식 지침을 참고했습니다.