공상과학 UX
(feat. 애플처럼 만들어주세요)
이번 분기에도 신입 기획자 OJT 중 기획 파트 교육을 담당하게 됐다.
내가 교육시 내는 사전 과제는 늘 똑같다.
노트북 상세페이지의 UX를 개선하여 개선안을 제출하시오.
이 과제의 목적은 크게 2가지다.
기획자들의 기본 역량 파악 (툴 다루는 능력, 문서 작성과 설명하는 스킬 등등)
기획을 할 때 어디까지 고려해서 기획을 하는가. 얼마나 비즈니스 마인드를 갖추고 있냐.
수많은 상품 중 노트북을 콕 집어서 개선안을 그리라고 하는 데는 이유가 있다. 노트북 상세페이지를 그려오라고 하면 어디를 참고해서 어떤 모양으로 그려올게 뻔히 예상되고 (열에 아홉은 애플 맥북 상세페이지를 베껴서 거의 똑같이 그려온다) UX를 다루는 사람이 갖춰야 할 비즈니스 마인드가 뭔지 노트북 상세페이지만큼 잘 설명해주는 도구가 없기 때문이다.
먼저 S전자 갤럭시북 상세페이지부터 살펴보자.
S전자 갤럭시북 상세 페이지는 한국형 이커머스의 정석에 가까운 구조다.
상단에 상품 요약 정보와 옵션 선택을 보여주고 하단에 상품 상세정보를 나열하는 방식.
이 레이아웃은 치명적인 단점이 하나 있다. 상품 선택 옵션이 많을 경우 사용자의 이동동선이나 플로우가 꼬일 수 있다는 것. 예를 하나 들어보자.
옵션이 컬러만 있는 갤럭시북은 사용자가 상세페이지에서 정보를 확인하고 장바구니 혹은 결제페이지로 이동하기까지 플로우가 아래로 스무스하게 떨어지는 구조다. 그런데 옵션이 여러개인 젠북은 좀 다르다.
스펙에 대한 정보를 알고 있는 경우
상품 요약정보 확인 > 옵션 선택 > 장바구니 버튼 클릭
스펙에 대한 정보를 모르는 경우
상품 요약정보 확인 > 옵션 인지 > 상세정보 확인 > (상단으로 올라와서) 옵션선택 > 장바구니 버튼 클릭
노트북을 구입하는 고객 입장에서 생각해보자.
지포스 RTX 3050Ti와 인텔 내장 칩셋의 차이를 알고 있는 고객이라면 옵션 선택 시 크게 어려움이 없을 것이다. 그런데 옵션의 차이를 모른다면? 상세페이지에서 뭐가 다른지 확인해봐야 한다. 그럼 옵션과 상세페이지를 왔다 갔다 할 수밖에 없는 구조가 된다. 사용자의 동선이 복잡해지는 것이다.
많은 사람들이 이 문제의 해결 방법을 고민했지만 다들 뾰족한 수를 찾지 못했다. 이걸 해결하려면 전체적으로 레이아웃을 다시 구성해야 하는데 사용자가 이 레이아웃에 익숙해진 상황에서 함부로 레이아웃을 바꾸면 사용자 경험이 무너질 수 있으니까.
그런 상황에서 애플이 선보인 방법은 참으로 신박했다.
기존에 한 페이지로 되어 있던 상품상세정보와 옵션선택을 2개 페이지로 분리하는 것. 상품의 상세정보는 Detail 페이지에서 확인하고 옵션 선택 및 상품 구매는 Buying 페이지에서 하라는 것이다.
처음 애플의 상세페이지를 봤을 때 상세정보와 옵션선택을 분리하겠다는 아이디어와 과감함에 감탄했고 동시에 이건 애플밖에 할 수 없는 UX라는 생각이 들었다.
기존 페이지 구조는
① 사용자가 상품의 정보를 확인
② 확인된 정보를 토대로 옵션을 선택
③ 구매페이지로 이동
3개 동작이 한 페이지에서 이루어지게 된다. 그런데 상세정보와 옵션선택을 분리해버리면 Buying 페이지에서 옵션을 선택할 때 사용자가 옵션에 대한 차이를 명확하게 인지하고 있어야 한다. 사용자가 옵션이 뭔지 헷갈리면 Detail과 Buying 페이지를 왔다 갔다 해야 하는데 이렇게 되면 상세정보와 옵션이 한 페이지에 있을 때보다 더 불편해지기 때문이다.
노트북 상세 페이지의 UI를 설계할 때 애플처럼 Detail과 Buying 페이지를 분리하기 위해서는 3가지 선결 조건이 필요하다.
1) 옵션이 최소 3개 이상이어야 함
옵션이 1개만 있을 때 예를 들어 컬러옵션만 있으면 Detail과 Buying 페이지를 분리하는 의미가 없어진다. Detail과 Buying 페이지를 분리하는 이유는
① 상품의 정보를 확인하려는 고객
② 상품의 옵션을 선택하여 구매하려는 고객
이렇게 고객을 2가지 유형으로 분류하여 각자의 Need에 맞는 페이지를 제공하겠다는 이유도 있지만 옵션 선택의 편의성을 제공하기 위함도 있다. 그런데 옵션이 하나라면 상품의 스펙을 확인하고 색상을 선택하여 결제하고 싶은 고객은 Detail 에서 Buying 으로 이동하는 불필요한 이동동선을 거치게 된다. 기존처럼 Detail과 Buying이 한 페이지에 있으면 스펙을 확인하고 구매하는 절차가 한 페이지에서 이루어지게 되는데 페이지를 쪼개놓으면 한 단계의 절차를 더 거쳐야 되는 것이다. 그래서 애플처럼 만들려면 상품의 옵션이 3개 이상 있어야 페이지를 2개로 분리하는 의미가 생긴다.
2) 옵션이 너무 많으면 안됨
옵션이 너무 적어도 문제지만 옵션이 너무 많아도 문제가 된다. 옵션을 모르는 고객이 상세페이지에서 정보를 확인 후 옵션 페이지에서 옵션을 선택해 주문한다고 가정해보자. 옵션이 3개쯤이면 내가 선택한 옵션이 뭔지 기억할 수 있을것이다. 그런데 옵션이 7개면? 혹은 9개면? 기록없이 기억만으로 옵션을 선택할 수 있을까. 결국 사용자는 A옵션과 B옵션이 어떻게 다른지 확인하기 위해 Detail 페이지와 Buying 페이지를 왔다 갔다 해야 한다. 상세와 옵션이 한 페이지에 있을 때보다 더 불편해지는 것이다.
3) 상세페이지를 거치지 않고도 옵션을 인식할 수 있어야 함
애플처럼 만들어주세요라고 할 때 가장 핵심, 상세페이지를 거치지 않고도 옵션명만으로 차이를 인지할 수 있게 옵션간의 격차가 적거나 단순해야 된다. 다시 애플의 예를 보자
맥북 구매 시 선택 옵션은 심플하고 직관적이다. 램과 SSD의 용량차이, 부가 소프트웨어를 사냐 사지 않느냐만 선택할 수 있다. 이 정도 차이라면 굳이 상세페이지를 거치지 않고도 옵션을 보는 것만으로 차이를 인지하고 원하는 상품을 구매할 수 있게 된다.
젠북의 옵션은 애플과 비교해봤을때 조금 복잡한 편이다. RTX 3050ti과 Iris X가 뭐가 다른지 사전 정보가 없는 고객이라면 옵션만 보고 상품을 구매하기 어렵다
128, 256 같이 숫자로 되어 있는 옵션은 높은 숫자가 더 좋겠거니 하는 기본적인 감각이 있다. 나의 사용용도에는 램과 저장용량이 어느 정도가 필요한가 하는 판단만 있으면 된다. 그런데 Zenbook의 그래픽 옵션은 사전정보가 없다면 옵션만 보고 RTX 3050ti가 더 좋은지 Iris x가 더 좋은지 조차 판단하기 어렵다. (물론 이 정도 노트북을 사는 사람들은 대충 그 옵션이 뭔지 아는 사람들이다)
자 이제 애플처럼 만들기 위한 조건을 정리해보자
① 옵션 간의 차이를 사용자가 인지하기 쉬워야 함
② 옵션이 최소 3개 이상 7개 미만 (5개 정도가 적당)
내가 아는 한 국내에서 판매하는 노트북 중 이 조건을 모두 갖추고 있는 노트북이 없는 것으로 알고 있다. 애플의 상세페이지는 자사가 팔고 있는 상품의 특성을 정확히 이해하고 그 특성에 맞춰 잘 구현된 UX이다. 상품에 대한 이해없이 무작정 애플의 경험을 배끼면 이상한 UX가 되어버린다. 그리고 이게 초보자들이 가장 많이 하는 실수이기도 하다.
마지막으로 제일 중요한 비즈니스 로직. 시중 노트북 제조사들이 애플의 UX를 차용할 수 없는 중요한 이유가 하나 더 있다. 바로 제조 프로세스의 차이다.
시중 노트북 제조사는 공장에서 제품을 생산한 후 물류창고에 쌓아놓고 있다가 공홈에서 주문이 들어오면 물류창고에 있는 재고를 배송해주는 방식이다. 이 방식은 재고가 있을 경우 빠르게 배송이 가능하다는 장점이 있지만 재고의 부담을 안고가야 하는 단점이 있다.
반면 애플은 공홈에서 상품을 주문하면 공장에서 주문한 스펙에 맞춰 생산 후 배송처리하는 MTO(Made to order) 일명 주문생산 방식을 사용한다. 주문생산 방식은 주문시부터 배송완료까지 시간이 오래 걸린다는 단점이 있지만 재고 부담을 상대적으로 덜 지게 되는 장점이 있다. (애플이 경우 평균 배송일 10일) 언뜻보면 먼저 생산하고 파냐 주문받으면 생산해서 파냐 UI에 무슨 차이가 있나 싶지만 노트북을 기준으로 보면 큰 차이가 하나 있다.
바로 램과 SSD의 변경 가능 여부이다.
애플은 주문생산 방식이라 램과 SSD 용량을 변경할 수 있다. 하지만 다른 노트북 제조사는 미리 생산을 해놓고 판매하는 방식이라 주문 시 램과 SSD 용량을 변경할 수 없다. 오픈마켓에서 파는 노트북은 램과 SSD를 변경할 수 있는데요? 라고 말하는 사람도 있다. 오픈마켓에서 구매한 노트북에 램이나 SSD를 추가할때는 구매자에게 동의를 구하고 개봉 후 노트북의 뚜껑을 따서 램과 SSD를 추가한 다음 구매자에게 배송하거나 개봉을 원하지 않는 고객에게는 램과 SSD를 따로 보낸다 (이건 구매해본 사람만 안다) 아니면 램이나 SSD를 따로 산다음 노트북 서비스센터에 가서 소정의 공임비를 내면 서비스센터 직원이 달아주기도 한다.
애플처럼 만들기 위한 ①번 조건. 노트북 옵션 중 차이를 인지하기 쉬운 램과 SSD는 제조방식을 바꾸지 않는 이상 사용자가 옵션으로 선택할 수 없다. 애플처럼 UX를 만들고 싶다고 생산방식을 바꿀 수 없지 않은가. 그래서 노트북 상세페이지는 애플의 UX를 절대 모방하면 안된다.
애플의 UI를 배꼈는데 램과 SSD를 옵션에서 선택할 수 있게 화면을 구성했다면 겉껍데기만 그럴싸하게 포장해놓고 비즈니스적인 고려를 1도 하지 않은 UI가 된다. 그리고 대부분의 신입사원이 애플의 UI를 베껴놓고 짭스에 빙의한 것처럼 거창하고 웅대한 기획의도를 설명한 후 '저 잘했죠 칭찬해주세요' 라던가 '쩔지 나의 높은 수준과 식견에 깜짝 놀랐지' 라는 눈빛을 나에게 마구마구 발사한다. ㅎㅎ
나는 비즈니스적인 고려는 등한시한채 온동네에서 좋아보이는 UI를 마구마구 베낀 다음 온갖 미사여구로 포장한 기획안을 공상과학 UX라고 부른다.
이번 교육에는 또 어떤 공상과학 UX를 만나게 될까. 무척 설레는 한주가 될 것 같다.
