색상 동그라미만으로 고르게 하지 않기: 이름·선택·품절 표시

비슷한 색 두 개를 이름 없이 고르기는 어렵습니다

상품 페이지에 베이지와 아이보리 동그라미만 나란히 놓이면 어떤 색이 어느 이름인지 알기 어렵습니다. 선택한 동그라미의 테두리만 짙어져도 그 표시가 선택인지 키보드 초점인지 모호할 수 있습니다. 색상 선택은 보기 좋은 팔레트를 만드는 일뿐 아니라, 고객이 고른 항목이 장바구니와 주문 내역에서도 같은 이름으로 이어지게 하는 정보 설계입니다.

이번 예제는 가상의 패브릭 수납함 두 색상 ‘웜 아이보리’와 ‘샌드 베이지’를 다룹니다. 실제 제품의 색을 측정하거나 구매 반품률을 비교한 결과가 아닙니다. 옵션 개수나 선택 순서를 다루는 일반적인 옵션 정보 구성에서 한 단계 더 들어가, 색 자체를 보기 어렵더라도 이름과 선택 상태를 알 수 있게 만드는 방법을 살펴봅니다.

색, 상품 이름, 선택 상태가 서로 다른 역할을 합니다

색상 견본은 대략적인 인상을 빠르게 비교하게 합니다. ‘웜 아이보리’라는 이름은 문의와 주문에서 항목을 다시 식별하게 합니다. 라디오 버튼의 선택 표시는 지금 어떤 값이 적용되는지 알려줍니다. 세 요소를 모두 색으로 해결하려고 하면 회색조 화면이나 색 차이를 구분하기 어려운 상황에서 정보가 사라집니다.

W3C의 색 사용 기준 설명은 색을 정보 전달의 유일한 시각적 수단으로 쓰지 않는 원칙을 다룹니다. 색상 견본에 텍스트 이름을 붙이고 선택된 컨트롤을 별도로 표시하는 것은 이 원칙을 상품 선택에 적용한 방식입니다. 숨겨진 접근성 이름만 추가하는 것으로 눈에 보이는 이름을 모두 대신할 수는 없습니다.

한 색을 고르는 예제는 기본 라디오 버튼에서 시작합니다

두 색 중 하나를 고른다면 같은 이름의 라디오 버튼으로 묶을 수 있습니다. 그룹의 질문은 legend에, 각 항목 이름은 연결된 label에 둡니다. W3C의 폼 그룹 안내에서 설명하는 fieldset과 legend를 사용하면 ‘색상’이라는 질문과 개별 답을 연결하기 쉽습니다.

<fieldset>
  <legend>색상 선택</legend>
  <label class="color-choice">
    <input type="radio" name="color" value="warm-ivory" checked>
    <span class="swatch ivory" aria-hidden="true"></span>
    <span>웜 아이보리</span>
  </label>
  <label class="color-choice">
    <input type="radio" name="color" value="sand-beige">
    <span class="swatch beige" aria-hidden="true"></span>
    <span>샌드 베이지</span>
  </label>
</fieldset>

이 예제는 기본 라디오 표시를 그대로 남깁니다. 색 칸에는 같은 의미의 이름이 옆에 있으므로 장식 요소로 처리했습니다. 반면 선택 입력까지 display:none으로 없애고 동그라미에 클릭만 연결하면 키보드와 상태 전달을 별도로 구현해야 합니다. 디자인을 위해 기본 컨트롤을 대체할수록 역할·이름·선택값·조작 방식을 함께 책임져야 합니다.

맞춤 라디오를 구현할 때의 키보드 규칙은 W3C APG 라디오 그룹 패턴을 참고할 수 있습니다. 다만 ARIA 속성을 붙였다는 이유로 방향키 동작이 자동으로 생기지는 않습니다. 두 가지 구현을 혼합해 기본 라디오와 별도 버튼이 같은 선택을 중복해서 받는 구조도 피하세요.

초점을 옮긴 것과 선택이 적용된 것을 구분합니다

마우스를 올렸을 때의 테두리, 키보드 초점의 테두리, 선택된 항목의 표시는 쉽게 닮아집니다. 예를 들어 현재 웜 아이보리를 선택한 상태에서 다른 버튼으로 이동했을 때 선택 정보가 사라지면 안 됩니다. 초점은 현재 조작 위치이고 선택은 상품에 적용된 값입니다. 각 표시는 서로 다른 상태를 설명해야 합니다.

라디오 방식에서는 키보드 방향키 이동이 선택 변경으로 이어질 수 있으므로, 사진과 가격을 바꾸는 코드도 입력의 실제 변경과 연결해야 합니다. 색상 칸에 마우스를 올리는 것만으로 장바구니 값까지 바뀌게 만들면 사용자는 비교 중에 주문 항목을 바꿀 수 있습니다. 미리보기 기능을 제공한다면 ‘보고 있는 색’과 ‘선택한 색’을 명확히 구분하는 별도 설계가 필요합니다.

현재 선택 이름을 구매 버튼 가까이 다시 적는 경우 그 문장은 실제 선택값에서 생성합니다. 색상 선택에서는 샌드 베이지가 체크됐는데 요약은 웜 아이보리로 남는 식의 이중 상태를 만들지 않습니다. 이미지 변경까지 포함한 관계는 옵션과 사진을 연결하는 방법에서 이어서 다룹니다.

품절은 색을 흐리게 만드는 것만으로 알리지 않습니다

품절 견본을 반투명하게 만들면 ‘연한 색 상품’처럼 보일 수 있습니다. 공개 이름 옆에 ‘일시 품절’을 쓰고, 주문할 수 없는 입력에는 그 상태에 맞는 처리를 합니다. 비활성 컨트롤은 일반적인 키보드 탐색에서 건너뛰어질 수 있으므로 재입고 알림이나 자세한 설명이 필요하다면 별도의 접근 가능한 경로로 제공해야 합니다.

재고가 바뀌어 이미 선택한 색을 주문할 수 없게 됐다면 다른 색을 조용히 대신 선택하지 않습니다. 선택한 항목과 주문 가능 여부를 설명하고 고객이 다시 고르게 합니다. 이름·사진·최종 주문값 중 어느 하나만 바꾸면 이후 확인 화면에서 다른 상품을 골랐다는 사실을 놓치기 쉽습니다. 판매 상태의 변경은 견본의 장식 효과가 아니라 선택 절차의 변경입니다.

화면의 견본은 실제 원단 색의 보증서가 아닙니다

견본의 CSS 색상값과 제품 사진은 역할이 다릅니다. 색상값은 선택지를 구분하는 표시이고, 제품 사진은 촬영된 장면의 자료입니다. 조명, 주변 배경, 표면 질감과 화면 설정에 따라 색의 인상이 달라질 수 있습니다. ‘모니터에 따라 다를 수 있음’ 한 줄을 붙이는 것으로 잘못 연결한 사진이나 과하게 바꾼 색 보정을 설명할 수는 없습니다.

가상의 두 색상이 실제로는 매우 비슷하다면 이름을 ‘밝은색’과 ‘더 밝은색’으로 줄이지 말고 제품에서 사용하는 이름을 유지합니다. 제조사의 색상 코드가 제공되고 해당 상품에 적용되는 것이 확인됐다면 이름 옆에 보조 식별값으로 적을 수 있습니다. 확인하지 않은 코드를 임의로 붙이거나 사진에서 뽑은 색상값을 제품의 인증 색상처럼 표시하지 않습니다.

실물 비교가 중요한 상품이라면 견본 요청이나 색상 문의처럼 실제 제공 가능한 확인 경로를 안내합니다. 그런 서비스가 없다면 만들어 약속하지 않습니다. 고객이 다시 상품을 찾거나 주문 내용을 문의할 때 ‘왼쪽에서 두 번째 동그라미’ 대신 같은 색상 이름을 사용할 수 있는지가 이 작은 컨트롤의 실질적인 기준입니다.