유니스왑과 클레이스왑의 UI/UX 비교

DeFi 시장의 수많은 서비스들은 같은 기능을 제공하더라도 각자의 타겟과 방향성, 제작사의 전략에 따라 서비스를 제공하는 방식에 큰 차이가 있습니다. 오늘은 유니스왑과 클레이스왑, 두 가지 Swap 서비스의 UI/UX적인 차이를 리뷰하는 시간을 가져보도록 하겠습니다.

서비스 소개

유니스왑, 클레이스왑 두 서비스 모두 암호화폐 보유자들이 자신의 자산을 더 효율적으로 활용해 부가가치를 창출할 수 있도록 설계된 탈중앙 금융 플랫폼이라는 공통점을 가지고 있습니다.

유니스왑

유니스왑은 가상자산 투자자들이 가장 많이 사용하는 이더리움 기반 탈중앙화 거래소(DEX) 중 하나입니다.
유니스왑은 그중에서 유동성이 풍부하고 거래할 수 있는 토큰의 종류가 다양해 많은 투자자들이 사용하고 있습니다.
빠른 목적 달성에 최적화된 설계를 통해 DeFi에 대한 이해도가 있는 유저라면 편리하게 사용할 수 있는 UI/UX를 보여줍니다.

클레이스왑

클레이 스왑은 클레이튼 메인넷에서 돌아가는 DeFi 서비스로 예치금액 기준 국내 1위의 DEX입니다.
클레이튼 기반 DeFi 서비스 중에서 가장 많은 거래가 발생하고 있으며 유동성도 다른 클레이튼 DeFi들에 비해서 압도적으로 큽니다.
한국에서 만들어진 서비스인만큼 언어적인 제약이 없고, DeFi 초보자를 배려한 UI/UX 등의 장점이 있어서 DeFi에 입문하기 적절한 DEX 중 하나로 보여집니다.

전반적인 감상평

세부적으로 살펴보기에 앞서 최초에 플랫폼에 진입할 때 마주하는 메인 페이지의 UI 배치를 살펴보면, 유니스왑은 Swap 이라는 기능 구현을 효율적이고 빠르게 수행하는 것에 초점을 맞추었고 클레이스왑은 기능을 친절하게 설명하고 정보 전달을 명확하게 하는 것에 초점을 맞춘 것으로 보여집니다.

UI/UX 비교

1. 메인 페이지 구성

유니스왑은 Swap 기능에 충실한 모습, 부가적인 정보의 노출이 거의 없습니다.

반면 클레이스왑은 Swap을 진행하는 것에 있어서 필요한 부가적인 정보를 설명적으로 제공하여 초보자들이 UI를 인지하고 동작 시키는 것에 도움을 주고자 하는 것이 돋보입니다.

2. 지갑 연결

유니스왑의 지갑 선택 모달 내에는 특정 지갑에 대한 행동 유도 없이 연동할 수 있는 지갑들이 나열되어 있고, 하단에는 별도의 영역을 확보하여 서비스 약관과 프로토콜 면책 조항에 대한 내용이 명시되어 있습니다. 이용자가 빠르게 지갑을 고르고 연결하는 행위에 초점을 맞춘 것으로 보입니다.

서비스 약관과 프로토콜 면책 조항에 대한 내용을 명시하고 지갑을 연결하면 별도의 추가동작 없이 해당 내용을 동의/인정 하게끔 UX를 설계한 점이 돋보입니다.

반면에 클레이스왑은 별도의 모달을 띄우고 이 안에서 체크박스를 클릭해야 지갑이 연동되는 UX를 보여줍니다. 유니스왑과의 지향점이 다름을 보여주는 대표적인 예시로 보여집니다.

클레이튼 기반의 플랫폼답게 카카오 클립 지갑, 카이사스 지갑, 메타마스크 지갑 순으로 지갑 선택에 대한 의도적인 위계의 차이를 보여주는 것이 특징입니다. 디자인적으로 카카오 클립 지갑 사용을 권장하고 있습니다.

3. Swap

유니스왑은 지갑 연결 후에 From token은 연결한 네트워크의 대표 토큰이 자동으로 설정되어 있고 swap 할 토큰(To token)의 선택을 유도합니다.

교환하기 버튼을 클릭하면 지갑이 화면상에 표시되고 Confirm을 클릭하면 최종적으로 Swap이 이루어지게 됩니다.

토큰을 선택하면 swap을 진행할 두 토큰의 수량을 입력하도록 유도합니다.

수량을 입력하고 나면 예상 내역과 가스비, 슬리피지 등의 정보를 확인할 수 있습니다.

활성화된 Swap 버튼을 클릭하면 Confirm 창이 보여지고 해당 창 안에서 Swap에 대한 정보를 한번 더 보여줍니다.

Confirm 버튼을 클릭하면 지갑이 화면상에 표시되고 Confirm을 클릭하면 최종적으로 Swap이 이루어지게 됩니다.

이때, 이용자의 지갑의 자산 섹션에서 swap한 토큰이 보여질수 있도록 추가시켜주는 기능을 제공합니다(Add ‘토큰명’ 버튼). 클레이스왑에서는 다음과 같은 기능이 제공되지 않아 수동으로 지갑 내에서 연결을 해줘야 하는데 이는 굉장히 불편한 UX로 느껴졌습니다.

스왑이 완료되었음을 다음과 같이 화면 우측 상단에 토스트 팝업을 통해 확인할 수 있습니다.

Swap 기능에 충실한 모습, 부가적인 정보의 노출이 없습니다.
지갑 연결 → From token 선택 및 수량 입력 → To token 선택 및 수량 입력 → Swap 액션을 명확하게 유도하는 것에 초점을 맞춘 것이 돋보입니다.
Swap 예상 내역도 토큰 선택 및 수량 입력을 완료해야만 노출될 정도로 Swap을 진행하는 것에 집중하도록 합니다.
부가적인 정보가 적기 때문에 모바일 환경에서 스크롤을 최소화할 수 있습니다.
지갑 연결 여부, Token 선택 및 수량 입력 상태에 따라 Swap 버튼의 문구가 유기적으로 바뀌면서 Swap이 이루어질 수 있는 조건을 맞출 수 있도록 유도합니다.
이는 Defi 서비스에 대한 이해도가 있는 유저들에게는 매우 효율적인 UX가 될 수 있습니다.

클레이스왑은 지갑 연결 후에 From token은 클레이로 자동으로 설정되어 있고 swap 할 토큰(To token)의 선택을 주황색 컬러와 느낌표 모양의 아이콘을 통해서 유도합니다.

유니스왑과 유사한 구성, 여러 토큰 리스트가 있는데 여기서 유저가 보유한 자산만을 필터링해서 볼 수 있는 점이 돋보입니다.

Swap을 진행하는데 필요한 조건에 부합하지 않은 상태에서 Swap을 누르려고 하면 Swap 버튼 내에 얼럿메세지가 노출됩니다.

슬리피지 설정에서도 유니스왑과 UI/UX적 성격이 다름을 보여주는 예시가 보여집니다. 슬리피지에 대한 설명을 디테일하게 해주며, 슬리피지 설정 변경시 안내사항 모달을 노출시켜 초보자의 이해 및 위험 인지를 돕습니다.

Swap을 누르면 트랜젝션 요청 확인 모달이 보여집니다. 해당 창 안에서 Swap에 대한 정보를 한 번 더 보여줍니다.

스왑이 성공하게되면 다음과 같이 스낵바를 통해서 요청이 성공된 것을 확인할 수 있습니다.

지갑 연결 → From token 선택 및 수량 입력 → Select token 선택 및 수량 입력 → Swap 액션을 유도하는 다양한 장치들이 있는데 유니스왑과 비교하여 좀 더 설명적인 성격을 띠고 Step이 많습니다.
리스트 영역에서는 리스트의 항목명을 노출 시키거나, 버튼은 버튼명과 아이콘을 같이 보여주는 방식으로 정보 인지를 도와줍니다.
스왑이 완료된 후 메타마스크에 가서 스왑한 토큰이 안 보이면 직접 토큰의 심볼과 컨트랙트를 수동으로 입력해서 등록해야 하는데, 이 과정이 크리티컬하게 불편한 UX로 느껴졌습니다.
Swap 기능을 UI 내에서 설명적으로 풀려는 부분이 많이 보입니다. 페이지 내에 정보가 많아질 수 있는 단점이 있지만, 초보자들에게는 이해를 도울 수 있는 장치가 될 수 있습니다.

총평

유니스왑

유니콘이라는 컨셉을 컬러, 타이포그라피, 아이콘 등에 통일감 있게 녹여냈습니다. 컴포넌트들의 완성도 또한 높았습니다. 대부분의 UI가 완성도 높게 개발되어 있어서 원하는 과정을 찾고자 할 때 명확하게 유도해주고 있는 부분이 인상 깊었습니다.
유니스왑은 페이지 내에서 Goal(Swap 작동)까지 도달하는 허들이 적습니다. 빠르고 명확한 사용성이 장점이라 할 수 있습니다. 스스로 뚜렷한 목적이 있고 DeFi나 Swap에 대한 이해도가 있는 상태라면 이용하는 데 전혀 불편함이 없는 시스템입니다.
다만 대부분의 UI가 Swap 기능을 빠르게 수행하는 것에 초점이 맞추어져 있다 보니, 부가적인 정보를 제공해주는(예 : Tool tip) 컴포넌트들의 시인성이 다소 떨어져 보였습니다. 또한 제공하고 있는 정보들이 무엇인지 알려주는 장치들이 스킵 되어 있는 경우가 많아서 초보자가 정보를 파악할 때 혼란을 야기할 수 있는 부분들이 보였습니다.

클레이스왑

클레이튼 네트워크를 대표하고 있음을 디자인적으로 강하게 보여주고 있습니다. 전반적인 UI 구성에서 클레이튼의 색채가 강하게 느껴졌습니다.
클레이튼과 제작사의 제작 이념 중 하나인 “다수를 수용할 수 있는 대중적인 블록체인 플랫폼 구축”이 플랫폼 디자인 전반에 걸쳐서 두드러지게 보였습니다.
스텝이 다소 늘어나더라도 유저들이 충분한 정보 인지를 할 수 있도록 하는 UX를 보여줍니다.
많은 유저를 수용하기 위한 노력으로 페이지 전반에 걸쳐서 기능의 설명을 돕는 장치들이 많이 보이는 편입니다.

오늘 포스팅은 매주 수요일마다 진행했던 DeFi 프로토콜 스터디에서 제가 발표했던 내용입니다. 수많은 블록체인 프로젝트 가운데 눈여겨 볼만한 프로젝트들은 너무 많고 우리가 들일 수 있는 시간과 자원이 한정되어 있기에, 프로토콜 스터디를 통해 각자 연구한 프로젝트들을 공유하여 서로에게 도움을 주고받았어요. 약 2개월 동안의 시즌 1을 마치고, 다음 시즌을 준비 중인데요! 앞으로 계속해서 재밌는 프로토콜 이야기를 들고 나타나도록 하겠습니다. 🙌