사용자 중심 Web3 애플리케이션(DApps)을 설계하는 방법: 팁과 요령

Web2에서 Web3로의 느리지만 확실한 전환 속에서 분산형 애플리케이션(dApp)은 더 큰 사용자 권한 부여와 데이터 소유권으로 Web2보다 한 단계 더 나아갈 것으로 기대됩니다.

그럼에도 불구하고 UX/UI의 기존 원칙(즉, 일관된 인터페이스 요소, 원활한 사용자 온보딩, 간결한 언어)은 여전히 가치가 있습니다. 반면에 dApp에서 매력적인 사용자 경험을 만들기 위해 노력하는 UX/UI 디자이너와 개발자는 고유한 과제에 직면합니다.

실제로 통계에 따르면 Web3 사용자 중 25% 만이 분산형 애플리케이션 사용에 자신감을 느낀다고 합니다.

사용자들은 더 많은 자율성을 기대하며, 복잡한 Web3 개념과 네트워크를 손쉽게 탐색할 수 있는 직관적인 인터페이스를 요구합니다.

Web3 개발자는 종종 자신의 창작물을 실현하기 위해 디자이너와의 긴밀한 협업이 필요합니다. dApp이 더 이상 중개자나 중앙 집중화된 기관에 의존하지 않는다는 점을 고려할 때, Web3의 분산적 특성은 신뢰 요소와 같은 인간의 행동 변수를 다시 생각하게 만듭니다.

Web3 사용자를 움직이는 요소는 무엇일까?

기존 웹 애플리케이션과 달리 Web3는 숙련된 크립토 애호가 부터 DeFi 에 발을 들이는 신규 사용자까지 다양한 대상을 대상으로 합니다. dApp을 설계할 때 이러한 다양한 수준의 기술적 이해를 고려하세요.

• Crypto-natives : 이 사용자들은 지갑, 개인 키 , 가스 요금과 같은 개념에 익숙합니다. 그들은 고급 기능과 사용자 정의 옵션을 우선시할 수 있습니다.

  
  

• 신규 사용자 : 이 사용자는 블록체인 용어 에 익숙하지 않을 수 있으며 명확한 설명과 지침이 필요합니다. 이 그룹에게는 단순성과 사용 용이성이 가장 중요합니다.

Web3를 위한 직관적 디자인의 핵심 원칙

Web3 및 블록체인 dApp 의 직관적 디자인을 탐구할 때 사용자의 사고방식과 여정을 이해하는 것이 무엇보다 중요합니다. 청중의 정신 모델을 고려하는 것으로 시작하세요. 그들은 블록체인 기술을 처음 접하는 사람인가요, 아니면 이 분야의 베테랑인가요?

그들의 지식 수준을 염두에 두고 디자인하면 사용성을 극적으로 개선할 수 있습니다.

1. Web2의 친숙함을 Web3로 가져오세요

관련 있는 경우 Web2의 은유와 워크플로를 이식하세요. 이는 Web3의 혁신적인 요소를 피해야 한다는 의미가 아니라 전통적인 UI 구성 요소를 짜넣어야 한다는 의미입니다. 친숙함은 장벽을 허물고, 사용자가 패턴을 인식하면 더 쉽고 자신 있게 탐색할 수 있습니다.

2. 적을수록 더 좋다

Web3 자체의 아이디어는 이미... 많습니다. 명확성과 단순성이 디자인 선택을 안내해야 합니다. 혼란스러운 레이아웃은 사용자 참여를 방해할 수 있습니다. 대신 핵심 기능을 강조하는 깔끔하고 잡동사니 없는 인터페이스를 목표로 하세요. 필수 요소는 정면과 중앙에 있어야 하며, 인지적 부하를 줄이고 사용자가 신속하게 결정을 내릴 수 있도록 도와야 합니다.

3. 피드백 루프

또 다른 중요한 측면은 피드백입니다. dApp에서 스왑 거래나 데이터 입력과 같은 모든 작업은 명확한 확인 화면이나 애니메이션과 같은 피드백을 통해 인정되어야 합니다. 같은 맥락에서 사용자가 오류 메시지(또는 UX/UI 용어로 '불행한 경로')에 부딪혔을 때 즉각적인 피드백과 솔루션 제공이 있어야 합니다.

이를 통해 사용자는 자신의 행동이 기록되고 효과적이라는 확신을 갖고, 신뢰와 안정성을 구축할 수 있습니다.

4. 모든 기기 유형에 걸쳐 일관된 경험

대부분의 Web2 애플리케이션과 마찬가지로 dApp은 모바일, 데스크톱, 태블릿에서 실행됩니다. 다양한 플랫폼에서 일관성을 유지하도록 설계하면 사용자 경험이 향상됩니다. 데스크톱 애플리케이션이든 모바일 인터페이스이든 일관된 탐색 및 시각적 단서는 사용자가 애플리케이션의 정신 지도를 형성하는 데 도움이 되어 장치 간 전환이 원활해집니다.

또한, QR 코드를 스캔하고 지갑 주소를 입력하기 위해 두 개의 다른 기기를 사용하는 등 특정 거래 활동 중에 불필요한 편집증을 줄여줍니다.

5. 보안 및 개인 정보 보호

Web3에서 보안은 과소평가될 수 없습니다. 사용자는 종종 귀중한 디지털 자산을 관리하기 때문입니다(고래가 옮기는 엄청난 양을 상상해보세요). 강력한 인증 방법, 잠재적 위험에 대한 명확한 경고, 최상의 보안 관행에 대한 교육 리소스를 우선시하세요.

Web3와 블록체인은 불변 기록으로 알려져 있지만, 사용자 데이터를 보호하기 위해 강력한 암호화 기술을 사용하고 사용자를 안심시키기 위한 예방 조치를 명확하게 전달하도록 옹호합니다. 자세한 거래 요약과 활동 내역을 제공하는 것도 안심을 촉진하는 방법입니다.

Web3 UX/UI 디자인을 위한 실용적인 팁

이러한 원칙을 실행 가능한 디자인 전략으로 바꿔 보겠습니다.

1. 온보딩

첫인상이 중요합니다. 사용자는 복잡성이나 보안 위험을 경계할 수 있으므로, 신규 사용자에게 dApp의 필수 사항을 안내하는 매끄럽고 매력적인 온보딩 프로세스를 만드는 것이 좋습니다. 앱 내와 웹 모두에서 대화형 튜토리얼이나 단계별 가이드를 고려하세요.

단일 화면 가입은 이미 무엇을 기대해야 할지 알고 바로 본격 작업에 들어가기에 편안한 숙련된 Web 3 사용자에게 더 적합할 수 있는 전통적인 접근 방식입니다.

스와이프 가능한 온보딩 화면은 신규 사용자에게 이상적일 수 있습니다. 소화 가능한 형식은 dApp의 핵심 기능과 가치 제안을 흡수하는 데 도움이 됩니다. 그렇더라도 좋은 방법은 스와이프 횟수를 3회로 제한하는 것입니다. 추가 단계가 있을 때마다 사용자 이탈이 증가하기 때문입니다.

2. Web3 Wallet 통합

암호화폐 지갑을 연결하는 것은 종종 사용자가 dApp과 처음으로 실제로 상호작용하는 것입니다. 서투른 지갑 통합 프로세스는 좌절과 포기로 이어질 수 있습니다. 이를 원활하게 만드는 몇 가지 방법은 다음과 같습니다.

• 원클릭 연결: 가능한 한 '원클릭' 연결을 목표로 하세요. WalletConnect 또는 유사한 프로토콜을 활용하여 관련 단계 수를 최소화하세요.

  
  

• 지갑 감지: 사용자가 설치한 지갑을 자동으로 감지하고 선호하는 옵션을 눈에 띄게 표시합니다.

  
  

• QR 코드 지원: 특히 모바일 사용자를 위해 대체 연결 방법으로 QR 코드 스캐닝을 제공합니다.

  
  

• 다중 지갑 지원: MetaMask, Coinbase Wallet, Trust Wallet, Argent, Rainbow, 그리고 물론 aelf 생태계에 구축된 계정 추상화(AA) 지갑인 Portkey와 같은 인기 있는 지갑을 지원하여 광범위한 사용자를 지원합니다.

  
  

• 신규 사용자를 위한 지침: 특히 Web3 지갑을 처음 사용하는 사용자에게 연결 프로세스를 안내하기 위해 명확한 지침과 시각적 보조 자료를 제공합니다.

  
  

• 보안 알림: 연결 과정 중에 명확하고 간결한 보안 알림을 표시하여 개인 키 보호의 중요성을 강조합니다.

3. 고객 확인(KYC) 통합

분산화가 Web3의 핵심 원칙이기는 하지만, 특히 금융 거래나 민감한 데이터를 다루는 많은 dApp의 경우 규정을 준수하고 보안을 보장하기 위해 고객 확인(KYC) 절차가 필요합니다.

• 투명성과 명확성: KYC가 필요한 이유와 사용자 데이터가 어떻게 처리될지 명확하게 설명하세요. 수집될 정보와 그 정보가 어떻게 사용될지에 대해 미리 알리세요.

  
  

• 간소화된 프로세스: KYC 프로세스를 가능한 한 효율적으로 만드세요. 필요한 단계 수와 정보의 양을 최소화하세요.

  
  

• 안전한 데이터 처리: 사용자 데이터를 보호하기 위해 마련된 보안 조치를 강조합니다. 개인 정보 보호를 강화하기 위해 분산형 ID 솔루션을 사용하는 것을 고려합니다.

  
  

• 사용자 친화적 검증: 원활하고 사용자 친화적인 검증 경험을 제공하는 안정적인 KYC 제공업체와 통합

  
  

• 명확한 피드백 및 상태 업데이트: KYC 프로세스 전반에 걸쳐 사용자에게 정보를 제공합니다. 검증 상태와 필요한 조치에 대한 명확한 피드백을 제공합니다.

4. 거래 흐름

거래는 대부분의 Web3 상호작용의 핵심입니다. 가스 요금, 예상 거래 시간 및 확인 단계에 대한 명확한 설명을 제공하여 거래 흐름을 간소화합니다.

• 시각적 명확성: 거래 금액, 가스 요금, 네트워크 요금, 예상 완료 시간과 같은 주요 정보를 강조하기 위해 명확한 시각적 단서를 사용합니다.

  
  

• 실시간 피드백: 로더, 진행률 표시줄 또는 상태 알림을 사용하여 사용자에게 실시간 거래 업데이트를 제공합니다.

  
  

• 동적 가격 업데이트: 토큰 스왑 또는 거래와 관련된 거래의 경우 시장 변동을 반영하기 위해 동적 가격 업데이트를 표시합니다. 가격 변동성과 최종 거래 금액에 미치는 잠재적 영향에 대한 명확한 면책 조항을 포함합니다.

  
  

• 백그라운드 처리: 가능하면 사용자가 트랜잭션 화면에서 벗어나 백그라운드에서 트랜잭션이 처리되는 동안 dApp 내에서 다른 활동을 수행할 수 있도록 허용합니다. 완료 시 또는 오류가 발생하면 알림이나 경고를 제공합니다.

  
  

• 확인 단계: 우발적인 거래를 방지하기 위해 명확한 확인 단계를 구현합니다. 제출하기 전에 사용자에게 거래 세부 정보를 검토하고 명시적으로 확인하도록 요구합니다.

  
  

• 거래 내역: 쉽게 접근하고 검색할 수 있는 자세한 거래 내역을 제공합니다. 사용자가 날짜, 유형 또는 상태별로 거래를 필터링할 수 있도록 허용합니다.

5. 오류 처리

오류는 불가피합니다. 일반적인 오류 메시지를 표시하는 대신 문제를 해결하는 방법에 대한 구체적이고 유익한 지침을 제공하세요. 공감하는 언어로 이를 보완하는 것이 가장 좋습니다.

• 구체적이고 유익한 메시지: '거래 실패'와 같은 일반적인 오류 메시지는 피하세요. '가스 요금을 지불할 자금이 부족합니다' 또는 '네트워크 연결 오류가 있습니다'와 같이 무엇이 잘못되었는지에 대한 구체적인 세부 정보를 제공하세요.

  
  

• 문맥별 안내: 오류를 해결하는 방법에 대한 문맥별 안내를 제공합니다. 예를 들어, 자금이 부족하여 거래가 실패한 경우 사용자의 지갑으로 직접 연결되는 링크나 필요한 암호화폐를 더 많이 획득하는 방법에 대한 안내를 제공합니다.

  
  

• 오류 예방: 가능하면 처음부터 오류를 예방하기 위한 조치를 구현합니다. 입력 검증을 사용하여 사용자가 올바른 데이터 형식을 입력하는지 확인하고 작업을 시작하기 전에 잠재적 위험에 대한 명확한 경고를 제공합니다.

  
  

• 복구 메커니즘: 일반적인 오류에 대한 복구 메커니즘을 제공합니다. 예를 들어, 사용자가 가스 수수료가 낮은 거래를 시작하여 지연이 발생하는 경우, 수수료가 더 높은 새 거래를 제출하여 거래를 '빠르게' 할 수 있도록 합니다.

  
  

• 사용자 친화적 언어: 오류 메시지에서 기술 전문 용어(예: 오류 404)를 피하세요. 모든 사용자가 이해하기 쉬운 명확하고 간결하며 자연스러운 대화 언어를 사용하세요.

6. 도구 설명 및 설명자

사용자가 모든 용어를 이해한다고 가정하지 마세요. 디지털 터치포인트에서 툴팁이나 확장 가능한 정보 탭을 아낌없이 사용하는 것을 고려하세요. '가스 요금', '스마트 계약', '블록체인 네트워크' 또는 ' NFT '와 같은 복잡한 용어를 간결하고 평범한 방식으로 설명하세요.

더 긴 형식의 도움말 콘텐츠를 보관하기 위해 dApp 내에 지식 은행이나 전담 FAQ를 구축하는 것도 좋은 방법입니다.

7. 테스트 및 반복

작업은 출시 후에도 끝나지 않습니다. 버그를 수정하기 위해 dApp을 부지런히 테스트하고 업데이트하는 것은 당연한 일이지만, 이는 진화하는 사용자 요구에 부응하는 데 있어 핵심입니다.

이 기사의 앞부분에서 우리는 설문 조사, 인터뷰, 사용성 테스트를 통한 사용자 리서치에 대해 언급했습니다. 이는 집중적인 방식으로 dApp 경험을 개선하는 데 도움이 되는 금광과도 같은 발견입니다.

A/B 테스트와 사용자 문자 그대로는 UX/UI 디자인 프로토타입과 가정을 확인하는 가장 일반적인 두 가지 방법입니다. 결과에 따라 피벗할 준비를 하고 무엇이 효과가 있는지(그리고 무엇이 효과가 없는지) 추적하세요.

이러한 단계를 거치면 당신이 만든 '북극성'에 훨씬 더 가까이 다가갈 수 있을 것입니다.

마무리: 보너스 팁

dApp의 성공은 X 요인에 달려 있습니다. 사용자가 귀하의 작품을 기억할까요, 아니면 다시 돌아볼까요?

개인화된 경험을 제공하는 것이 답이 될 수 있습니다. 즉, 사용자는 dApp과 상호 작용할 때 자신의 행동과 선호도에 따라 맞춤형 추천을 받을 수 있습니다. 사용자가 가장 자주 사용하는 기능의 사전 설정된 바로가기나 활동을 돕기 위한 맞춤형 제안과 같이 간단할 수 있습니다. AI 통합은 온체인 활동을 분석하고, 사용자 선호도를 예측하고, 심지어 사전 예방적 지원을 제공하여 이를 도울 수 있습니다.

사용자 중심의 경험과 인터페이스는 개발자와 디자이너가 작업하는 소프트웨어와 플랫폼에도 확장됩니다. 즉, 빌더 역시 사용자이기 때문입니다.

고성능 레이어 1 AI 블록체인인 aelf를 기반으로 개발하는 경우, aelf Playground 통합 개발 환경의 AI 툴킷과 사용자 친화성을 통해 빌드 프로세스의 지루함을 해소할 수 있으므로 귀하와 귀하의 팀은 최상의 사용자 경험을 설계하는 데만 집중할 수 있습니다.

엘프에 대하여

aelf는 선구적인 레이어 1 블록체인으로, 무한한 확장성을 위한 모듈식 시스템, 병렬 처리, 클라우드 네이티브 아키텍처, 멀티 사이드체인 기술을 특징으로 합니다. 2017년 싱가포르에 글로벌 허브를 두고 설립된 aelf는 최첨단 AI 통합을 통해 아시아에서 블록체인을 진화시키는 업계 최초의 기업으로, 블록체인을 더욱 스마트하고 자체 진화하는 생태계로 전환합니다.

aelf는 자체 C# 소프트웨어 개발 키트(SDK)와 Java, JS, Python, Go 등 다른 언어로 된 SDK를 통해 레이어 1 블록체인에서 스마트 계약 및 분산 앱(dApp)을 구축, 통합, 배포할 수 있도록 지원합니다. aelf의 생태계는 활발한 블록체인 네트워크를 지원하는 다양한 dApp도 보유하고 있습니다. aelf는 생태계 내에서 혁신을 촉진하고 있으며 Web3, 블록체인 개발 및 AI 기술 도입을 촉진하는 데 전념하고 있습니다.

aelf에 대해 자세히 알아보고, 저희 커뮤니티와 소통을 유지하세요:

웹사이트 | X | 텔레그램 | 디스코드