Case study #02 카카오페이
카카오톡을 떠나 단독 앱으로 출시된 카카오페이를 파헤쳐보자
안녕하세요, 주니어들을 위한 커뮤니티 Bigpicture 입니다.
최근 전 세계적으로 현금이나 체크카드를 대체할 새로운 지급결제 서비스인 간편 결제에 대한 수요가 증가하고 있다는 것, 알고 계셨나요?
그래서 이번에는 최근 단독 앱 서비스로 새롭게 출시한 간편 결제 서비스 앱, 카카오페이의 케이스 스터디를 진행해보았습니다. 기존의 카카오페이와 어떠한 점에서 차이를 보이며, 어떠한 구성과 기능, 그리고 방향성을 담고 있는지 UX와 GUI 관점에서 살펴보았습니다.
삼정 KPMG의 작년 연구 조사에 따르면, 글로벌 핀테크 M&A 딜의 상위 5건은 모두 간편 결제 사업자라고 합니다. 실제로 2016년 글로벌 비현금거래 중 전자지갑 등을 통한 거래규모가 약 418억 달러였습니다. 국내에서도 간편 결제에 대한 니즈가 커지면서 4사(삼성 페이, 네이버 페이, 카카오페이, 페이코)를 중심으로 간편 결제에 대한 경쟁구도가 재편되고 있는데요. 현금을 대신할 새로운 지급결제 서비스에 대한 영향력이 점점 커지고 있다는 것을 알 수 있습니다.
* 간편 결제란? : 간편 결제 서비스란 모바일이나 PC를 이용한 기존의 카드 기반 결제 과정에서 신용카드 정보 및 공인인증서나 OTP를 매번 입력해야 했던 과정을 축소하여 모바일에 카드 정보를 한 번만 입력해 두고, 이후 결제 시 비밀번호, 지문인식 등 간단한 인증과정을 통해 간편하게 결제가 이루어지는 서비스를 지칭한다. (KPMG, 2018)
* 본 케이스 스터디는 iOS 기준으로 조사되었으며, 주관적인 의견을 바탕으로 작성되었습니다.
* 출처: 삼정 KPMG 경제연구원 Issue Moitor 95호 ‘간편 결제 시장의 경쟁 심화와 기업의 대응방향’
# App Overview
카카오를 사용하시는 분이라면, 카카오페이와 카카오뱅크를 들어보셨을 것 같은데요.
‘음.. 비슷한 서비스 아닌가? 똑같이 송금하는 기능도 있고, 계좌 금액 확인 가능하고..’
라고 생각할 수도 있을 것 같습니다. 그렇다면 정확히 두 서비스의 차이점은 무엇일까요?
카카오뱅크는 말 그대로 은행, 즉 금융기관입니다. 우리가 오프라인으로 은행에 가서 보던 업무를 모바일을 통해 편하게 이용할 수 있는 장점이 있습니다. 예금과 적금은 물론, 대출과 해외송금을 시공간의 제약 없이 진행할 수 있습니다. 반면에 카카오페이에서는 기존에 사용자가 보유한 계좌를 연동하여 간편 결제와 송금, 투자 등을 할 수 있습니다. 금융 서비스라는 점에서 공통점이 있지만, 각 서비스가 지향하는 목표는 다릅니다. 구체적으로 카카오페이가 지향하는 목표는 아래와 같습니다.
1. 종합금융 플랫폼으로 변화
카카오는 다양한 분야에서 서비스를 제공하고 있습니다. 하나의 예시로 카카오 T의 경우, 택시나 내비게이션, 카풀, 대리, 주차 등 이동수단(Transportation)의 모든 것이라는 목표를 가진 서비스입니다. 2015년, 기존에 분리되어있던 카카오 택시와 교통 서비스를 하나로 통합했는데요. 최근에는 ‘카카오 T 바이크’라는 자전거 공유 서비스를 추가하였습니다. 카카오페이도 이처럼 금융의 모든 것을 담고자 노력했습니다.
카카오페이는 간편 결제를 가장 앞세우면서, 송금, 투자, 보험 등을 함께 할 수 있는 종합금융 플랫폼을 목표로 합니다. 최근 택배 서비스를 추가하기도 하였는데요. 앞으로 어떤 금융서비스가 더 추가될지 기대됩니다.
2. 투트랙 전략 (기존 카카오페이보다 더 나은 UX)
(좌)카카오톡 앱 내 카카오페이 / (우)카카오페이 앱카카오톡 내에 하나의 기능으로 존재했던 카카오페이는 자체 앱을 별도로 출시하였습니다. 기존 카카오톡 내의 서비스도 유지하여 사용자가 진입할 수 있는 여러 루트를 제공하여 사용자의 접근성을 높이는 의도를 보이고 있습니다.
# UI Overview
1. 첫인상
(1) Onboarding
카카오페이 온보딩 이미지카카오페이는 친근감 있는 일러스트로 처음 앱을 설치한 사용자에게 서비스의 핵심 기능(결제, 송금, 투자)에 대해 안내해주고 있습니다.
(2) Sign up
(좌) 약관동의 (우) 비밀번호 확인*이런 점이 좋았어요
#하단에서 진행되는 프로세스
일반적으로 약관동의와 본인인증 과정은 풀 페이지로 제공되기에 유저 입장에서는 조금은 지루할 수 있는 부분입니다. 그런데 카카오페이는 유저가 바텀 시트에서 모든 과정을 진행할 수 있도록 제공하여 더 빠르게 프로세스가 진행되는 느낌을 주어 전체적인 온보딩의 부담을 줄인 것 같아 좋았습니다.
# 불필요한 뎁쓰(Depth) 생략
사실 한 페이지 내 유저가 입력해야 하는 정보는 꽤 되는데, 카카오페이는 마치 조금만 입력하면 되는 듯한 인상을 줍니다. 그리고 보통 통신사 선택은 팝업으로 띄워 선택하게 하거나 아니면 외부 통신사 입력 페이지를 호출하는데, 여기서는 이 프로세스를 바텀 시트에서 다 해결할 수 있었습니다.
# 신뢰도를 높인 GUI
비밀번호 확인 페이지 단계에서는 배경 컬러를 노란색으로 사용하였습니다. 유저로 하여금 본 페이지의 중요도와 진중함을 높인 것을 발견할 수 있었습니다. 상단의 사이렌이 윙윙 돌아가는 인터렉션 또한 ‘이 페이지는 중요한 페이지야!’는 느낌을 유쾌하게 풀어낸 것 같아 좋았습니다.
2. IA구조
카카오페이 앱 IA (2019.8 기준)#Tab별 UX/UI 분석(+핵심기능)
1. 바코드 탭
(1) 바코드 메인 (2) 바코드 전환 (3) 적립 바코드 (4) 송금받기 QR코드*이런 점이 좋았어요
#결제 서비스 이용 최적화
앱을 켜는 순간 결제 서비스를 이용할 수 있는 QR스캐너·QR코드·바코드가 한 화면에 나타나는 것이 좋았습니다. 결제 바코드를 우측으로 스와이프하면 통합 포인트 적립과 송금받기 QR코드에 접근할 수 있습니다.
2. 송금 탭
송금은 '자주, 최근, 친구, 계좌' 4가지 탭으로 구성되어 있습니다. 기존과 마찬가지로 카카오톡 친구나 계좌로 송금을 할 수 있고, 자주 송금하는 친구를 즐겨찾기하여 진입 시 최우선으로 목록을 볼 수 있습니다.
(1) 송금 메인
송금 메인 탭*이런 점이 좋았어요
#카톡친구와 빠르게 돈 주고받기
카톡친구에게 송금할 때 내가 저장한 이름과 실명이 함께 뜨기 때문에 간편하게 친구에게 돈을 보낸다는 인상을 받을 수 있었습니다.
*이런 점이 의외였어요
#세분화된 탭 구성
타 서비스들이 하나의 리스트에서 자주 찾는 계좌, 최근 송금 목록을 상단에 위치시켜 그룹핑으로 정보 제공하는 반면에, 카카오 페이는 각각 별도의 메뉴로 구분되어 다소 세분화되어 있다는 인상을 받았습니다.
#친구와 계좌검색
검색 영역에서 플레이스 홀더나 가이드 메시지가 없어 친구나 계좌를 검색할 수 있다는 점을 단번에 알수 없었습니다.
(2) 송금 플로우
송금 프로세스이런 점이 좋았어요
#빠르고 쉬운 송금
송금할 때 역시 한 페이지가 고정되어 바텀 시트가 변하면서 송금이 진행되기 때문에, 상대적으로 신속하고 간편한 느낌을 주고 있습니다.
#간편한 송금액 수정
최종 송금 확인 화면에서도 송금액 수정이 자유로워, 사용자의 편의성을 고려한 점을 발견할 수 있었습니다.
3. 투자 탭
투자 서비스는 2018년 11월 20일에 새롭게 선보여졌습니다. 피플펀드 등으로부터 제공되는 상품에 대하여 카카오페이는 상품기획부터 관여하여 이주로 심사를 하고 있다고 하는데요, 어떤 모습인지 확인해보겠습니다.
* 투자 탭에 대한 스터디는 투자하기 전까지의 프로세스를 관찰한 내용임을 알려드립니다.
(1) 투자 탭 메인
(좌) 상품 목록 탭 (우) 투자 현황 탭투자 탭은 하단에 상품 목록과 투자 현황 두 탭으로 나뉘어 있습니다. 상품 목록 탭에서 투자상품에 대해 탐색하고, 투자 진행 내역이 있는 경우 투자 현황 탭에서 확인할 수 있습니다. 상품목록 탭의 최상단에는 '투자상품 미리 확인하세요!'와 '투자, 어렵지 않아요'라는 이름으로 투자 안내 가이드 카드 영역이 있는데요, 투자 진입장벽이 높은 만큼, 유저가 더 편리하게 본 탭을 이용할 수 있도록 온보딩을 만든 것 같습니다.
(2) 투자 날씨 알림
투자 날씨 인터렉션*이런 점이 특이했어요
# 투자 수익에 대한 위험도를 5가지의 '투자 날씨 알림'으로 보여줍니다. 각 투자 카드에서 '수익에 비해 투자금 및 이자 소실에 대한 안정성'을 표기하기 위해 붙여지는데요, 날씨 마이크로 인터렉션이 섬세하고 귀엽습니다!
*이런 점이 의외였어요
# 날씨 그래픽들이 서로 비슷한 느낌으로 읽혀 명확히 구분이 되지는 않았습니다. 그런데 이는 일부러 모든 상품 건에 대해 위험도가 다소 높아도 긍정적인 인식을 심어주기 위한 의도된 디자인인가? 싶기도 합니다.
(3) 투자 상품 확인
(좌) 카카오페이 투자 탭 (우) 토스 투자 탭 (8월 기준)카카오페이는 투자 상품을 보고 싶을 때 상단의 '투자상품 미리 확인하세요' 카드를 클릭 시 확인할 수 있습니다. 그런데 토스는 투자 페이지에 들어오자마자 상품들에 대해 대분류를 해 놓았는데요. 물론 두 서비스가 투자 범위와 상품 등에서 차이가 있지만, 첫 화면에서 상품을 카테고리화 한 것은 더 편리한 느낌은 있었습니다. (그런데 2019년 9월 말 기준 토스 투자 화면이 업데이트되어 카테고리가 없어졌습니다. 실 사용자에게는 카테고리보다 기간 대비 수익률로 보여주는 것이 더 좋은 듯 합니다.)
카카오페이 투자상품 페이지 진입 시카카오페이의 투자상품은 투자 상품 카드 클릭 시 오픈 예정일 순으로 확인할 수 있었습니다. 각 상품카드 우측에 인포그래픽으로 카테고리를 분류해놓은 것도 확인할 수 있었습니다.
(4) 투자하기
투자 예정, 투자 중, 투자모집 완료에 따른 하단 버튼*이런 점이 좋았어요
투자 상세 페이지 진입 시 투자하기 버튼의 상태별 표시가 명확히 되어있었는데요. 오픈 전 투자 건 버튼에서 날짜와 함께(ex. 6/17 오픈 예정)으로 버튼에 정보가 제공된다는 점이 친절하게 느껴져서 좋았습니다.
예상 상환 일정 탭의 마이크로인터렉션# 도표와 수치에 대한 정리
‘예상 상환 일정’이나 상환 시나리오 등을 적절한 팝업과 마이크로 인터렉션으로 제공합니다. 자칫하면 어렵고 복잡해 보일 수 있는 도표나 수치에 대한 정리가 정교하게 잘 되어있다는 느낌을 받았습니다.
카카오페이 투자 페이지의 그래픽 다이어그램*이런 점이 좋았어요
# 직관적이고 일관된 그래픽
카카오 계열의 일관성을 유지하기 위해 메인 컬러인 노란색의 베리에이션 컬러를 사용하여 다이어그램을 제공하였는데요, 확실히 전체적으로 정돈되고 직관적으로 읽을 수 있었습니다.
카카오페이 투자 프로세스투자위험 안내 페이지에서 유저가 직접 '동의함'이라는 텍스트를 직접 입력해야 하는 과정을 제공하였습니다. 이 액션은 마치 유저가 계약서에 직접 사인하는 듯한 진중한 느낌을 주어 좋았습니다.
카카오페이 공사 진행 현황 스테퍼또한 카카오페이에서는 간간히 투자 상세 페이지 안에 새로운 UI의 시도를 찾아볼 수 있었습니다. 위 그림은 공사 진행 현황을 스테퍼(Stepper)로 안내한 화면인데요, 준비단계, 골조 단계, 마감단계를 각 단계별 설명과 이미지를 추가하여 더 직관적으로 정보를 이해할 수 있었습니다.
4. 내역 탭
(1) 내역 메인
내역 탭 메인*이런 점이 좋았어요
#퀵하게 직관적으로 조회하기
‘내역’ 탭의 경우, 페이머니와 결제로 크게 구분되어 있었습니다. 페이머니 이용내역은 카카오톡의 친구 목록처럼 송금한 은행 로고 혹은 프로필 이미지와 정보가 결합된 리스트 형식이었기 때문에, 조금 더 직관적으로 정보를 파악할 수 있도록 구성되어있습니다.
*이런 점이 의외였어요
#받기, 적립? 송금, 출금?
돈이 들어온 내역과 나간 내역이 비슷하게 표현된 것 같다는 느낌은 조금 있었습니다. 컬러 등 조금 더 명확히 구분되는 방법으로 표현하지 않고 그레이 스케일로만 표현한 것은 의외였습니다.
#기간 조회
기간 조회를 할 때, 좌우 화살표 버튼을 클릭해야만 기간 조회가 가능해서 디테일한 필터링이 되지는 않았습니다.
(2) 상세내역 확인
송금 내역 확인*이런 점이 좋았어요
#충전된 계좌 표기
‘내역’ 탭의 경우, 페이머니와 결제로 크게 구분되어 있었습니다. 페이 머니 이용내역은 카카오톡의 친구 목록처럼 프로필 이미지와 정보가 결합된 리스트 형식이었기 때문에, 조금 더 직관적으로 정보를 파악할 수 있도록 구성되어있습니다.
#송금 확인증 버튼
다른 금융 서비스와는 다르게 송금 확인증을 쉽고 빠르게 내역에 노출되어 있어 이메일로의 전송이 간편하게 되어있습니다.
*이런 점이 의외였어요
#송금한 시간의 초단위 표기
송금시간이 분단위까지만 표기되어있어 같은 1분 안에 두 번의 송금을 한다면 리스트의 순서 빼고는 구별할 수 있는 방법이 없었습니다.
5. 더보기
더보기 탭*이런 점이 좋았어요
#하이라이트 표현
신규 서비스와 이벤트 중인 메뉴는 하이라이트 표현되어있어, 어떤 서비스들이 업데이트가 되었는지 한눈에 알 수 있습니다.
*이런 점이 의외였어요
#카카오톡 앱으로 이동
전체 메뉴 중 송금 확인증, 환전만 앱 내에서 제공하고, 그 외 메뉴들은 전부 카카오톡 앱을 호출하여 이동되는 구조로 되어있습니다.
6. 충전하기
페이머니 충전 프로세스*이런 점이 좋았어요
#+만원, +오만 원, +십만 원 버튼을 통해 금액을 쉽게 추가할 수 있습니다.
#충전이 완료되면 바로 카톡 알림이 옵니다.
*이런 점이 의외였어요
#금액을 한글로도 표기하면 인지하기 더욱 편리할 것 같습니다.
7. 연결계좌
계좌 연결 프로세스*이런 점이 좋았어요
#스테퍼(Stepper) UI를 사용하여 하나의 화면 안에서 모든 과정을 볼 수 있어 좋았습니다. 큰 글씨와 시원시원한 영역을 제공한 것도 스테퍼 내에서 답답함을 느끼지 않고 각 단계에 집중할 수 있게 했습니다.
#진행 중인 단계의 소제목은 노란색+숫자로, 진행 완료는 filled 된 체크표시로, 진행 예정 단계는 눈에 덜 띄는 회색을 사용하여 소제목을 명확이 구분되었습니다.
#다른 단계로 넘어간 후에도 첫 번째 단계에서 입력했던 계좌번호를 변경할 수 있어 좋았어요.
# 카카오페이만의 차별점
1. 파격적인 첫 화면
카카오페이를 열고 맞이하게 되는 첫 화면은 후면 카메라가 비추는 모습입니다. 이는 오프라인 QR코드의 활성화를 대변해주기도 하지만, 송금과 결제를 앞세우고자 하는 카카오페이의 모습을 나타내기도 합니다.
2. 모바일 경험을 고려해 일관적으로 사용된 바텀 시트
Tumbzone을 고려한 UI카카오 페이는 모바일 UX를 고려해 엄지 손가락으로 이동 가능한 엄지 존(Thumb zone)에 핵심 메뉴와 기능을 구성하였습니다. 하단 시트는 카카오톡 앱에서 # 탭을 개선하며 처음 선보였는데요. 당시 긍정적인 반응을 얻고, 카카오 페이에도 동일하게 적용한 것으로 보입니다. 카카오톡 서비스에서 일부로 사용되었던 바텀 시트를 서비스 전체적으로 일관되게 적용하여 긍정적인 모바일 사용자 경험을 더욱 극대화한 것으로 보입니다.
3. 간결한 입력 프로세스
카카오페이를 사용해보면서 가장 크게 느낀 것은 입력 프로세스가 간결했다는 점입니다. 일반적으로 사용하는 인풋의 구조가 아닌 여러 개의 인풋을 하나로 묶음으로써 화면을 최소화하고, 플로우를 단순화하였습니다.
# 마무리하며
카카오페이 앱 케이스 스터디를 마무리하며 함께 진행한 멤버들에게 자유롭게 어떤 생각이 들었는지 물어보았고, 다음과 같은 말들이 나왔습니다.
"앱을 키자마자 큐알코드가 나오는 게 혁신적인 것 같아요!"
"바텀 시트(Bottom sheet)의 사용이 특이했어요!"
"하단 UI와 구조가 신선한데, 처음이라 낯설게 다가오는 부분도 있는 것 같아요"
"하단의 바텀 시트, 엄지 존, 카카오톡과 비슷한 맥락으로 사용해서 익숙하게 느껴져요"
"전체적인 UI는 카카오톡이랑 연결돼서 낯설진 않았고, 색감도 비슷해서 좋았어요"
"진입했을 때 바코드 보여주는 건 몇 번의 탭 없이 보여주는 게 편리했던 것 같아요."
"글씨가 커서 좋았어요"
"일러스트가 귀엽고 다양한 것 같아요!"
#하단의_바텀 시트_신선하고_새롭지만_낯선 #카카오톡과의_연결성 #키자마자_바코드와_QR #큼직한_글씨와_친근한_일러스트
이제 막 출시된 지 얼마 되지 않았어서 그런지 케이스 스터디하는 동안 카카오페이에서 분주하게 조금씩 업데이트하고 있는 것을 볼 수 있었고, 케이스 스터디를 진행하기 조금 시기적으로 빠른 것 같은 느낌도 있었습니다. 그러나 그럼에도 불구하고 카카오페이가 시도한 하단의 바텀 시트와 앱을 켜자마자 QR코드를 촬영할 수 있는 페이지를 등장시킨 혁신적인 UI는 분명히 차별화되는 선구적인 시도로 보였고, 재밌게 케이스 스터디를 할 수 있었던 것 같습니다.
[ Editor ]
임은주 https://www.behance.net/eunjoolim
최고운 https://www.facebook.com/woon1878
김시내 https://www.facebook.com/o2taewoo
고희진 https://www.facebook.com/designerhee
박현정 https://www.facebook.com/hyunjung.park.3990
