9. 커머스의 콘텐츠는 상품(10)

선택은 자유지만 구조는 탄탄하게

상품을 구매할 때 필요한 선택 옵션

상품 옵션을 이야기하기 전에 상품명 작성할 때 화면을 잠깐 살펴보자. 관리자 페이지에서는 상품명을 입력할 때 ‘검색 품질 체크’를 한다. 회사마다 표현이 조금 다르더라도 이와 같은 가이드를 두는 이유는 정리되지 않은 text를 넣었을 때 오히려 좋은 상품을 검색하는 것에 방해가 된다.  

다른 상품보다 돋보이게 하고 싶어서 특수문자!!!! $$$ 이런 표기를 한다던지.. 또는 표시광고법에 문제가 되는 단어를 쓴다거나 "구찌 스타일", "아이유 스타일" 이런 문구를 사용한다거나 하면 검색 품질 체크에서 자동으로 걸러지도록 제안한다. 그리고 예를 들어서 티셔츠 제품에 아래 1번과 같은 상품명을 작성해주면 검색에 효과적이겠지만..  만약 그림 2번처럼 티셔츠와 바지를 세트로 판매할 경우도 있는데 이런 경우는 좋은 검색 결과를 위해서는 권장하지 않고 싶다. 이런 부분까지 재어할지는 의사 결정도 필요하다.

즉, 다르게 말하면 서비스 기획자는 상품명을 입력하는 input 값에서 최대 글자 수 허용범위를 byte로 체크하도록 하여 판매자가 입력하는 시점에 입력 중인 글자 byte를 바로 알 수 있게 해야 한다. 그리고 입력된 input에서 커서를 옮겨 다른 정보를 입력하려고 할 때, 즉시 안내 메시지로 표기하여 '검색 품질' 또는 '표시광고' 기준에 문제가 있다는 점을 알릴 필요가 있다.  

그림 1번. 상품명 등록 예시

그림 2번. 상품명 등록 예시

상품명 등록 화면 예시 (네이버)

상품을 구매할 때 모든 상품에 해당되지는 않지만 대부분 색상, 크기, 유형, 중량 등 제품의 속성을 선택해서 구매를 결정하는 상품이 많다.

아래 상품의 선택 옵션을 등록하는 화면을 보면 두 종류의 선택 사항이 있다. 색상, 사이즈 그리고 각 선택 항목에는 값이 2~3개가 있다. 색상에서 선택 가능한 값은 화이트와 네이비이다. 그리고 사이즈는 M, L, XL이다.

상품 선택 옵션 화면 예시 (네이버)

예시 그림은 일부러 여러 회사를 번갈아서 선택 중이다.^^

옵션 UI는 조금씩 다르기도 하지만 큰 차이는 없다. 그만큼 사용자도 편하다고 생각하게 된 사용성이 어느 정도는 정형화되어서 자리 잡았다.

위와 같은 색상+사이즈 옵션을 등록할 때 판매자 관리 서비스의 화면은 아래와 같다. ( 일부러 같은 회사 화면을 쓰지 않고 있음을 양해해 주세요.  개념은 비슷합니다. )

상품 옵션을 우선 "사용함"으로 선택을 하면 옵션을 설정할 수 있는 기능이 나타난다. 사용자가 한번 만들어두고 자주 쓰는 패턴의 옵션 기능은 템플릿으로 저장도 할 수 있다.  

구성은 "옵션명", "옵션 값"이 일단 기준이 된다.  옵션명 1번째를 넣고 그 옵션명에 해당하는 값들을 ; 세미콜론 또는 , 콤마, 엔터키 등으로 구분해서 값을 생성하게 한다. 아래 그림은 cafe24의 판매자 관리 화면이다.

가장 많이 쓰는 색상 같은 경우는 Free 하게 한글로 '블랙', '화이트' 이렇게 작성만 해도 입력된 text를 조회해서 플랫폼이 지정한 색상값을 표기한다.  이 값이 실제 제품과는 차이가 있겠지만 ~ 일반적인 대표 색상값을 선택을 하는 UI로 제공하면서 보다 직관적으로 제시하기 위한 용도로 사용된다.  

옵션 등록 화면 예시 카페24

이번엔 옵션명에 '사이즈'라고 한글로 입력한다.  판매자 관리에는 옵션명이 '사이즈'이지만.. 사용자가 선택하는 화면에는 '사이즈를 선택하세요'라고 표기하도록  '를 선택하세요' text를 고정적으로 Frontend에 노출하기도 한다. 어쨌든 색상처럼 필요한 값들을 다시 사이즈 옵션 명 옆 항목에 나란히 등록한다. 이렇게 등록할 옵션의 유형을 작성하면  [옵션품목 만들기]라는 버튼을 눌러서 최종적으로 각 옵션의 실제 속성을 작성하도록 제공한다.  버튼명은 회사마다 다르지만.. 옵션을 Grid로 구성한다.  그리드로 구성을 만드는 이유는 아래와 같다.

옵션 등록 화면 예시 카페24

이 그림처럼 그리드가 형성되면  블랙/small , 블랙/Medium,   블랙/Large... 이렇게 각 항목이 정렬된다.  이렇게 구성하는 이유는 각 옵션의 가격이 다르거나, 재고 수량이 다르거나 할 수 있기 때문에 판매자의 편리한 업무와 관리를 위해서다.  물론 처음 사용하는 판매자는 어렵게 느낄 수 있는 과정이기 때문에 처음에는 쉽지 않겠다.  

이 화면 기능을 서비스 기획자가 처음부터 기획한다면 입력할 수 있는 옵션 명의 최대 크기 정의부터 필요하다. 옵션 명의 text는 상품 정보 페이지 화면에서 UI가 제공하는 영역의 허용 범위를 고려해야 할 것이다. 가로폭이 모바일의 경우 width를 Full로 사용 가능하다고 하여도 device별로 해상도가 차이가 있기 때문에 최소 해상도 기준에서 줄 바꿈을 허용하는지 하지 않는지도 중요하다.  

그리고 다음으로는 상품의 각 카테고리별로 자주 사용되는 옵션명과 옵션 값들의 정규화가 필요하다.  입력하는 판매자는 옵션 정보를 색상,  Color, 칼라, 컬러, COLOR, 이렇게 모두 같은 정보를 다르게 표기할 수 있기도 하고,  RED, 빨강, 빨간색, 레드 이렇게 다양하게 표기할 수 있다.  만약 우리가 운영하는 사이트에서 색상값을 검색 결과 페이지에 Fitering 기능으로 제공하고 싶다면 ~ 이 값들이 서로 다르게 각각이 아니라 코드화 되고 서로 같은 값을 말하는 것으로 묶일 수 있는 정보 구조를 마련하는 것이 필요하다.  사이즈 같은 경우도 마찬가지이다.  라지, Large, 대, 빅사이즈...  패션상품에서는 이런 사이즈 값이 필요할 것이며, 전자제품에서  TV 또는 세탁기 등은 사이즈라는 옵션명 뒤에 필요한 값이 서로 다를 것이기 때문에 고려해서 상품 옵션의 Data 구조화는 짧은 시간 쉽게 정리될 부분은 아니다. 상품의 속성과 카테고리 그리고 옵션으로 사용될 값만 Structured화 하는 업무를 매일매일 해야 하는 사람이 있는 정도..

 

옵션의 유형 종류 예시 그림 (이베이)

선택 옵션 화면의 UI를 2개의 정보로 조합하여 만드는 내용으로 예를 들어서 설명하였다. 그렇지만 위 그림을 보면 2개 조합형 선택 옵션 기능은 이 중 하나일 뿐이다. 비슷비슷한데... 어떤 차이가 있을까? 보통 상품의 카테고리 종류에서 필요한 기능이 조금씩 다르다.  

"선택형"은  첫 번째 옵션을 선택하고 나서 두 번째 값을 선택해서 그 선택이 단계적으로 필요한 경우에 사용하기 좋다. 예를 들어 컴퓨터 조립 세트 상품인 경우에 i5인지, i7인지... , 모니터는 17인치인지, 22인치 인지.. 이런 각 항목과 값들을 조합하여 주문 정보를 완성하는 상품에 필요하다. 각 선택마다 가격이 다를 수 있고 단계별로 품목이 다를 수 있다. "조합형"은 주로 사용되는 경우는  앞서 본 색상/사이즈/디자인 이런 값의 조합으로 하나의 모델을 완성하는 주문에서 필요하다.  "텍스트형"은 말 그대로 주문 시 필요한 정보를 직접 작성해야 하는 경우이다. 제품에 어떤 문구를 직접 작성해서 주문을 한다거나, 꽃을 배달할 때 필요한 카드 내용 또는 화환의 리본 메시지 이런 제품에서 볼 수 있겠다.  

이렇게 다양한 셀 수 없는 경우의 수로 옵션의 기능은 복잡하지만 장바구니에 담고, 주문을 하고 , 배송을 하는 플랫폼에서는 그냥 선택된 정보가  String으로 내려지거나 하나의 Data 구조로 처리되어 물류 센터에 거래 내역 전달이 돼야 한다. 즉 복잡한 것을 다시 단순화시켜야 하는 하나의 플랫폼으로 담아야 한다.

이렇게 판매자가 마련한 선택 사항은 상품페이지 UI에서 어떤 것을 먼저 터치하여 선택하든지 선택을 마치면 그 값을 표시하는 BOX가 생기면서 1개에 해당하는 가격을 표시하고 수량을 정할 수 있다. 그리고 이 상품을 선택한 값이 있는 BOX에서 수량을 올리면 가격은 즉시 계산해서 표시한다.  

이렇게 표시되는 금액에는 일반적으로 대부분 ‘배송비’를 포함시키지 않는다. 앞서 살펴본 배송비 플랫폼만으로도 계산 로직은 상당히 복잡해질 수도 있기 때문에 일반적으로 상품의 본 가격을 기준으로 선택 값과 함께 계산해서 보여준다.

그래서 결론적으로 이 그림의 경우는 선택 옵션의 최종 값은 그냥 "화이트/235"  text값이고 옵션에 가격이  추가로 포함되지 않았으며 이 값이 저장되어 거래정보로 넘기는 용도까지가 선택 옵션 Data의 역할이다.

자세히 보면 사용자는 ‘화이트’와 ‘235’ 라는 값을 선택했는데 ‘/‘ 이렇게 중간 구분값을 주는 특수 기호가 포함되었다. 선택 옵션을 고른뒤 거래정보로 하나의 STRING으로 만들어줄 때 서비스 기획자가 옵션1과 옵션2를 구별해서 읽을 수 있도록 기획하여 정의 한 것이다.