brunch

You can make anything
by writing

C.S.Lewis

by 김센잉 Sep 20. 2022

입을 옷이 없지만 UX 분석은 해야지

에이블리로 보는 UI/UX/GUI

입을 옷이 없어

https://youtu.be/cAxecblZO08

우리의 마음을 대변해주는 노래

영상 썸네일처럼 사람들은 옷이 많음에도 불구하고 뭘 입을지 항상 고민합니다. 분명 옷장에 옷이 있지만 전에 입었다는 이유로 새로움을 추구하기 때문인데요. 저만 하더라도 옷이 많지만 SNS에 올렸던 옷이라 다른 예쁜 옷을 사고 싶다는 이유로 항상 새로운 옷을 삽니다. 그만큼 사람이 살아가는데 필수적인 3가지 요소인 의식주 중 '의'인 옷은 사도사도 부족하다고 느껴지는 것 중 하나입니다.


원래 사람들은 트렌드를 따라가기 위해서, 지인을 만나는 자리를 위해 새로운 옷을 사는데 오프라인 옷 매장에 갔습니다. 하지만 오프라인으로 옷을 사는 것은 많은 불편함이 존재합니다. 마음에 드는 옷이 없다면 다른 매장을 돌아다녀야 하는데 여간 귀찮은 일이 아닙니다. 또한, 마음에 드는 옷을 찾았는데 가격이 너무 비싸면 같은 스타일에 가격이 좀 더 싼 옷을 찾으러 다른 매장을 돌아다녀야 합니다. 이러한 불편함들로 인해 사람들은 온라인으로 옷을 사게 되었는데 사이즈를 직접 대보지 못하고 재질을 직접 못 만져본다는 점에서 또 불편함이 생깁니다.


이러한 불편함들을 해소해주기 위해 나온 앱이 바로 '에이블리'입니다.

출처: 구글 플레이스토어 '에이블리'

에이블리 앱은 제가 자주 사용하는 서비스이기 때문에 직접 느낀 좋은 UX, 아쉬운 UX와 개선점을 제시해볼 것입니다.



분석하기 전, UX/UI/GUI란?

UX (User Experience) : 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험

UI (User Interface) : PC나 모바일 기계 등을 사용자가 좀 더 편리하게 사용할 수 있는, 상호작용할 수 있는 환경을 제공하는 설계 또는 그 결과물

GUI (Graphical User Interface) : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경 

한마디로 UX는 '사용자 경험', UI는 '시스템과 사용자 사이에서 의사소통을 목적으로 하는 사용설명서', GUI는 '사용자가 전자기기를 작동하기 위한 화면'이라고 할 수 있다.



에이블리는 국내 패션 애플리케이션으로 개인화 추천 서비스를 통해 고객이 취향에 맞는 상품을 쉽고 편하게 구경할 수 있는 환경을 조성했다. 또한, 앱 내 스타일탭을 통해 셀럽들의 상품 후기 영상을 제공하고, 고객들이 직접 상품을 보고 즐길 수 있도록 한다. 즉, 에이블리는 누구나 손쉽게 마켓을 창업, 운영해 새로운 소득을 얻을 수 있는 기회를 제공하면서 고객들에게는 다양하고 유니크한 상품을 구경할 수 있도록 한다.


에이블리는 누구나 쉽게 마켓을 창업하여 입점할 수 있다는 것이 큰 특징이다. 마켓을 입점하면 에이블리가 물류, 고객응대 전반을 지원해주는 서비스를 진행한다. 예를 들면 판매자들이 상품 사진을 업로드하면 사입, 배송, CS, 교환, 반품 처리까지 에이블리가 도맡아 처리해준다. 즉, 옷을 잘 고르는 능력만 있다면 직접 옷을 만들거나 동대문 등 의류 거래처에서 옷을 구해와서 브랜드로 만들어 결제, 배송, 고객 응대를 에이블리가 맡고 거래액 10%를 파트너스에게 나누어주는 형식이다. 이러한 서비스로 인해 2021년 기준 누적 마켓 수가 2만 3천 개를 넘어서면서 가장 많은 상품을 보유하고 있다.



에이블리의 좋은 UX
출처: Platum

하루 100만 명이 이용하는 패션 플랫폼이 된 에이블리는 그에 맞게 좋은 사용자 경험이 가능하다.


메인화면 빠른 메뉴에 있는 카테고리가 잘 분류되어 있고 아이콘이 눈에 확 들어온다.

앱을 켰을 때 맨 처음 나오는 메인화면은 간단하고 단순하면서도 고객들이 빠르게 니즈를 충족시킬 수 있도록 구성해야 한다. 특히 카테고리 분류와 아이콘이 중요하다고 생각한다. 에이블리는 이러한 요소를 잘 적용시켰다고 할 수 있다.

현재 에이블리에서 진행하고 있는 이벤트 배너 밑에 한눈에 파악할 수 있도록 아이콘 구성이 잘 되어 있다. 밑에 있는 글씨를 읽지 않더라도 아이콘만 보고 누를 수 있을 정도로 잘 분류했다고 할 수 있다.


동시에 고객들이 가장 잘 이용하는 카테고리를 먼저 보여주었다. 첫 번째 사진에 있는 카테고리들은 실제로 고객들이 자주, 잘 사는 상품 카테고리들이다. 반면에 두 번째 사진에 있는 카테고리들은 정말 필요할 때 말고는 잘 보지 않는다. 그렇기에 아이콘 배열과 디자인, 카테고리 순서로 고객들의 니즈를 충족시켰다고 할 수 있다.



마음에 드는 상품 밑에 비슷한 다른 상품들을 볼 수 있어 가격비교가 가능하다.

앞서 언급한 오프라인 쇼핑의 불편한 점 중 비슷한 스타일 옷들의 가격비교가 힘들다는 것이 있었다. 하지만 이는 오프라인이나 온라인 둘 다 힘들다고 할 수 있다. 온라인도 비슷한 스타일의 옷을 찾기가 힘들고 겨우 찾더라도 각 마켓마다 다른 색깔, 배송비, 할인 등 세부적인 것들을 고려하면 굉장히 복잡해진다. 하지만 에이블리는 이러한 불편한 점들을 다 파악하고 한 가지 기능을 통해 해결했다.

에이블리에서는 마음에 드는 상품 밑에 있는 '비슷한 상품' 기능으로 비슷한 상품끼리 가격 비교가 가능하다. 이 기능을 이용하면 색깔, 가격, 재질, 후기 등 여러 가지를 비교하면서 가장 나은 선택을 할 수 있다. 이를 통해 에이블리 고객들은 자신에게 더 합리적이고 이득인 쇼핑을 할 수 있다.



배송비가 무료다.

에이블리는 현재 무료배송 타이틀을 걸고 있다. 원래 보던 가격이 있는데 막상 결제할 때 배송비가 붙어 가격이 더 나오는 경우가 있다. 심지어 지역에 따라 다른 배송비로 인해 기본 2,500원 보다 더 나올 수 있다. 하지만 에이블리는 모든 지역 배송비가 무료이며 반품 및 교환할 때도 지역 상관없이 5,000원만 지불하면 된다. 물론 원가에 배송비가 붙은 건지는 모르겠지만 실제 마켓 사이트에 들어가서 사는 가격보다 더 비싸다는 평이 있지만 배송비에 대한 부담과 그에 따른 쇼핑에 대한 거부감은 들지 않아 좋은 UX라고 생각한다.



아쉬운 UX

마냥 좋아 보이는 에이블리에는 아쉬운 UX도 있다. 이 UX들은 실제로 내가 이 앱을 이용하면서 겪은 아쉬운 경험들이다.


옷을 계절로 구분하지 못한다.

다른 앱들과 비슷하게 에이블리도 카테고리별로 필터를 적용할 수 있다. 예를 들어 '상의' 카테고리에서는 정렬, 가격, 색깔, 키, 연령대, 아이템, 디테일, 프린트, 소재감, 스타일, 소매 기장, 넥라인 , 핏을 고객에게 맞게 설정하여 볼 수 있다. 하지만 에이블리의 필터에는 가장 중요한 것이 빠져있는데 바로 '계절'이다.


계절마다 다른 옷을 입는 고객에게 '기모'의 유무는 중요하다. 겨울에 맞게 옷을 사려고 둘러보는데 마음에 드는 옷을 발견했다. 하지만 이 옷에 기모가 없다면 큰 실망감이 따라온다. 이로 인해 기모가 있는 옷을 보려고 하지만 이마저도 찾기 힘들다. 그나마 몇몇 마켓에서는 상품 이름에 기모의 유무를 써놓기도 하지만 대부분의 마켓들은 상품의 이름만 적어놓는다.


또한, 봄과 가을에 입는 옷은 비슷하면서도 다르다. 추운 계절이 끝나고 더운 계절로 들어가기 전 중간 계절인 봄에는 얇지만 추위를 느끼지 않을 정도의 옷, 그리고 더운 계절이 끝나고 추운 계절로 들어가기 전 중간 계절인 가을에는 두껍지만 더위를 느끼지 않을 정도로 적당한 옷이 필요하다. 하지만 직접 상품을 만져보지 못하는 고객들이 계절에 맞는 옷을 산다면 실패할 확률이 존재한다. 사진으로 봤을 때는 얇아보였는데 막상 받아보니 두껍고 더워서 결국 옷이 맞는 계절까지 기다리거나 반품을 시켜 손해를 보는 일이 잦기 때문이다.


즉, 계절맞이로 인해 새로운 옷을 사는 많은 고객들을 위해 '계절' 필터 적용이 필요하다고 생각한다.



찜 목록에 있는 서랍 위치 및 순서를 옮기지 못한다.

에이블리에는 장바구니에 담기 전 눈에 밟히는 옷들을 모아놓는 나만의 공간인 '찜'이 있다. 이 '찜' 기능은 사람마다 다르게 쓰이는데, 사고 싶은 상품들을 담아놓고 구매까지 이어는 유형, 자신의 스타일을 알아보고 그에 맞는 상품을 고르려는 유형, 안 살 상품과 살 상품을 구분하려는 유형 등 다양하다. 하지만 이 유형들 전부 공통적으로 불편함을 느끼는 것이 있는데 바로 서랍 위치 및 순서를 내 마음대로 움직이지 못한다는 것이다.


현재 에이블리의 찜 목록에 있는 서랍은 만들어진 순서대로 되어 있다. 즉, 오래전에 만든 서랍이 제일 위에 있고 최근에 만든 서랍이 가장 밑에 있다는 것이다.  최근에 본 상품 중 마음에 드는 상품이 있기 때문에 담아두려고 가장 최근에 서람을 만든 것인데, 이 서랍을 보려면 밑으로 내려야 한다는 불편함이 있다.


물론 안 쓰는 서랍을 삭제하면 되지만 서랍 별로 만든 이유가 따로 있기 때문에 삭제하기 어렵다. 그저 서랍의 위치만 바꿀 수 있어도 편리할 텐데 그러지 못한다는 점이 가장 아쉽다고 생각한다.



사진을 확대하려고 줌인을 하는데 줌인한 상태로 멈춰있는 게 아니라 원 상태로 돌아간다.

돈을 지불하고 상품을 받는 고객 입장에서 상품을 꼼꼼히 보는 것은 중요하다. 지퍼가 어떻게 되었는지나 소매 끝이 어떻게 되었는지 등 세세하게 봐야 받고 나서 후회를 하지 않는다. 하지만 직접 보는 것이 아니라 온라인으로 보는 것이라면 사진을 확대해서 보는 것밖에 방법이 없다.


하지만 에이블리에서 사진을 확대해서 보려고 하면 손가락을 화면에서 떼는 것과 동시에 사진이 원상태로 돌아간다. 그렇다면 줌인을 한 상태 그대로 봐야 한다는 것인데 굉장히 불편한 점이다.



이 아쉬운 UX 중 가장 먼저 개선해야 할 우선순위는 무엇일까?

찜 목록에 있는 서랍 위치 및 순서를 옮기지 못한다.

이 UX는 실제로 나뿐만 아니라 스토어 리뷰에도 나와있는 아쉬운 UX이다. 앞서 얘기했듯이 찜 목록 자체를 다양한 방식으로 이용하는데 공통적으로 불편한 점이 위치 및 순서를 옮기지 못한다는 것이다. 스토어 리뷰에서 많이 언급된 만큼 많은 사람들이 원하는 개선 요소이기에 우선순위로 두어야 한다고 생각한다.



UX 설계 시 기억해야 할 요소에는 이미지, 텍스트, 흐름이 있다.

이미지를 통해 사용자 경험을 개선하는 방법은 이미지를 바탕으로 고객이 가진 문제점을 해결해주고 동시에 좋은 사용자 경험을 가질 수 있도록 유도할 수 있다. 그렇기 때문에 이미지를 설계하는 것, 적절한 곳에 적절한 이미지를 배치하는 것이 굉장히 어렵고 중요한 일이다.


텍스트를 통해 사용자 경험을 개선하는 방법은 사용자의 맥락을 예측하여 장치를 배치하고 자연스럽게 사용자를 충성고객으로 만들 수 있다. 맥락적으로 사용자를 돕기 위한 터치 포인트를 파악하기 위해서는 사용자 입장에서 다양한 질문을 나열하는 것이 도움이 된다.


흐름을 통해 사용자 경험을 개선하는 방법은 '발견 지면의 확장'이라고 보면 되는데 유저가 콘텐츠를 발견할 수 있는 공간 혹은 페이지를 최대한 많게 만드는 것을 말한다. 유저가 서비스의 목표에 도달할 수 있도록 이전 콘텐츠에서 다음 콘텐츠로 이동할 수 있도록 유도하는 것이다.



그렇다면 에이블리는 어떤 요소가 주요하게 적용되었을까?

패션 플랫폼, 즉 커머스 앱인 에이블리는 '흐름'이라는 요소가 주요하게 적용되었다고 볼 수 있다. 고객이 상품을 최대한 많이 보고 구매할 때는 최대한 흐름을 간편하게 만들어야 하는데 현재 에이블리는 그렇게 되어있다.


에이블리에 직접 마켓을 연 판매 유저가 콘텐츠를 노출할 수 있는 가능성을 늘리면서 제품을 많이 팔 수 있게 하고 그걸 구매 유저가 열람하고 구매할 수 있도록 생태계를 만들었다. 흐름을 통해서 UX를 설계하고 계속 유저가 체류할 수 있도록 만드는 것이 UX의 요소인데 에이블리는 현재 그러한 행동을 유발하고 있고 이를 통해 사업 가치를 창출하고 있다.


에이블리는 '흐름'이라는 요소를 주요하게 적용한 만큼 흐름에 방해가 되는 UX들을 개선해 나가야 한다. 에이블리 말고도 많은 플랫폼이 있는데 각 플랫폼마다 충성고객이 존재한다. 에이블리는 에이블리의 충성고객을 잡기 위해서는 그들이 요구하는 것들을 개선해 나가야 한다고 생각한다.


출처 및 자료

플래텀 (https://platum.kr/archives/127873, https://platum.kr/archives/181456)

나무위키 (https://namu.wiki/w/%EC%97%90%EC%9D%B4%EB%B8%94%EB%A6%AC)

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari