전환율을 높이는 UI/UX 디자인은?
디자인 독학하기 05
UI/UX 디자인 경험을 공유합니다 :)
[Contents]
01 1 Thing 1 Page
02 신뢰를 주는 UI/UX 디자인은?
03 CTA를 누르게 하는 UI/UX 디자인은?
04 전환을 넘어 잔존율을 올리는 UI/UX 디자인은?
05 참고자료
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
우리 서비스에서 '첫 결제'가 일어난 건 10월 12일이었다. 8월 중순 기존에 운영하던 앱 서비스를 중단하고 새로운 서비스를 만들기 시작한 지 2달 만의 일이었다. 회사가 설립된 지 1년 넘는 시간 동안 매출이 전혀 없었는데, 내가 팀에 합류한 뒤 생긴 변화라 기분이 꽤 좋았다.
하지만 많은 사용자(고객)가 결제를 하도록 하는 건 정말 어려운 일이다. 결제는 아주 가끔씩 일어났다. 이대로는 서비스의 미래가 없어 보였다. 우리 팀은 '결제 전환율'을 높이자는 목표로 하루하루 고군분투하고 있다.
서비스의 품질을 높여 사용자가 최종 결제 버튼을 누르도록 하는 게 목표다.우리가 새로 만들기 시작한 서비스는 패션 인플루언서들이 코디가 어려운 사람들에게 코디 조언을 해주고, 코디를 위한 상품을 추천해줄 수 있도록 도와주는 온라인 코디 서비스다. PM(Product Manager)이자 UI/UX 디자이너로서 나의 미션은 '모바일 웹' 기반 제품 2개를 한 달 안에 완성하는 일이었다. 하나는 코디가 어려운 사람들(이하 사용자)을 위한 제품, 다른 하나는 패션 인플루언서(이하 스타일리스트)들을 위한 제품이었다.
우리 팀이 새로운 서비스를 '앱'이 아닌 '웹' 기반으로 만든 건 크게 3가지 장점이 있어서다. 첫 번째 장점은 빠른 주기로 서비스를 개선하면서 반응을 데이터로 살피고, 개선하기를 반복하는 우리 팀의 일하는 방식에 적합하다는 점이다. 앱은 구글 플레이스토어나 애플 앱스토어에 업데이트 후 승인을 받아야 해서 한번 업데이트하는 데 시간이 길게는 3~4일까지도 걸린다. 그 과정에서 문제가 생겨 업데이트가 제때 되지 않을 수도 있다. 웹은 서버에 올리기만 하면 실시간으로 업데이트가 반영되기 때문에 빠르게 고객의 반응을 살필 수 있다. 제품에 문제가 생겼을 때 빠르게 대처할 수도 있다.
두 번째 장점은 안드로이드와 iOS를 따로 개발할 필요가 없다는 점이다. 우리 팀에는 현재 안드로이드 개발자가 없어서, 앱 서비스는 iOS 앱만 운영했었다. 웹은 모바일 운영체제가 안드로이드냐, iOS냐에 상관없이 웹 브라우저로 접속해 서비스를 이용할 수 있다.(덧. 이는 다양한 웹 브라우저 환경에 대응해야 한다는 치명적인 단점이 되기도 한다.)
세 번째 장점은 사용자가 앱을 설치하는 과정이 없어져 서비스에 접근이 쉬워지고 전환율을 높일 수 있다는 점이다. 물론 이런 장점을 살리려면 서비스가 최초 사용자에게 아주 매력적이어야 한다. 아직 우리 서비스는 많이 부족해 이 장점은 살리지 못하고 있다. 분발할 필요가 있다.
웹 기반 제품에 장점만 있는 건 아니다. 서버에서 받아오는 정보나 데이터의 양이 많아질수록 제품이 느려질 수 있다. 네이티브 앱에서는 당연하게 여기던 저장소나 연락처 접근 등이 힘들고 카메라나 알림, 센서 등을 쓰는데도 제한이 있다. 각 브라우저 상단에는 주소창이, 하단에는 탭 바가 있어서 우리 서비스를 나타내는 공간이 좁아진다는 단점도 있다.
가장 큰 문제는 구글의 크롬, 애플의 사파리, 갤럭시의 삼성인터넷 등 다양한 모바일 웹 브라우저 환경에 대응해야 한다는 점이다. 특히 인스타그램이나 페이스북 광고를 보고 우리 서비스에 들어온 사용자는 인스타그램과 페이스북 앱 안에 내장된 웹 브라우저로 들어오게 되는데, 이때 예상하지 못한 여러 기술적인 문제가 생겨서 개발자가 고생하기도 한다. 예를 들면 모든 웹에서 잘 되던 결제가 인스타그램 내장 웹 브라우저로 들어오면 우리은행에서만 결제가 되지 않는 문제가 생길 수 있다.
정리하다보니 단점이 더 커 보이지만, 첫 번째와 두 번째 장점이 워낙 우리에게 좋다고 판단했기 때문에 앱보다는 웹이 적합하다고 봤다. 이 웹 서비스를 나중에는 앱 안에 넣어 하이브리드 앱을 만들 계획도 있다. 앱과 웹 중 무엇으로 서비스를 만들지는 팀의 방향과 각 장단점을 잘 따져서 결정하면 좋다.
앱만 디자인하다 웹을 디자인하게 되면서 결국에는 앱은 껍데기만 남고 웹이 대세가 되지 않을까 하는 생각이 들었다. 그 바탕에는 5G가 있다. LTE(4G)보다 최대 20배 빠르다는 5G가 세계적으로 상용화된다면 웹이 앱에 비해 느리다는 단점이 단점이 아니게 될 수 있다. 많은 데이터를 가져오더라도 워낙 인터넷 속도가 빠르니 5G를 쓰는 사용자가 느끼기에는 그리 차이가 없을 수도 있지 않을까? 심지어 페이스북에서 배포한 React Native 덕에 웹 프로그래밍 언어로 안드로이드와 iOS 앱을 모두 만들 수 있기 때문에 웹의 가능성은 더욱더 커지고 있는 것 같다.
삼성 웹 브라우저에서 띄운 브런치 웹. 모바일 웹을 디자인할 때 상단 검색창과 하단 탭 바를 고려해야 한다. 앱과 웹 중 무엇으로 제품을 만들지 장단점을 잘 따져봐야한다.제품을 설계하기에 앞서 웹에 쓸 폰트를 정하는 일부터 하기로 했다. 웹 서비스는 스마트폰이나 태블릿 PC, 데스크톱 등 디지털 기기에서 이용하기 때문에, 디지털 환경에 적합한 산 세리프(Sans-Serif) 폰트를 쓰기로 했다. 무엇보다 '용량'을 가장 중요한 웹 폰트의 기준으로 정했다. 폰트 용량이 작아야 서버에서 폰트를 빠르게 불러올 수 있고, 결국 속도가 빨라져 사용성을 높일 수 있다.
이런 기준을 만족시키는 후보로 구글에서 배포한 노토 산스(Noto Sans CJK KR, 본고딕)와 스포카에서 배포한 스포카 한 산스(Spoqa Han Sans)를 선정했다. 두 폰트 모두 산 세리프 서체로 노토 산스는 구글에 검색하면 쉽게 경량화 버전을 찾을 수 있고, 스포카 한 산스는 자체적으로 경량화해 배포하고 있다.
내가 선택한 폰트는 노토 산스다. 스포카 한 산스는 숫자를 많이 쓰는 서비스에 적합하도록 노토 산스를 커스텀한 글꼴인데, 우리 제품에는 숫자를 쓸 일이 그리 많지 않아 적합하지 않다고 봤다. 참 예쁜 폰트이고 경량화가 잘 돼 있으며 여러 편리한 점이 있는 매력적인 폰트라 숫자를 많이 쓰지 않더라도 사용하고 싶다고 생각했지만, 안정적인 노토 산스로 결정했다.
노토 산스를 선택한 또 다른 이유는 다른 폰트와의 조화 때문이다. 내가 느끼기에 노토 산스는 개성이 강하지 않아 다른 어떤 폰트와도 잘 어울릴 것 같았다. 굵기(weight)를 스포카 한 산스보다 더 다양하게 쓸 수 있다는 점도 끌렸다. 스포카 한 산스는 Thin, Light, Regular, Bold 4가지 굵기를 지원하며, 노토 산스는 Thin, Light, DemiLight, Regular, Medium, Bold, Black 7가지 굵기를 지원한다. (덧. 굵기는 스포카 한 산스에서 제공하는 4가지 굵기로도 충분하다.)
두 폰트의 가장 큰 차이는 숫자다. 스포카 한 산스는 숫자의 폭이 일정한 '고정폭'으로 디자인돼 있어 숫자 단위를 알아보기 쉽다. 숫자를 많이 쓰는 토스 같은 제품에서 쓰고 있다.01 1 Thing 1 Page
먼저 설계하기 시작한 건 사용자(고객)를 위한 모바일 웹 제품이었다. 이 제품에서 가장 핵심적인 부분은 '스타일 설문지'다. 스타일 설문지가 사용자가 받게 될 최종 결과물인 '스타일북'의 품질에 큰 영향을 미치기 때문이다. 온라인으로 1:1 맞춤 코디를 해주는 우리 서비스의 특성상 이 설문지에서 사용자가 원하는 스타일을 잘 파악해야 했다.
문제는 설문 질문이 많아질수록 결과물의 품질은 올라가지만 사용성은 낮아져 많은 사용자가 설문을 작성하다가 이탈할 확률이 높아진다는 점이다. 다시 말해 사용자에게 너무 많은 답변을 하게 하면 사용성이 나빠지고, 전환율이 낮아질 가능성이 높다. 반대로 설문 질문이 적어질수록 사용성은 올라가고 전환율은 높아지겠지만, 서비스의 품질은 낮아진다. 사용성과 품질 사이에서 적절한 접점을 찾아야 했다.
나는 사용성과 품질 모두 놓치고 싶지 않았다. 이를 위해 취한 전략은 '1 Thing 1 Page'다. 한 화면에 한 가지 질문에만 집중하도록 설계하는 것이다. 사실 이는 우리 제품 전반에 깔려있는 원칙이지만, 스타일 설문에서는 더 극단적인 1 Thing 1 Page 화면으로 디자인하기로 했다. 질문 개수가 많더라도 화면 하나하나의 사용성을 극대화하고 화면별 흐름을 매끄럽게 하면 사용자가 큰 불편 없이 설문을 마칠 수 있을 거라 봤다.
우리 제품 설문 화면 11개 중 3개 화면의 1 Thing 1 Page 디자인.이 설문지를 처음 설계하던 8월 중순쯤 했던 고민 중 하나는 '지금 상황에 적정한 수준의 UX는 무엇인가?'였다. 우리 팀이 만드는 건 서비스의 핵심 기능만 구현해 아이디어를 검증하기 위한 '최소기능제품(Minimum Viable Product, MVP)'이었고, 프로젝트를 완수해야 하는 기간이 정해져 있었기 때문에 처음부터 세세한 인터랙션까지 챙기는 건 힘들다고 봤다. 무엇보다 우리 개발자가 웹 개발은 처음이어서 내가 원하는 마이크로 인터랙션(Micro Interactions)을 모두 구현하기는 무리였다. 마이크로 인터랙션을 구현하려면 개발자가 세심하게 신경써야 할 부분이 많기 때문이다.(물론 디자이너도 많다.) 우리 팀의 상황에 맞는 '적정 UX'를 구현해야했다.
*최소기능제품(MVP): 모든 서비스와 기능을 넣은 제품이 아닌 사용자에게 검증받을 핵심 기능만 구현한 제품을 뜻한다. 시장성이 보이면 고객의 피드백을 받으며 점점 발전시켜 나간다. 비용을 아끼면서 아이디어를 빠르게 검증하기 위한 제품이라 보면 된다. 최소기능제품은 시장의 어떤 문제를 해결하기 위한 핵심 기능만 최소한으로 구현한 제품으로, 품질이 낮은 제품을 뜻하진 않는다. 최소기능제품을 발전시켜 성공시킨 대표적인 사례로는 에어비앤비와 애플이 있다.
최소기능제품의 발전 과정을 설명하는 이미지. 출처: Teemu(wiki)*마이크로 인터랙션(Micro Interactions): 사용자가 회원가입을 하면서 비밀번호를 입력할 때 보안 규칙에 맞는 비밀번호인지 아닌지 실시간으로 피드백을 준다거나, 실수를 막기 위해 버튼의 활성 상태를 경우에 따라 나누는 것 등이 마이크로 인터랙션이다. 마이크로 인터랙션은 사용자가 의식하지는 못하지만 제품(서비스)을 큰 노력을 들이지 않고 '쉽게' 쓸 수 있도록 만든다. 곳곳에서 마이크로 인터랙션을 구현하는 건 디자이너와 개발자 모두가 신경 써야 할 일이 많아지지만, 그만큼 사용자 경험(UX)은 좋아진다.
1 Thing 1 Page로 디자인하기
1) 텍스트 필드의 X
지금은 구현했지만, 처음에 개발적의 이유로 구현하지 못했던 마이크로 인터랙션은 텍스트 필드에 글자를 입력하기 시작하면 오른쪽 끝에 나타나는 X다. 사용자가 작성한 텍스트를 모두 지우고 싶을 때 쓰는 버튼으로 대부분의 텍스트 필드에서 찾아볼 수 있는 기본적인 마이크로 인터랙션이다.
텍스트를 입력하기 전에는 어떤 내용을 적으면 될지 안내해주는 '플레이스홀더(Placeholder)'를 보여줘 사용자가 고민하는 시간을 줄여 전환율을 높일 수 있다. 플레이스 홀더가 사라지는 시점은 사용자가 타이핑을 시작해 첫 글자가 나타났을 때다.
사용자가 텍스트를 입력하기 시작하면 텍스트를 한꺼번에 지울 수 있는 X 버튼을 제공한다.2) 사용 가능할 때 '다음' 버튼 활성화
사용자가 텍스트를 입력하기 시작하면 X가 활성화되고 플레이스홀더는 사라지는 마이크로 인터랙션에 더해, 비활성화돼있던 '다음' 버튼을 활성화시키는 마이크로 인터랙션을 넣었다. 비활성화돼있던 버튼이 활성화되는 '변화'를 사용자에게 보여줘, 사용자가 내용을 입력한 뒤 해야하는 행동이 무엇인지 명확하게 인지시켜 전환율을 올리고자 했다. 또, 이는 사용자가 텍스트 필드에 아무것도 입력하지 않고 '다음' 버튼을 눌렀을 때 반응하지 않거나, 내용을 입력해야 한다고 알려주는 팝업을 보는 걸 막을 수 있어 사용성을 높인다.
처음에 비활성화 버튼은 회색(#DBDBDB)으로 디자인했었는데, 지금은 주요 컬러(#F25B25, 주황)의 투명도를 40%로 낮춰 비활성화 상태를 보여주고 있다. 회색이었던 '비활성화 다음' 버튼의 색이 '다음' 버튼 왼쪽에 있는 '이전' 버튼과 비슷해 구분이 잘 되지 않았기 때문이다.
'이전' 버튼을 화면 상단 왼쪽에 작게 '<' 모양의 아이콘으로 두지 않고 '다음' 버튼 왼쪽에 비중있게 둔 건 사용자가 이미 작성한 내용도 이전으로 쉽게 돌아가 수정할 수 있도록 하기 위해서다. 이전 화면으로 돌아가지 못하게 하거나 힘들게 해 강제로 다음 화면으로 전환시키는 것보다 수정이 자유롭도록 하는 게 최종 전환율을 높일 수 있을 거라 판단했다. 다만 '이전' 버튼은 사용자가 꼭 눌러야 하는 버튼은 아니기 때문에 옅은 회색 계열을 이용해 '다음' 버튼보다 덜 눈에 띄게 디자인했다.
버튼이 작동하지 않을 때에는 회색 계열의 색(#DBDBDB 등)으로 채우거나 투명도를 40% 정도로 낮춰서 비활성화됐다는 걸 사용자에게 알려줘야 한다.3) 상황에 적합한 키보드 제공
숫자를 적어야 하는 화면에서는 숫자 키보드를, 텍스트를 적어야 하는 화면에서는 일반 키보드를 제공했다. 사용자가 설문의 각 화면에 들어온 순간 바로 키보드로 내용을 입력할 수 있도록 키보드가 나와있어야 한다. 다시 말해 사용자가 텍스트 필드가 있는 화면에 들어오면 텍스트 필드가 바로 활성화돼 키보드가 나와야 한다. 이는 사용자가 텍스트 필드를 눌러 활성화시키는 과정을 없애 사용성을 높이고 다음 화면으로 넘어갈 확률(전환율)을 높인다.
사용자가 적어야 하는 내용을 입력하기에 적합한 키보드를 제공하면 사용성을 높이고, 결과적으로 전환율도 올릴 수 있다.4) 설문이 얼마나 진행됐는지 알려줘야 할까?
스타일 설문지에서 사용자에게 하는 질문은 현재 총 11개로 사용자가 상당히 많은 답변을 해야 한다. 따라서 설문을 작성하다가 이탈해 전환율이 낮아질 가능성이 높다. 이를 막기 위해 1 Thing 1 Page 전략을 취했지만, 여기에 더해 '진행 막대(Progressive Trackers 또는 Progressive Indicators)'를 추가하면 전환율을 더 높일 수 있지 않을까 고민을 많이 했다.
진행 막대란 회원가입이나 예약, 구매처럼 몇 단계를 거쳐 완료해야 하는 상황에서 사용자가 그 과정을 얼마나 완료했고 얼마나 남았는지 표시해주는 시각 정보 요소다. 사용자에게 진행 막대로 얼마나 많은 단계를 거쳐야 끝이 나는지 알려주면 그 과정을 끝까지 완료할 가능성이 높다고 알려져 있다. 사용자에게 목표를 정확히 알려주고, 과정을 하나씩 마칠 때마다 약간의 '성취감'을 맛보게 해 끝까지 해낼 수 있도록 하는 것이다.
하지만 우리 제품에는 '진행 막대'를 넣지 않기로 결정했다. 사용자가 답해야 할 질문이 11개나 되기 때문에 오히려 너무 많은 질문에 질려 사용자가 설문 초반에 이탈할 가능성이 높다고 판단했다. 진행 막대라는 시각 요소를 없애 시각 잡음을 줄인 극단적인 1 Thing 1 Page 화면으로 구성하는 게 전환율을 더 높일 수 있을 거라 생각했다.
숨고(왼쪽) 앱에서는 요청서를 작성할 때 진행 막대를 보여주고, 에어비앤비(오른쪽)에서는 숙소를 예약할 때 간단히 현재 몇 단계이고 얼마나 남았는지 알려준다.5) 주관식보다는 객관식이 전환율을 높인다
사용자가 직접 타자를 쳐야할뿐만 아니라 고민을 해야 하는 '주관식'은 전환율을 낮춘다. 전환율을 높이기 위해 객관식으로 구성할 수 있는 질문은 객관식으로 구성했다. 객관식에도 1 Thing 1 Page 전략을 동일하게 적용해 하나의 질문에 대한 답만 선택하도록 디자인했다. 현재 우리 팀은 주관식 설문들의 데이터를 모으고 있고, 데이터를 통해 객관식으로 바꿀 수 있는 질문은 객관식으로 모두 바꿀 계획이다.
주관식보다는 객관식이 전환율이 높다.6) 사용자가 쉽게 입력하기 어렵다면 '건너뛰기' 제공
스타일 설문에는 사용자가 본인의 평소 스타일 사진을 올리는 화면과 키와 몸무게를 입력하는 화면이 있다. 사진을 올리는 화면 같은 경우 사용자가 사진이 없거나 올리기 싫은 정보일 수 있기 때문에 '건너뛰기' 버튼을 넣어 사진을 올리지 않고 넘어갈 수 있도록 했다. 마찬가지로 키와 몸무게도 올리기 싫은 정보일 수 있기 때문에 건너뛰기 버튼을 넣었다.
여기서 '다음' 버튼의 텍스트를 '건너뛰기'로 바꾸는 것도 좋은 방법이지만, 사용자가 '다음' 버튼을 쓰던 관성 때문에 오히려 눈에 안 뛸 수 있어서 건너뛰기 버튼을 따로 만들었다. 다른 화면과 다르게 사용자가 아무것도 입력하지 않아도 다음 화면으로 넘어갈 수 있기 때문에 '다음' 버튼은 언제나 활성화돼 있다.
사용자가 입력하기 싫은 정보가 있는 화면은 '건너뛰기' 버튼을 넣어 전환율을 높였다. 여기서 서비스 결과의 품질의 차이가 생기게 되는데, 새로운 방법을 찾아야했다.사실 사진을 올리는 화면은 처음 서비스를 런칭하고 꽤 오랫동안 필수 항목이었다. 사용자에게 어울리는 코디를 추천해주기 위해서는 현재 스타일 사진이 정말 중요하기 때문이다. 하지만 사진 화면에서 많은 사용자가 이탈하는 것을 관찰한 우리 팀은 전환률을 올리기 위해 사진을 올리지 않고 건너뛸 수 있도록 바꾸기로 했다. 사진을 쉽게 올리는 여러 방법을 강구해서 실험해 보았으나, 모두 실패하고 결국 전환율을 높이는 쪽으로 방향을 튼 것이다.
대신 아래처럼 좋아하는 스타일을 객관식으로 고를 수 있는 화면을 추가해 보완하기로 했다. 본인 사진을 올리는 대신 다른 사람이 코디한 사진에서 원하는 스타일을 선택하는 것이다. 전환율도 높이고, 서비스 품질도 어느 정도 유지할 수 있는 방법이다. 하지만 사용자가 본인 사진을 올리는 게 결과물의 품질을 높이기 때문에 꾸준히 본인 사진을 올리게 할 방법을 찾고 있다. (덧. 실제 제품에서 이 화면에 들어가는 사진들은 저작권자의 동의를 받았습니다. 아래 예시로 쓰인 사진은 제 지인과 Unsplash 사진으로 실제 제품에서 보이는 사진과는 다릅니다.)
7) 버튼의 위치는 엄지가 닿는 곳에
'모바일 웹' 기반 서비스는 우리 팀이 기존에 만들던 앱과는 구조적으로 다른 점들이 있었다. 그중 한 가지는 앱에서는 '키보드 위 일정한 위치'에 버튼을 놓을 수 있었는데, 웹에서는 그럴 수가 없다는 점이다. 웹 제품은 구글의 크롬, 애플의 사파리, 갤럭시의 삼성인터넷 등 다양한 웹 브라우저 환경에 대응해야 하는데 사파리에서 문제가 자주 생겼다. 버튼을 키보드 위 일정한 위치에 둬야 사용자가 버튼을 누르기가 편해서 사용성이 올라가지만 모든 웹 브라우저에서 구현이 되지 않아 문제가 생긴 것이다. 여기서 버튼은 전환과도 직접적으로 관련돼 있어서 이 문제를 꼭 해결하고 싶었다.
이는 회원가입을 쉽게 만드는 UI/UX 디자인을 고민할 때 얻은 인사이트로 해결했다. 단순하게 엄지가 닿는 곳(엄지 영역)이 키보드 바로 위쪽 정도까지라고 생각했는데, 상황에 따라 꼭 그렇지 않을 수 있다는 사실을 발견한 것이다. 설문을 답할 때 사용자는 보통 두 손으로 타이핑을 치고 있다. 그런데 두 손으로 타이핑할 때에는 엄지가 기존 엄지 영역보다 더 위쪽으로 올라간다. 기존에 우리가 알고 있던 엄지 영역보다 더 위쪽으로 엄지를 올릴 수 있는 것이다. 그래서 키보드 위에 바로 버튼이 있지 않더라도 버튼을 누르는 게 크게 불편하지 않다.
나는 아래처럼 텍스트 필드 아래 '고정된' 위치로 버튼을 옮겼다. 그러자 어떤 웹 브라우저든지 모두 같은 화면으로 보이게 됐다. 궁극적인 목표인 전환율도 아주 훌륭한 수치로 나왔다.
웹에서는 키보드 위 일정한 위치에 버튼을 고정시킬 수 없는 브라우저가 있다. 나는 텍스트 필드 밑 일정한 위치에 버튼을 고정시켜 이 문제를 해결했다.전환율, 그 결과는?
1 Thing 1 Page 전략은 성공적이었다. 설문 과정만 총 11개 화면을 거쳐야 하는데, 설문 첫 화면에 도달한 사용자가 설문을 끝까지 마치는 비율을 매주 측정해보니 보통 70% 이상이었다. 즉 스타일 설문 전체 전환율이 약 70%였다. 가장 최근 데이터는 80%의 전환율을 보여줬다. 11개나 되는 많은 질문에 답변해야 하기 때문에 사용자가 이탈할 가능성이 아주 높지만, '단순함'을 앞세운 1 Thing 1 Page 전략이 잘 맞아떨어져 높은 전환율을 보여주고 있다.
이런 높은 전환율을 달성할 수 있었던 건 1 Thing 1 Page 전략에 더해 꾸준한 관찰과 개선이 있었기 때문이다. 앞서 소개했듯이 데이터를 모아 주관식을 객관식으로 바꾼다든지, 전환율이 팍 꺽이는 부분을 건너뛸 수 있게 만들고 다른 대안을 제공해 서비스 품질과의 접점을 찾는다든지 하는 방법으로 전환율을 꾸준히 관리하고 개선한 것이다.
질문 문구 개선도 한몫했다. 스타일 설문에서 최종 결과의 품질에 영향을 가장 많이 끼치는 질문 중 하나는 '코디를 받는 이유'에 대한 질문인데, 처음에는 말 그대로 '이유'를 써달라고 사용자에게 질문했다. 하지만 사용자들이 평소에 생각해보지 않은 '코디를 받고 싶은 이유'를 물으니 플레이스홀더에 적힌 내용과 비슷하게 적거나, 간단히만 적거나, 심지어는 이탈해버렸다.
나는 이 문제를 해결하기 위해 같은 내용을 묻지만 말만 바꿔서 '고민'이라고 질문하면 어떨까 실험해봤다. 그랬더니 사용자들이 적는 내용도 괜찮아지고 이탈도 거의 없어졌다. 이 화면에 머무는 시간이 늘어난 것도 흥미로웠다. '이유'라고 물을 때는 마치 사용자가 막 고민하고 생각해서 적어야 하는 것 같은 느낌을 주지만, '고민'이라고 물으니 사용자가 평소에 하던 생각을 그대로 편하게 적을 수 있게 된 것이다.
'이유'라고 묻느냐, '고민'이라고 묻느냐에 따라 사용자가 다르게 반응한다.아름다운 디자인 만들기
1 Thing 1 Page 디자인의 성공적인 전환율은 '단순함'에 있다고 생각한다. 1 Thing 1 Page는 군더더기를 없애고 사용자가 집중해야 하는 핵심에만 집중하도록 만든 단순한 디자인으로, 독일 산업 디자이너 디터 람스(Dieter Rams)의 '적게, 그러나 더 좋게(Less, But Better)' 철학과도 맞닿아 있다.
1 Thing 1 Page 디자인은 문구와 텍스트 필드, 버튼 같은 요소밖에 없기 때문에 시각적으로 어떻게 하면 더 좋게 보일지 고민이 많았다. 건드릴 수 있는 부분은 질문 문구의 크기와 굵기와 색, 텍스트 필드의 굵기와 색, 버튼의 크기와 색과 라운드 정도밖에 없었다.
내가 힘을 준 건 버튼의 라운드와 색이었다. 처음 디자인했던 버튼은 라운드가 4로 어디서나 쉽게 찾아볼 수 있었는데, 12로 라운드를 바꾸니 버튼 모양만으로도 특색 있는 화면으로 바뀌었다. 버튼 크기는 지난 5월에 세웠던 UX 원칙 5가지의 '버튼의 원칙'에 따라 가로 168, 세로 44로 정했다.
색은 최근 우리 팀의 주요 컬러(Key Color)를 주황으로 정하면서 자연스럽게 주요 버튼과 텍스트 필드를 검정에서 주황으로 바꿨다. 주황을 쓰게 되면서 회색 계층구조(Grey Hierarchy)도 인디고 계열의 색이 살짝 섞인 회색으로 완전히 개편했다.
주황에도 계층 구조를 만들어 버튼과 텍스트 필드의 색을 다르게 디자인했다. 텍스트 필드 같은 경우 너무 강한 주황을 쓰면 시각적 잡음이 돼 버튼을 눈에 덜 띄게 만들기 때문에 버튼에 쓴 주황보다 톤을 낮춘 주황을 썼다. 같은 이유로 텍스트 필드 선의 두께도 2에서 1.5로 조금 더 얇게 바꿨다.
02 신뢰를 주는 UI/UX 디자인은?
우리 서비스처럼 생소한 서비스는 사용자들에게 신뢰를 주기 힘들기 때문에 믿음을 전달할 수 있는 방법이 필요하다. 그래야 우리가 최종 목표로 삼고 있는 결제 전환율을 높일 수 있다. 나는 사용자가 우리 서비스를 믿고 쓸 수 있도록 후기를 강조하는 전략을 취해봤다.
후기를 강조한 디자인
시장조사전문기업 엠브레인 트렌드모니터가 2017년에 전국 만 19세~49세 성인남녀 1,200명을 대상으로 진행한 '소비자 후기' 관련 설문 결과에 따르면 78.6%가 제품 구매 시 항상 소비자 리뷰를 확인한다고 응답했다. 소비자 10명 중 7명(69.4%)이 소비자 리뷰가 부정적이면 해당 제품을 구매하지 않는다고 응답한 것에서 후기는 제품 구매에도 직접적으로 영향을 끼친다는 사실도 알 수 있다. 해외 조사 자료를 봐도 비슷한 양상을 보인다.
이처럼 후기는 제품을 신뢰하는 데 영향을 끼치며 구매로 이어지는 데 결정적인 역할을 한다. 사람들이 후기를 보고 구매를 결정하는 것은 '사회적 증거(Social Proof)'라는 심리학 개념으로 설명할 수 있다. 사회적 증거는 심리학자 로버트 치알디니(Robert Cialdini)가 1984년 본인의 저서에 소개하면서 알려진 개념으로, 자신이 속해있는 사회 공동체 구성원들의 의견이나 행동, 태도 등에 영향을 받는 사회적 현상을 뜻한다. 온라인 쇼핑몰에서 다른 사람들이 남긴 후기를 보고 구매를 결정하는 일, 사람들이 많이 입는 브랜드의 옷을 주로 사는 일 등이 그 예가 될 수 있다. 쉽게 말해 우리는 무의식적으로 주변 사람들의 영향을 받아 행동한다는 것이다.
후기가 사용자의 신뢰를 얻는 데 중요하다는 나의 의견을 반영해 우리 팀은 무료 베타 서비스를 런칭했을 때 후기를 모으는 것에 집중했다. 사용자들에게 최종 결과로 보내는 스타일북에서는 코디 2개와 각 코디를 위한 상품을 3개씩 총 6개 추천해주는데, 처음에는 코디 1개와 상품 3개만 보여주고 후기를 쓰고 난 뒤에 나머지 코디와 추천 상품 3개를 추가로 보여주는 방법으로 후기를 유도했다. 무료로 서비스 중이라 가능한 일이었고, 예산을 아끼면서 효과적으로 후기를 유도할 수 있는 방법이었다. 다행히도 많은 사용자가 좋은 후기를 써주셨고, 평점도 괜찮았다.(덧. 사용자들이 결과물에 실망할까봐 정말 걱정이 많았다.)
후기를 유도하는 버튼은 항상 화면 아래쪽에 떠 있도록 해 사용자가 버튼을 눌러 후기를 쓸 수 있도록 행동을 유도했다.이렇게 모은 후기는 아래와 같이 랜딩 페이지와 사용자가 코디받을 스타일리스트를 고르는 목록 화면, 상세 페이지에서 강조되도록 디자인했다. 랜딩 페이지에서는 후기를 4번째 섹션에 배치하고 스크롤을 내렸을 때 자연스럽게 눈에 띄도록 대비를 강하게 줬다. '전체 후기' 버튼도 대비를 강하게 해서 전체 후기까지 참고할 수 있도록 행동을 유도했다.
목록 화면에서는 후기 개수를 강조해 디자인했다. 상세 페이지에서는 보통 소개가 먼저 나오는 대부분의 상세 페이지와는 다르게, 후기를 먼저 볼 수 있도록 디자인했다.
스타일리스트 목록과 상세페이지 화면은 프로젝트 초기 디자인이 지금까지 그대로 유지되고 있어서 최근 디자인과 일관성이 떨어질 수 있다.서비스를 운영하면서 재미있는 사실 하나를 발견했는데, '사진'이 후기 이상으로 구매 결정에 큰 영향을 미칠 수 있다는 점이다. 우리 서비스에서는 사용자가 본인을 코디해줄 스타일리스트를 선택해야 하는데, 사용자가 참고할 수 있는 건 후기와 소개, 스타일리스트가 스스로 코디한 사진이다. 문제는 베타 서비스부터 등록한 기존 스타일리스트와 달리 새롭게 등록한 스타일리스트는 후기가 없다는 점이다. 새로운 스타일리스트는 후기가 6~10개 정도 쌓인 기존 스타일리스트에게 밀려 코디 신청이 거의 들어오지 않을 거라고 예상했다. 그래서 새로운 스타일리스트에게 코디를 신청하는 사용자에게는 할인 쿠폰을 제공하는 등 방법을 고안하기로 했다.
하지만 예상은 빗나갔다. 우리 서비스 특성상 '사진'이 중요한 구매 판단 요소로 작용했다. 자신이 원하는 코디 스타일인지 아닌지 파악하는 것이다. 그래서 후기가 '0개'여도 스타일리스트가 스스로 코디한 사진을 보고 마음에 들면 신청하는 사용자가 꽤 많았다. 새로운 스타일리스트의 사진이 기존 스타일리스트들의 사진보다 품질이 좋았다는 점도 사용자들의 선택에 영향을 미친 것 같았다. 후기가 구매에 가장 결정적인 요소라고 생각했는데, 서비스의 특성에 따라서 꼭 그렇지 않을 수 있다는 깨달음을 얻었다.(덧. 물론 후기는 중요하다.)
03 CTA를 누르게 하는 UI/UX 디자인은?
CTA(Call-To-Action) 버튼은 구매 전환 같은 사용자의 행동을 유도하는 버튼이다. 전환율과 직접적으로 관련돼 있기 때문에 사용자의 눈에 띄고, 쉽게 누를 수 있는 위치에 있어야 한다. 아래는 우리 랜딩 페이지의 첫 화면으로 이 화면의 CTA인 '코디 신청' 버튼은 엄지로 쉽게 누를 수 있는 아래쪽 엄지 영역에 있다.
여기서 나의 고민은 CTA의 색이었다. 주요 컬러인 주황색을 CTA의 색으로 했는데, 랜딩 페이지 전반에 걸쳐 주황이 쓰여서 스크롤에 따라 CTA가 눈에 잘 띄지 않을 수 있다. 그래서 시안을 팀원들과 공유할 때 보색 계열인 파란색 버튼으로도 디자인해 두 시안을 비교하며 각각의 장단점을 설명했다. CTA가 주황색일 때는 랜딩페이지의 전반적인 디자인이 안정적으로 보이게 되고 시각 잡음이 적어 내용이 잘 전달되지만 CTA가 눈에 잘 띄지 않고, 파란색일 때는 랜딩 CTA가 아주 눈에 잘 띄지만 CTA가 시각 잡음이 돼 사용자가 페이지에 집중하기 힘들다.
우리가 최종적으로 결정한 건 주황색 CTA다. 사용자가 랜딩 페이지에서 CTA를 누르는 것도 중요하지만, 최종적인 결제 전환을 위해서는 우리 서비스를 더 잘 이해하도록 해야 한다는 방향으로 의견이 모아졌다. 내용에 집중하도록 하는 주황색 CTA 디자인이 더 좋다고 판단한 것이다. 그래서 나는 CTA를 색 이외의 시각 요소로 사용자가 인지하도록 만드는 방법을 강구했는데, 바로 모션(인터랙션)이다.
모션은 움직임으로 사용자의 시선을 끌어 CTA가 어디에 있는지 인지하도록 할 수 있다. 나는 아래와 같은 2가지 모션을 만들었고, 초기 랜딩 페이지에서는 위쪽 모션을, 현재 랜딩 페이지에서는 아래쪽 모션을 쓰고 있다. (덧. 아래쪽 모션은 애프터 이펙트로 제작 후 bodymovin 플러그인을 이용해 Json 파일로 출력한 뒤 개발자에게 lottie로 구현하도록 했다. 요즘 lottie를 많이 활용하고 있다.)
CTA의 문구를 바꾸는 것도 전환율을 올릴 수 있는 방법 중 하나다. 특히 이커머스 서비스에서 '무료'나 '혜택'을 강조한 문구가 많이 쓰이고 있다.
혜택을 강조한 CTA 문구를 쓰고 있는 쿠팡(왼쪽)과 티몬(오른쪽)우리 서비스에서도 '코디 신청'이라는 CTA 문구를 '무료 코디 신청'으로 바꿔 무료 코디 이벤트를 최근까지 진행했다. 스타일 설문을 고도화하기 위해 데이터를 모으려는 목적이었는데, 결과는 실패였다. '무료'이기 때문에 결제 전환율은 올랐지만, 그뿐이었다. 무료라서 진짜 '결제 전환율'도 아니었다. CTA를 누르는 비율도 5% 정도밖에 오르지 않아 크게 효과적이지 않았다. 무료이기 때문에 크게 고민없이 설문을 작성한 사용자가 많아 양질의 데이터도 별로 얻지 못했다. 여기서 우리 팀은 완전히 '무료'인 혜택은 우리에게나 사용자에게나 좋은 경험을 주지 못한다는 사실을 깨달았고, 이벤트를 진행한다면 무료가 아닌 할인 혜택 등으로 진행해야겠다는 쪽으로 의견을 모았다.
전환율은?
우리 랜딩 페이지 CTA를 누르는 비율(CTA 전환율)은 대략 18~25% 사이를 왔다갔다하고 있다. 지금까지 랜딩 페이지를 2번 정도 리뉴얼했는데, CTA를 누르는 비율은 크게 바뀌지 않고 있다. 랜딩 페이지 디자인의 변화보다는 랜딩 페이지에 앞서서 보고 들어오는 광고의 영향이 더 컸다. 어떤 타겟이 어떤 광고를 보고 랜딩 페이지에 들어오느냐에 따라 전환율이 왔다갔다하는 것이다.
결국 가장 중요한 건 '서비스의 품질'이다. 서비스의 품질이 고객들이 믿을 수 있을 만큼 좋아야 한다. 랜딩 페이지는 고객들이 우리 서비스에서 어떤 가치를 얻을 수 있는지 보여주는 곳이다. 서비스에 자신이 생기고, 제공하는 좋은 가치들이 많아져야 랜딩 페이지 내용이 풍성해질 수 있다. 지금은 우리가 고객에게 주는 가치가 크지 않기에 더욱더 개선에 박차를 가해야 한다.
최근 랜딩 페이지에서 얻은 재미있는 인사이트가 있다. 바로 '시각 경험'에 대한 깨달음이다. 현재 랜딩 페이지에 이르기까지 참 부끄러운 2번의 랜딩 페이지를 거쳤다. 부끄러웠던 첫 번째 이유는 우리 서비스에서 제공하는 가치가 아직 많지 않아 내용이 없어서였고, 두 번째는 내 시각 디자인 역량이 부족했기 때문이다. 그나마 지금 랜딩 페이지는 시각적으로 예전에 비해 괜찮아졌지만 여전히 많이 부족하다.
하지만 사용자들이 예전 랜딩 페이지에서 평균 10초만 머물렀다면, 지금은 33초 가량 머문다는 데이터를 봤을 때 분명히 더 매력적으로 바뀐 건 맞다. 시각적으로도 볼만해야 사용자들이 서비스를 더 신뢰한다는 걸 분명히 알게 됐다. UI/UX 디자인에서 시각 디자인이 주는 영향력은 결코 무시할 수 없다.
04 전환을 넘어 잔존율을 올리는 UI/UX 디자인은?
우리 팀은 현재 신규 사용자를 모으는 데 역량을 집중하고 있다. 처음 우리 서비스를 접한 사용자가 결제까지 하도록 하기 위해 노력하고 있는 것이다. 추후에는 구독 서비스로 나아갈 계획이라, 결국에는 사용자가 우리 서비스를 꾸준히 쓰게 됐을 때 진정한 전환이 일어났다고 볼 수 있다. 다시 말해 사용자의 서비스 잔존율(Retention, 리텐션)이 높아야 우리 서비스가 시장에 안착했다고 할 수 있는 것이다. 이는 사용자에게 얼마나 좋은 서비스를 제공하느냐, 즉 얼마나 마음에 드는 코디를 제공하느냐에 달려있다.
사용자가 마음에 들어하는 코디를 추천하는 결정적인 역할을 하는 건 스타일리스트다. 스타일리스트가 사용자에게 어울리는 코디를 추천해주는 데만 온전히 집중할 수 있는 도구를 제공해야 했다. 이 도구가 좋으면 좋을수록 만족스러운 결과물을 사용자에게 전달할 수 있게 될 것이고, 잔존율을 높일 수 있다. 처음에는 단순히 최종 결과물인 스타일북을 작성할 수 있는 모바일 웹 제품을 제공했지만, 지금은 앱에 가까운 모바일 웹 제품을 제공하고 있다. 추후에 앱으로 출시해 더 편하게 만들 계획이다.
제공한 제품에서 스타일리스트의 가장 큰 페인 포인트(Pain Point, 어려움)는 사용자에게 추천하는 상품 URL을 복사해서 붙여넣어 입력하는 작업이었다. 모바일에서는 이 작업이 아주 번거로운 일이다. 그래서 우리 팀은 평소에 스타일리스트가 온라인으로 아이 쇼핑을 하면서 괜찮은 상품을 미리 '찜'해두고 스타일북을 작성할 때 찜해놓은 상품을 쉽게 가져올 수 있는 기능을 만들기로 했다. 여기에는 '쇼핑 전문가 전용 검색 엔진'과 '찜', '찜을 가져올 수 있는 기능'이 들어가야 해 꽤나 큰 작업이었다.
먼저 만들기 시작한 건 그들만을 위한 '검색' 기능이었다. 이 기능은 쉽게 말해 '종합선물세트 검색'이라고 할 수 있다. 사용자가 쇼핑 전문가이기 때문에 쇼핑에 필요한 다양한 필터를 한꺼번에 설정할 수 있는 검색 기능을 제공하는 것이다. 여기에는 기존에 우리가 서비스하던 앱만의 특별한 기능이었던 사이즈 필터도 포함돼 있다. 사용자가 누구인지 정확히 알고 있기 때문에 이런 디자인을 할 수 있었다.
스타일리스트가 더 좋은 결과물을 만들 수 있도록 전반적으로 디자인을 리뉴얼했다. 위는 새 디자인의 일부 화면들. 아이콘을 일관성 있게 그려 시각적으로 안정감을 줬다.위 검색 디자인의 핵심은 상품들을 '찜'하는 기능에 있다. 검색 결과 내의 상품 이미지 오른쪽 위에 있는 하트를 누르면 상품이 '찜'에 저장되고, 찜한 상품은 스타일북을 작성할 때 쉽게 추천 상품에 추가할 수 있다. 스타일리스트의 가장 큰 페인 포인트를 해결했다.
'찜' 탭에서는 내비게이션 바를 활용해 삭제를 안내하는 흥미로운 디자인을 해봤다. 일반 사용자에게 선보이는 디자인이 아니라 실험적인 시도를 해보기에 좋다. 스타일리스트를 위한 제품은 당장의 전환율보다는 미래를 위한 준비다. 고객이 최종적으로 받아보는 결과의 품질과 직접적으로 관련이 있기 때문이다. UI/UX 디자인뿐만 아니라 어떻게 사용자에게 더 만족스러운 서비스를 제공할 수 있을지 고민이 많다.
마치며
2019년은 저를 디자이너라고 당당하게 소개할 수 있도록 노력한 한 해였습니다. 열심히 노력한 덕분일까요. 감사히도 최근 몇 달 동안 여러 팀에서 포지션 제안을 주셨습니다. 그중 기억에 남는 건 최근 연락받았던 두 곳에서 들었던 이야기입니다.
"경환님은 디자이너보단 PM 포지션이 잘 맞을 것 같아요."
"경환님은 실제로는 없지만 UX Growth라는 직무에 잘 맞을 것 같아요."
흥미로웠습니다. 새로운 시선으로 나에 대해 다시 생각해 볼 수 있었지요. 저 스스로도 PM이라는 직무에 아주 적합하다고 생각합니다. 하지만 저는 제가 디자이너인 게 좋습니다. 디자이너로서도 인정받을 수 있도록 노력해야겠습니다.
디자이너는 '경험'을 디자인하는 사람이라고 생각합니다. 꼭 UX 디자이너가 아니더라도, 모든 디자이너는 경험을 디자인합니다. 독서실에 있는 의자는 집중할 수 있는 자세로 공부할 수 있는 경험을 하도록 디자인하고, 같은 의자지만 집에 있는 소파는 편하게 쉴 수 있는 경험을 하도록 디자인한 것처럼요.
저는 좋은 시각 경험을 디자인하는 능력이 아직 부족합니다. 2020년에는 제가 디자인한 디지털 제품을 쓰는 사용자들이 좋은 시각 경험을 할 수 있도록 시각 디자인 역량을 키우는 데 집중하는 한 해를 보내볼까 합니다.(끝)
작은 앱 프로젝트
많은 기능과 서비스를 갖추고 있는 슈퍼 앱들 사이에서 단순함을 가장 큰 목표로 하는 '작은 앱'이 사람들에게 어떠한 의미로 다가갈지 연구하는 '작은 앱 프로젝트'를 진행하고 있습니다.
09 참고 자료
1. Google Developers의 '웹폰트 최적화' 참고자료
[원문]
2. Noto Sans CJK 경량화 웹폰트를 만들어 배포해주신 고마운 분입니다.
3. MVP(최소기능제품)
4. 진행 막대(Progress Trackers 또는 Progress Indicators)에 대한 인사이트를 얻을 수 있는 포스팅 2개
5. 위키피디아 - 사회적 증거(Social Proof)
6. 마케팅적 관점에서의 사회적 증거(Social Proof)
7. '리뷰(후기)'에 대한 인사이트를 얻을 수 있는 GS SHOP 디자이너 최철호님의 브런치
8. 2017 소비자 리뷰 영향력 조사 자료
9. 사회적 증거(Social Proof), 리뷰는 고객에게 어떻게 영향을 끼치는가?
Social Proof: How Online Reviews Influence Customers
