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

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

그 이유 중 하나는 제이콥의 법칙(Jakob’s Law) (opens in a new tab) 때문입니다.

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

유니스왑, 팬케이크스왑(Pancakeswap), Sushiswap과 같은 초기 혁신가들 덕분에 탈중앙화 금융(DeFi) 사용자들은 DEX가 어떤 모습인지에 대한 공통된 인식을 갖게 되었습니다. 이러한 이유로 이제 '모범 사례'와 같은 것들이 등장하고 있습니다. 여러 사이트에서 디자인 결정이 점점 더 표준화되는 것을 볼 수 있습니다. DEX의 진화는 실시간 테스트의 거대한 사례로 볼 수 있습니다. 효과가 있는 것은 남고, 그렇지 않은 것은 버려졌습니다. 여전히 개성을 살릴 여지는 있지만, DEX가 준수해야 할 특정 표준이 존재합니다.

이 글은 다음 내용을 요약한 것입니다.

• 포함해야 할 내용
• 사용성을 최대한 높이는 방법
• 디자인을 커스터마이징하는 주요 방법

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

하단에 Figma 키트도 포함되어 있으니, 자유롭게 사용하여 여러분의 와이어프레임 작업 속도를 높여보세요!

DEX의 기본 구조

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

1. 메인 폼
2. 버튼
3. 세부 정보 패널

변형

이 글에서 자주 다루게 될 주제이지만, 이러한 요소들을 구성하는 방법은 다양합니다. '세부 정보 패널'은 다음과 같이 배치될 수 있습니다.

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

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

메인 폼의 구조

이곳은 스왑할 토큰을 실제로 선택하는 상자입니다. 이 컴포넌트는 입력 필드와 작은 버튼이 한 줄로 구성되어 있습니다.

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

변형

여기에는 두 가지 UI 변형이 나와 있습니다. 하나는 테두리가 없어 매우 개방적인 디자인을 연출하고, 다른 하나는 입력 행에 테두리가 있어 해당 요소에 시선을 집중시킵니다.

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

탈중앙화 금융(DeFi)이 발전하는 동안 이곳에 다양한 정보들이 포함되어 왔습니다.

포함해야 할 핵심 정보

• 지갑 잔액
• 최대(Max) 버튼
• 법정화폐 환산 가치
• '수령' 금액에 대한 가격 영향

초기 탈중앙화 금융(DeFi)에서는 법정화폐 환산 가치가 누락되는 경우가 많았습니다. 어떤 종류의 Web3 프로젝트를 구축하든 법정화폐 환산 가치를 표시하는 것은 필수적입니다. 사용자는 여전히 현지 통화 기준으로 생각하므로, 현실 세계의 멘탈 모델과 일치시키기 위해 이를 포함해야 합니다.

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

비율 버튼(예: 25%, 50%, 75%)은 유용한 기능일 수 있지만, 더 많은 공간을 차지하고 클릭 유도 문구(CTA)를 늘리며 인지적 부담을 가중시킵니다. 비율 슬라이더도 마찬가지입니다. 이러한 UI 결정 중 일부는 브랜드와 사용자 유형에 따라 달라집니다.

메인 폼 아래에 추가 세부 정보를 표시할 수 있습니다. 이러한 유형의 정보는 주로 전문가 사용자를 위한 것이므로 다음과 같이 처리하는 것이 합리적입니다.

• 최대한 간소화하거나,
• 아코디언 패널에 숨김

포함할 추가 정보

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

이러한 세부 정보 중 일부는 선택 사항일 수 있습니다.

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

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

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

'가격 영향'은 종종 '받는(to)' 필드의 법정화폐 환산 가치 옆에 괄호로 표시됩니다. 이는 추가하기 좋은 훌륭한 UX 디테일이지만, 여기에 표시된다면 아래에 다시 표시할 필요가 있을까요? 그리고 미리보기 화면에서 또다시 표시해야 할까요?

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

정확히 어떤 세부 정보를 표시할지는 대상 사용자와 앱에서 주고자 하는 느낌에 따라 달라집니다.

세부 정보 패널에 슬리피지 허용 오차를 포함하는 경우, 여기에서 직접 편집할 수 있도록 해야 합니다. 이는 앱의 전반적인 사용성에 영향을 주지 않으면서 숙련된 사용자의 작업 흐름을 가속화할 수 있는 깔끔한 UX 기법인 '액셀러레이터(accelerator)'의 좋은 예입니다.

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

디자인 옵션

앞서 언급했듯이, 이 중 많은 부분은 개인적인 스타일에 달려 있습니다. 사용자는 누구인가요? 브랜드는 무엇인가요? 모든 세부 정보를 보여주는 '전문가용' 인터페이스를 원하시나요, 아니면 미니멀리즘을 추구하시나요? 가능한 모든 정보를 원하는 전문가 사용자를 대상으로 하더라도, 앨런 쿠퍼(Alan Cooper)의 명언을 기억해야 합니다.

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

구조

• 토큰을 왼쪽에 배치할지, 오른쪽에 배치할지
• 2줄 또는 3줄
• 버튼 위 또는 아래에 세부 정보 배치
• 세부 정보를 펼치거나, 최소화하거나, 표시하지 않음

컴포넌트 스타일

• 비어 있음(empty)
• 윤곽선 있음(outlined)
• 채워짐(filled)

순수한 UX 관점에서 볼 때, UI 스타일은 생각보다 중요하지 않습니다. 시각적 트렌드는 주기를 두고 돌고 돌며, 많은 선호도는 주관적입니다.

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

포함된 Figma 키트에는 비어 있는(empty), 윤곽선이 있는(outlined), 채워진(filled) 컴포넌트가 포함되어 있습니다.

아래 예시를 통해 이 모든 것을 조합하는 다양한 방법을 살펴보세요.

그렇다면 토큰은 어느 쪽에 배치해야 할까요?

결론부터 말하자면, 사용성에 큰 차이를 만들지는 않을 것입니다. 하지만 어느 한쪽으로 마음이 기울게 할 만한 몇 가지 고려 사항이 있습니다.

시간이 지남에 따라 유행이 변하는 것을 보는 것은 꽤 흥미롭습니다. 유니스왑은 처음에 토큰을 왼쪽에 배치했지만, 이후 오른쪽으로 옮겼습니다. Sushiswap 역시 디자인 업그레이드 과정에서 이러한 변경을 적용했습니다. 전부는 아니지만 대부분의 프로토콜이 그 뒤를 따랐습니다.

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

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

토큰을 왼쪽에 두고 모든 숫자를 오른쪽에 두면 대칭적으로 보기 좋다는 장점이 있지만, 이 레이아웃에는 또 다른 단점이 있습니다.

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

결국 두 옵션 모두 장단점이 있지만, 트렌드가 토큰을 오른쪽에 배치하는 방향으로 흘러가고 있다는 점은 흥미롭습니다.

버튼 동작

승인을 위한 별도의 버튼을 만들지 마세요. 또한 승인을 위해 별도로 클릭하게 하지 마세요. 사용자는 스왑을 원하므로 버튼에 '스왑'이라고만 표시하고 첫 번째 단계로 승인을 시작하세요. 모달을 통해 단계별 진행 상황을 보여주거나, '트랜잭션 1/2 - 승인 중'이라는 간단한 알림을 표시할 수 있습니다.

상황별 도움말로서의 버튼

버튼은 알림 역할까지 이중으로 수행할 수 있습니다!

이는 사실 Web3 외부에서는 꽤 드문 디자인 패턴이지만, Web3 내에서는 표준이 되었습니다. 공간을 절약하고 주의를 집중시킬 수 있다는 점에서 좋은 혁신입니다.

오류로 인해 주요 작업인 스왑(SWAP)을 사용할 수 없는 경우, 버튼을 통해 그 이유를 설명할 수 있습니다. 예:

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

버튼은 수행해야 할 작업에 매핑될 수도 있습니다. 예를 들어, 사용자가 잘못된 네트워크에 있어 스왑할 수 없는 경우 버튼에 '이더리움으로 전환'이라고 표시하고, 사용자가 버튼을 클릭하면 네트워크가 이더리움으로 전환되어야 합니다. 이는 사용자 흐름의 속도를 크게 높여줍니다.

이 Figma 파일로 직접 구축해 보세요

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

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

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

탈중앙화 금융(DeFi)은 계속해서 진화할 것이며, 항상 개선의 여지가 있습니다.

행운을 빕니다!