알다 앱 디자인 리뉴얼 이야기 (3)
이전 내용이 궁금하시다면
알다 앱 디자인 리뉴얼 2편을 확인해 주세요!
글 : 알다 프로덕트 디자인 팀
Taekil Kim, Mila, Rejina Jieun Lee
대출받기
대출받기 탭은 어떻게 구성됐을까요?
대출받기는 알다 리뉴얼의 비즈니스 구심점이자, 문제 정의를 기반으로 사용자에게 가장 쉽고 빠르게 제공해야 하는 기능입니다. 어떤 다른 기능보다도 앱 최전방에서 제품의 얼굴 역할을 해야 했어요. 대출비교를 집중적으로 다루는 조직인 론 스쿼드(Loan Squad)의 프로덕트 디자이너가 이 부분을 담당했습니다.
대출받기 화면을 그려나갈 때 고민한 부분은 크게 2가지였습니다.
첫번째로 대출 서비스를 노출하는 방법을 먼저 고민했어요. 알다가 현재 다루고 있는 대출 서비스는 ① 신용대출 ② 주택담보대출 등 총 2가지입니다. 신용대출은 사용자의 직업이나 소득별로 받을 수 있는 대출 상품이 다양하게 나뉘어 있고, 주택담보대출은 대출 상품 수가 많지 않은 대신 담보로 삼을 주택이 있다면 신용대출보다 더 큰 금액을 대출 받을 수 있어요. 물론 신용대출을 이용하는 고객이 훨씬 많지만, 한번에 큰 금액이 오가는 만큼 주택담보대출 고객을 간과할 수는 없었습니다. 또한 어떤 고객에게는 주택담보대출을 쉽고 빠르게 받을 수 있게 해야 한다는 점도 빼놓을 수 없었죠.
두번째는 대출 너머의 고민이 필요했습니다. 대출받기는 앱을 켤 때마다 마주하는 첫 화면이므로 홈 화면의 역할 또한 해내야 했습니다. 그만큼 서비스에 대한 전반적인 정보와 소식을 모두 전달하면서도, 정보 위계를 복잡하지 않게 설계해야 하는 곳입니다. 사용자에게 안내해야 하는 알림 배너부터 현재 진행 중인 이자지원 이벤트까지도 노출해야 했어요. 하지만 이런 요소들을 한 화면에 덧붙이다보면 홈은 복잡해지고, 이전의 화면과 비슷한 모습으로 돌아가고, 결국 사용자가 쉽고 빠르게 대출을 받을 수 없다는 문제가 또다시 반복될 수밖에 없었어요.
홈을 캐러셀로 구성한 이유
그렇다면 이런 카드 형식의 캐러셀(Carousel; 이미지 슬라이드)은 어떨까요?
캐러셀 구조는 기기가 가진 물리적인 공간의 제약을 벗어날 수 있습니다. 손가락을 좌우로 밀어내는 스와이프 제스쳐를 통해 화면 바깥의 공간도 사용할 수 있기 때문에 개별 콘텐츠를 무게감 있게 나타날 수 있는 동시에, 사용자로 하여금 다른 콘텐츠가 있다는 것을 암시해 행동을 유도할 수 있습니다. 많은 사용자들이 이용하는 신용대출을 바로 보여주면서 주택담보대출이나 이자지원 이벤트도 동일한 비중으로 가져갈 수 있었죠. 금융을 넘어 사람과 사람을 연결한다는 알다의 브랜드 언어와도 일맥상통하는 UI였어요.
하지만 스와이프는 스마트폰과 역사를 함께 하다시피 한 제스처임에도 불구하고, 그 실용성에 대한 크고 작은 의문이 꾸준히 제기되어 왔습니다. 스마트폰이라는 기기는 세로로 길고, 기기를 잡는 손의 형태와 근육 기억 등의 이유로 세로 스크롤이 주인 멘탈모델이 형성됐기 때문이죠.
장점만큼이나 단점 역시 명확한 캐러셀을 이용하기 위해 2가지 전제를 설정했습니다.
① 스와이프는 세로 스크롤 콘텐츠 사이에 가로 스크롤 형태로 삽입되었을 때 사용성이 낮아지는 제스처일 것이다.
② 사용자의 상태에 상관 없이, 홈에서 캐러셀을 좌우로 스와이프할 수 있다는 것을 직관적으로 알 수 있어야 한다.
뭐든 가설을 세워 봤다면 실험을 해봐야 합니다. 사람들이 이 캐러셀 구조를 무리없이 이용할 수 있는지 가장 빠르게 실험할 수 있는 곳…
내 옆에 앉아 있는 동료들, 즉 회사입니다(…).
노트북을 들고 부지런히 동료들 사이를 뛰어다니기 시작했습니다. 알다의 많은 동료 분들에게 대출받기 메인에 대한 의견을 듣기 위함이었어요.
캐러셀 방식이 깔끔하고 좋다는 의견이 대부분이었습니다. 다만 ‘좌우로 넘길 수 있을 지 이해하기 어려워하는 사람이 있을 수 있다’ 고 우려하는 경우도 있었어요. 그래서 좌우 콘텐츠가 더 있다는 힌트를 주기 위해 페이지 인디케이터 옆에 좌우 화살표를 추가했습니다.
외부 사용자 테스트도 진행했습니다. 홈 화면 진입 시 페이지가 등장하는 애니메이션이 스와이프 제스처의 주요 단서가 될 것이라는 생각과는 다르게, 페이지 인디케이터를 보고 스와이프 힌트를 얻었다는 일관된 의견이 나왔어요. 페이지 인디케이터는 생각보다도 사용자에게 강한 넛지를 제공하고 있었습니다.
화려한 애니메이션이 들어간 홈 화면은 디자이너 입장에서 매우 만족스러웠지만, 최종 개발 범위에서는 제외됐습니다. 예비 사용자 5명에게 질문했을 때 5명 모두 ‘애니메이션이 기억나지 않는다’고 답했기 때문이죠. 유의미한 결과가 필요했던 메이커와 사용자의 생각은 항상 같을 수는 없었습니다.
비교적 나이가 많은 사용자에게도 테스트를 진행하며 한 가지 눈에 띄는 행동을 발견했습니다. 스와이프 제스처를 인식하기 이전에 페이지 인디케이터에 있는 화살표를 검지로 누르고 있었어요.
우리가 사용성 테스트를 꾸준히 하는 이유는 적은 투자로도 큰 효용을 불러오는, 가성비가 잘 맞는다는 점일 수 있습니다. 생각보다 단순하지만 명확하거든요. 1~2분의 짧고 사소한 테스트일지라도 사용자는 언제나 크고 다양한 깨달음을 주고, 때로는 디자이너가 알고 있던 원칙과 가치관을 뒤집기까지 합니다.
스와이프 제스처에 매몰될 필요가 없었어요. 사용자는 스와이프하거나, 스와이프할 수 있는 화면처럼 느껴지지 않는다면 화살표 또는 인디케이터의 점(dot)을 눌러 캐러셀을 넘길 수 있어야 합니다. 화면에 꽉 찬 프로모션 이미지를 넘기는 캐러셀에선 흔히 사용하는 패턴인데 행거에 걸린 카드 형태로 변주하면서 놓친 부분이었죠.
포스텔의 법칙을 고려했습니다. 사용자가 어떤 방식으로 입력하든 제품은 너그럽고 관대하게 대처해야 했어요. 화살표 아이콘은 단순한 안내용 표시가 아니라 누를 수 있는 버튼임을 더 명확하게 드러내기 위해 형태를 변경하고 크기도 키웠습니다. 인디케이터의 점을 누르면 해당 페이지로 캐러셀을 넘길 수 있도록 수정했어요.
그렇게 완성된 대출받기 탭의 운영 화면! 이후로도 대출비교 진행 여부에 따라 카드의 내용을 바꿔주는 유즈케이스를 고려하거나 CTA 문구를 변경하는 실험을 진행하는 등 다방면에서 개선이 진행되고 있습니다.
해결해야 할 과제는 여전히 남아 있습니다. 디바이스에 [동작 줄이기], [애니메이션 줄이기] 등의 설정이 적용되어 있을 경우 스와이프 제스처가 제대로 동작하지 않는다거나, 갤럭시 폴드 등 다양한 디바이스 해상도에서 캐러셀 UI를 더 유연하게 대응해야 하는 것도 해결 과제로 남아 있습니니다.
변경된 홈 화면이자 대출받기 화면은 알다 앱에서 확인하실 수 있습니다.
대출 관리
대출 관리의 큰 방향성 잡기
프로젝트를 처음 시작할 때 살펴본 데이터에서 ‘대출 비교 배너만큼 사용자는 신용점수와 대출 관리 배너를 눌러본다’는 사실을 관찰했습니다. 따라서 대출 관리는 내 대출 현황과 신용점수를 한 눈에 볼 수 있게 구성하는 게 핵심이었어요.
하지만 문제가 있었습니다.
사용자가 내 대출 현황을 볼 수 있는 방법이 두 가지라는 점이었어요. 개편 전 하단 네비게이션 바에 있는 ‘나의 대출’ 메뉴에서도 내 대출을 확인할 수 있었습니다. 개편될 대출 관리 메뉴와의 차이점은 마이데이터를 활용해서 홈에서 볼 수 없는 대출의 상세 정보와 실시간 현황까지 볼 수 있다는 것이었어요.
리뉴얼이라는 큰 변곡점을 지나 앞으로 더 풍부한 관리의 가치를 제공하기 위해서는 마이데이터를 활용하는 것이 비즈니스 임팩트를 줄 수 있는 가능성이 크다고 판단했습니다. 마이데이터로는 대출뿐만 아니라 예적금, 카드 등 풍부한 자산 데이터를 가져와서 사용자에게 맞춤 금융 솔루션을 제공할 수 있었기 때문입니다.
그래서 대출관리를 미래에 마이데이터를 활용한 서비스의 밑바탕이 될 것을 전제로 디자인을 고민했어요.
신용점수와 대출관리를 어떻게 하나로 보여줄까
사실 대출관리는 직접적으로 대출을 중개해주지 않기 때문에 당장 비즈니스 임팩트를 낼 수 있는 서비스는 아니에요. 그래서 처음에는 신용점수와 대출관리를 상단 탭 메뉴로 묶어 UX 변경점 없이 제공하려고 했어요. 한정된 시간 안에서 가장 공수가 적게 만들 수 있는 방법이라고 생각했거든요.
그런데 이렇게 밑그림을 그려보니 어딘가 좀 이상했어요. 우선 탭 메뉴는 보편적으로 연속성이 강한 하나의 그룹으로 인지돼요. 이를테면 대출, 카드, 예적금이라는 탭 메뉴가 자산을 포괄하는 것처럼요. 하지만 스케치를 해보니 마치 개별적인 두 개의 프로덕트를 억지로 묶어놓은 것처럼 보였어요. 더불어 대출과 연관성이 깊은 신용점수를 나눠서 보는게 사용자에게도 불편한 경험이라는 생각도 들었고요. 그래서 더 일관성있는 경험을 제공하기 위해 신용점수와 내 대출 정보를 한 페이지에 녹여 단순화시켜보기로 했어요.
마이데이터를 활용한 대출 관리를 어떻게 구성해야할까
마이데이터로 내 정보를 연결해서 가져오면 고객은 기존에 확인할 수 없었던 대출의 금리, 상환 방식, 상품명 등 ① 더 세부적인 정보를 ② 실시간으로 볼 수 있어요. 하지만 기존에 마이데이터를 연결하기 전 ‘나의 대출’의 랜딩페이지에서는 금리를 내릴 수 있는지 진단해주는 ‘금리인하요구권’ 하나의 기능으로 마이데이터 연결을 소구하고 있었기 때문에 사용자가 내 대출 현황을 상세히 볼 수 있다는 걸 예측하기 어려웠어요.
(1) 홈의 대출관리와 마이데이터로 제공하는 대출을 적절히 배합하여 연결 넛지하기
기존에 사용자는 마이데이터를 연결하지 않아도 홈의 대출관리 배너를 통해 내 대출의 일부 정보를 확인할 수 있었어요. 어떤 은행에서 대출을 몇 개 보유하고 있고, 남은 대출금이 얼마인지와 같은 정보였죠.
- 마이데이터 연결 소극적 넛지: 처음에는 어떤 은행에서 대출을 몇 개 가지고 있는지만 보여줬어요. 여기서 사용자가 각 대출을 누르면 기존 홈에서 진입했던 대출 목록에서 일부 대출 정보를 볼 수 있고, 연결하면 더 자세한 정보를 볼 수 있다고 넛지하는 솔루션이었어요.
- 그런데, 고객이 마이데이터를 연결할거라는 확신이 없었어요. 대출 정보를 보고싶은 니즈를 1차적으로 충족했으니, 마이데이터 연결을 하려는 의지가 낮을거라는 피드백도 있었고요. 또한, 기존 스크래핑 방식으로는 대출 상품명을 알 수 없어서 같은 은행에서 여러 대출을 받아도 구분이 어려웠죠.
- 여기에 더해, 기존 대출 목록은 레거시가 된 웹앱으로 개발된 페이지라, 해당 페이지로 Flow 설계하는 건 기술적인 측면에서도 좋은 방법이 아니었어요.
- 마이데이터를 강력하게 넛지: 그래서 첫번째 안을 보완해서 대출을 눌렀을 때 바로 마이데이터 퍼널로 이어지는 Flow로 솔루션을 만들었어요.
- 하지만 이렇게 Flow를 변경하면, 사용자는 대출 관리에서 보던 나의 대출 잔액을 볼 수 없게 되고, 대출 받기 전 내역을 확인하려는 유저는 마이데이터 연결을 위한 긴 동의서 퍼널을 지나야 하기 때문에 불편함을 초래할 것이라 생각했어요.
- 따라서 기존에 대출 잔액을 목록에서 보여주는 방식을 선택했어요.
(2) 마이데이터로 줄 수 있는 가치 통합하여 전달하기
마이데이터를 연결하면 사용자는 지금 대출을 잘 쓰고 있는지 금리 수준을 알 수 있어요. 하지만 진단 후에 적절한 솔루션을 주지 못하고 단순한 정보 안내에 그치는 것이 아쉬웠어요. 그래서 함께 제공하고 있던 기능 중, 내 금리를 내릴 수 있는지 알 수 있는 ‘금리인하진단요구권’을 통합해서 높은 금리의 대출을 보유한 사용자가 자연스럽게 사용해볼 수 있도록 개선했어요.
마이데이터 연결 전에는 대출 연결을 유도하기 위해 즉시 금리 내리기라는 강력한 후킹 메세지를 버튼에 넣었어요.
마지막으로 마이데이터 연결을 의도대로 하는지 확인하기
이렇게 디자인을 완성하고 대출 관리 탭을 마주한 사용자가 실제로 어떤 가치에 반응하는지 알고 싶었어요. 처음에 허들이라고 생각한 마이데이터 동의서 퍼널을 잘 완료하는지도 확인하고 싶었고요. 그래서 빠르게 프로토타입을 만들어서 대출을 보유한 사용자 대상으로 UT를 진행했어요.
결과적으로 즉시 금리내리기와 내 대출을 눌러보는 사람의 비율은 비슷했어요. 그런데 스크롤을 내려야만 볼 수 있는 대출 내역을 눌러본 사람들은 순수하게 내 대출 정보를 궁금해 한 반면에, 즉시 금리내리기는 버튼이 잘 보여서 눌렀다는 답변이 많았어요. 실제로 마이데이터 퍼널을 끝까지 완수하는 사람도 내 대출 내역을 눌러본 사람이 더 높았고요.
이로써 고객에게 더 매력적인 가치를 줄 수 있는 대출 관리 방안이 필요하다는 걸 알 수 있었어요. 이는 근본적인 고객 니즈에 대한 고민이 필요했기에, 추후 디벨롭할 과제로 커뮤니케이션한 뒤 디자인을 마무리짓게 되었어요.
출시와 회고
수많은 디자인 시안과 커뮤니케이션, 개발과 QA를 무사히 마치고 리뉴얼된 알다 앱을 공개할 수 있었습니다. 비록 일정과 자원이 넉넉하진 않았지만, 오히려 효율적으로 자원을 사용해 팀 전체가 움직이는 방법을 배울 수 있던 시간이었어요.
리뉴얼 이후 약 한 달이 지난 현재, 홈에서 대출비교 기능으로 진입하는 전환율이 이전보다 약 15% 상승했습니다. 이자지원 이벤트 기간을 제외한 2주를 비교했어요.
또한 감사하게도 리뉴얼 소식을 듣고 주변에서 많은 분들이 자발적으로 앱을 설치하고, 사용해 보고 다양한 의견을 남겨주셨어요.
사용자들의 피드백
이렇게 다양한 피드백을 받다 보니, 제품 안에서 사용자의 보이스를 직접 들을 수 있는 창구가 있으면 더 좋을 것 같다는 의견이 있었어요.
기존 알다 앱에 고객센터나 문의창구가 없던 건 아니었습니다. 1:1 문의를 작성할 수 있는 기능이 있었어요. 다만 적극적으로 불편을 제기해주시는 사용자를 제외하고는 사용 빈도가 매우 떨어지는 기능이었어요.
조금 더 적극적으로 사용자 접점을 만들어야 할 필요성을 느꼈기 때문에 리뉴얼 TF 구성원들과 논의를 빠르게 진행했어요. 다이얼로그나 팝업을 이용해 사용자 피드백을 수집하는 형태를 기획했는데, 마침 최근에 도입한 CRM툴인 Braze에서 다이얼로그 기능을 제공하고 있었어요. 개발 없이 원하는 화면에서 팝업을 띄울 수 있는 강력한 기능을 활용해보기로 했습니다.
사용자에게 어떤 것을 물을 것인지를 논의하는 과정에서, 실효성있는 답변을 받아 개선점을 짚는 것보다는 먼저 사용자와의 대화 창구를 만들고 자유롭게 의견을 수집해보는 것에 의의를 두었어요.
참여하기를 누르면 미리 만들어져 있는 구글 폼이 열리도록 해 MVP를 빠르게 구축할 수 있었습니다.
협업 과정
리뉴얼에 참여한 구성원들이 적은 수가 아니었음에도 짧은 시간 안에 밀도 있게 일할 수 있었던 이유는 다양하지만, 몇가지 핵심적인 이유를 꼽아봤습니다.
(1) 디자이너와 개발자가 서로 짝으로 일하기
앞서 다룬 온보딩, 대출 받기, 대출 관리는 각각의 개발자와 디자이너가 한 팀이 되어 하나의 제품에 오너십을 가지고 드라이브한 프로젝트에요. 각 제품별로 전달하는 가치와 요구사항이 다르기 때문에 한 제품을 페어로 분담하는 게 훨씬 효율적이라고 판단했거든요. 특히, 유저 세그먼트나 요구하는 데이터에 따라 UI 요소나 Flow에 변경점이 있을 때, 각자 하나의 제품에 딥다이브하여 높은 이해도가 바탕이 되었기 때문에 신속하게 대응할 수 있다는 점이 좋았어요. 또한 개발자와 디자이너가 자주 싱크를 맞춰야 하는 인터랙션 같은 경우에도 즉각적으로 소통하면서 디테일을 챙길 수 있었고요. 이렇게 페어로 프로젝트를 진행한 것이 촉박한 일정 안에서도 제품의 완성도를 높일 수 있었던 큰 계기가 된 것 같아요.
(2) 열린 피드백
이번 리뉴얼 프로젝트는 다양한 직군이 사용자 관점에서 피드백을 주고받았어요. 한 예로는, 대출 목록에서 기존 홈에서 제공했던 스크래핑 방식과 마이데이터 방식을 통합하면서 사용자에게 어디까지 정보를 보여줘야 할지 고민이 되었는데요. 동료 DA와 프론트 엔지니어께서 지금 집중해야 할 ‘마이데이터’의 긍정적인 가치에 대한 공통적인 의견을 주신 덕분에 Flow를 설계하는 데 큰 도움이 되었어요.
(3) 빠른 공유와 오버 커뮤니케이션
규모가 큰 프로젝트인 만큼 이해관계자가 많아 시간이 지날수록 잡음이 생기기 시작했어요. 마음이 아프지만 처음 디자인 솔루션을 리뷰했을 때 뒤늦게 이슈를 발견해서 롤백된 경험도 있었고요. 때문에 다양한 이해관계에서 변수를 최소화하기 위해 프로젝트 중반부터는 동료 PM분과 함께 프로젝트를 진행하게 되었는데, 다행히 그 뒤로는 많은 어려움이 사라지게 되었어요.
먼저, 데일리 개발 스크럼으로 개발자와 디자이너의 커뮤니케이션 코스트가 줄어들었어요. 개발측면에서 예상치 못한 이슈가 생겼을 때 바로 우선순위를 크로스 체크해서 매끄러운 프로젝트 진행이 가능해졌거든요. 또한 일정을 지속적으로 공유하면서 논의할 이슈를 과할 정도로 Slack 채널에 공유한 덕분에 일정 지연 없이 배포할 수 있었고요.
이후에는 리뉴얼 이후 예정된 마케팅을 UI에 어떤 방식으로 녹여낼지, 레거시로 남은 광고 채널을 어떤 방향성으로 가져가야 할지 등 사업부와 마케팅, 브랜드 디자이너 어느 누구 할 것 없이 적극적인 태도로 커뮤니케이션 하면서 신속한 의사결정이 이루어져 프로젝트를 잘 마무리 할 수 있었습니다.
(4) 디테일한 QA와 수용적인 태도
제품의 완성도를 결정짓는 마지막 단계는 QA라고 해도 과언이 아니에요. 디자이너 입장에서는 디자이너가 최초로 의도한 UI와 인터랙션 같은 요소들이 잘 구현되었는지 더 초점을 맞춰서 보는데요. 작은 요소라도 일관성이 무너지면 제품에 대한 고객의 신뢰와 직결 될 수 있기 때문이에요. 사실, 빠르게 제품을 내야 하는 일정이라 기능적 결함이 없다면 우선순위가 낮아질 수도 있지만, 개발자분들께서 최대한 반영하기 위해 노력해주신 점이 인상 깊었어요.
더불어 최초에 생각하지 못한 많은 기획 또는 개발 측면에서 해결할 과제도 발견할 수 있었는데요. 대표적으로는 보안을 위한 background 상태에서 foreground 로 변경될 때의 로직, 배너와 이벤트 정책 등이었어요. 이를 PM과 함께 하나씩 점검하는 과정을 거치면서 중요한 Task는 함께 반영하면서 최종 배포까지 수월하게 마칠 수 있었어요.
리뉴얼은 끝났지만 사실은 이제 시작입니다
리뉴얼은 알다가 입고 있던 옷을 새로운 옷으로 갈아 입는 과정에 불과합니다. 새로운 옷을 입었으니, 이제 새로운 성격과 행동을 지금부터 쌓아가야 하는 시작점을 만든 셈이에요. 알다 리뉴얼을 무사히 마칠 수 있던 건 디자인 팀이 아니라 리뉴얼을 만들어 나간 리뉴얼 TF 구성원 모두, 또 믿고 지지하며 기다려준 다른 구성원들이 함께 같이 만든 덕분입니다.
리뉴얼을 기획하며 발견한 많은 문제들을 1차적으로 고쳤지만, 이제 그 결과로부터 학습하고 또 반복하는 과정이 필요합니다. 고치지 못한 문제들 역시 아직 백로그에서 사라지지 못한 채 디자이너를 기다리고 있습니다. 하나의 문제에 수십번 실험하며, 백로그를 하나씩 해결해가며 가설과 검증, 회고를 반복하고 성장의 플라이휠을 만드는 새 엔진의 시동을 이제야 켰을 뿐입니다.
알다를 가꾸면서 수많은 내외부의 이해관계와 업무 우선순위, 비즈니스 가치와 지표, 다양한 의견, 예상치 못한 제품과 정책 문제, 사용자 의견 등이 쌓였고, 앞으로도 계속 쌓일 것입니다. 하지만 그 많은 조건들 사이에서도 ‘우리 제품의 사용자를 더 행복하게 만든다’는 디자인 팀의 자세와 원칙은 변함 없이 지켜나갈 거예요. 비즈니스 가치와 사용성을 함께 가져갈 수 있다는 것을 증명하기 위해 끊임없이 노력하는 알다 디자인 팀을 앞으로도 많이 기대해주세요.
Special thanks to.
일정을 조율하고 문제를 적극적으로 공유해 주신 PM 윤아님, 제품 여정을 관찰하고 인사이트를 만들어 주신 DA 형락님, 복잡한 설계도 거뜬히 구현해 주신 FE 홍근님, 상훈님, BE 영빈님, 그리고 모든 알다 크루분들과 이 글을 읽어주신 독자 여러분께 진심으로 감사드립니다 :)
금융의 모든 연결고리, 알다
앱 다운로드 바로 가기
