더피프티원에게 들은 우리WON모바일 UI·UX 설계 비결
지난 4월 18일, 우리은행이 알뜰폰 서비스인 ‘우리WON모바일’을 론칭했다. 최근 여러 은행이 단순 금융 서비스를 넘어 소비자 생활에 밀착된 플랫폼으로 확장을 시도하는 만큼, 우리은행 또한 필수 서비스 중 하나로 일컫는 통신 사업을 통해 보다 큰 영역에서 소비자를 확보하기 위한 시도다.
실제 우리WON모바일은 출시 한 달 반 만에 2만명이 넘는 사용자를 확보할 만큼 큰 인기를 얻고 있는데, 그 배경에는 데이터 중심 구성의 실속 있는 요금제와 우리은행 금융 거래 고객을 대상으로 한 혜택 제공 등 기존 금융 서비스와 연계된 마케팅 등이 꼽히지만, 한 가지 더 지대한 영향을 끼친 게 있다면 그건 서비스 정보 탐색과 가입과 개통 등 서비스 전반의 편의를 높이는 UI·UX 디자인이다.
우리WON모바일은 100% 비대면으로 가입과 개통이 진행되는 서비스다. 그만큼 UI·UX가 높은 수준으로 설계돼야 한다. 개통에 이르는 과정에서 한 번이라도 불편한 지점이 생긴다면 사용자는 이탈하게 되고, 이는 곧 가입자 수에 직관적인 영향을 미친다.
그렇다면 우리WON모바일은 어떻게 높은 수준의 UI·UX 디자인을 구축할 수 있었을까? 비결은 우리은행 내 CX 경험 고도화를 전담하는 ‘고객경험디자인센터’와 올해로 15년차의 업력을 가진 디지털 마케팅 에이전시 ‘더피프티원’의 합작에 있다.
과연 그들은 어떻게 고객 이탈을 최소화하는 웹사이트 구축에 성공한 걸까? 직접 우리WON모바일 프로젝트의 PL을 맡은 전영선 더피프티원 이사와 디자인 비주얼을 전담한 장동욱 더피프티원 BX센터 책임을 만나 물었다.
1. 프로젝트명: 우리WON모바일
2. 클라이언트사: 우리은행
3. 대행사(제작사):더피프티원
4. 오픈일:2025.04.18
5. URL: www.wooriwonmobile.com
알뜰폰 서비스에 관심을 가지고 웹사이트를 방문한 사용자의 행동은 크게 두 가지로 나뉜다. 우선 해당 서비스가 제공하는 혜택을 파악하기 위해 움직이는 사용자가 있다. 이 경우 제공되는 혜택의 차별점과 종류를 쉽고 직관적으로 알려주는 게 중요하다.
혜택에 대한 정보 수집이 끝났거나, 애당초 서비스 가입을 목적으로 방문한 사용자라면 가입부터 개통에 이르는 과정을 간결하고 쉽게 제공하는 것이 핵심이다. 특히 우리WON뱅킹의 경우 모든 가입이 100% 비대면으로 진행되는 만큼 이 부분이 중요할 수밖에 없다.
먼저 서비스에 대한 정보를 파악하기 위해 방문한 사용자를 중심으로 알아보자. 장동욱 책임은 “사용자가 첫 화면에서 찾고자 하는 정보를 빠르고 쉽게 찾을 수 있어야 한다”고 강조하는데, 장 책임의 말처럼 우리WON모바일 웹사이트는 요금제, 마이페이지, 혜택 등 각 카테고리의 메인 페이지에서 핵심 정보를 직관적으로 확인할 수 있다.
예로 요금제 메인 페이지의 경우 가장 인기 있는 요금제부터 기존 우리은행 이용 고객에게 제공되는 혜택, 나아가 요금제에 대한 고객 후기에 이르기까지 사용자가 필요로 하는 정보를 빠짐 없이 제공하고 있으며, 각 정보에 대한 사용자의 집중과 이해도를 높이기 위해 각 섹션의 UI 디자인도 다양한 형태로 적용했다.
가장 인기 있는 요금제를 설명하는 섹션으로 이를 살펴보면, 왕관 형태의 3D 요소와 애니메이션으로 사용자의 관심을 끌고, 주 타깃층이 가장 중요하게 생각하는 조건인 데이터의 경우 큰 폰트 크기와 색상을 통해 강조한 것을 알 수 있다. 더해서 각 요금제의 특징을 태그 형태로 덧붙여 세부 요금제 안내 페이지로 이동하지 않아도 주요 요금제의 혜택과 특징을 한 눈에 파악할 수 있게 의도했다.
명확하고 간결한 정보 전달과 함께 간결한 가입·개통 플로우 또한 우리WON모바일 웹사이트의 핵심 요소로 꼽힌다. 전 이사는 가입·개통 플로우 설계에 있어 “프로세스가 지나치게 길 경우 고객은 이탈하고 만다”며 “최대한 간결한 프로세스를 통해 가입부터 개통에 이르는 과정에서 사용자 이탈을 최소화했다”고 밝혔다.
실제 우리WON모바일의 가입 과정을 따라가며 이를 확인해보자. 우선 가입에 필요한 조건에서부터 기존 금융 서비스와 연계해 편리함을 느낄 수 있도록 기획했다는 점을 알 수 있다. 보통의 통신 서비스가 본인인증에 있어 신분증, PASS 인증서 등을 제공하는 데 반해, 우리WON모바일은 자사 금융 고객이라면 기존 입출금 계좌와 WON인증서 등을 통해 손 쉽게 서비스에 가입할 수 있다.
본인인증을 완료했다면 이제 가입 프로세스를 따라가 볼 차례다. 우리WON모바일의 가입 프로세스는 크게 다섯 가지 단계로 구성돼 있다. 안내하는 요금제를 충분히 확인했다면, 가입신청 버튼을 통해 가입 절차를 시작한다. 이후 번호이동, 신규 가입의 2지선다에서 원하는 방식을 선택하고, 실물 유심과 이심 중 어떤 방식을 통해 개통할지를 고르면 주요 과정은 끝이 난다. 이후에는 생각해둔 요금제를 선택하고 유심 배송주소 등 필요한 정보를 기입하면 끝이다.
이처럼 이지선다 중심의 간편한 선택 구조와 간결한 프로세스는 따로 상담사를 통하지 않고도 가입이 가능할 만큼 전체 프로세스의 난도를 낮추고, 가입 과정에 소요되는 시간 또한 단축시켜 가입 과정에서 사용자가 느끼는 피로도를 단축시키는 효과를 보인다.
더해서 대화형 소통 또한 가입·개통 플로우에서 사용자 이탈을 방지하는 장치로 기능한다. 사용자가 선택한 내용은 대화형 UI를 통해 보여지고, 이를 통해 마치 상담사와 대화를 주고 받는 듯한 인상을 준다. 더해서 선택에 오류가 있을 시 플로우의 첫 단계로 돌아가거나 화면을 이탈하는 대신 수정 버튼을 통해 수정을 원하는 플로우로 복귀할 수 있다는 점 또한 사용자 편리로 작용하는 요소다.
우리WON모바일이 한 달 반 만에 2만 명의 사용자를 모을 수 있던 비결은 이처럼 사용자 행태에 기반해 그들이 필요로 하는 정보를 알기 쉽게 제공해주고, 서비스의 핵심인 가입·개통 플로우를 간결하고 쉽게 설계해 사용자 이탈을 최소화한 데 있다.
이외에도 웹사이트 곳곳에서 찾을 수 있는 디자인 또한 사용성을 높인 요소로 작용했다는 평가다. 예로 우리WON모바일은 모바일을 먼저 제작한 후 PC에 최적화된 웹사이트를 제작했다. 이는 주 타깃인 2030 소비자가 디지털 네이티브인 만큼 모바일 기기에 친숙하다는 특징에 더해 대부분의 알뜰폰 서비스 가입자가 모바일을 통해 개통한다는 조사에 기반한 결과다.
모바일과 PC는 가로비와 세로비라는 명확한 차이를 가진다. 따라서 모바일에 최적화된 요소를 PC에 활용할 때는 자칫 화면에 여백이 지나치게 많지 않은지, 플로우가 어색하지는 않은지 등을 꼼꼼하게 확인해야 한다.
더피프티원은 이를 요소의 배치를 통해 해결했다. 메인 화면을 예로 살펴보면, 직사각형 비의 배너 페이지가 가장 상단에 위치하고, 아래로 스크롤 하는 액션을 통해 가입 신청, 이벤트 등 주요 내용을 순차적으로 확인할 수 있다. PC에 최적화된 화면에서는 직사각형 배너가 왼쪽에 보다 큰 크기로 위치해 하단 스크롤 액션에서 배제됐으며, 이외 요소들만 우측이 길게 배치돼 스크롤 액션을 통해 확인할 수 있게 설계됐다.
아울러 적응형과 반응형 요소를 적절하게 활용해 사용자마다 화면 크기에 차이가 있을 수 있는 PC화면에서 어떤 화면비에서도 필요한 정보를 쉽게 찾을 수 있는 UI 디자인을 유지하고자 했다.
더해서 우리WON모바일 웹사이트는 누구나 불편함 없이 웹사이트를 이용할 수 있다는 접근성 마크를 획득하며 시각에 불편함이 있는 사용자를 위한 적절한 명도 대비 조절 등 다양한 사용자를 위한 배려를 인증받기도 했다.
이처럼 웹사이트 전반에 녹아 든 사용자를 위한 디자인은 좋은 반응으로 이어지는 이유로 작용한다. 실제 웹사이트의 후기에는 편리한 정보 안내와 가입 절차 등 높은 사용자 경험에 대한 칭찬이 주를 이룬다.
전 이사는 “좋은 웹사이트란 단순히 심미적인 디자인이 아니라, 사용자에게 명확한 목적과 가치를 줄 수 있는 디자인을 가져야 한다”고 강조한다. 그의 말처럼 사용자의 행동과 그들이 무엇을 필요로 하는가에 대해 면밀하게 분석하고, 이를 디자인 곳곳에 녹여 낸 우리WON모바일 웹사이트는 빠르게 증가하는 가입자 수 등 실제 서비스 성과와 쏟아지는 호평 등 고객 만족 등 두 마리 토끼를 한 번에 잡을 수 있는 이유가 됐다.
결국 사용자가 찾는 웹사이트란 근본적으로 쉽고 편리해야 한다는 단순하지만 잊기 쉬운 진리를 더피프티원은 다시 한 번 기억하게 한 셈이다.
*해당 글은 소마코 제휴사 디지털 인사이트의 저작물로 무단전재 및 재배포를 금지합니다.
댓글 영역