brunch

라이킷 29 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이승필 Feb 18. 2023

탈중앙화 거래소 34가지 디자인 팁 모음

탈중앙화 거래소 설계 UX/UI 고려 사항

DeFi(Decentralized Finance)는 금융 산업에 혁명을 일으켜, 더 많은 사람들이 금융 서비스에 접근할 수 있게 하고, 중개인에 대한 의존도를 줄인다.

DeFi 플랫폼이 인기를 높이려면 기능적이고 시각적으로 매력적인 UI와 UX가 필요하다. 우수한 DeFi 설계는 플랫폼의 매력성을 강화하여 사용자 참여와 신뢰도를 높인다. 플랫폼을 향상하는 데 도움이 되는 DeFi 설계 팁에 대해서 알아보자.

Advanced Blockchain AG의 어드바이저 Jon Crabb이 UX 디자이너로서 작성한 "DeFi Design Tips" 시리즈 글을 소개한다.

그는 모든 프로토콜이 완벽하다고 생각하지 않는다고 한다. 그는 대신 흥미롭고, 유용하거나, 즐거운 것들을 수집하고 있다는 것을 밝혔다.

내용이 다소 길 수 있으니 이 글을 저장해 놓고 디자인할 때에 꺼내보면 좋을 것 같습니다.

Tip 1. 가스 요금을 지불하기 위해 지갑에 토큰을 남겨두는 것

Balancer

교환 후 다른 거래를 수행할 수 없는 경우, 사용자는 좌절감을 느낄 수 있다. 네이티브 토큰 교환 시, 밸런서는 교환 후 지갑에 남은 금액과 가스 요금이 충분한지 계산하여, 간단한 표시줄과 색상으로 메시지를 표시해 준다. 이를 통해 사용자에게 더 좋은 피드백을 제공할 수 있다.

Tip 2. 오류에 대한 강한 피드백

Balancer

사용자가 무언가 잘못하고 있음을 매우 분명하게 만들어야 한다.

입력 필드를 빨간색 스트로크로 강조 표시 밑 하단에 오류 메시지 알림.

CTA 위에 추가 오류 메시지는 알림. 헤드라인에 굵은 텍스트 및 경고 아이콘을 사용.

강력하고 명확한 피드백.

Tip 3. '잔고'를 지갑 아이콘으로 표시

Paraswap

Paraswap은 지갑 아이콘을 이용해 사용자의 밸런스를 보여준다. 이는 사용자가 'Balance'라는 단어를 볼 필요가 없음을 의미하며, 복잡한 구성 요소의 텍스트 양을 줄여준다.

사용자에게 남은 잔고를 더 직관적으로 보여줄 수 있다.

새로운 사용자는 이 표시방식에 조금 혼란을 겪을 수 있지만, 한번 이해하고 나면 더욱 편리하다.

Tip 4. 호버 툴팁으로 USD 표시

Paraswap

"Receive" 필드에는 USD에 해당하는 금액을 표시할 수 있는 공간이 있다. 하지만 "Pay" 필드에서는 Max 버튼과 숫자를 표시하기 위한 공간이 부족하다. Paraswap은 이 문제를 해결하기 위해, 마우스가 상자 위를 맴돌 때 툴팁에 USD에 해당하는 금액을 표시해 준다.

하지만 이것이 가장 이상적인 UX인지는 모르겠지만, "Receive" 필드 아래에 USD에 해당하는 것을 보여주는 것이 가장 좋을 것이다.

Tip 5. Connect Wallet(월렛 연결) 화면을 primary 컴포넌트에 배치

Matcha

Matcha의 지갑 연결 UX 방식은 새로운 접근법이다. Matcha는 기존의 다른 탈중앙화 거래소와 다르게, 거래를 선택한 후에 지갑을 연결하는 구조를 가지고 있다.

이러한 방식은 어떤 경우에서는 사용자에게 새로운 경험이 될 수도 있지만, 익숙하지 않은 것으로 느껴질 수도 있다. 일반적으로 사용자는 지갑을 먼저 연결한 뒤 거래를 진행하는 것이 표준이다.

Matcha에서의 이러한 UX 시도는 흥미롭게 생각된다. 사용자 플로우가 약간 다를 수 있지만, 사용자 친화적인 느낌을 제공할 수 있다.

Tip 6. Weekly yield 보여주기

Beets.fi

Beets.fi에서 USD 표시는 추상적인 정보를 사용자가 이해하기 쉽도록 변환하는 좋은 예다. 일반적으로, 이자 농장은 일일 이자와 수익을 백분율로 표시한다.

하지만 수확량은 언제든지 변할 수 있으며, 대부분의 유저들이 1년간 자산을 한 곳에 두지 않으므로, 실제로 유용하지 않을 수 있다. 또한 USD 금액이 없다면, 사용자에게 계산에 대한 번거로움을 가져올 수 있다.

그러나 많은 Degen들은 일주일에 한 번 (체인 및 거래 수수료에 따라) 보상을 청구할 것이다. 일주일마다 1달러 가치를 보여주는 것은 정말 유용한 정보이다.

Tip 7. 모달을 사용하여 오류 메시지를 표시. 스낵바 UI 혹은 메타마스크에 의존하지 않기.

Spookyswap

Spookeyswap에서는 DeFi의 오류 상황에 대한 피드백을 개선하고자, 모달을 제공하여 사용자가 쉽게 오류 내용을 이해할 수 있도록 한다. DeFi에서의 피드백 상태가 부족한 경우, 스낵바 UI를 제공하지만, 그 효율이 떨어질 수 있다.

Spookeyswap에서는 특정 에러 상황이 나타날 때, 알아듣기 어려운 DeFi에서의 오류사항을 설명을 통해 쉽게 이해할 수 있도록 한다.

Tip 8. 한 번에 여러 토큰 승인 허용

Voltage

DeFi에서 특정 토큰의 첫 거래 시 가스 비용을 지불하고 승인이 필요하다. 각각의 다른 페어를 처음 거래할 때 여러 번의 승인 절차를 거쳐야 하므로 불편할 수 있다.

Voltage Finance에서는 이 문제를 해결하기 위해 각 승인 버튼을 동시에 표시하여 유저가 빠르게 승인을 완료할 수 있도록 해준다. 또한, 각 토큰마다 승인 진행 상황을 우측의 스낵바 UI를 통해 쉽게 확인할 수 있도록 해준다.

Voltage

Tip 9. 브랜드 내 UI를 사용하여 관심을 유도

Osmosis

Osmosis는 사용자에게 "최적의 선택"을 제공하는 것을 강조하며, 관련 그러데이션 스트로크와 브랜드 아이콘을 사용하여 이를 달성한다. 간단하고 매력적이며 효과적이다.

대부분의 디자인 세계에서 기본적인 가정으로 받아들여지지만, DeFi에서 항상 표준은 아니다.

Tip 10. 여러 작업을 함께 그룹화하여 지속적인 진행 상황을 보여주기

Solidly

사람들은 진보, 숙달, 통제에 의해 동기 부여를 받는다. 작은 진척의 징후만이라도 보일 때 강력한 효과가 있을 수 있다.

Solidly 프로젝트는 허용과 조치 단계를 하나의 모달로 견고하게 결합하며, 관련 아이콘(체크서클, 타이머)을 사용해 사용자에게 진행 상황을 명확히 보여준다. 이는 미래 단계를 인지할 수 있도록 통제의 느낌을 준다.

Andre Cronje의 Solidly 프로젝트에서는 아쉬움이 있었을 수 있지만, 이 디자인 패턴은 계속 적용될 것이다.

Tip 11. 모든 체인 자금 표시

Beefy

Beefy는 여러 체인에서 관리하는 유저의 자산을 한 곳에서 통합하게 해서 보여주는 UX를 제공한다. 이전에는 메타마스크 또는 다른 지갑 앱을 사용해야 했지만, 최근에는 Beefy에서 한 곳에서 모든 자산을 확인할 수 있는 버전이 출시되어 편리해졌다.

보는 것과 같이 모든 체인의 LP를 쉽게 확인할 수 있다. LP 아이콘 옆에 있는 네트워크 아이콘은 각각의 체인을 나타낸다.

자산을 이체할 때만 체인을 전환하면 된다. 여러 체인에 걸쳐 자산을 가지고 있는 유저에게 Beefy는 효율적인 앱이다.

Tip 12. 여러 트랜잭션을 하나의 작업으로 결합

Beefy

일반적으로 DeFi 앱에서는 먼저 토큰 승인을 한 후 입금해야 한다. Beefy Finance는 DeFi 앱 중 최초로 토큰 승인과 입금을 단일 행위로 결합하여, 사용자의 인지 부하를 줄였다.

스낵바에서 "0/2 거래 확정"이라는 표시는 두 단계의 트랜잭션이 있음을 알려준다. 첫 번째 트랜잭션 후 두 번째 트랜잭션은 자동으로 시작되고, 메타마스크에 나타나며 사용자의 추가적인 클릭 없이 처리된다.

Tip 13. 자연스러운 언어로 서명 요청

DegenScore

대부분의 DeFi 앱에서는, 메타마스크에서 어떤 것을 승인하는지 모르는 경우가 많다. 승인을 위해 버튼을 클릭할 때, 지갑에서의 잔액이 스마트 계약에 의해 해킹당하지 않도록 기도해야 한다.

DegenScore에서는 서명 요청이 개성 있게 제공되며, 유저가 어떤 행동을 하고 있는지 명확하게 알려준다.

Tip 14. 애니메이션 배경 요소

VVS finance

DeFi 앱들은 보기와 느낌이 일반적인 앱과 유사해지고 있으며, 트랜지션, 배경 이동, 마이크로 애니메이션 등을 최대한 활용하고 있다. 이는 분명히 좋은 일이다. 더 나아가 이는 사람들의 감성을 자극한다.

Tip 15. 기본 버튼에서 편리한 네트워크를 변경

좌측 Zenlink / 우측 Uniswap

네트워크 연결을 잘못했을 경우 Zenlink와 Uniswap의 CTA와 비교해서 보자.

Zenlink

Zenlink에서 네트워크 연결 오류 시, 스왑 버튼에서 간단하게 변경 가능하다.

일반적으로 DeFi에서는, 메인 CTA에 명령어 텍스트를 표시하는 것이 일반적인 패턴이다. 이는 암호화폐를 하지 않는 일반 사용자들에게는 이상한 UX일 수 있으나, DeFi의 새로운 표준으로 자리 잡고 있는 것 같다.

유니스왑은 오류메시지를 제공하지만 UX가 유연하지 않다. 잘못된 네트워크에 연결되면 "지갑 연결" 버튼이 나타나지만, 이 버튼은 아무런 액션을 취하지 않아 이상하게 느껴진다. 반면, 젠링크에서는 "Wrong Network" 대신 "Switch to Moonriver"와 같이 긍정적인 액션을 제공한다.

Tip 16. 온보딩 스타일 팁 제공

일반적인 앱에서는 온보딩 과정에서 특정 영역을 강조하고 작동 방식을 보여주는 팝업 메시지를 사용한다. 그러나 DeFi 앱들은 이러한 부분에서 친절하지 않은 경우가 많다. 이러한 기능은 중앙 집중식 거래소와 유사하게 보일 수 있지만, 사용자 입장에서는 이를 환영할 수 있는 부분이다.

Zenlink

Tip 17. 거래할 때 빠른 보유자산 선택

Balancer

Balancer에서는 유저의 현재 지갑에 있는 토큰을 빠르게 선택할 수 있도록 나열해 준다. 또한 선택한 자산의 Trending pairs도 보여준다. 이는 DeFi 앱에서 표준 드롭다운을 스크롤하는 것에 대한 매우 편리한 대안이다.

Tip 18. 지갑 연결 가이드 텍스트

Aurigami

Aurigami에서는 사용자가 처음으로 지갑을 연결할 때, 지갑 연결을 확장시킨 모달을 제공한다. 이 모달은 지갑 목록만 표시하는 것이 아니라, 단계별로 구체적인 설명을 제공하여 사용자를 안내한다.

Tip 19. 특이한 브랜딩

Tokemak

Tokemak에서는 우측 상단에 있는 해골 아이콘을 클릭하면 라디오 스테이션이 나온다. 사용자는 3개의 라디오 방송국 중 하나를 선택할 수 있으며, 각 방송국은 빈티지 애니메이션이 나온다. 이러한 독특한 브랜딩은 Degen들의 호응을 얻는 데 도움이 될 것이다.

Tip 20. 작은 재미 제공

DeFiLlama

DeFiLlama에서 TVL Rankings 상단에 위치한 라마 일러스트레이션을 클릭하면, 크롬 공룡 게임과 유사한 게임이 나온다. 소소하지만 사용자에게 재미를 제공할 수 있다.

Tip 21. 타깃 고객층을 위한 Meme 제공

DegenScore

DegenScore는 크립토 은어로 가득한 스크롤링 티커테이프와 클래식한 크립토 밈에 대한 링크를 제공한다. 이 기능은 눈에 잘 띄지 않는 곳에 숨겨져 있지만, 사용자들이 웃을 수 있도록 한다. 크립토는 작지만 강력한 커뮤니티를 가진 특별한 분야이며, 이 커뮤니티에서는 모르는 사람들과 함께 농담을 주고받는 것을 좋아한다.

또한, 위의 사진에서 우측 하단에 있는 행성 그림을 클릭하면 탈 중앙화 영화 배급 플랫폼인 시부야로 이어지며, 단편 영화 예고편을 감상할 수 있다. 이외에도, DegenScore에는 더 많은 숨겨진 이스터 에그들이 존재한다.

Tip 22. 연결 시 네트워크 설명 표시

Union Finance

Union에서는 Badges/Chips UI를 효과적으로 활용하여 각 네트워크의 핵심 사항을 간략하게 보여준다. EVM의 수가 계속 증가함에 따라, 사용자들은 점점 더 많은 네트워크를 다루어야 하기 때문에 연결 화면이 길어지고 복잡해질 수 있다.

만약 사용자가 멀티체인 앱에 접속하면, 옵티미즘, 팬텀, 보바, 크로노스 등 다양한 네트워크 간의 차이점과 장단점을 알 수 있으면 더욱 좋을 것이다. Union은 세 개의 지원 네트워크에 대한 간단한 설명과 Badge UI를 활용하여 핵심 정보를 제공한다.

DeFi에서는 멀티 체인과 크로스체인 레이어가 이용되고 있으며, 이미 일부 앱이 메인넷과 L2에서 동시에 작동하고 있다. 예를 들어, Tokemak은 메인넷에서 작동하지만 투표는 폴리곤에서 수행된다. 이러한 로직을 따르는 더 많은 앱이 등장한다면, 이와 같은 Badge UI를 활용한 화면은 새로운 사용자들에게 유용할 것이다.

Tip 23. Notification 알람 설정

Transfer.To

크로스 체인 트랜잭션은 처리에 시간이 더 걸릴 수 있어, 사용자들은 불안감을 느낄 수 있다. 이러한 문제를 해결하기 위해 LiFi Transfer To는 데스크톱 알림 기능을 제공하여, 트랜잭션이 완료되면 사용자에게 즉시 알려준다. 사용자는 사이트를 닫고 다른 작업을 하더라도 알림을 받을 수 있다.

Gmail과 같은 웹 2 플랫폼을 이용하지 않고, 웹 3에서 사용자에게 알림을 주는 것은 UX 문제 중 하나이다. 이를 해결하기 위해 Ethereum Push Notification Service(EPNS) 프로토콜 같은 것이 개발 중에 있다.

Tip 24. 수수료를 Interest Earned 비율로 알려주기

Rhino.fi

DeFi 앱에서 요금을 부과할 때, 유저들은 직접 계산하여 비율이 무엇을 의미하는지 알아야 한다. 이에 대한 친절한 설명이 부족한 경우가 많다.

Rhino는 Pool 제거 시 "자금을 제거하기 위해 0.05%의 수수료가 부과될 것입니다. 이 수수료는 이자 6일분에 해당합니다"와 같이 디테일한 설명을 제공하여 유저에게 요금 체계에 대한 정직하고 명확한 정보를 제공한다.

Tip 25. 스왑 경로의 가격 안정성 표기

Velodrome

별도의 섹션에서 USDC 등가물을 보여준다.

DEX에서 토큰을 스왑 할 때 트랜잭션에는 일반적으로 몇 가지 서로 다른 스왑이 포함된다. 많은 DEX가 이 경로를 보여주며, 스테이블 코인과 같은 것을 교환할 때 유용할 수 있다.

또한, 토큰 가격이 급격하게 변동할 경우, 출력 토큰이 예상보다 적게 나올 수 있다. Velodrome은 경로뿐만 아니라 경로의 변동성을 보여줌으로써 가능한 가격 변동에 대한 더 많은 정보를 제공한다. 이를 통해 Velodrome은 더 정확한 스왑 결과를 제공하며, 사용자들은 더욱 신뢰성 있는 거래를 할 수 있다.

Tip 26. 간략한 walkthrough

Stargate에서 우측 상단의 토글을 통해 Walkthrough 모드에 액세스 할 수 있다.

Stargate

Stargate 워크스루 모드는 프로세스의 모든 단계를 보여주는 스테퍼, 녹색 텍스트를 사용하여 주요 작업을 강조하며, 진행 애니메이션과 매우 명확한 피드백을 제공한다. 워크스루 모드를 사용하면 초보자도 쉽게 브릿징을 할 수 있다.

Tip 27. 친절한 지갑연결

Zapper

Dapp에서 가장 먼저 해야 할 일은 지갑을 연결하는 것이다. Zapper의 지갑 연결 페이지를 보면 혼란스러울 수 있다. 특히 뉴비 유저들은 더욱 그렇다. 1인치는 네트워크 선택을 먼저 해야 하는데 이로 인해 더욱 혼란스러워질 수 있다.

1inch

현재 많은 웹 3 앱들은 '개발자 중심 사용성' 단계에 머무르고 있다. 이는 사용자들에게 정보 과부하를 유발할 수 있다. 전문가들의 요구에 부합하는 앱이지만, 업계가 발전함에 따라 이러한 유연성은 압도적인 맞춤형 경험으로 대체되어야 한다. 따라서 보다 직관적이고 사용자 중심의 경험을 제공하는 방향으로 발전해야 한다.

이를 해결할 수 있는 정확한 지침은 아직 없다. 그러나 참고하기 좋은 레퍼런스들은 있다.

Opensea

Opensea에서는 지갑을 연결할 때 칩/태그를 사용하여 중요한 정보를 강조하고, 더 보기 버튼 뒤에는 덜 인기 있는 옵션을 숨긴다. 멀티체인 앱인 경우, 지갑 목록이 길어질 수 있으므로 Opensea는 솔라나 옵션을 강조하기 위해 칩을 적절하게 활용하고, 명확한 메타마스크 선택에 관심을 끈다.

Rarible

Rarible에서는 탭을 사용하여 간편하게 여러 네트워크를 선택할 수 있다. 이는 밀러의 법칙에 따라 적은 수의 옵션을 제공하며, 상단에는 '인기' 태그가 부착되어 있어서 눈에 띄게 표시된다. 나머지 옵션은 'Show more' 버튼 뒤에 숨겨져 있으며, 다른 네트워크는 탭 뒤에 유지된다.

Tip 28. 주요 작업을 단계별로 수행

Notional Finance

노션 파이낸스는 DeFi 앱에서 벗어나 완전히 다른 UX를 제공하여 사용자를 친절하게 가이드한다. 이전에 언급한 Stargate에서의 Walkthrough 모드와는 조금 다르지만, 이곳에서는 DeFi에서 더 혼란스러운 대출과 대출을 단계별로 나누어 안내한다.

Tip 29. 멀티체인 앱에서 네트워크에 대한 설명

Idle.finance

멀티체인 앱은 모든 사용자가 블록체인 전문가라는 것을 당연하게 여긴다. 그럼에도 불구하고, 각 네트워크가 실제로 무엇인지, 사용하는 이유, 브리지 및 RPC에 대한 링크에 대한 기본 정보가 있으면 좋을 것이다.

Tip 30. 모달과 그 배치에 대해 다시 생각하기

Sushiswap

모달은 일반적으로 화면의 나머지 부분을 비활성화하거나 흐리게 처리하여 초점이 맞춰진 창에만 집중할 수 있도록 한다.

Sushi의 새로운 UI에는 이전에는 볼 수 없었던 패턴이 있다. 지갑 연결로 이동하면 클릭한 위치 바로 아래에 미묘한 팝업이 표시된다. 거의 드롭다운과 비슷하다. 눈에 거슬리지 않고 마우스를 올려놓고 원하는 옵션을 선택하기가 매우 쉽다.

Tip 31. 동적 버튼 메시지 사용

Beefy

최대 버튼을 누르면 버튼이 '입금'에서 '모두 입금'으로 바뀐다. 사소하지만 유저에게 한번 더 확인할 수 있는 기회를 준다.

Tip 32. 시선을 사로잡는 호버 상태

Akropolis

올해는 특히 흥미로운 방식으로 사용된 선명한 그러데이션이 미니 웹 3 UI 트렌드가 되었다. Karura는 그러데이션 스트로크를 사용하여 흥미로운 효과를 냈고, 스시와 오토팜은 버튼에 그러데이션을 사용하여 매우 명확한 CTA를 만들었다. 아크로폴리스는 한 걸음 더 나아가 호버 상태에 이쁜 애니메이션 그러데이션을 적용했다.