2023. 5. 4. 07:50ㆍBlockchain UX 이야기
WEMIX.Fi는 WEMIX 메인넷의 공식 DeFi 플랫폼으로서 블록체인을 기반으로 새로운 금융 경험을 제공합니다. 앞선 여러 DeFi 플랫폼에서 이용자들이 겪었던 불편을 통해 알 수 있듯, 새로움은 때때로 낯설고 어렵게 받아들여질 수 있습니다. 블록체인이 아직 많은 사람들에게 생소한 기술인 만큼 이를 토대로 한 금융 서비스는 더더욱 이용자 경험에 세심한 주의를 기울여야 합니다. WEMIX.Fi팀이 플랫폼을 설계하며 이용자를 위한 원칙을 세우고 이를 지키려 노력했던 것처럼 말입니다. DeFi 플랫폼의 발전과 성장을 이끌고자 하는 WEMIX.Fi팀의 아홉 가지 원칙을 소개합니다.
원칙 1. DeFi 초심자도 쉽게 이용할 수 있어야 한다
WEMIX.Fi는 블록체인 금융 UX에서 당연하게 여겨지던 ‘불편함’을 완전히 탈피하여 더 많은 사람이 DeFi 서비스를 경험할 수 있도록 돕고자 합니다.
사실 DeFi 서비스 이용자 대부분은 이미 불편함에 익숙해져 있습니다. 여러 차례의 인터뷰와 리서치 결과, 이용자들이 DeFi 서비스를 이용하기 위해 외부 매체를 통한 별도의 학습을 병행한다는 사실을 발견할 수 있었습니다. DeFi가 낯선 개념인 만큼 상품 개념을 이해하기 위한 지식 학습과 서비스 이용 방식 체득을 필요로 했는데, 서비스 내에서는 충분한 정보를 얻기 어려워 주로 유튜브나 블로그를 탐색했던 것입니다. 이를 통해 기존 DeFi 서비스에서는 이용자가 온전히 자산 관리를 고민할 수 있는 환경이 제공되고 있지 않다는 결론을 낼 수 있었죠.
WEMIX.Fi팀이 정의한 기존 DeFi 서비스 문제점은 아래와 같습니다.
- DeFi 상품 이해를 위한 설명이 부족하다
- 관련 개념을 나타낸 UX 라이팅이 불친절하다
WEMIX.Fi팀은 위 두 가지 문제점을 해소하고 이용자들이 WEMIX.Fi 사이트 하나만으로 모든 자산 관리를 마칠 수 있게 하자는 목표를 세웠습니다. 부가적인 학습 과정을 최소화하고 이용자가 관리에 집중할 수 있는 환경을 제공하고자 한 것입니다.
DeFi 상품에 대한 충분한 설명
모두들 금융 상품을 이용하실 때 금리, 이용 기간, 이율 등 다양한 항목을 꼼꼼히 살펴보실 텐데요. 일반 금융 상품처럼 DeFi 상품에도 서비스 이용 단계에 따라 반드시 살펴봐야 하는 항목들이 존재합니다. WEMIX.Fi에서는 이용자가 서비스 단계별로 반드시 살펴야 할 정보를 놓치지 않을 수 있도록 상품 설명 및 이용 안내를 제공하고 있습니다.
Pool 상품을 예로 살펴볼게요. Pool은 은행에 돈을 맡겨 은행이 돈을 활용할 수 있도록 기여하고 그에 상응하는 이자를 받을 수 있는 ‘예금’과 비슷한 상품입니다. Pool 상품 페이지에 들어가면 맨 처음으로 기본적인 상품 설명을 볼 수 있는데요. 화면 왼쪽 영역에 상품 자체에 대한 설명뿐 아니라 상품을 이용할 때 반드시 인지해야 할 세 가지 특성을 함께 보여줍니다. 아래 이미지처럼요.
또, 이용 안내는 유동량, 거래량 등 상품 이용 시 반드시 고려해야 할 정보를 전달합니다. 이용자는 WEMIX.Fi에서 이용 안내를 통해 나에게 꼭 맞는 상품을 선택할 수 있습니다. 여기에 더해 툴팁은 이용자가 특정 용어의 정확한 의미를 이해할 수 있도록 합니다. 이전 여타 DeFi 서비스와 달리, 유튜브와 블로그를 전전하지 않고도 상품에 대해 쉽게 이해할 수 있게 된 것이죠.
직관적으로 이해할 수 있는 친절한 UX 라이팅
WEMIX.Fi팀은 자칫 어렵게 느껴질 수 있는 전문용어를 이용자가 쉽게 이해할 수 있도록 돕기 위해 두 가지 원칙을 세웠습니다. 하나, 외국어는 의미를 명확히 전달할 수 있게 번역했습니다. 둘, 생소한 개념을 쉽게 이해하고 선택할 수 있도록 기준점으로 삼을만한 도움 정보를 제공했습니다.
예를 들어, Slippage(슬리피지)는 내가 체결한 가격과 실제 거래 체결 시점의 시세 차이를 어느 정도까지 허용할 것인지 설정하는 기능입니다. 시세 폭이 빠르게 변동하는 코인 시장에서, 시세 차이로 인한 손해를 줄일 수 있는 Slippage는 매우 중요하지만, 코인 시장의 특성을 알아야만 이해할 수 있는 복잡한 개념이기도 합니다.
WEMIX.Fi에서는 Slippage를 ‘슬리피지’ 그대로 가져오는 대신, ‘거래 허용치’라는 용어를 채택했습니다. 이용자가 ‘거래의 폭을 허용하는 설정치’라는 의미를 직관적으로 이해할 수 있도록요. 이용자의 시선에서 서비스를 바라보고 ‘개념이 가진 명확한 의미를 전달받을 수 있는가?’에 초점을 맞춰, 단순 인용이나 직역보다는 더 쉬운 UX 라이팅을 제공하고자 노력했습니다. 더불어 이용자의 선택을 함께 고민하는 상세 설명을 제공합니다. 범위별 거래 체결 가능성을 함께 명시해 이용자가 최적의 선택을 할 수 있게 돕는 것이죠. 이용자가 명확한 이해를 기반으로 서비스를 이용할 수 있도록, 거래 과정에서 발생하는 손해 가능성을 충분히 인지시킵니다. 상품을 선택하고 거래를 마치기까지, 모든 과정을 꼼꼼하게 보살피는 것이죠.
이렇게 WEMIX.Fi팀은 정확한 용어 설명과 도움 정보 제공을 통해 따로 공부를 하거나 다른 영상 또는 글을 따라할 필요 없는 DeFi 서비스를 만들고자 했답니다. 어쩌면 WEMIX.Fi 이용만으로도 자연스럽게 DeFi 고수가 될 수 있을지도 모르겠습니다. :)
원칙 2. 이용자에게 효율적으로 정보를 전달한다
정보 전달에는 선택과 집중이 필요합니다. 낯선 정보들로 넘쳐나는 DeFi 세계에서 이용자가 목적지에 원활히 도착할 수 있도록 해야 하니까요. 그래서 WEMIX.Fi팀은 ‘핵심 정보’와 ‘보조 정보’를 선택하고 이용자에게 효율적으로 전달하는 방법에 집중했죠. 핵심 정보를 제공해 이용자에게 앞으로 나아갈 확신을 주고, 필요에 따라 부가 정보를 손쉽게 획득할 수 있는 UI를 구성했습니다.
빠르게 획득 가능한 핵심 정보
DeFi 서비스에서 시점별 핵심 정보는 무엇이며 어떻게 전달해야 할까요? Staking을 예로 설명드리겠습니다.
먼저, 이용자는 여러 상품 중에서 ‘나에게 가장 적합한 것’이 뭔지 알아야 합니다. Staking 첫 페이지에 진입한 이용자라면 GRAND, DIOS, LIQUID 중 무엇을 골라야 할지, 세 가지 갈림길에서 고민에 빠질 수밖에 없을 텐데요. 이용자의 선택을 돕기 위해서는 상품의 차이를 명확히 구분시켜 주는 게 중요합니다.
WEMIX.Fi는 상품별 특성을 줄줄이 나열해 단순 정보량을 늘리기보다, 짧지만 임팩트 있는 문구를 선정해 이용자가 필요한 정보를 빠르게 파악할 수 있도록 했습니다. 또한 정보 위계를 명확하게 구분한 카드 UI를 통해 이용자가 수익률, 상품 정보와 같이 우선순위가 높은 정보를 빠르게 인식할 수 있게 했습니다.
마음에 드는 상품을 고른 뒤에도 가입 과정에서 알아야 하는 정보들이 있습니다. 하지만 이용자가 가입에 몰두하느라 중요한 정보를 제때 파악하기 어려울 수 있죠. 그래서 딱 필요한 순간에, 이용자의 시선이 머무는 위치에 핵심 정보를 한 번 더 안내하는 작업이 필요합니다.
예를 들어, GRAND Staking의 경우 현재 출금 기능을 지원하지 않아 예치액과 발생 수익이 일정 기간 락업된다는 특징을 갖습니다. 이용자의 자산 관리 계획과 예치 결정에 영향을 주는 정보죠. 그래서 시인성 높은 안내 배너에 GRAND Staking의 특성을 담아 눈에 잘 띄는 액션 영역 상단에 배치했습니다.
필요할 때 눌러보는 보조 정보
서비스를 이용하는 도중에 정보가 더 필요하다면 어떻게 할까요? 클릭 한 번이면 됩니다. WEMIX.Fi 이용자는 식당에서 호출벨을 누르듯, 클릭 한 번으로 그때그때 필요한 정보를 불러올 수 있습니다.
이용자는 액션 도중 필요한 경우에 차트 아이콘을 눌러 실시간 차트 정보를 확인할 수 있습니다. Pool 서비스를 예로 들면, 이용자는 실시간 차트를 통해 예치하고자 하는 코인의 가격 변동, 유동성 풀에서 발생하는 유동량 및 거래량을 확인할 수 있습니다. 더욱 자세한 정보를 원할 경우 차트 세부 화면으로 진입할 수도 있습니다. 이런 정보를 통해 이용자는 수익을 예측하고 의사 결정에 도움을 받을 수 있죠.
보조 정보를 호출할 때 중요한 포인트는 바로 이용자의 액션을 방해하지 않아야 한다는 것입니다. 이용 안내와 차트 정보 등은 이용자의 액션 도중 등장하지만, 액션에 필요한 다른 정보를 가리거나 이용 흐름을 끊지 않고 액션에 도움을 주는 기능을 수행합니다. 그 덕분에 이용자는 현재 위치에서 어떤 방해도 받지 않고 자연스럽게 필요한 부가 정보를 얻을 수 있습니다.
이처럼 WEMIX.Fi팀은 이용자가 서비스에 몰입하고 집중할 수 있는 환경을 조성하기 위해 필요한 정보들을 위계 있게 제공하고 있습니다. 한꺼번에 많은 정보 제공으로 혼란을 주거나, 부족한 정보로 불편을 주지 않도록 말이죠!
원칙 3. 일관된 이용자 경험을 제공한다
서비스에서 ‘일관성’은 매우 중요합니다. 이용자는 새로운 것을 배울 때마다 인지 부하를 겪습니다. 만약 과부하가 온다면 학습 능력이 저하될 수 있죠. 서비스가 일관성을 유지한다면 그만큼 이용자에게 부과되는 인지 부하를 줄일 수 있습니다. 이렇게 일관성은 이용자의 경험에 영향을 미치고 더 나아가서는 서비스의 성공 여부를 좌우하기도 합니다.
WEMIX.Fi팀은 이토록 중요한 일관성을 지키기 위해 노력을 기울였습니다. 특히, 서비스 화면에서 일관성 있는 레이아웃을 구성함으로써 각 서비스에서 새로운 학습에 대한 부담 없이 사용이 가능합니다. WEMIX.Fi의 레이아웃 곳곳에 녹아있는 일관성을 자세히 살펴보도록 하겠습니다.
첫째, 안내 영역과 액션 영역을 구분한 레이아웃
서비스를 이용하는 도중에 정보가 더 필요하다면 어떻게 할까요? 클릭 한 번이면 됩니다. WEMIX.Fi 이용자는 식당에서 호출벨을 누르듯, 클릭 한 번으로 그때그때 필요한 정보를 불러올 수 있습니다.
정보 구조는 서비스의 전체 그림과 흐름을 결정합니다. 이용자가 정보를 쉽게 이해하고 움직일 수 있도록 각 서비스에 맞는 정보 구조가 적용돼야 합니다. WEMIX.Fi는 이러한 정보 구조를 고려해 상품 페이지 내 안내 영역과 액션 영역을 구분했습니다. 안내 영역에서는 해당 서비스에 대한 정보를 제공해 이용자의 명확한 이해를 돕고 액션 영역에서는 획득한 정보를 바탕으로 액션을 취할 수 있도록 함으로써, 상품 전체의 구조적 일관성을 확보했습니다.
둘째, 동일한 위치의 정보 제공 컨트롤러
경험의 일관성 측면에서 특정 기능이 동일한 영역에 나타나는 것은 중요합니다. 이용자가 서비스나 상품을 옮겨가도 동일한 경험을 제공받을 수 있기 때문입니다. WEMIX.Fi는 액션 영역의 상단에 고정적으로 위치한 컨트롤러(아이콘)를 통해 스텝 가이드, 차트 등과 같은 부가적인 정보를 획득할 수 있습니다. 이용자가 액션을 지속하면서도 컨트롤러를 누르면 안내 영역에서 팝업된 정보들을 볼 수 있는 것이죠. 필요한 정보가 눈에 잘 띄는, 하지만 액션을 방해하지 않는 위치에 일관적으로 제공됨에 따라 이용자는 어떤 WEMIX.Fi의 어떤 서비스 화면에서든 일관적인 경험을 보장받습니다.
셋째, 이용자의 편안한 액션을 위한 정보 구조
예상치 못한 정보 구조 변화는 이용자의 행동에 불안 요소로 작용할 수 있기에, 다양한 서비스를 제공하면서도 서비스를 이용하기 위한 행동 경로에는 일관성을 부여해야 합니다. WEMIX.Fi 콘텐츠는 이용자의 액션이 입력-예상 결과 확인-실행으로 자연스럽게 이어질 수 있는 구조를 이뤄, 이용자가 다른 불편함 없이 ‘거래’에만 집중할 수 있게 돕습니다. Swap 화면에서 볼 수 있듯, 아래에서 위로 옮겨가는 시선을 고려해 입력이 이뤄지는 컴포넌트, 예상 결과가 나타나는 아코디언, 액션 실행 버튼을 차례로 세로 배치했습니다. 이러한 구조는 다양한 서비스에 일관적으로 적용돼 이용자가 어떤 서비스를 이용하든 익숙한 액션을 취할 수 있도록 합니다.
넷째, 다양한 디바이스를 고려한 사용 환경
WEMIX.Fi팀은 이용자가 어떤 디바이스에서든 최대한 일관된 경험을 제공받을 수 있도록 서비스를 설계했습니다. 다양한 디바이스에 맞게 변화하지만 동시에 일관적인 서비스를 통해 이용자는 매끄러운 사용성을 느낄 수 있습니다.
이처럼 일관성을 확보하기 위한 WEMIX.Fi의 노력이 있었기에, 이용자는 새로운 상품이 출시되거나 기능이 도입돼도 이를 수월하게 인지하고 이용할 수 있을 것입니다. 또 이용자의 좋은 경험이 지속된다면 WEMIX.Fi 서비스에 대한 신뢰로 이어질 것이라 기대합니다.
글 작성.
이다민(원칙 1) — Product Designer
남현아(원칙 2) — Product Designer
이원용(원칙 3) — Experience Designer
글 편집. 임현경 — UX Writer