탈중앙화 거래소(DEX) 디자인 모범 사례

2018년 Uniswap 출시 이후 수십 개의 다른 체인에 걸쳐 수백 개의 탈중앙화 거래소가 출시되었습니다. 이들 중 다수는 새로운 요소를 도입하거나 고유한 특징을 추가했지만 인터페이스는 대체로 동일하게 유지되었습니다.

그 이유 중 하나는 제이콥의 법칙 (opens in a new tab)입니다.

사용자는 대부분의 시간을 다른 사이트에서 보냅니다. 이는 사용자가 자신의 사이트가 이미 알고 있는 다른 모든 사이트와 동일한 방식으로 작동하기를 선호한다는 것을 의미합니다.

Uniswap, Pancakeswap, Sushiswap과 같은 초기 혁신가들 덕분에 디파이(DeFi) 사용자들은 DEX가 어떤 모습인지에 대한 집단적인 아이디어를 갖게 되었습니다. 이러한 이유로 '모범 사례'와 같은 것이 이제 막 나타나고 있습니다. 점점 더 많은 디자인 결정이 사이트 전반에 걸쳐 표준화되고 있음을 알 수 있습니다. DEX의 진화를 실시간 테스트의 거대한 예로 볼 수 있습니다. 효과가 있었던 것은 남고, 그렇지 않은 것은 버려졌습니다. 여전히 개성을 발휘할 여지는 있지만 DEX가 따라야 할 특정 표준이 있습니다.

이 글은 다음에 대한 요약입니다.

포함해야 할 사항
최대한 사용하기 쉽게 만드는 방법
디자인을 사용자 정의하는 주요 방법

모든 예시 와이어프레임은 실제 프로젝트를 기반으로 하지만 이 글을 위해 특별히 제작되었습니다.

Figma 키트도 하단에 포함되어 있습니다. 자유롭게 사용하여 자신만의 와이어프레임 작업 속도를 높여보세요!

DEX의 기본 구조

UI는 일반적으로 세 가지 요소를 포함합니다.

기본 양식
버튼
세부 정보 패널

변형

이는 이 글에서 공통적인 주제이지만, 이러한 요소들을 구성하는 방법에는 여러 가지가 있습니다. '세부 정보 패널'은 다음과 같을 수 있습니다.

버튼 위
버튼 아래
아코디언 패널에 숨김
그리고/또는 '미리보기' 모달에 표시

참고 '미리보기' 모달은 선택 사항이지만, 메인 UI에 아주 적은 세부 정보만 표시하는 경우 필수적입니다.

메인 양식의 구조

이 상자는 실제로 교환하려는 토큰을 선택하는 곳입니다. 이 컴포넌트는 한 줄에 입력 필드와 작은 버튼으로 구성됩니다.

DEX는 일반적으로 위 한 줄과 아래 한 줄에 추가 세부 정보를 표시하지만, 이는 다르게 구성할 수 있습니다.

변형

여기에는 두 가지 UI 변형이 표시됩니다. 하나는 테두리가 전혀 없어 매우 개방적인 디자인을 만들고, 다른 하나는 입력 행에 테두리가 있어 해당 요소에 초점을 맞춥니다.

이 기본 구조를 통해 네 가지 핵심 정보를 디자인에 표시할 수 있습니다. 각 모서리에 하나씩입니다. 상단/하단 행이 하나만 있는 경우, 두 개의 지점만 있습니다.

디파이(DeFi)의 진화 과정에서 여기에 많은 다양한 것들이 포함되었습니다.

포함할 핵심 정보

지갑 내 잔액
최대 버튼
법정 화폐 등가액
'받는' 금액에 대한 가격 영향

디파이(DeFi) 초기에는 법정 화폐 등가액이 종종 누락되었습니다. 어떤 종류의 웹3 프로젝트를 구축하든 법정 화폐 등가액을 표시하는 것이 필수적입니다. 사용자는 여전히 현지 통화로 생각하므로 실제 세계의 정신 모델과 일치시키기 위해 이를 포함해야 합니다.

두 번째 필드(교환할 토큰을 선택하는 필드)에서는 입력 금액과 예상 출력 금액의 차이를 계산하여 법정 화폐 금액 옆에 가격 영향을 포함할 수도 있습니다. 이것은 포함하기에 매우 유용한 세부 정보입니다.

백분율 버튼(예: 25%, 50%, 75%)은 유용한 기능일 수 있지만 더 많은 공간을 차지하고 더 많은 행동 유도를 추가하며 더 많은 정신적 부담을 줍니다. 백분율 슬라이더도 마찬가지입니다. 이러한 UI 결정 중 일부는 브랜드와 사용자 유형에 따라 달라집니다.

추가 세부 정보는 메인 양식 아래에 표시할 수 있습니다. 이러한 유형의 정보는 대부분 전문 사용자를 위한 것이므로 다음 중 하나를 수행하는 것이 좋습니다.

최대한 최소한으로 유지하거나,
아코디언 패널에 숨기기

포함할 추가 정보

토큰 가격
슬리피지
최소 수령액
예상 출력
가격 영향
가스 비용 추정치
기타 수수료
주문 라우팅

논란의 여지가 있지만, 이러한 세부 정보 중 일부는 선택 사항일 수 있습니다.

주문 라우팅은 흥미롭지만 대부분의 사용자에게는 큰 차이가 없습니다.

일부 다른 세부 정보는 단순히 같은 내용을 다른 방식으로 다시 설명하는 것입니다. 예를 들어 '최소 수령액'과 '슬리피지'는 동전의 양면과 같습니다. 슬리피지를 1%로 설정한 경우, 수령할 수 있는 최소 금액 = 예상 출력 - 1%입니다. 일부 UI는 예상 금액, 최소 금액 및 슬리피지를 표시합니다... 유용하지만 과할 수 있습니다.

어차피 대부분의 사용자는 기본 슬리피지를 그대로 둡니다.

'가격 영향'은 '받는' 필드의 법정 화폐 등가액 옆 괄호 안에 표시되는 경우가 많습니다. 이것은 추가하기에 훌륭한 UX 세부 정보이지만, 여기에 표시된다면 아래에 다시 표시할 필요가 있을까요? 그리고 미리보기 화면에 또다시?

많은 사용자(특히 소액을 교환하는 사용자)는 이러한 세부 정보에 신경 쓰지 않을 것입니다. 그들은 단순히 숫자를 입력하고 교환을 누를 것입니다.

정확히 어떤 세부 정보를 표시할지는 잠재고객과 앱이 어떤 느낌을 주기를 원하는지에 따라 달라집니다.

세부 정보 패널에 슬리피지 허용치를 포함하는 경우, 여기에서 직접 편집할 수 있도록 해야 합니다. 이것은 '단축키'의 좋은 예입니다. 앱의 일반적인 사용성에 영향을 주지 않으면서 숙련된 사용자의 흐름을 가속화할 수 있는 깔끔한 UX 트릭입니다.

한 화면의 특정 정보 하나뿐만 아니라 전체 흐름에 대해 신중하게 생각하는 것이 좋습니다. 메인 양식에 숫자 입력 → 세부 정보 스캔 → 미리보기 화면으로 클릭(미리보기 화면이 있는 경우). 세부 정보 패널을 항상 표시해야 할까요, 아니면 사용자가 확장하려면 클릭해야 할까요? 미리보기 화면을 추가하여 마찰을 만들어야 할까요? 이는 사용자가 속도를 늦추고 거래를 고려하도록 강제하는데, 이는 유용할 수 있습니다. 하지만 그들은 모든 동일한 정보를 다시 보고 싶어할까요? 이 시점에서 그들에게 가장 유용한 것은 무엇일까요?

디자인 옵션

앞서 언급했듯이, 이 중 많은 부분이 개인 스타일에 달려 있습니다 사용자는 누구입니까? 당신의 브랜드는 무엇입니까? 모든 세부 정보를 보여주는 '전문가용' 인터페이스를 원하십니까, 아니면 미니멀리스트를 원하십니까? 가능한 모든 정보를 원하는 전문 사용자를 목표로 하더라도 Alan Cooper의 현명한 말을 기억해야 합니다.

인터페이스가 아무리 아름답고 멋지더라도, 적을수록 좋습니다.

구조

토큰을 왼쪽에, 또는 토큰을 오른쪽에
2행 또는 3행
버튼 위 또는 아래의 세부 정보
세부 정보 확장, 최소화 또는 표시 안 함

구성 요소 스타일

비어 있음
윤곽선
채워짐

순수한 UX 관점에서 볼 때 UI 스타일은 생각보다 덜 중요합니다. 시각적 트렌드는 주기를 그리며 나타났다 사라지며, 선호도 중 상당 부분은 주관적입니다.

이에 대한 감을 잡고 다양한 구성을 생각해 보는 가장 쉬운 방법은 몇 가지 예를 살펴본 다음 직접 실험해 보는 것입니다.

포함된 Figma 키트에는 비어 있거나, 윤곽선이 있거나, 채워진 구성 요소가 포함되어 있습니다.

아래 예시를 보고 모든 것을 종합할 수 있는 다양한 방법을 확인하세요.

하지만 토큰은 어느 쪽에 있어야 할까요?

결론은 사용성에 큰 차이를 만들지 않을 것이라는 점입니다. 그러나 한쪽으로 기울게 할 수 있는 몇 가지 명심해야 할 사항이 있습니다.

시간이 지남에 따라 유행이 변하는 것을 보는 것은 약간 흥미로웠습니다. Uniswap은 처음에 토큰을 왼쪽에 두었지만, 이후 오른쪽으로 옮겼습니다. Sushiswap도 디자인 업그레이드 중에 이 변경을 했습니다. 전부는 아니지만 대부분의 프로토콜이 그 뒤를 따랐습니다.

금융 관례상 전통적으로 통화 기호를 숫자 앞에 둡니다(예: $50, €50, £50). 하지만 우리는 50달러, 50유로, 50파운드라고 말합니다.

일반 사용자, 특히 왼쪽에서 오른쪽으로, 위에서 아래로 읽는 사람에게는 오른쪽에 있는 토큰이 아마도 더 자연스럽게 느껴질 것입니다.

토큰을 왼쪽에, 모든 숫자를 오른쪽에 배치하면 보기 좋게 대칭을 이루어 장점이지만, 이 레이아웃에는 또 다른 단점이 있습니다.

근접성의 법칙은 서로 가까이 있는 항목들이 관련 있는 것으로 인식된다는 것을 명시합니다. 따라서 관련 항목을 서로 옆에 배치하고자 합니다. 토큰 잔액은 토큰 자체와 직접 관련이 있으며, 새 토큰이 선택될 때마다 변경됩니다. 따라서 토큰 잔액이 토큰 선택 버튼 옆에 있는 것이 조금 더 합리적입니다. 토큰 아래로 옮길 수도 있지만, 그러면 레이아웃의 대칭이 깨집니다.

궁극적으로 두 옵션 모두 장단점이 있지만, 추세가 오른쪽 토큰으로 기우는 것처럼 보이는 것은 흥미롭습니다.

버튼 동작

승인을 위한 별도의 버튼을 만들지 마세요. 또한 승인을 위한 별도의 클릭을 만들지 마세요. 사용자는 교환을 원하므로 버튼에 '교환'이라고 표시하고 첫 번째 단계로 승인을 시작하세요. 모달은 스텝퍼 또는 간단한 '거래 1/2 - 승인 중' 알림으로 진행 상황을 표시할 수 있습니다.

상황별 도움말로서의 버튼

버튼은 경고로서 이중 역할을 할 수 있습니다!

이것은 사실 웹3 밖에서는 상당히 이례적인 디자인 패턴이지만, 그 안에서는 표준이 되었습니다. 이는 공간을 절약하고 주의를 집중시키는 좋은 혁신입니다.

오류로 인해 주된 작업인 교환을 사용할 수 없는 경우, 버튼으로 그 이유를 설명할 수 있습니다. 예:

네트워크 전환
지갑 연결
다양한 오류

버튼은 수행해야 할 작업에 매핑될 수도 있습니다. 예를 들어, 사용자가 잘못된 네트워크에 있어 교환할 수 없는 경우, 버튼에 'Ethereum으로 전환'이라고 표시되어야 하며, 사용자가 버튼을 클릭하면 네트워크를 Ethereum으로 전환해야 합니다. 이렇게 하면 사용자 흐름이 크게 빨라집니다.

이 Figma 파일로 직접 만들어 보세요

여러 프로토콜의 노력 덕분에 DEX 디자인이 많이 개선되었습니다. 우리는 사용자가 어떤 정보를 필요로 하는지, 어떻게 보여줘야 하는지, 그리고 어떻게 흐름을 최대한 원활하게 만들 수 있는지 알고 있습니다. 이 글이 UX 원칙에 대한 확실한 개요를 제공하기를 바랍니다.

실험해보고 싶으시다면 Figma 와이어프레임 키트를 자유롭게 사용해 주세요. 최대한 단순하게 유지되지만 다양한 방식으로 기본 구조를 구축할 수 있는 충분한 유연성을 갖추고 있습니다.

Figma 와이어프레임 키트 (opens in a new tab)

디파이(DeFi)는 계속해서 진화할 것이며, 항상 개선의 여지가 있습니다.

행운을 빕니다!