DeFi 시장의 수많은 서비스들은 같은 기능을 제공하더라도 각자의 타겟과 방향성, 제작사의 전략에 따라 서비스를 제공하는 방식에 큰 차이가 있습니다. 오늘은 유니스왑과 클레이스왑, 두 가지 Swap 서비스의 UI/UX적인 차이를 리뷰하는 시간을 가져보도록 하겠습니다.
서비스 소개
유니스왑, 클레이스왑 두 서비스 모두 암호화폐 보유자들이 자신의 자산을 더 효율적으로 활용해 부가가치를 창출할 수 있도록 설계된 탈중앙 금융 플랫폼이라는 공통점을 가지고 있습니다.
유니스왑
- 유니스왑은 가상자산 투자자들이 가장 많이 사용하는 이더리움 기반 탈중앙화 거래소(DEX) 중 하나입니다.
- 유니스왑은 그중에서 유동성이 풍부하고 거래할 수 있는 토큰의 종류가 다양해 많은 투자자들이 사용하고 있습니다.
- 빠른 목적 달성에 최적화된 설계를 통해 DeFi에 대한 이해도가 있는 유저라면 편리하게 사용할 수 있는 UI/UX를 보여줍니다.
클레이스왑
- 클레이 스왑은 클레이튼 메인넷에서 돌아가는 DeFi 서비스로 예치금액 기준 국내 1위의 DEX입니다.
- 클레이튼 기반 DeFi 서비스 중에서 가장 많은 거래가 발생하고 있으며 유동성도 다른 클레이튼 DeFi들에 비해서 압도적으로 큽니다.
- 한국에서 만들어진 서비스인만큼 언어적인 제약이 없고, DeFi 초보자를 배려한 UI/UX 등의 장점이 있어서 DeFi에 입문하기 적절한 DEX 중 하나로 보여집니다.
전반적인 감상평


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


2. 지갑 연결




3. Swap









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









- 지갑 연결 → From token 선택 및 수량 입력 → Select token 선택 및 수량 입력 → Swap 액션을 유도하는 다양한 장치들이 있는데 유니스왑과 비교하여 좀 더 설명적인 성격을 띠고 Step이 많습니다.
- 리스트 영역에서는 리스트의 항목명을 노출 시키거나, 버튼은 버튼명과 아이콘을 같이 보여주는 방식으로 정보 인지를 도와줍니다.
- 스왑이 완료된 후 메타마스크에 가서 스왑한 토큰이 안 보이면 직접 토큰의 심볼과 컨트랙트를 수동으로 입력해서 등록해야 하는데, 이 과정이 크리티컬하게 불편한 UX로 느껴졌습니다.
- Swap 기능을 UI 내에서 설명적으로 풀려는 부분이 많이 보입니다. 페이지 내에 정보가 많아질 수 있는 단점이 있지만, 초보자들에게는 이해를 도울 수 있는 장치가 될 수 있습니다.
총평
유니스왑
- 유니콘이라는 컨셉을 컬러, 타이포그라피, 아이콘 등에 통일감 있게 녹여냈습니다. 컴포넌트들의 완성도 또한 높았습니다. 대부분의 UI가 완성도 높게 개발되어 있어서 원하는 과정을 찾고자 할 때 명확하게 유도해주고 있는 부분이 인상 깊었습니다.
- 유니스왑은 페이지 내에서 Goal(Swap 작동)까지 도달하는 허들이 적습니다. 빠르고 명확한 사용성이 장점이라 할 수 있습니다. 스스로 뚜렷한 목적이 있고 DeFi나 Swap에 대한 이해도가 있는 상태라면 이용하는 데 전혀 불편함이 없는 시스템입니다.
- 다만 대부분의 UI가 Swap 기능을 빠르게 수행하는 것에 초점이 맞추어져 있다 보니, 부가적인 정보를 제공해주는(예 : Tool tip) 컴포넌트들의 시인성이 다소 떨어져 보였습니다. 또한 제공하고 있는 정보들이 무엇인지 알려주는 장치들이 스킵 되어 있는 경우가 많아서 초보자가 정보를 파악할 때 혼란을 야기할 수 있는 부분들이 보였습니다.
클레이스왑
- 클레이튼 네트워크를 대표하고 있음을 디자인적으로 강하게 보여주고 있습니다. 전반적인 UI 구성에서 클레이튼의 색채가 강하게 느껴졌습니다.
- 클레이튼과 제작사의 제작 이념 중 하나인 “다수를 수용할 수 있는 대중적인 블록체인 플랫폼 구축”이 플랫폼 디자인 전반에 걸쳐서 두드러지게 보였습니다.
- 스텝이 다소 늘어나더라도 유저들이 충분한 정보 인지를 할 수 있도록 하는 UX를 보여줍니다.
- 많은 유저를 수용하기 위한 노력으로 페이지 전반에 걸쳐서 기능의 설명을 돕는 장치들이 많이 보이는 편입니다.
오늘 포스팅은 매주 수요일마다 진행했던 DeFi 프로토콜 스터디에서 제가 발표했던 내용입니다. 수많은 블록체인 프로젝트 가운데 눈여겨 볼만한 프로젝트들은 너무 많고 우리가 들일 수 있는 시간과 자원이 한정되어 있기에, 프로토콜 스터디를 통해 각자 연구한 프로젝트들을 공유하여 서로에게 도움을 주고받았어요. 약 2개월 동안의 시즌 1을 마치고, 다음 시즌을 준비 중인데요! 앞으로 계속해서 재밌는 프로토콜 이야기를 들고 나타나도록 하겠습니다. 🙌
