뚱땅뚱땅 블로그

당근마켓은 내 동네에서 중고 물건을 사고 팔거나, 동네 생활 정보를 공유할 수 있는 지역 기반 중고거래 및 동네 생활 커뮤니티 앱 입니다. 동네를 기반으로 한 플랫폼이라 꼭 중고거래가 아니더라도 아르바이트나 대신 일을 해달라는 글이 자주 게시되었고, 결국엔 지역 기반 로컬 구인구직 서비스인 ‘당근알바' 서비스가 출시되었습니다. '걸어서 10분' 이라는 키워드를 강조해 근거리 알바를 위주로 쉽게 찾아볼 수 있으며, 10분 거리가 아니더라도 가까운 동네에서 먼 동네까지 아르바이트를 찾아볼 수 있습니다.

☑️ UX/UI 분석

구직자의 입장에서 당근알바를 탐색해보는 과정을 분석하였습니다.

1. 알바리스트 홈화면 탐색

당근알바는 앱인앱의 형태로 당근마켓 첫화면에서 '알바' 버튼을 통해 접근할 수 있습니다. 직관적인 버튼임에도 불구하고, 기존 카테고리 버튼들과 같은 색상과 크기로 디자인되어 시각적 계층 구조가 부족합니다. 그 결과 버튼이 다른 요소들에 묻혀 눈에 잘 띄지 않아 접근성이 떨어지는 느낌을 줍니다. 이로 인해 당근 알바 서비스 기능이 효과적으로 홍보되지 않는다는 인상을 받았습니다.

1. 검색, 알바 지원 내역 : 기본 검색과 알바 지원 내역(나의 프로필이기도 함)에 접근이 쉽도록 상단 앱 바에 배치 하였습니다.
2. 광고 썸네일 모듈 : 나의 동네 구인 업체의 광고를 컨텐츠 상단에 가장 먼저 배치 하여 사용자들이 광고를 먼저 접할 수 있도록 유도 하였습니다. 또한, 많은 앱에서는 스와이핑 UI 인터랙션을 통해서 컨텐츠를 보여주는 경우가 많은데, 당근알바는 ‘새로운 알바 더보기’ 라는 직관적인 텍스트와 버튼을 사용했습니다.
3. 글쓰기 플로팅 버튼 : 알바를 구하기 위한 게시글을 쓸 수 있으며, 아래로 스크롤 하면 컨텐츠(알바리스트)에 더욱 집중 할 수 있도록 작은 컴포넌트로 변경됩니다.

4. 필터 기능 : 사용자가 상황에 맞는 아르바이트를 구할 수 있도록 정렬 기능을 먼저 배치 하였습니다. 동네범위는 슬라이더로 내 동네부터 먼 동네까지 조정을 할 수 있고, 하는일, 일하는 요일, 일하는 시간 모두 작은 칩 혹은 버튼으로 쉽게 입력할 수 있도록 하였습니다.

거리는 구인업체/구직자 모두에게 중요한 요소일텐데 ‘걸어서 10분’ 안쪽으로 걸리는 공고들을 쉽게 찾아볼 수 있습니다.

5. 알림 기능 : 사용자 맞춤 조건을 설정 하면 해당 공고가 뜰 때 알림을 받을 수 있습니다. 직관적인 텍스트와 버튼으로 쉽게 알림설정을 켜고 끌 수 있습니다.

Painpoint & Solution

1. 가까운 동네와 먼 동네의 실제 거리를 체감할 수 없음

필터기능에서 동네범위의 슬라이더가 총 4단계로 구분되어 있습니다. 내 동네에서 먼 동네까지 탐색할 수 있는 점, 그리고 해당 동네가 어떤 동네인지를 알려주기는 하지만 텍스트로만 알려주기 때문에 ‘걸어서10분' 뱃지가 있는 알바를 제외하고는 내가 사는 곳에서 해당 장소와의 거리가 얼마나 되는지 알기 어려운 점이 있습니다. 그래서 위치를 복사하여 지도에서 따로 검색해봐야하는 점이 불편하였습니다. 알바몬의 동네지도 기능과 비교해보았을 때, 알바몬은 내 위치에서 얼마나 떨어져있는 거리인지를 표기해주어, 위치를 쉽게 가늠할 수 있어 편리했는데, 당근알바도 ‘걸어서 10분' 을 제외한 좀 더 거리가 먼 동네의 아르바이트 장소는 간단하게 텍스트로 거리를 나타내주면 사용자에게 더욱 친화적일 것 같습니다.

2. 복잡한 필터기능

동네범위, 하는일, 일하는 요일, 일하는 시간의 4가지 필터 옵션은 각각 별도로 바텀시트가 열리기 때문에 사용자가 원하는 옵션을 설정하기 위해서는 여러 단계를 거쳐야 해서 번거롭고 직관성이 떨어질 수 있습니다. 다행히 해당 4가지 옵션의 내용은 많지 않기 때문에 하나의 바텀시트에서 선택할 수 있도록 필터기능을 제공하면 굳이 여러단계를 거치지 않고 쉽게 선택할 수 있습니다.

3. 텍스트로만 제공하는 알바리스트

당근알바 리스트는 텍스트로만 제공합니다. 동네 기반이 특징인 앱인 만큼 알바 리스트를 지도와 함께 제공해준다면 사용자는 가까운 위치의 아르바이트를 더욱 쉽게 탐색할 수 있을 것 입니다.

2. 상세페이지 탐색

1. 공유와 신고 버튼을 통해 사용자는 알바 정보를 쉽게 공유할 수 있고, 위반 게시글이 있을 경우 간편하게 신고할 수 있습니다. 하지만, 깃발 모양 아이콘이 신고 기능임을 직관적으로 알아차리기 어려웠습니다.

2. 카테고리 뱃지는 콘텐츠나 상품의 종류를 한눈에 구분할 수 있게 도와줍니다. 사용자는 뱃지를 통해 원하는 알바 유형을 빠르고 쉽게 찾을 수 있어 탐색 과정이 훨씬 간편해집니다. 카테고리 구분은 알바를 찾는데 꼭 필요한 정보이나 작은 뱃지 형태로도 충분히 정보를 쉽게 제공 할 수 있습니다.

3. 업체 이름과 글 작성시간을 함께 표시함으로써, 콘텐츠의 최신성과 신뢰도를 직관적으로 판단할 수 있습니다. 또한 필터 기능과 연계해 사용자가 원하는 조건에 맞는 정보를 효율적으로 탐색할 수 있도록 돕습니다.

4. 급여, 요일, 시간 등의 중요한 정보는 적절한 아이콘과 함께 명확하게 전달되어 사용자의 이해를 돕습니다.

5. 지원자 수와 업체가 확인한 지원자 수를 같이 보여주어 해당 채용공고의 인기도와 경쟁률을 한눈에 파악할 수 있습니다. 특히 구직자들에게는 빠르게 지원하도록 동기를 부여하는 데 효과적입니다.

6. 지도 기능을 통해 알바 위치를 쉽게 확인할 수 있어, 방문 경로나 근무지를 선택하는 데 편리함을 제공합니다.

7. 업체의 프로필에는 실제 채용 횟수, 응답률, 후기, 사업자 인증 완료 여부 등이 투명하게 공개되어 구인 업체의 안전성과 신뢰도를 높여줍니다. 하지만, 당근마켓 계정을 사업자 등록으로 전환한 경우, 프로필 내 중고거래 내역, 판매 기록, 평가, 댓글 등 개인 거래 내역도 볼 수 있어 프라이버시 침해 우려가 있습니다.

8. 실제 경험자가 작성한 후기는 다른 구직자에게 신뢰를 주고, 후기 작성과 열람은 사용자 간 활발한 소통을 촉진하여 서비스 참여도와 충성도를 높입니다. 그러나 허위 후기나 악성 댓글 등이 포함될 경우 UI 전체 신뢰도에 부정적인 영향을 줄 수 있습니다.

9. 맞춤 추천 기능은 사용자의 최근 활동을 분석해 관심사에 맞는 게시글을 노출하지만, 한 번에 딱 한 개만 보여준다는 점은 아쉬웠습니다.

10. 이전으로 돌아가지 않고도 우리동네 알바를 계속해서 탐색하고 쉽게 접근할 수 있도록 편리함을 제공합니다.

카드 한장으로 떠나는 세계 여행!

트래블월렛은 ​모바일 앱(Application)과 카드로 46종의 ​원화·외화를 ​미리 충전해, ​수수료 없이 결제할 ​수 있는 ​간편 ​글로벌 결제 ​서비스를 ​제공합니다. 

트래블월렛의 주요 서비스

1. 외화 충전 및 관리 서비스

- 카드 한장에 다양한 통화 충전이 가능 (46개 통화를 지원하며, 달러,엔,유로 환전 수수료는 0%)

- 이용 내역에서 충전, 환불, 결제한 금액 확인 가능 

- 트래블월렛 사용자 간 충전된 잔액을 송금 (친구간 송금)

- 전세계 VISA 가맹 ATM에서 현지 통화 출금 가능

- 전세계 교통카드 기능

2. 해외 송금 서비스

- 연결된 원화 계좌를 이용해 송금 가능 (이미 충전된 외화로는 송금 불가, 친구간 송금과는 다른 서비스)

트래블월렛의 신규 서비스

1. N빵결제

- 트래블월렛 사용자들 간의 지갑 연동기반 결제 서비스로, 여행이나 모임에서 발생하는 비용을 편리하게 나누어 결제할 수 있는 서비스

e.g. 5명이 있는 그룹에서 5,000원 결제시 자동으로 1,000원씩 결제되어 지갑에서 차감됩니다.

2. 소셜페이

- 트래블월렛 사용자끼리 여행 꿀팁, 동행(모임), 결제 리뷰 등 정보를 교환 할 수 있는 커뮤니티

3. ATM 카드 즉시 발급 서비스

- 가까운 GS25시 편의점에서 트래블월렛 실물카드 발급 가능 (은행 필요 X)
트래블월렛 앱에서 월렛을 만든 후 카드 신청 시 수령방법을 GS25시 편의점으로 선택하여 실물 카드를 쉽게 발급받을 수 있습니다.

☑️ 데스크리서치

"지금은 무료환전 경쟁"

24년 1월 토스뱅크의 외화 환전, 재환전 수수료의 무료 상품이 출시되면서, 시중 5대 은행 모두 해외여행에 특화된 상품을 출시하였습니다.

이제는 높은 수수료로 출국 전 외화를 실물로 환전해 챙겨가기보다는 수수료 없이 현지에서 간편하게 카드 결제를 하거나 현지 ATM을 통한 출금하는 방식으로 바뀌었죠. 각 카드가 제공하는 서비스는 조금씩 다르지만, 나의 여행지에 특화된 카드를 고르면 여행 경비도 아낄 뿐 더러 돈 관리도 쉽게 할 수 있습니다.

*Insight

환전 우대율 100%의 시대, 싸게 환전 할 수 있는 서비스는 정착되었기 때문에 이제는 얼마나 쉽고 간편하게 환전하고 결제를 할 수 있는지가 중요합니다.

☑️ UX/UI 분석

간단한 리서치에서 도출된 인사이트대로 트래블월렛에서는 얼마나 쉽고 간편하게 환전하고 결제할 수 있는지 사용자 플로우를 따라 분석해보겠습니다. 먼저 대부분의 기능을 사용할 수 있는 홈화면입니다.

홈화면

트래블월렛은 홈화면에서 모든 서비스를 쉽게 이용할 수 있으며, 금융 앱 답게 전체적으로 심플하고 명확한 인터페이스를 가지고 있습니다.

콘텐츠와 사용자간의 상호작용이 쉽도록 작은 단위로도 구분 할 수 있는 카드형 UI가 홈화면을 전부 차지합니다. 카드 UI는 정보를 한눈에 파악하기 쉽다는 장점이 있죠.

*Selling Point

홈화면에 있는 모든 인터페이스는 서로서로 유기적으로 연결되는 특징을 가지고 있어 모든 기능에 접근성이 높습니다.

트래블월렛의 주요 기능인 ➊ 내 지갑의 주요 액션인 충전하기 버튼은 화이트 톤에 대비가 강한 파란색을 사용하여 눈에 잘 띄게 배치 하였습니다. 트래블페이는 선불충전을 기본으로 하기 때문에 '충전하기'가 제일 많이 쓰이므로 가장 상단에 위치해있고 가장 눈에 잘띄입니다. 

➋결제는 아래 제휴지갑과 동일하며, 트래블월렛 앱에서 특정 제휴사의 포인트를 충전하여, 해당 제휴사 가맹점에서 카드 없이 바코드로 결제할 수 있는 기능입니다. 제휴지갑 카드 UI는 작은 이미지와 텍스트로 구성된 썸네일 모듈이며, '0원'폰트가 가장 두껍고 크기가 큰 것으로 보아 가장 중요한 요소는 가격임을 알 수 있습니다. 그리고 비교적 덜 중요한 타이틀은 회색처리를, 1.5% 적립 설명은 크기가 작은 반면 눈에 잘 띄일수 있도록 컬러를 주어 시각적으로 적절한 계층구조를 나타내었습니다.

➌은 신규/부가 서비스를 나타낸 카테고리이며, 타이틀에 알맞은 아이콘은 시각적으로 빠르게 인식하는데에 도움을 줍니다. 이미지만 보고도 어떤 기능을 나타내는지 쉽게 알 수 있습니다. 더불어 '여행혜택'은 아래 네비게이션 바의 (=탭바) 혜택과 동일합니다.

➍환율 정보는 해외여행 환전을 위해서 꼭 필요한 정보입니다. 외화를 팔기보다는 사는 경우가 훨씬 많기 때문에 디폴트는 살 때 환율을 나타내며, 살 때 환율 기준의 날짜와 시간 정보를 간단하게 제공해주어 실시간임을 사용자에게 인지시켜주고 신뢰성을 높일 수 있습니다. 

➎여행정보는 신규 서비스이며, 여행채비에 도움되는 정보들을 다른 사용자들과 주고받을 수 있습니다. 여행정보를 클릭하면 네비게이션바의 '소셜'로 이동합니다.

Painpoint 와 Solution

일부 국가의 환율정보만을 제공합니다.

➍환율정보는 일본, 유럽, 미국, 베트남, 태국 까지 총 5개까지 볼 수 있습니다. 우리나라 여행객들이 주로 환전하는 Top5인 것으로 보이는데, 이 외의 국가를 보려면 네비게이션 바의 더보기 > 환율정보 화면에 들어가야만 따로 볼 수 있었습니다. 대만,홍콩,중국 등 내가 원하는 나라의 환율정보를 북마크해놓고 홈화면에서 바로바로 볼 수 있는 기능이 있다면 더욱 편한 UX가 될 것 같습니다.

충전하기

*Selling Point 

1. 짧고 쉬운 충전 단계

외화 충전은 딱 3단계로 이루어집니다.

통화선택 -> 충전금액 입력 -> 결제(연동된 계좌에서 출금)의 3스텝이 굉장히 간편합니다.

통화 선택은 대륙별이며 아코디언 버튼을 사용하여 해당 국가를 쉽게 확인할 수 있습니다.

충전에는 한도가 설정되어있는데, 이는 환치기(불법 해외 환전 거래) 방지와 금융 보안 관리, 그리고 합법적 범위 내에서 고객 자금 보호를 위해서라고 합니다. 설정되어있는 충전 한도를 사용자가 쉽게 알 수 있도록 1,000달러 충전금액 바로 밑에 '잔여 충전 가능 금액 = 1,442달러' 임을 명시하였고 1,442달러를 넘길 경우 진동과 함께 해당 문장이 빨간색으로 변경됩니다.

충전 마지막 단계(결제)는 가입할때 입력한 계좌와 연결을 해두었기 때문에, 해당 계좌의 현재 잔액이 표기됩니다. 저는 1,000달러를 설정해 1,386,600원이 출금되어야하는데 잔액이 약 58,000원라서(ㅋㅋㅋ) 충전하기 버튼이 비활성화 처리 되었습니다. 잔액 부족을 빨간색으로 표시, 비활성화 처리된 버튼이 다음단계로 넘어갈수 없음을 명확하게 알려주었습니다.

충전 금액을 낮추니 CTA 버튼이 파란색으로 바뀌어 충전이 가능하다는 것을 알려주고 유도합니다.

2. 유연한 검색기능

본국의 통화를 따로 가진 유럽을 제외, 유로를 쓰는 모든 국가를 유럽으로 표기하였음에도 '독일'을 검색하였을 때는 유로가 검색이 되었는데, 이는 사용자의 다양한 검색 의도와 입력 방식을 잘 이해하고 지원하는 유연한 검색 기능을 가졌음을 알 수 있습니다.

조지아처럼 통화 자체를 지원하지 않는 국가를 검색하면 검색 결과가 없습니다.라고 안내해줍니다.

Painpoint 와 Solution

부족한 금액에 대한 안내 부재

트래블월렛은 정말 쉽고 간편하게 충전을 할 수 있지만, 하나 아쉬운 점이 있다면 부족한 잔액이 얼마인지까지는 알려주지 않습니다.

연동된 계좌의 현재 잔액과 충전 상세내역에는 내가 희망하는 충전 금액까지 보여주지만, 실제로 얼마가 부족한지는 사용자가 직접 계산하고 해당 계좌에 입금해야 합니다. 직접 계산하지 않아도 충전 상세내역에 얼마가 부족한지 한줄만 표기 해준다면 훨씬 좋은 사용성을 가지게 될 것 같습니다!

01. 요금제 페이지 카드 디자인

1. 아래 요금제들을 설명하기 전, 무료를 강조한 후킹 문구를 정중앙에 위치시킴으로써 관심을 유도했습니다.

2. 가장 인기가 많은 요금제를 사용자가 한눈에 알아볼 수 있도록, 인기추천 배지와 스토로크를 적용하였습니다. 색상은 흰색 배경에 대비가 강한 파란색을 사용해 주목도를 높였으며, 다른 요금제와 확실히 구분될 수 있도록 전체 크기를 키우고, 은은한 그림자 효과를 추가해 인기 요금제임을 더욱 강조하였습니다.

3. 요금제 이름 바로 아래에 각 요금제에 대한 간단한 설명을 추가하여, 해당 요금제가 어떤 사용자에게 적합한지 먼저 안내하였습니다. 관련 있는 정보를 하나로 묶어 배치함으로써, 사용자가 각 요금제의 특징과 적합 대상자를 직관적으로 파악할 수 있도록 정보를 제공하였습니다.

4. 무료 요금제의 경우, 0원이라는 점이 가장 중요한 정보이기 때문에, ‘1인당 1개월’과 같은 메타 정보는 제외하였습니다. 이를 통해 사용자는 가장 핵심적인 정보만 직관적으로 확인할 수 있습니다.

5. 각 요금제에 포함된 기능이 많아 점선 밑줄이 오히려 복잡해 보이고 가독성을 저해하여, 밑줄을 제거하였습니다. 이를 통해 더 깔끔한 디자인과 사용자가 내용을 한눈에 쉽게 파악할 수 있도록 했습니다.

6. Notion AI라는 중복된 단어는 제외하여 정보를 간결하게 전달하였습니다. 공통 단어이면서 핵심 정보인 ‘Notion AI 체험판’과 ‘Notion AI 포함’은 볼드체로 강조하였고, 체험판 부분은 회색으로 처리해 비활성화된 느낌을 주어 기능 사용이 제한적임을 나타냈습니다. 또한, 비즈니스와 엔터프라이즈 요금제에서만 제공되는 AI 기능은 포인트 컬러(블루)와 비슷한 톤의 배경색으로 처리해 눈에 부담을 주지 않으면서도 자연스럽게 눈에 띄게끔 결제를 유도하였습니다.

02-1. 상품 카드 리스트

1. 기존 대카테고리의 폰트 크기가 일반적인 모바일 폰트(15-16pt)보다 1~2pt 컸습니다. 특히 립메이크업, 아이메이크업 처럼 weight가 regular인 경우, 상대적으로 두께가 얇아보이고 자간이 넓게 보여서 단어와 단어 사이의 구분이 명확하지 않은 느낌을 주었습니다. 이에 폰트 크기를 한 단계 줄여 각 단어가 더욱 뚜렷하게 구분되도록 하여 전체적인 가독성을 높였습니다.

2. 좀 더 친근한 UX라이팅으로 변경하였습니다.

3. 상품 리스트에는 표시해야 할 정보가 많아 공간을 효율적으로 사용하는 것이 중요하다고 판단 했습니다. 기존에 큰 영역을 차지하던 찜하기(하트)와 장바구니 아이콘 중, 찜하기 아이콘은 썸네일 사진의 오른쪽 하단에 작게 배치하고, 장바구니 아이콘은 삭제하여 리스트를 더 간결하게 구성하고, 꼭 필요한 정보만을 제공하였습니다.

4. 기존 상품 리스트의 타이틀에는 홍보글과 브랜드명과 제품명까지 모두 포함, 작은 카드 리스트에 과다한 정보가(최대 3줄까지)표시되어 복잡하였습니다. 화장품은 브랜드 인지도가 중요하기 때문에 상품 리스트에 브랜드명을 표시하여 사용자가 어떤 브랜드의 제품인지 쉽게 파악할 수 있도록 하였고 해당 브랜드 페이지로의 접근을 용이 하게 하여 사용자 경험을 한층 향상시켰습니다. 아울러 정보 전달의 효율성을 높이기 위해 브랜드명과 상품명, 가격, 뱃지 정보를 각각 한 묶음씩 크게 세 구역으로 나누어 구성함으로써 사용자가 필요한 정보를 빠르고 명확하게 인지할 수 있도록 하였습니다.

5. 화장품은 해당 브랜드 모델이나 깨끗한 피부 표현 등 사실적인 이미지를 보여주는 것이 매우 중요하기 때문에, 썸네일 이미지를 크게 배치하여 제품을 보다 명확하게 전달하고자 하였습니다. 이를 통해 사용자가 상품에 대한 신뢰를 높이고 구매 결정을 보다 쉽게 할 수 있도록 하였습니다. 그리고 위와 동일하게 기존에 큰 영역을 차지하던 찜하기(하트)와 장바구니 아이콘 중, 찜하기 아이콘은 썸네일 사진의 오른쪽 하단에 작게 배치하고, 장바구니 아이콘은 삭제하여 꼭 필요한 정보만을 효율적으로 제공하였습니다.

6. 상단 인기상품 리스트와 동일한 정보로 구성하여, 사용자들이 혼란을 느끼지 않고 일관된 경험을 할 수 있도록 통일감을 주었습니다. (기존엔 판매가와 할인가의 위치가 다름)

02-2. 상세페이지

1. 일반배송과 오늘드림의 문구가 서로 달라 이질감이 들어, 두 문구를 동일하게 적용하여 사용자에게 일관된 느낌을 줄 수 있도록 하였습니다. → ‘20,000원 이상 무료배송’을 ‘2만원 이상 무료’로 수정

그리고 증정품 사진이 너무 작아 어떤 제품인지 파악하기 어렵기 때문에, 사진은 상세보기에서 별도로 확인할 수 있도록 분리하였습니다. 또한, 대신 안내 문구에는 볼드체를 적용하여 강조함으로써 증정품에 대한 안내를 쉽게 인지할 수 있도록 하였습니다.

2. 화장품 상품설명은 보통 길기 때문에, 상품정보 제공고시, 배송 안내, 교환/반품/환불 안내 등 공통된 성격의 상세 정보를 별도의 탭으로 나누어 제공하였습니다. 이를 통해 관련 정보끼리 체계적으로 묶어 사용자에게 보다 명확하게 안내하였습니다.

3. 기존 연관 기획전의 작은 썸네일과 텍스트 조합보다, 사용자 시선을 한눈에 사로잡을 수 있는 화려한 배너 형태로 제작하여 기획전의 매력과 주요 정보를 효과적으로 전달하여 사용자 클릭률을 높일 수 있도록 구성하였습니다.

4. 화장품은 브랜드 인지도가 중요한 만큼, 상품 리스트에 브랜드명을 명확히 표시하여 사용자가 어떤 브랜드의 제품인지 쉽게 파악할 수 있도록 하였습니다. 또한, 해당 브랜드 페이지로의 접근을 용이 하게 하여 사용자 경험을 한층 향상시켰습니다.

5. UX라이팅을 전체적으로 통일시켜 일관된 경험을 할 수 있도록 도왔습니다.

6. 화장품은 브랜드 인지도가 중요한 만큼, 상품 리스트에 브랜드명을 명확히 표시하여 사용자가 어떤 브랜드의 제품인지 쉽게 파악할 수 있도록 하였습니다. 또한, BEST 제품의 경우 타이틀에 넣지 않고 대신 뱃지를 사용하여 시각적으로 돋보이게 함으로써 사용자에게 해당 제품의 우수성을 효과적으로 전달하였습니다.

7. 추천 상품을 새로고침할 수 있는 직관적인 아이콘으로 변경 하였습니다.

주변에서 여름 휴가를 다녀온다는 이야기를 듣고 있는 요즘입니다. 그래서 여행 시즌에 가장 많이 사용하는 OTA(Online Travel Agency) 플랫폼을 뜯어보고자 합니다. 여러 OTA 앱이 있지만 마이리얼트립의 사용해 본 경험이 있기 때문에 마이리얼트립을 분석해보겠습니다.

‘진짜 나다운 여행’이라는 모토를 가진 마이리얼트립은 국내 및 해외 여행에 필요한 모든 예약 서비스를 통합 제공하는 슈퍼 앱으로 항공권, 숙박, 렌터카, 투어, 액티비티, 입장권, 현지 가이드 등 다양한 여행 상품을 한 번에 검색·비교·예약할 수 있습니다. 단순히 예약 서비스만 제공하는 것이 아닌 나만의 일정과 여행 경험, 맞춤형 추천, 여행자 커뮤니티를 기반으로 즐거운 여행을 완성할 수 있도록 지원하고 있습니다.

☑️ 데스크 리서치

하나투어, 모두투어와 같은 기존의 국내 여행사와 OTA는 어떤 점이 다른걸까요?

먼저 과거 2000년대 여행 산업의 구조를 살펴보자면 항공사, 호텔, 음식점, 렌터카 등 실제 여행 상품을 공급하는 업체인 소재 제공자(또는 여행공급자)가 있고, 이 소재 제공자를 여행 수배업자(또는 랜드사)가 모아서 여행 일정을 만들게 되는데, 일반적으로는 이 여행 수배업자는 다시 국내에 있는 여행 도매/소매업자에게 판매를 맡기고 이를 통해 소비자에게 전달합니다. 여기서 여행 도매/소매업자는 하나투어, 모두투어, 노랑풍선 같은 여행사이며 이들 수익의 원천은 중간수수료인 것이죠.

하나투어, 모두투어, 노랑풍선이 이를 대표하는 국내 여행사였는데, 세 여행사 모두 높은 매출을 유지하다 2017년 대비 2018년 매출이 급감 하였습니다. 여러가지 요인이 있겠지만 가장 큰 이유는 2010년대 초 온라인의 발달과 디지털 전환을 맞이, 2012년 한미 FTA 무역협정이 체결되면서 외국 여행사들이 전면 개방되었고 이로 인해 글로벌OTA가 한국에 본격적으로 진출하면서 시장을 판도를 바꾸어 놓았기 때문이죠.

기존 중개 산업이었던 여행 산업은 특히 온라인화 되면서 가격 비교가 더욱 쉬워져 가격 경쟁이 더욱 치열해졌습니다. 결국 여행 산업은 중개 산업 구조에서 벗어나야만했고 새로운 캐시카우를 내세웠습니다. '소비자 경험'을 중점으로 여행 상품을 판매 유도 하는 것이었죠.

국내 OTA인 야놀자(현재는 글로벌 OTA로 도약)와 여기어때는 기존에 숙박 업소와 소비자를 연결하는 단순 플랫폼에서 항공 예약, 여행 정보, 즐길거리, 투어 등을 추천하고 판매하는 서비스를 출시 했고, 마이리얼트립은 설립 초기부터 여행자에게 현지 투어와 가이드를 소개하는 플랫폼으로 출발하였답니다.

*Insight

과거처럼 여행 상품 판매에만 중점을 두기 보다는 여행 시작 전 계획부터 여행이 끝날 때까지 사용자가 앱에 머물 수 있도록 강력한 락인 효과를 주는 서비스/기능이 필요함을 알 수 있습니다.

☑️ 마이리얼트립 UI/UX 분석

주요 서비스 및 기능

1) 항공권, 숙박, 투어 등 여행 상품 판매 서비스 제공

2) 여행 전문가 및 이용자들이 꿀팁·후기를 나누는 커뮤니티 기능

3) 다양한 콘텐츠 큐레이션 :
특히 마이리얼트립은 블로거, 인플루언서, 여행 크리에이터 등 누구에게나 열려 있는 어필리에이트(affiliate) 마케팅 방식을 도입하고 있습니다. 여행객에게 유용한 콘텐츠를 제작하는 크리에이터가 마이리얼트립의 다양한 여행 상품(항공권, 투어/티켓, 숙박, 렌터카 등)을 직접 경험해보고 자신의 블로그, SNS, 웹사이트에서 홍보하고, 그 제휴 링크를 통해 상품이 예약 또는 구매될 경우 일정 비율의 수익을 얻게 됩니다. 이러한 구조는 기존 오프라인 여행사 대리점의 역할을 크리에이터가 온라인에서 대신하면서, 새롭고 효율적인 수익 모델로 발전할 수 있었던 것입니다.

UIUX 분석

1. 홈화면

사용자들이 가장 빨리 접할 수 있고, 쉽게 콘텐츠를 탐색할 수 있는 홈화면은 주로 사진을 강조한 사각형 썸네일 컴포넌트로 구성하였습니다. 썸네일 사진을 강조한 이유를 생각해보면, 사용자는 여행 관련 서비스 예약 시 사진과 글(후기) 등 간접적인 정보만으로 선택을 해야합니다. 특히 숙소의 경우에는 실물 사진만이 객관적으로 신뢰할 수 있는 단서가 될 수 있습니다. 사진을 통해 여기는 좋은 숙소 일 것이라고 생각하고 예약을 진행하는 것이죠. 그렇기 때문에 대부분 퀄리티 높은 사진들로 구성 되어 있습니다.

*Selling point

다양한 정보를 한 화면 안에 간결하게 제공한 점이 돋보였습니다. 여행 상품의 경우 컨텐츠 양이 상당하고, 상품명, 위치, 가격 등 보여주어야 할 요소들이 굉장히 많습니다. 특히나 해외의 경우라면 모든 이름이 굉장히 긴 축에 속합니다. 이렇게 많은 정보를 한꺼번에 보여주다보면 자칫하면 복잡한 화면으로 구성이 될 텐데 굉장히 심플한 화면이 유지되고 있습니다. 썸네일의 사진들이 화려하다보니 나머지 UI 컴포넌트들 의 기본 색상을 거의 블랙/화이트로 구성한 것 같습니다. 심심할 수도 있지만 이렇게 깔끔함이 돋보이는 구성은 오히려 정보 전달에 도움이 됩니다.

더불어 홈 화면에서 무지성으로 많은 여행지를 보여주지 않고, 내가 검색/탐색 했던 여행지 기반으로 다양한 투어티켓, 숙소, 한인민박 등을 보여주고 있습니다. 저는 런던을 검색했었는데, 런던과 관련된 숙소나, 투어 등의 콘텐츠만을 보여주었습니다. 

런던 옆 Down 아이콘을 누르면 쉽게 다른 여행지를 검색할 수도 있습니다.

*Painpoint

컴포넌트 내 정보들에 시각적인 위계가 없어서 가시성이 부족합니다. 타이틀(이름)과 바디(가격), 메타정보(별점)가 동일한 색상, 동일한 폰트의 두께를 가져서 한눈에 읽히지 않습니다. 

*Solution

하나투어 앱의 컴포넌트를 캡쳐해온 것인데, 타이틀과 가격과의 폰트 두께에 차이를 주면 어떤 부분을 우선으로 강조하는 지 알 수 있어서 좀 더 명확하게 정보를 파악할 수 있습니다.

2.  커뮤니티

커뮤니티의 게시판은 크게 나라별 카테고리 탭바 > 상세 카테고리 탭바로 나뉘어져 있어서 내가 궁금한 나라와 궁금한 주제를 보다 쉽게 찾을 수 있습니다. 상세 카테고리의 '전체' 피드에는 게시글 뿐만 아니라 인스타처럼 스토리 기능이 있으며, 대표적인 두 기능이 사용자간의 활발한 소통을 유도합니다. 

*Selling point

커뮤니티 내 다양한 컨텐츠와 기능이 사용자 간 활발한 소통을 유도합니다. 게시글, 스토리 기능 그리고 자체적으로 다양한 컨텐츠를 게시하고 이벤트를 내세워 댓글을 쓰게 하는 등 사용자의 참여도를 높이고 있습니다.

세번째 이미지의 동행을 구하는 사용자가 직접 올린 게시글에는 '동행채팅 참여하기'라는 CTA 버튼이 클릭을 유도하고 있습니다. 그랜드캐년 여행을 앞두고 있었던 사람이라면 이 동행채팅에 참가하여 궁금한 점을 빠르게 물어볼 수 있겠죠! 

커뮤니티에 사용자들이 자발적으로 참여하게끔 만드는 컨텐츠와 기능들은 앱을 빠져나갈 수 없는 강력한 락인효과를 줍니다.

3. 검색/탐색 화면

멜버른을 검색했을 때, 대분류 카테고리 탭바에서 원하는 카테고리를 고를 수 있고, 아래 상세 카테고리에서는 멜버른의 인기 카테고리를 걸러서 보여줍니다. 여기서도 실물 사진을 강조한 썸네일 모듈을 사용하여 그레이트 오션로드는 어떻게 생겼고, 퍼핑빌리 투어는 무엇인지 필립 아일랜드 투어는 어떤 것인지 대략적으로 알 수 있습니다. 하지만 썸네일 아래 텍스트가 잘려 2개로 구분된 그레이트 오션로드의 차이점을 한번에 알 수 없었습니다. 텍스트를 최대 2줄까지 보여지게 하거나 어쨌든 같은 범주에 속하니 하나로 뭉쳐놓고 필터에서 거를 수 있었다면 더욱 친절한 UX일 것 같습니다.

*Selling point

멜버른을 검색 한 후 투어티켓 탭 바의 페이지 입니다. 여기서도 인기 카테고리 탭 바를 볼 수 있고 썸네일을 모듈을 사용하였습니다.

페이지를 아래로 스크롤 했을 때는 인터랙션과 함께 탭바의 크기를 줄여 중요한 정보인 투어,티켓 상품 탐색에 몰입할 수 있도록 유도합니다.

중간 중간 '위 상품과 함께 본 상품'을 보여주며, 다른 사람들이 이 상품과 함께 봤던 다른 상품을 추천해주는 기능도 있습니다.

*Painpoint

투어,티켓 페이지에서 필요하지 않은 지도보기와 저장 플로팅 버튼은 상품 탐색에 몰입하는데 방해가 됩니다. 멜버른 씨라이프 아쿠아리움 입장권을 구매하는데에 지도보기는 필요하지 않을 것이고, 저장됨도 홈화면의 상단에서 따로 저장 목록을 쉽게 확인 할 수 있습니다.

상품 상세페이지 화면 내 하단에 위치한 상품 추천,비교 영역입니다. 상세페이지의 상단 영역은 투어와 관련된 모든 정보를 쉽게 확인 할 수 있지만 페이지 하단 영역에 중복 추천 상품이 매우 많았습니다. 개인화 된 상품 추천이 아닌 단순 중복 추천은 추천 시스템에 대한 신뢰도가 떨어져 사용자 경험을 저하 시키는 요인입니다. 

모든 썸네일 모듈에 있는 '투어'라는 텍스트가 불필요하게 느껴졌습니다. 투어를 찾고 있는 사용자에게 투어를 추천할 것이라면 굳이 '투어'라는 텍스트는 제공할 필요가 없습니다. 또한 투어가 아닌 입장권의 경우 타이틀(이름), 바디(금액)에서 텍스트의 시각적 위계가 느껴지지 않아 여기서도 가시성이 부족하다는 것을 알 수 있습니다.

*Solution

검색/탐색 과정에서 사용자의 몰입을 방해하는 플로팅 버튼을 없애고, 중복 추천을 막기 위한 알고리즘 개선과 데이터 처리 과정에서의 중복 제거, 추천 항목의 우선순위 조정 등 기술적인 변화가 필요합니다. 마지막으로 상품 정보를 제공하는 썸네일 모듈의 불필요한 '투어' 텍스트를 삭제하거나 혹은 각 투어사이름을 대신 안내해주어 사용자에게 투어회사의 정보를 제공한다면 신뢰를 높일 수 있습니다. 또한 투어이든 입장권이든 동일한 컴포넌트를 사용해야 사용자에게 일관성 있는 경험을 제공할 수 있습니다.

마이리얼트립의 월간 활성 이용자 수(MAU)는 400만 명이고 작년 매출 892억원으로 흑자전환에 성공하였다고 하지만 그에 반해 인터페이스와 사용자 경험 모두 개선해야할 점이 매우 많은 것 같습니다.

☑️ 데스크리서치

1. Background

쿠팡이츠는 음식 배달 플랫폼 업계에서 2위를 차지하고 있다. 경쟁자로는 배달의민족, 요기요가 대표적이며 여러 배달 플랫폼 중 최초로 '한번에 한 주문만 배달'하는 시스템을 도입시켰다. 그리고 지난해 3월에는 또 업계 최초로 '무제한 무료배달' 서비스를 도입했다.

쿠팡이츠가 24년 3월, '무제한 무료배달' 서비스를 도입한 이후 요기요를 제치고 2위로 등극하였으며 이후 계속해서 성장세가 두드러졌다.

무제한 무료배달 서비스 출시 일주일 만에 배달의민족은 '알뜰배달', 요기요는 '요기배달'이라는 무료 배달 서비스를 도입하였고, 현재는 점유율을 차지하기 위해 플랫폼 간의 무료 배달 경쟁이 격화되고 있다.

2. 경쟁사 분석

쿠팡은 무제한 무료배달 서비스를 도입하고 같은 해 8월 구독료를 4,980원 -> 7,890원으로 무려 58%를 인상하였다.

이로인해 고객들의 대거 이탈이 예상 되었지만, 실제는 예상과 달랐다. 멤버십 하나로 쿠팡부터 쿠팡플레이(OTT)를 무료로 이용할 수 있는 데다, 쿠팡이츠로 음식 배달비도 아낄 수 있어 '이 정도 가격은 납득이 된다'는 반응이 많았다.

실제로 쿠팡이츠는 비교적 최근인 4월에도 한국인이 가장 많이 사용하는 배달 앱 2위를 차지하였으며, 월간 활성 사용자수(MAU)도 상승세를 보였다.

☑️ 경쟁사 홈화면 분석

사용자가 처음 접하는 공간이자, 가장 자주 방문하는 공간은 홈화면이다. 쿠팡이츠, 배민, 요기요 세 플랫폼은 홈화면에서 핵심 서비스를 어떻게 나타내고 있을까?

홈화면을 구성하는 모듈들의 순서는 거의 비슷했다.

1. 위치 : 배달 받는 곳,  공통점은 Down arrow 아이콘이 있어 위치를 변경할 수 있다는 것을 쉽게 알 수 있다. 

2. 검색 : 세 어플 모두 '검색어를 입력하세요'와 같은 딱딱한 라이팅이 아닌 쿠팡이츠는 ~~ 어때요?의 질문 형식으로, 배민은 배고프니까 일단 검색! 으로 재치있게, 요기요는 5 요거트아이스크림의정석으로 인기검색어를 플레이스홀더로 활용하여 검색에 도움을 주고 있었다. 

3. 카테고리 : 쿠팡이츠의 카테고리 썸네일은 사진으로 구성 되어있고, 배민은 배민만이 가지고 있는 특징을 살린 아이콘을, 요기요도 귀여운 아이콘을 썸네일에 구성하였다. 

4. 모듈 : 쿠팡이츠는 배민,요기요와 달리 오로지 배달/포장 중심 앱이다. 그래서 이 지점부터 아래로 스크롤 할수록 다양한 음식 리스트 모듈과 배너만을 볼 수 있다. 배민과 요기요는 음식 배달 말고도 편의점/마트 배달, 선물하기 등 다양한 사업을 하고 있어 다른 기능에도 쉽게 접근 할 수 있도록 홈화면에 다양한 썸네일 모듈을 배치했다. 

5. 장바구니 : 다른 모듈의 위치는 비슷했지만 특히 장바구니의 위치는 완전히 달랐다. 쿠팡이츠는 하단 고정 탭바 바로 위에 있었는데 흰색 폰트와 하늘색 배경이 대비가 크고, 영역도 탭바만큼 크기가 커서 눈에 잘 띄었다. 배민은 우리에게 가장 익숙한 오른쪽 상단에 장바구니 아이콘을, 요기요는 하단 고정 탭바의 가장 오른쪽에 플로팅 버튼처럼 배치하였다.

쿠팡이츠의 ✅ 멤버십 광고 영역과 배민의 ✅ 혜택 광고 영역은 와우 멤버십 혹은 배민 클럽 가입 유도를 전략으로 두고 비교적 상단에 위치해있다. 두 앱 모두 화이트 톤의 배경이지만 멤버십 광고 영역 만큼은 어두운 배경을 선택해 사용자의 눈길을 이끈다. 하지만 요기요는 따로 광고 영역 없이 ➍주문 모듈 에서 편의점 배달, 포장 등의 기능과 나란히 배치했다.

☑️  쿠팡이츠의 불편한 UI/UX

1. 기본 검색 필터링

마라탕이 먹고 싶은 나는 마라탕을 검색해보았다.

기본 검색에서 상단에는 마라탕을 판매하는 가게들이 나왔지만 아래로 스크롤을 내려보니 전혀 상관없는 치킨, 떡볶이 가게가 나왔다.

이번엔 기본 검색은 아니지만 '주문 많은 순' 필터 1개를 적용했을때 엽떡 부터 두찜, 옥수동 묵은지 김치찜 등 마라탕과 전혀 관련 없는 가게들이 처음부터 조회되었고 스크롤을 한참 내려야만 진짜 마라탕을 볼 수 있었다.

정확한 로직을 알 수는 없지만 추측해보건데, 스텔라떡볶이의 메뉴 중에서는 '마라로제떡볶이'와 '차돌마라떡볶이'가 있었고 엽떡(사진에는 없지만)에도 '마라'라는 단어가 들어간 메뉴가 있는 것으로 보아 '마라탕'이 아닌 '마라'에 필터가 적용 되는 것으로 보인다.

그렇다면 배민의 마라탕 검색화면은 어떨까?

'마라탕'단어에만 파란색으로 강조한 것을 볼 수 있다. 물론 두찜에서는 진짜 마라탕이 아닌 '마라탕뺨치는' 에서 필터가 적용 되었지만 왜 두찜이 조회가 되었는지 텍스트 컬러의 변화만으로도 납득이 된다. '마라'가 아닌 내가 실제로 입력한 '마라탕'이 필터적용 되었음을 알 수 있다.

2. 상세 검색 필터링

다시 쿠팡이츠로 돌아와서, 쿠팡이츠에서 검색 시 제공되는 필터는 정렬, 인기 필터, 배달비, 최소주문, 가격이 있다.

➊가격 필터의 ₩ 칩은 어떤 것을 의미하는 건지 전혀 모르겠다. 툴팁에서  '가격 범위 안내 -> 가격 필터의 가격 범위는 주문당 평균 주문 금액과 최소 주문 금액을 기반으로 결정되며, 해당 매장에서 주문 시 예상되는 결제 금액의 수준을 나타냅니다.'  라고 알려주고 있지만 그래서 ₩의 갯수의 차이가 무얼 뜻하는걸까? 라는 생각이 든다. 사용자가 이해하기 어려운 필터이다.

또한 내가 적용한 필터가 여러 개 일 경우 해당 조건을 충족하는 가게가 얼마나 있는지 알 지 못한다는 점은 아쉽다. ➋적용하기 버튼은 크기도 커서 필터에 충족하는 가게의 숫자를 카운팅해 표시 해준다면 더욱 친절한 UX일 것이다. 필터를 설정하고 기껏 적용하기까지 눌렀더니 하나도 없거나 1,2개의 가게만 조회되니 허탈한 느낌이 든다.

더불어 주문 많은순 + 배달비 2,000원 이하 필터를 조회했을때 유일무이하게 나온 가게가 있었는데 실제 배달 금액은 젤 저렴한 것이 2,000원이 아니라 2,300원 이었다. 

정확하지 않은 필터기능은 사용자의 입장에서 불편을 느낄 수 밖에 없다.

3. 최소 주문 금액 기능

음식 상세페이지에 최소주문금액 18,000원이 적혀있지만 폰트의 크기가 작고 두께나 색상에 위계가 없어 눈에 잘 띄이지 않는다.

12,000원의 회덮밥을 장바구니에 담았고, 최종 결제 하려고 보니 최소주문금액이 18,000원 이상임을 뒤늦게 알게 된다. 이런 경우 다시 되돌아가서 메뉴추가를 고민 해야 하거나 아니면 1인분 주문을 위해 다른 음식을 또 찾아야하는 번거로운 과정이 발생한다.

배민과 요기요의 경우는 어떨까?

최소주문금액을 맞출 수 있도록 정확한 금액을 안내해준다.

☑️  쿠팡이츠의 편리한 UI/UX

- 결제화면

쿠팡이츠는 한 화면에서 결제가 이루어져 짧고 편리하다.

주소를 확인하고 나면 배달방법을 먼저 정하고, 메뉴를 확인, 결제금액 확인, 결제를 하면 된다

1. 배달/포장 : 토글 버튼으로 손쉽게 변경할 수 있다.

2. 위치 확인 : 중요한 정보중 하나인 배달 위치를 먼저 확인 시켜준다.

3. 배달 방법 : 배달 방법을 선택할 수 있으며, 더 중요한 최종 배달가격에 진한 검은색으로 강조하고, 덜 중요한 기존가격은 취소선과 옅은 그레이로 위계를 세웠다.

4. 가게 및 메뉴 확인 : 주문하려는 가게가 맞는지 다시 한번 확인할 수 있고, 장바구니에 담은 메뉴를 최종적으로 확인 할 수 있다.

5. 메뉴 추가 버튼 : 빠진 메뉴가 있을 때에 메뉴 추가에 손쉽게 접근할 수 있다. 또한 메뉴를 하나 추가하는 것이 오히려 배달비가 절약 되는 경우에도 도움이 될 수 있다.

6. 함께 주문하면 좋을 메뉴 : 놓쳤던 메뉴를 굳이 돌아가지 않고 바로 담을 수 있다.

7. 쿠폰 : 보통 자동 적용되지만 원하는대로 적용 할 수 있다.

8. 결제금액 : 결제금액이 어떻게 산정 되었는지 쉽게 볼 수 있다. 할인이나 쿠폰의 경우에는 빨간색 + 세미볼드체로 강조하여 할인 받은 부분에 대해서 잘 인지할 수 있도록 하였다.

9. 결제수단 : 쿠팡에 등록해 둔 카드가 자동 등록 되어 있어서 결제시에 편리하다.

10. 요청사항 : 가게 사장님과 배달파트너님께 요청사항을 간단하게 입력할 수 있다.

배민의 주문 과정은 어떨까?

배민의 주문과정은 장바구니 담기와 결제까지 두번의 단계를 거쳐야한다.

1. 장바구니 담기

➊장바구니에서 내가 고른 메뉴를 확인하고 ➋배달 방법을 정하고 ➌금액을 확인한 후 ➍주문하기 CTA버튼을 누르고

2. 결제

➊배달 위치를 확인하고 ➋가게요청사항을 수정,확인하고 ➌결제수단 선택 후에 ➍쿠폰을 확인, ➎최종 결제가 이루어진다.

쿠팡과 배민 중 어느 UX가 더 좋은것이라 할 수 없는 양날의 검이라고 생각한다. 쿠팡은 한 화면에서 주문 확인부터 결제까지 한큐에 해결 할 수 있지만 카드가 자동 등록 되어있는 경우에는 확인 절차가 따로 없어서 순식간에 결제가 되어버린다. 만약 주문을 실수해서 취소를 해야하는데 매장에서 빠르게 승인을 해버린다면 주문을 취소를 할 수가 없다.

배민은 장바구니 -> 결제의 순으로 절차가 조금 더 길어져 귀찮을 수는 있지만 다시 한번 더 확인 할 수 있는 기회를 제공 받는다. 하지만 결제화면에서 내가 선택한 메뉴를 따로 볼 수 없는 점은 아쉽다. 가끔씩 내 자신을 믿지못해 확인차 앞으로 다시 돌아갈때가 종종 있는데 그럴때마다 결제 화면에서 입력한 주문 정보가 저장되지 않아 또다시 입력해야하는 번거로움이 있다.

☑️  개선점

1. 배달 최소 주문 금액 안내 및 UI 버튼 개선

최소주문금액을 충족하지 못할 경우, 배민과 요기요의 UI처럼 사전에 알려주면 더 좋은 사용자 경험(UX)이 된다.

2. 필터 기능 로직을 정확하게 수정하고, 검색한 단어에는 계층 구조를 나타낸다.

마라탕으로 검색했을 때, 검색한 그대로 '마라탕'에 초점을 맞춘 필터기능이 검색의 정확도를 높이는 일이다.

대신 고객이 다른 메뉴에도 흥미를 느낄 수 있도록 '마라로제', '마라탕뺨치는' 등 유사단어에는 이 메뉴는 어떠세요?와 같은 추천 모듈을 중간 중간에 보여주는 것이 좋은 방안이 된다.

또한 검색한 단어에 배민UI처럼 컬러를 변경하거나 혹은 볼드체로 위계를 나타내고 단어를 강조한다면 사용자가 납득할 수 있는 필터기능이 될 것이다. 

스타벅스는 2012년 처음 앱을 출시, 2014년 전세계 최초로 한국에서 '사이렌 오더'기능을 도입하였다. 덕분에 스타벅스 앱은 성공적인 옴니채널의 대표적인 사례이기도 하며 이는 온/오프라인 모두 일관적인 경험을 제공하는 큰 역할을 했다.

* 2025년 5월에는 스타벅스 앱의 월간 활성 사용자수(MAU)가 무려 802만 명을 달성하였다.

오프라인 매장과 동일하게 앱에서도 개인화 된 추천을 통해 고객이 선호하는 음료와 푸드를 제안하고, 고객이 직접 커스텀한 메뉴를 저장 및 주문이 가능하며, 픽업 가능 알림 서비스를 제공하면서 고객의 대기 시간을 크게 줄여주었다.

더불어 앱을 통해 메뉴를 주문하면 스타벅스의 멤버십 회원 제도인 리워드(별)적립이 가능한데, 일정 갯수를 모을 때 마다 앱에서 별을 음료 쿠폰으로 즉시 교환할 수 있다. 또한 등급에 따라 무료 사이즈 업, 푸드 할인 쿠폰, 등급에 관계 없는 생일 쿠폰, 한정판 굿즈를 획득할 수 있는 프리퀀시 이벤트 등 공격적인 마케팅과 확실한 보상으로 고객의 참여도를 높이고 있다.

하단 내비게이션 바를 기준으로 각각의 화면이 어떻게 구성되어있는지 분석하여 스타벅스는 고객에게 어떤 UIUX 경험을 제공하는지 알아보고자 한다.

☑️ 하단 내비게이션 바 화면 구성 분석

1. 홈화면

1. 감성적인 일러스트 + UX 라이팅 : 사용자의 접속시간을 고려하여 일러스트와 라이팅이 시간대 별로 바뀌며 사용자의 감성을 자극한다.

2. Chip : 주요 기능인 리워드, 쿠폰, Pay, 구독 서비스를 안내하는 Buddy Pass 까지 총 4개의 칩이 있으며, 클릭이 용이해 접근이 쉽다. 사용자들에게 가장 중요한 기능 중 하나인 리워드의 경우에는 앱을 통해 음료를 구매하기만 하면 어떠한 액션을 취하지 않아도 자동으로 별(리워드)이 적립되고 별의 갯수를 알려준다.

3. 행사 배너(프리퀀시): 프리퀀시는 브랜드의 충성도를 높일 수 있는 게이미피케이션 전략이다. 스타벅스는 연 2회 여름과 겨울마다 e-프리퀀시 행사를 진행하는데 시즌별 미션음료 3잔 포함, 일반 제조 음료까지 총 17잔 이상 구매를 하면 한정판 굿즈를 받을 수 있다. 인기가 많기 때문에 상단에 배너를 배치하여 구매를 유도하는 전략으로 보인다.

4. 퀵 오더 : 최근 주문 메뉴 혹은 나의 메뉴 (즐겨찾기 메뉴)를 통해 빠르게 주문이 가능하다. 시간이 항상 부족한 직장인들의 필수 기능이라 볼 수 있다!

5. 이벤트 배너: 이벤트 배너와 다양한 콘텐츠를 카드형 UI로 디자인했다.

5. 추천 메뉴 : 사용자 주문 내역 및 선호도를 확인하여 추천을 해준다. 개인화 된 추천은 사용자의 만족도를 높여준다.

Painpoint - Insight

1. 너무 많은 콘텐츠를 포함해 길어진 홈화면

일단 대략 15개 이상의 카드형식의 UI배너가 홈화면을 차지한다. 길이가 너무 길어 사용자가 다 확인할 수 없을 뿐더러, 오히려 과다한 정보로 사용자에게 인지부하를 일으킨다. -> 콘텐츠나 이벤트 등을 따로 모아서 볼 수 있는 기능이 필요하다. 

2. 퀵 오더 영역의 아쉬운 위치

기종이 아이폰 미니인 나의 경우, 화면 크기가 작아서 프리퀀시 광고 배너와 중간에 삽입된 이벤트 배너 때문에 퀵 오더 영역이 보이지 않는다. 빠른 결제 기능인 만큼 최대한 상단에 배치해서 접근성을 높여야한다. 아래로 굳이 스크롤을 내려야하는 점은 불편했다.

2. Pay

결제와 관련된 화면으로 현재 가지고 있는 카드를 스와이핑해서 확인할 수 있다.

실물 카드와 동일한 UI와 바코드를 크게 보여주며, 매장에서 해당 바코드를 기기에 찍기만 하면 빠르게 결제 할 수 있다.

아래 '내 카드관리'를 누르면 해당 카드의 충전기능을 바텀시트로 제공하고 있다.

자동충전은 사용자가 정한 특정 임계치보다 금액이 떨어지면 일정금액이 자동충전되는 기능이며, 일반 충전은 원할때마다 일정금액을 충전할 수 있다. 그리고 남은 잔액들은 하나의 카드로 모아주는 잔액이전 기능이 있다.

애플 월렛에도 스타벅스 카드를 추가할 수 있는데, 앱에 따로 접속하지 않아도 간편하게 결제 및 리워드 적립까지 가능하다.

마지막 하단에서는 스타벅스 쿠폰과 모바일 상품권을 쉽게 등록할 수 있다. 

3. Order

하단 내비바에서 오더를 탭했을 때 매장 선택이 안되어 있는 경우, 매장을 선택할 수 있는 바텀시트를 제공한다.

1. 매장 지도 검색: 지도로 주변 매장 검색이 가능하다.

2. 매장 텍스트 검색: 매장명을 텍스트로 검색이 가능하다.

3. 매장 속성 카테고리: 드라이브 스루가 있는 매장, 리저브 매장, 브루잉 커피를 마실 수 있는 매장 등 각 매장의 속성이 다르기 때문에 카테고리 분류된 칩을 누르면 해당 속성을 가진 매장을 현재 내 위치 기반 거리 가까운 순으로 정렬한다. 

4. 카테고리 아이콘: 각 속성을 아이콘으로 보여주어 각 매장의 속성을 쉽게 구분할 수 있다.

매장 설정을 마치면 두번째 화면을 볼 수 있다.

5. 탭 메뉴: 전체메뉴와 즐겨찾기를 할 수 있는 나만의 메뉴 탭이 있으며 전체메뉴의 하위 속성으로는 크게 음료, 푸드, 상품으로 나뉜다.

6. 위치, 이용방법: ∨ 버튼을 누르면 첫번째 사진의 매장 설정 바텀시트를 볼 수 있으며, 음료를 담을 때마다 장바구니 아이콘의 숫자가 카운팅 된다.

7. 나만의 메뉴 홈화면 표시여부: 나만의 메뉴를 설정 후에 홈화면에 표시할 수 있다. 홈화면에서 바로 주문이 가능해 구매 프로세스가 크게 단축된다.

Painpoint - Insight

1. 불편한 지도 매장 탐색

지도 아이콘을 눌렀을 때 초기화면은 내 위치만 보인다. 내 위치와 주변 가까운 매장을 같이 볼 수 있으면 편리 할 것 같다.

4. Shop

Shop 화면은 상단부터 배너, 카테고리, Best items, New products 로 영역을 나누었고, 주로 상품 썸네일 모듈로 구성 되어있다. 그리고 1번과 2번 처럼 이동 아이콘을 누르면 온라인스토어로 이동한다.

온라인 스토어는 메인, 기획전, 베스트, 마이페이지의 4개의 탭으로 나뉘어있다. 메인, 기획전, 베스트는 상품 판매가 중점이라 다양한 상품과 상품 구매를 유도하는 랜딩페이지를 볼 수 있고, 마이페이지는 주문 배송 및 현황, 전반적인 쇼핑 정보에 대해 알 수 있다.

5. Other

Other은 사용자 계정 관리를 위한 탭으로 보통 앱들의 마이페이지 정도로 볼 수 있다.

개인적으로 Other 화면이 좋은 UIUX 를 가졌다고 생각했는데, 그 이유는 스타벅스의 모든 주요 기능을 여기서 확인할 수 있었기 때문이다. 어디있는지 모르겠으면 이 화면에서 가장 먼저 탐색하면 큰 도움이 될 것 같다.

특히 하단 내비바의 대표 기능들이 깔끔하게 정리 되어 있는데 페이, 오더, 샵 탭의 모든 주요 기능을 한 페이지에 모아 놓아 쉽게 접근할 수 있다.

6. 예상 대기 시간 안내

6번은 추가적으로 설명하고 싶은 부분이다!

스타벅스는 작년 12월 사이렌오더 기능을 고도화했다. 특정 시간대 주문이 몰려 음료 픽업까지 상당한 시간이 예상되는 경우에는 사이렌오더 결제 전 예상 대기시간을 사전에 알려주는 사전 알림을 강화했으며, 주문 취소 기능을 도입했다. 결제 전 대기 예상 시간을 15분, 20분으로 세분화해 고객에게 팝업 알림을 제공한다.

Painpoint - Insight

1. 매장 승인 후에는 취소할 수 없다.

결제 직전까지 가서야 긴 예상 대기 시간을 볼 수 있고, 오더 후 매장이 빠르게 승인해버리면 취소가 어렵다. 현실적으로 매장 승인 이후 취소는 불가능하다고 생각한다. 음료를 만들고 있는 도중에 고객이 취소하면 음료를 버려야하기 때문이다. 언제든지 취소가 가능하다는 것은 스타벅스의 비용적인 측면에서도 부정적이고, 바리스타의 헛 된 수고는 음료를 더 늦게 픽업하게 되는 길이다.

실시간 매장의 혼잡도를 선 제공하면 사용자가 효율적으로 매장을 선택할 수 있고 취소를 해야하는 상황이 덜 생길 것이다.

☑️ 사용자 분석

스타벅스의 주 고객층은 2030 여성이다. 

고로 스타벅스 앱의 사용자도 비슷할 것으로 보고, 아래의 내용을 캡쳐해왔다.

전체 사용자 중에서도 직장인의 비율이 제일 높은데, 아무래도 시간이 항상 부족한 직장인에게 '사이렌 오더' 기능이 큰 몫을 하는 것으로 보인다. 그리고 신생아/유아 부모와 초등학생 부모가 높은 비중을 차지하며 전업주부, 워킹맘의 비중 또한 높은 축에 속하는 것을 보아 여성 사용자가 많다는 것을 알 수 있다. 서치해보니 사용자 성비는 남성 25%, 여성 75%로 여성 사용자 비중이 절대적으로 높았으며 1인당 앱의 평균 사용시간은 15.7분으로 나타났다.

* 출처(사용자 성비, 평균사용시간) : Brand Brief - 브랜드브리프(http://www.brandbrief.co.kr)

☑️ 개선점

페인포인트와 인사이트를 기반으로 개선점을 간단하게 수정해보았다.

1. 퀵 오더

비교적 아래에 있던 퀵 오더기능을 홈화면 상단에 배치하여 접근성을 높였다.

2.  지도

매장 지도 기반 검색 시 매장 목록과 지도 위치가 별개의 화면이라 불편했다.

네이버지도처럼 한 화면에 매장목록과 위치를 함께 제공하되, 목록에서 원하는 매장을 클릭하면 해당 매장의 위치로 지도가 이동, 바텀시트는 해당 매장의 정보를 볼 수 있게끔 수정해보았다.

3. 실시간 매장 혼잡도 안내

작년부터 사이렌 오더 결제 전 예상 대기 시간을 안내해주는 기능이 생겼지만, 것보다 앞서서 매장의 특성을 설명해주는 화면에서 매장의 혼잡도를 혼잡, 보통,여유 라는 작은 칩으로 안내해준다면 훨씬 좋은 사용자경험이 될 것이다.

3주차 레퍼런스 과제 끝..! 

중간에 폰이 고장나서.. 급하게 아이패드에서 화면캡쳐를 한 탓에 크기가 뒤죽박죽이라 아쉽다 😦

컬리는 2015년 샛별배송(새벽배송)이라는 차별화 된 물류 전략을 선보였다. 밤 11시 전까지 식품을 주문하면, 다음 날 7시 이전까지 고객의 집 문 앞까지 배송해주는 아주 혁신적인 서비스였다. 이후 많은 이커머스 플랫폼은 새벽/당일 배송 서비스를 실시하였고 우리나라 유통 패러다임에 큰 변화를 가져왔다. 이제는 하루만에 택배가 도착하는 일이 당연해진 시대가 되었다.

이번엔 사용자 태스크 플로우를 토대로 컬리를 분석할 것이고, 상품 구매의 과정을 상품 탐색 및 검색, 상세페이지 확인, 최종 결제까지 3가지로 나누어보았다. 그리고 마지막에 개선점을 정리해 볼 것이다.

☑️  User Task Flow 분석

1. 상품 탐색 및 검색 기능

상품탐색이 가능한 홈화면, 카테고리 탭과 검색이 가능한 검색 탭 화면순으로 분석해보았다.

• 홈화면 탭

홈화면은 상품 탐색 과정의 가장 첫번째 여정이다.

상단 기본 탭은 '컬리추천'으로 사용자에게 다양한 콘텐츠를 제공하고 있으며, 상품을 소개하는 다양한 모듈들이 모여 하나의 페이지로 구성되어 있다. 중간 중간에 카운트다운 타이머를 활용하여 고객이 시간내에 합리적인 가격의 상품을 소비할 수 있도록 유도하고, 날씨 기반 상품 추천, 큐레이션 콘텐츠로 고객의 관심을 이끈다.

이밖에 상품을 소개하는 모든 타이틀과 서브타이틀 라이팅이 사용자 친화적이다.

그냥 대용량 쇼핑이 아닌 마음까지 넉넉한 대용량 쇼핑 , 거실에서 즐기는 해외여행, 떠나요 컬리 휴게소, 일주일 도시락 반찬 골라담기! 라는 직관적이면서도 고객들이 자주 사용할 법한 일상적인 언어를 사용하고 있다. 고객을 공감하고 소통하는 메시지는 사용자 경험에 아주 큰 플러스 요인이다.

컬리의 베스트 제품을 모아 놓았다.

필터를 누르면 바텀시트 카테고리가 뜨고, 원하는 카테고리를 탭할때마다 CTA버튼에 상품갯수가 달라진다. 버튼색상 대비가 진해서 눈에 잘 띈다. 그리고 '신상품', '알뜰쇼핑' 탭의 화면은'베스트'와 동일한 UX/UI 구조를 가졌으며 카테고리만 변경된다.

'특가/혜택'은 주로 이벤트를 모아놓았다. 상품의 실사 이미지 + 후킹 문구를 더한 배너를 보여주고 있는데 하나의 콘텐츠 큐레이션 이라고 볼 수 있다. 누르면 콘텐츠가 나오기도하고, 각 주제에 알맞은 쿠폰을 쉽게 다운 받을 수도 있으며 상품이 많을 경우엔 상단 탭에 카테고리를 분류해 쉽게 상품을 탐색 할 수 있도록 돕는다.

•  카테고리 탭

- 상단 탭: 뷰티 사업영역을 확장하여 마켓컬리와 뷰티컬리로 나뉘어있다.

- 콘텐츠 로우(Row): 카테고리는 특정 상품을 찾기 위한 화면이기도 하지만 컬리가 밀고 있는 행사/이벤트나 콘텐츠를 사용자가 쉽게 접근할 수 있도록 했다.

- 카테고리: 넓은 범주의 카테고리는 크게 둘로 나누었다. 식품 배송이 위주인 컬리는 식품 카테고리를 더욱 자세하게 나누었는데 왼쪽 박스는 식품의 범위가 넓은 카테고리이고 오른쪽 박스는 더욱 좁게 구분지었다. 하지만 카테고리 분류가 일관적이지 않은 것 같다. 특히 과일•견과•쌀, 국•반찬•메인요리, 면•양념•오일은 카테고리 포괄 범위에 공통점이 안보인다. 그리고 두번째 사진에서 볼 수 있듯 열무가 양파•대파•마늘•배추 카테고리에 속한다는 것을 쉽게 인지하기는 어려울 것 같다. 물론 배추와 같은 개념으로 적용하면 알아낼 수도 있겠지만(?)... 

또한 청양고추가 양파•대파•마늘•배추에 잘못 분류 되어있기도 하다.

결론은 상품을 찾는데에 쉬운 카테고리 아니라는 생각이 들었다.

2. 상품 검색 

•  검색 탭

하단 고정 탭에 검색기능이 있어 접근성이 좋다.

검색화면은 검색창, 최근검색어, 추천검색어, 급상승 검색어가 있고 아주 심플하다.

검색 시에는 자동완성 검색기능이 있는데 내가 입력한 단어의 폰트만 한층 얇게하여 위계를 주었다.

삼겹을 쳤더니 '삼겹'부분의 폰트가 얇아졌다. 그동안의 내 경험으로는 보통 입력한 단어가 볼드체 + 색상변경 되기 마련이었는데 컬리는 반대였다. 입력한 단어가 얇아지기보단 굵어져야 입력한 단어가 눈에 더 잘 띄이지 않을까? 다소 아쉬운 UI였다.

최근검색어와 추천검색어는 원형 칩을 사용해 쉽게 클릭 + 검색을 할 수 있다.

최근검색어의 칩 안에 '닫기 모양의 X 아이콘'이 따로 없고 오른쪽에 위치한 점 세개 아이콘을 누르면 선택삭제 or 전체삭제를 할 수있다.

그 중 선택삭제의 경우 아이콘 탭 > 선택삭제 선택 > 개별 삭제를 할 수 있는데 나에겐 귀찮게 느껴졌다.

칩을 눌러서 검색하려다 모르고 닫기 아이콘을 누르는 경우가 있어서 그런걸까? 그리고 쿠팡도 컬리와 동일 했는데 무슨이유일지 궁금하다.

3.  상세페이지

•  상세페이지

브로콜리 상세페이지를 아래로 스크롤하며 캡쳐해보았다.

상단 사진 차례대로 사이즈가 큰 썸네일 사진 -> 상품 요약 설명(상품명, 원산지, 할인 및 가격, 구독유도버튼, 쿠폰버튼, 배송안내글) -> 관련 콘텐츠 소개(고객들은 이렇게 활용해요) 및 광고 기반 상품 추천 -> 다른 고객이 함께 본 상품 추천 -> 상품 설명 순이었다.

브로콜리를 바로 소개하기보다는 관련 컨텐츠와 상품 추천 기능을 우선배치 하였다. 이 영역에서도 바로 장바구니에 담을 수 있도록 담기 버튼을 추가해놓았는데 추천 상품 영역의 접근성을 높여 브로콜리를 제외한 다른 상품을 쉽게 구매까지 유도하기 위함으로 보인다.

컬리의 후기는 별점 없이 사진 혹은 텍스트 리뷰가 전부이다.

물론 좋은 리뷰들은 해당 상품을 이용해서 요리 과정까지 친절하게 작성하여 유용한 정보를 제공하기도 한다. 그러한 사용자 덕분에 보다 합리적인 구매를 할 수 있지만, 별점이나 만족도로 후기를 대체하고 싶은 사용자도 있을텐데 사진 혹은 텍스트 리뷰만을 요구하는 것은 사용자가 후기 작성 자체에 부담을 느낄 수도 있다.

그리고 후기의 디폴트는 추천순이라 대부분 긍정적인 후기를 볼 수 있다. 때로는 부정적인 후기를 원하는 사용자도 있을텐데, 긍정적인 후기와 부정적인 후기를 구분하기가 어렵다는 것이 불편하다. 별점, 만족도 평가 기능을 도입하면 사용자가 원하는대로 후기를 선별해서 볼 수 있을 것이다.

4. 최종 결제 (구매)

상세페이지에서도 쿠폰을 다운받을 수 있다. 하지만 쿠폰을 받았어도 여전히 동일한 버튼 UI 때문에 이미 발급된 쿠폰임을 알기가 어렵다. 쿠폰을 다운 받았더라면 버튼 색상을 다르게 바꾸고 '다운 완료' 등의 바뀐 라이팅을 사용자에게 안내해야 할 필요가 있다.

보통 장을 볼 때는 개별구매가 아니라 장바구니에 한번에 담아 놓고 한번에 구매하는 것이 편리하다. 그래서 바로 구매하기 버튼이 없고 장바구니 담기 버튼이 있다. 그리고 그냥 장바구니 담기도 아니고 5,490원 이라는 정확한 가격을 안내해준다.

장바구니에 담으면 두번째 사진 처럼 바텀시트가 뜨는데 상단에는 장바구니 바로가기 버튼과 하단에는 다른 고객이 함께 구매한 상품을 상품추천을 해준다. 

바텀시트의 바로가기 버튼을 누르면 장바구니 화면으로 이동한다.

구독 멤버십을 운영하는 컬리는 '혜택없이 XX,XXX원 주문하기'라는 다소 강력한 라이팅을 사용하고 있으며 채도가 높은 보라색(대표브랜드색)바탕 + 대비되는 흰색 폰트의 버튼이 '혜택없이' 라는 단어를 더욱 눈에 띄게 만든다. 거기다 컬리멤버십에 가입유무의 금액차를 확실하게 보여주어서 멤버십 가입을 더욱 유도하고 있다. 그리고 아래로 굳이 다 내리지 않아도 바텀시트가 항상 떠있기 때문에 편하게 주문하기 버튼을 누를 수 있다.

장바구니 화면을 아래로 스크롤하면 지금 장바구니에 많이 담기는 상품, 이 상품 어때요? 등 고객의 취향을 기반으로 상품을 추천한다.

주문서 화면 상단에 주문 상품, 주문자 정보, 배송지, 배송요청사항 등 상품 배송 관련 필수 정보가 먼저 위치해있다.

편리한점은 가입 시 미리 입력해놓은 값을 긁어온다.

하지만 만약 다른 곳으로 배송하고 싶을 때 배송지 영역에서 '변경'을 누르면 '장바구니로 이동하여 다른 배송지를 변경하시겠습니까?'라는 모달창이 뜬다. 배송지 변경을 위해서 다시 장바구니로 이동하고 이 후 같은 과정을 또 거쳐야 하는 번거로움이 있다.

적립금/캐시를 입력할 수 있는 영역이 있으며 결제수단에서는 주황색 칩으로 혜택을 강조했다.

마지막 최종결제금액 영역에서도 할인을 놓치지 않도록 안내한다.

최종 결제 직전 배송 및 메타 정보를 바텀시트로 알려준다.

✅  개선점 정리

1. 카테고리 재구성의 필요성

- 카테고리 분류가 일관적이지 않다. 과일•견과•쌀, 국•반찬•메인요리, 면•양념•오일은 카테고리 포괄 범위에 공통점이 안보인다.

2. 상품 검색 시 자동완성기능에 폰트 위계 수정

- 입력한 단어가 얇아지기보단 오히려 굵어져야 입력한 단어가 눈에 더 잘 띄일 것이다.

3. 후기 별점 및 만족도 기능 추가

- 의도된 디자인으로 보이긴하지만, 텍스트/사진 리뷰가 부담스러운 사용자를 위해 별점 및 만족도 체크 기능을 추가하여 사용자에게 선택권을 부여해야 한다.

4. 쿠폰 버튼 디자인 변경

- 버튼으로 쿠폰을 받을 경우 받기 전/후 버튼 디자인이 달라야 한다.

5. 구매 과정에서 배송지 변경 플로우 수정

- 구매 과정에서 배송지를 변경하려면 장바구니로 다시 돌아가야 하는 번거로움이 있다.

부실하지만.. 열심히 한 2주차 레퍼런스 분석이었습니다 ..!

많은 쇼핑앱들이 있지만 그 중에서 내가 실제로 잘 사용하고 있기도 하고, 지난 3년간(24년 9월 기준) 앱 사용자가 무려 277% 증가한 29CM에 대해 궁금해졌다. 생각해보니 나는 왜 29CM를 사용하고 있을까? 그리고.. 대체 어떻게 하면 277%가 증가 할 수가 있나..? 😮

29CM를 뜯어보기 전에 E-Commerce의 2025 최신 트렌드에 대해 알아보았다.

올해의 이머커스를 대표하는 키워드는 'Discovery Commerce'로 '발견형 커머스'가 주요 키워드이다.

'발견형 커머스'란 명확한 구매 의도가 없었던 소비자들이 컨텐츠나 상품을 둘러보다가 잠재적 구매욕구를 발견하고, 자연스럽게 구매로 이어지도록 유도하는 커머스 전략이다.

이러한 '발견형'은 매장을 둘러보다가 계획에 없던 상품을 구입하게 되는 오프라인 쇼핑에서 경험할 수 있었던 것으로 '검색'을 통해 특정 상품을 구입하는 온라인쇼핑에서는 경험할 수 없었다. 하지만 전세계 소셜미디어의 확산과 AI의 발전으로 온라인에서도 검색형 ->탐색형으로 이커머스의 패러다임이 전환 되었다.

인스타그램, 틱톡, 유튜브 같은 소셜 플랫폼이 소비자 자신도 인지하지 못했던 관심과 흥미를 일깨워주었고 최종적으로 구매단계 까지 넘어간 것이다. 특히나 릴스, 틱톡, 숏츠와 같은 숏폼 콘텐츠들은 발견형 커머스로의 확대에 더욱 큰 역할을 했다.

* 참고 아티클 : https://retailtalk.co.kr/Trend/?bmode=view&idx=162916915

29CM를 본격적으로 파악해보자.

공홈 소개를 읽어보면 그들은 29CM를 이렇게 설명한다. 

• 상품이 일상에서 어떤 모습으로 사용될 수 있을지 고객의 일상에서 더 나은 선택지는 무엇인지 가장 깊게 스토리텔링하는 커머스 플랫폼
• 독보적이고 축적된 스토리텔링 노하우를 기반으로 늘 새로운 제안과 큐레이션, 신규 콘텐츠로 가득한 플랫폼
• 모두가 더 저렴하고 더 많은 상품을 외칠 때, '내가 구매하는 브랜드의 가치관’을 알려주기 위해 고민해 온 유일한 플랫폼

실제 고객인 내 입장에서도 29CM 브랜드 스토리는 대놓고 판매가 목적인 상업적인 느낌이 들지 않아서 신뢰가 있다. 여러 상품을 토대로 패션, 컬처, 라이프스타일 등 수많은 컨텐츠를 생산하여 고객에게 브랜드의 가치를 알려준다. 그리고 이렇게 수많은 브랜드들이 있지만 어느 한 곳 튀지 않고 균형있는 톤앤매너를 갖춘점은 29CM의 엄청난 능력(?)이라는 생각이 든다.

1. 홈화면(HOME)

일단 홈화면 탭은 1개이지만 우먼, 뷰티, 홈, 맨, 베스트 등 또 다른 화면으로 이동할 수 있는 하나의 뎁스가 더 있다. 아무래도 이커머스는 다양한 상품을 자주 노출시켜야 하니까 새로운 화면이 자주 업데이트 되는 것 같다. 더불어 내가 분석을 시작한 시점은 '이구위크'가 한창 진행중이라 앱을 실행 했을때 기본 홈화면은 '이구위크'이다. 

상단 왼쪽 이미지는 5월에 내가 캡쳐 해놓은 홈화면인데, 이때까지만 해도 상단 네비바에 '발견'이 없었다. '이구위크'는 큰 행사이니까 그렇다쳐도 '발견'은 조금 다르게 다가왔다. 보자마자 가장 처음에 서치했던 '발견형 커머스'키워드가 딱 생각났다.

최신 트렌드를 조사해본 만큼 '발견'화면을 중점으로 탐색해보고자 한다.

전체적으로 인기/추천 기반의 발견형 커머스 화면인 것으로 보인다.

가장 상단에는 이구위크 홍보를 크게 해놓았고 두번째는 내가 최근에 자주봤던 롱스커트들을 작은 썸네일 모듈로 보여주는데 브랜드명, 할인퍼센트, 가격 부분 폰트의 강약조절이 잘 되어있고 포인트 컬러인 주황색이 눈에 잘 띈다.

두번째 섹션은 내가 둘러본 '카테고리의' 인기상품도 보여주는데, 브라탑은 사실 보지 않았지만 내가 자주 본 슬리브리스 상의 중에서 인기 템에 브라탑이 많았나보다 !

이 섹션이야 말로 발견형 커머스에 가장 알맞은 부분인 것 같다. 별로 둘러볼 생각은 없었지만 나의 관심사를 물어봄으로써 오 이거 좋네? 필요할것 같은데? 살까? 라는 생각이 든다. 실제 이사를 앞둔 나는 공간정리에 관심은 있지만 아직 이사를 가지는 않아서 따로 찾아보지는 않았다. 근데 눈에 보이니까 궁금해진다,,

이런 다양하면서 감각적인 콘텐츠들 때문에 오프라인 쇼핑처럼 사용자가 조금이라도 앱에 오랫동안 머물게 만들고 계획에 없었던 지출을 하게끔 만드는 것 같다. 

2. 카테고리(CATEGORY)

커머스의 카테고리는 상품이 많은 만큼 복잡할 것이다. 

29CM의 카테고리는 크게 왼쪽에는 대카테고리, 오른쪽에는 중카테고리로 구분해놓았다. 소카테고리는 한 뎁스를 더 들어가야 한다. 예를 들어 의류 > 상의 > 반소매 티셔츠 이런식이다.

최대한 간결하게 카테고리를 잘 구분지었다. 하지만 그래도 어쩔수 없이 길어지는 점은 스크롤로 조정할 수 있다. 소카테고리까지 보여주었으면 스크롤이 길어져 더욱 복잡했을 것이다.

상단에 있는 29체험단, 선물하기, 이벤트, 해외브랜드 등 컨텐츠 리스트가 있는데, 이 컨텐츠들은 사용자가 자연스럽게 브랜드를 인지하고 컨텐츠를 즐기며 상품구매까지 이어질 수 있도록 한다.

3.  검색(SEARCH)

검색 결과 화면 UI에는 사용자가 원하는 정보를 빠르게 찾을 수 있도록 중요한 디자인 요소들이 포함되어야한다. 검색창 위치, 검색어 입력 전/후 화면 구성, 그리고 검색 결과에서의 제안된 항목들이 사용자 경험에 큰 영향을 미치게 된다!

가장 상단부터 검색창, 최근검색어, 지금 많이 찾는 선물, 지금 많이 찾는 의류브랜드, 홈브랜드, 잡화브랜드 마지막이 지금 많이 찾는 검색어순이다. 지금 많이 찾는 카테고리들을 대표로 선정해서 보여주는 것 같은데 내가 검색했던 카테고리가 아니라 개인화는 아닌 것 같고 무슨 기준인지는 모르겠지만, 자리차지를 많이 하는 것 같은 느낌도 있어서 추천 소카테고리를 작은 모듈형식으로 보여주는 방법도 괜찮을 것 같다.

*(대카테고리보단 소카테고리, 요즘 많이 찾는 의류, 신발, 가방 보다는 타겟을 정해서 요즘 많이 찾는 반소매 티셔츠, 롱 원피스, 미니 스커트가 좋을 것 같다.)

두번째 사진의 지금 많이 찾는 검색어(=인기검색어)는 무려 100가지나 보여준다. 문제는 100까지 스크롤을 끊임없이 내려야하는데 굳이 그렇게 하지 않고 적당히 30개 정도만 보여주되 위와 같이 사용자 액션을 좌우 스와이핑 할 수 있도록 보여주는 것이 더욱 모바일에 최적화된 화면이라 생각한다.

세번째 사진은 자동완성기능을 사용해 오타방지, 연관된 검색어를 찾을 수 있도록 도와주는데 입력한 단어는 주황색의 볼드체로 바뀌어 쉽게 알아볼 수 있도록 강조한다. 그리고 사용자가 원하는 상품이 어떤 곳에 위치해있는지 정확하게 알 수 있도록 카테고리를 긁어와서 브레드크럼 형식으로 보여준다. 

네번째 사진은 사용자의 검색 결과를 보여줄 수 없을 때는 다른 행동을 할 수 있도록 유도하고, 아래에는 추천 상품을 안내한다.

4. 찜(LIKE)

찜화면은 아래와 같이 설명할 수 있다.

① : 상품, 브랜드, 마이셀렉션, 콘텐츠 로 나뉜 상단 탭바이다.

② : 추가 쿠폰에 대한 안내로 전체보기를 누르면 바텀시트가 올라온다.

③ : 셀렉션에 상품 추가는 내가 하트를 눌린 상품들을 여러 폴더에 정리할 수있다. 쉽게 말해 음악 플레이리스트를 만드는 것처럼 말이다!

최종적으로 마이셀렉션 화면에서 내가 만든 모든 폴더를 볼 수 있다.

마지막으로 오른쪽 하단에는 알림기능의 FAB(Floating Action Button)가 있다.

상단 사진들은 ③ 셀렉션에 상품 추가 할때의 플로우로 간단한 기능이다. 핀터레스트 핀/보드나 음악 플리 꾸미듯이 패션에 관심이 많고, 룩북으로 정리하길 좋아하는 사람들에게 추천 하고싶은 기능이다.

쉽게 상품을 추가 할 수 도, 셀렉션을 편집 할 수 도 있고 인스타그램 스토리에 공유를 할 수 있는 것도 좋은 아이디어라 생각한다.

이 플로우는 지그재그의 찜 화면과 비교를 해보아야겠다. 지그재그는 좀 복잡해보였지만 다른 기능이 많았기 때문에 ..!

5. 마이페이지(MY)

마이페이지에서는 사용자가 가장 궁금할 쿠폰, 마일리지 보유 현황과 배송 현황을 가장 먼저 보여주고 있다.

나머지는 직선으로 섹션을 잘 구분지었다.

②는 큰 문제는 아니지만 조금 아쉬운점인데 최대한으로 내려도 로그아웃버튼이 짤린다! 해상도 때문일까 ..모르겠지만 화면이 좀 짧은것 같다. 

①의 FAB는 처음에 뭔지 몰랐는데 알고보니 최근 본 상품이었다. (최근 본 상품은 나의 쇼핑정보(두번째이미지)에도 있다.)

아마 최근 본 상품은 마음에 드는 상품이 있었는데, 그 상품이 어떤것이었는지 기억이 안날때 주로 찾아볼 것이다.

여기서 아쉬웠던점 2가지가 있었는데,

1. 썸네일과 해당 상품명만을 볼 수 있으며, 브랜드명이나 가격을 보기 위해서는 상세화면으로 이동해야해서 한 뎁스가 더 늘어난다.

2. 단순 나열 되어 있어 최근 본 상품이 많은 경우에는 오히려 찾기 어렵다.

썸네일 크기도 조금 더 키워 잘 보이게 하고 날짜별이라던지 브랜드별로 구분해 놓았다면 내가 찾는 상품이 어떤 것이었는지 조금 더 쉽게 찾을 수 있지 않을까?

이렇게 하단 고정 탭바를 중심으로 29CM 앱 분석을 간단하게 해보았다. 사실 분석이긴하지만 너무 주관적이라서 더 어려운 것 같다.. 나에게는 페인포인트가 남에게는 아닐 수도 있고, 나에게 편한것이 남에게는 불편한 점 일 수도 있으니까 ㅠㅠ

어찌됐든, 실제 사용자인 나의 입장에서 페인포인트는 아래 2가지로 요약할 수 있다.

1. Search 화면은 지금 많이 찾는 OOO 섹션과 인기검색어가 화면을 불필요하게 장악하고 있는 느낌이다.

->  기본적으로 검색창 위치, 자동완성기능, 검색 결과에서의 제안 화면은 좋은 ui를 가졌다. 하지만 검색 탭을 눌렀을 때 가장 처음에 보는 화면이 복잡해서 좀 더 단순하게 배치하면 좋을 것 같다. 지금 많이 찾는 OOO섹션을 줄이고, 인기 검색어들도 100가지보단 30여개정도를 좌우로 스와이핑해서 보여주는 것이 사용자도 보기 편하고, 모바일 화면에 최적화 되어있다고 생각한다. 

2.  마이페이지 > 최근 본 상품 화면이 단순 나열 되어 있어서 내가 찾고자하는 상품을 쉽게 찾기 어렵다.

-> 썸네일 크기를 키워서 상품을 잘 돋보이게 하고 날짜나 브랜드별로 구분 할 수 있게 필터를 걸 수 있으면 좀 더 찾기 쉬울 것 같다.

어쨌든 29CM는 살짝 아쉬웠던 점은 있지만 너무 잘 만들어진 앱이라 큰 페인포인트는 보이지 않는 것 같다..!

오히려 소구점이 더 잘보였다.(?) 하지만 기능 플로우별로 분석을 다시 해본다면 내가 보지 못했던 페인포인트가 나올 수 있을 것 같아서 기능별로도 분석해보아야겠다..!

긴 글 읽어주셔서 감사합니다 :-)

**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 ! 유튜브에 '피튜브' 추천해요.

이번부터는 업데이트된 UI를 사용하겠습니다!

베리언트 (Variants)

흔히 '변수'라고 부른다.

스타일이나 속성이 서로 다른 컴포넌트들을 말한다.

컴포넌트를 해야만 사용할 수 있다.

완성된 베리언트를 먼저 보고 시작하는게 좋을 것 같다.

위 캡쳐는 바탕색이 서로 다른 (색깔이라는 속성이 다름) 컴포넌트들이 한되 묶여있는 것을 볼 수 있다.

인스턴스로 간편하게 white, grey, black 색상을 변경할 수 있는 것이다.

Variants를 만드는 방법

두가지로 나뉘는데, 일반 객체일 때와 마스터 컴포넌트 일 때로 나뉜다.

1. 일반 객체일 때

2개이상의 객체를 선택하고 Command+Option+k 를 누른다.

혹은 Create component set 클릭해도 된다.

그러면 이렇게 2개의 Variants 가 생긴다.

2. 마스터 컴포넌트일 때

1) 마스터 컴포넌트가 1개일 때

Add variants(=핑크색 사각형)을 누른다.

2) 마스터 컴포넌트가 여러개일 때

컴포넌트 4개를 드래그하고 Combine as variants 를 누른다.

이렇게 하면 간단하게 Variants 를 만들 수 있다.

베리언트는 다양한 프로퍼티와 밸류값으로 여러개의 조건을 만들 수 있다.

프로퍼티(=속성)를 추가해서 각각 배경색상과 피튜종류로 카테고리명을 정해주었다.

그리고 배경색상 프로퍼티에는 off,on 으로 각각의 밸류값에 고유이름을 지정해주었고,

마찬가지로 피튜종류 프로퍼티에도 어머나, 똘똘, 안경 으로 각각의 밸류값에 고유이름을 정해주었다.

총 2개의 프로퍼티가 생긴 셈이다.

필요한 인스턴스를 꺼내어 오른쪽 패널에서 배경색상을 on, off 할 수 있고, 원하는 아이콘도 선택할 수 있다 ! 

**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 ! 유튜브에 '피튜브' 추천해요.

스왑 인스턴스 (Swap instance)

인스턴스를 다른 인스턴스로 바꿔주는 기능

이미지나 아이콘만 변경하고 싶을 때 쓰면 된다.

예를 들어, 나머진 그대로인데 아이콘만 변경하고 싶을 경우에 사용할 수 있다.

단, 모든 아이콘과 바꾸고 싶은 모듈(아이콘+텍스트 조합 최소단위)을 컴포넌트화 해야한다.

그리고 활용할 때는 당연히 인스턴스에다 해야한다!! (마스터 컴포넌트 원본은 별도로 관리한다.)

프로퍼티 (Property)

프로퍼티의 뜻은 '속성'이다. '속성'은 사물이 가진 특징이나 성질을 일컫는다.

그래서 피그마에서 사용하는 프로퍼티는 이미 완성된 컴포넌트에 어떠한 필요한 속성을 더해주는 기능이라고 보면 쉽다.

컴포넌트에 플러스 알파로 옵션기능을 넣어주는 것이다!

1. 텍스트 프로퍼티 (Text properties)

텍스트 레이어에 프로퍼티 옵션을 주어서 여러개의 인스턴스에 적힌 텍스트를 한번에 바꾸어 주는 기능이다.

버튼 텍스트, 인풋텍스트의 Place holder, 헬프 텍스트 등 텍스트 레이어가 반복되는 곳에 적용한다.

피그마가 새롭게 업데이트 되어서 인터페이스가 조금 달랐다. 그래서 연습용 버튼을 만들어보았다.

연보라색 연습용 버튼을 컴포넌트로 만든 후 프로퍼티를 줄 텍스트 부분만 클릭하고, 오른쪽 텍스트 패널에서 Create text property (=핑크색 동그라미)를 누르면 Create component property 모달창이 뜬다.

Name값에는 Button을, Value값에는 연습용이라고 입력해보았다.

인스턴스 두개를 꺼냈다. 핑크색 사각형 부분에는 수정할 텍스트를 입력할 수 있다. 

메롱 이라고 입력하니까 두개 텍스트가 후루룩 바뀌었따.

만약 인스턴스가 너무 많거나 여러 프레임에 걸쳐 중구난방으로 위치해있을 때는 인스턴스 하나를 클릭하고 command + / 를 눌려서 select all with same instance를 입력하면 전부 다 찾아준다!

2. 불리언 프로퍼티 (Boolean property)

불리언(Boolean)이란 오직 참(True)과 거짓(False)만을 구분하는 논리값을 뜻한다.

프로퍼티 특정요소를 참과 거짓 값으로 on/off 토글을 만들 수 있다.

주로 버튼이나 모듈의 아이콘 또는 이미지에 적용을 한다. 옵션을 적용해서 끄고 켤 수 있다. 

ex) 토글버튼 on/off, 모듈 내 아이콘 숨김/노출 처리 등

그럼 적용해보자!

옵션을 주고자하는 모듈전체를 컴포넌트로 만들고 불리언 프로퍼티를 적용시킬 이미지만 클릭하여서 오른쪽 Layer 패널에 Create boolean property(=핑크색 사각형)을 누른다.

그리고 모달창이 뜨면 네임값을 이미지라고 써두고 프로퍼티를 만든다.

인스턴스 꺼내오면 이미지 부분에 토글버튼이 생긴것을 확인 할 수 있다. 토글버튼을 끄면 숨김처리가 된다.

3. 인스턴스 스왑 (Instance swap)

스왑 인스턴스 기능을 좀 더 편리하게 사용할 수 있는 기능.

하다보니 전부 비스무리하다는 느낌이 있넹..

모듈과 아이콘들 모두 컴포넌트로 만든 후, 모듈에서 바꿔 줄 부분을 선택한다.

그리고 create instance swap property(=핑크색 사각형)을 클릭한 후,

preferred values 에서 플러스 버튼을 눌러주고 바꾸고싶은 아이콘들에 체크해준다 (=빨간색 사각형)

Nested instances에 뜨는 아이콘들은 컴포넌트로 이미 만들어져있는 것들이다. 바꾸고싶은 아이콘들을 모두 체크하면 여러가지 모듈을 만들 수 있다.

이렇게 말이다 !! 캬캬 끝

너무 길어져서 variant 부분은 다음 글에 작성할게요 !