덜 신뢰, 더 많은 진실: Web3 디자인 모범 사례 및 패턴

개발자는 새로운 인터넷에 대한 꿈이 있습니다. Web3는 사용자에게 온라인에서 만들고 있는 플랫폼과 콘텐츠에 대한 완전한 소유권을 부여하는 분산형 모델입니다. 그러나 인터넷에 혁명을 일으키려는 시도에는 여러 가지 설계 문제가 있습니다. 주로 Web3의 고유한 기능으로 인한 혼란과 안전 문제를 해결하는 사용자 인터페이스를 구축하는 것입니다.

Web3 설명

Web3를 이해하려면 인터넷의 간략한 역사를 아는 것이 도움이 됩니다.

• Web 1.0은 탈중앙화되었으며, 이는 콘텐츠와 플랫폼의 소유권과 제어가 많은 개인과 기업에 분산되었음을 의미합니다.
• 현재의 인터넷 버전인 Web 2.0은 Apple, Google, Facebook(현재 Meta) 및 Twitter와 같이 사용자 친화적인 플랫폼을 갖춘 소수의 소프트웨어 회사 덕분에 발전했습니다. 더 많은 사람들이 온라인에서 능동적인 제작자와 소비자가 되면서 웹은 더욱 중앙 집중화되었으며 대부분은 소수의 기업이 소유하고 통제하게 되었습니다.

Web3를 통해 개발자들은 인터넷을 다시 분산화하고 있습니다. 기술 독점은 더 이상 사용자가 만드는 콘텐츠와 플랫폼을 소유하고 통제하지 않습니다. Web3는 또한 인터넷의 보안 및 개인 정보 문제를 해결하는 것을 목표로 합니다.

Web3는 다음과 같습니다.

• 무신뢰: 개발자, 콘텐츠 제작자 및 기타 사용자는 Web3 플랫폼 및 DApp(분산형 애플리케이션)을 구축하고 유지 관리하는 방식과 게시할 수 있는 콘텐츠를 제어합니다. 그들은 코드와 서비스가 실행되는 방식에 대한 완전한 가시성을 가지고 있습니다. 이는 기업과 정부가 통제권을 갖고 사용자가 애플리케이션 개발 및 관리 방법에 대한 정보를 독립적으로 확인할 수 없는 웹 2.0과 대조됩니다.
• 무허가 : 사용자는 회사나 정부 기관의 승인 없이 모든 Web3 앱에 들어갈 수 있습니다. 그들은 개인 키, 디지털 통화에 액세스하는 데 사용하는 비밀번호를 보유하고 있는 디지털 암호화 지갑으로 로그인합니다. 지갑은 USB 드라이브와 유사한 하드웨어 또는 MetaMask 및 TrustWallet과 같은 모바일 앱일 수 있습니다.
• 분산: 인터넷 제품 및 서비스에 대한 권한과 통제는 투자자나 CEO의 손에 집중되지 않고 Web3 플랫폼의 개발 및 유지 관리에 대한 기여를 기반으로 소유권 지분을 획득하는 사용자에게 공평하게 분산됩니다.
• 개방형: Web3는 블록이라고 하는 개별 그룹에 데이터를 저장하는 블록체인에서 실행됩니다. 블록에 정보가 채워지면 이전 블록과 연결되어 시간순으로 사슬을 형성합니다. 블록체인은 금융 거래를 기록하는 데 가장 일반적으로 사용되는 공개 장부입니다.

많은 Web3 앱은 주로 개발자로 구성되고 주도되는 소규모 팀에 의해 구축됩니다. 일부 팀은 독립적입니다. NFT(비대체 토큰) 마켓플레이스와 암호화폐 거래소를 비롯한 회사에서 고용한 다른 사람들도 있습니다. 종종 Web3 제품 작업을 위해 디자이너를 고용하는 것은 개발자입니다. 많은 경우에 이전 Web3 경험이 있는 디자이너가 이 빠르게 변화하는 공간에서 가파른 학습 곡선으로 인해 선호됩니다.

Web3 사용 사례 및 확장 장벽

Web3는 암호화폐, 거래를 위한 암호화 거래소(탈중앙화 거래소 또는 DEX), 고유한 디지털 또는 물리적 항목의 소유권을 나타내는 데 사용되는 NFT와 같은 금융 애플리케이션이 지배합니다. 또한, 분산 금융 또는 DeFi를 통해 사용자는 은행을 우회하고 대출, 대출, 이자 획득 및 자산 거래와 같은 P2P 금융 서비스에 액세스할 수 있습니다.

Web3를 다른 분야로 확장하는 것은 어려운 것으로 판명되었습니다. 예를 들어, 합법적인 Web3 사이트에 사기를 알릴 방법이 없습니다. 사용자가 Web3 플랫폼에 액세스하려면 암호화 지갑 자격 증명을 입력해야 하기 때문에 문제가 더 커집니다. Web3 사이트가 사기라면 그 사이트에 들어오는 모든 사용자는 잠재적으로 모든 돈을 잃을 수 있습니다.

또 다른 문제는 블록체인이 이미지나 동영상 업로드를 허용하지 않는다는 것입니다. 사용자는 이더리움과 같은 암호화 네트워크에 미디어를 저장할 수 있지만 비용이 많이 듭니다.

Web3 비디오 게임에서 NFT는 플레이어의 아바타와 구매한 항목을 나타낼 수 있지만 이러한 자산을 다른 게임이나 앱으로 전송하는 것은 종종 불가능하므로 플레이어의 투자가 줄어들고 Web3 게임을 방해하게 됩니다.

디자이너가 알아야 할 사항

다음 UI 패턴과 UX 디자인 원칙을 활용하면 Web3 플랫폼의 성장을 더욱 촉진할 수 있습니다.

명확한 프롬프트 및 완전한 정보 제공

많은 Web3 앱은 사용자 측에서 상당한 경험을 잘못 가정합니다. 대신 디자이너는 Web3의 익숙하지 않은 기능과 동작의 의미를 명확히 해야 합니다. 예를 들어, 암호화폐 자금을 유동성 풀에 예치하기 전에 신규 투자자는 자신의 돈이 가치를 잃을 수 있음을 알아야 합니다. 예치 화면에 팝업 메시지가 표시될 수 있다는 경고입니다.

DeFi 앱의 활동은 프로토콜로 알려진 표준에 의해 관리됩니다. 대부분의 DeFi 앱은 정기적인 보안 감사를 수행하고 취약점, 코드 문제 및 수정 사항을 포함한 주요 결과를 문서화합니다. 디자이너는 새로운 감사 보고서를 사용할 수 있을 때 DeFi 앱이 사용자에게 알리도록 할 수 있으며 복잡한 섹션을 일반 텍스트로 요약하여 감사를 더 쉽게 이해할 수 있습니다.

마찬가지로 많은 사람들이 프로토콜의 메커니즘을 이해하고 응용 프로그램 사용에 대한 정보에 입각한 결정을 내리기 위해 Web3 제품 설명서를 읽습니다. 이 자료의 대부분은 이해하기 어려운 전문 용어로 구성되어 있습니다.

여기서도 디자이너는 문서 섹션의 시작 부분에 대화형 요약을 제공하고 보다 기술적인 콘텐츠에 대한 링크를 제공하여 사용자 친화적인 콘텐츠를 보장할 수 있습니다. 팝업 용어집은 텍스트에 링크 아이콘으로 포함되어 사용자가 마우스 클릭이나 손가락 탭으로 용어의 의미를 배울 수 있습니다. 그리고 복사는 중요한 Web3 개념을 설명하는 이미지로 나눌 수 있습니다.

환율을 알리기 위해 친숙한 통화를 사용하십시오

비트코인과 같은 암호화폐가 대중화되고 가격이 변동함에 따라 가치가 얼마나 되는지 추적하기 어려울 수 있습니다. 이러한 토큰이 NFT와 같은 자산을 위해 매매되고 거래되는 디지털 지갑 및 전자 상거래 앱에서 디자이너는 사용자에게 암호화폐에서 기본 통화로의 가격 변환을 보여주고 소수 자릿수 이상의 사용을 피해야 합니다.

지갑 및 트랜잭션 해시를 쉽게 읽을 수 있도록 설정

기본적으로 블록체인의 각 주소는 ID 또는 해시로 알려진 긴 문자열(최대 42자)입니다. 자금을 보낼 때 사람들은 전체 문자열을 확인해야 합니다. 오류를 범하기 쉽고 위험이 높습니다. 모든 블록체인 트랜잭션은 최종적입니다. 자산이 잘못된 지갑 주소로 전송되면 복구할 방법이 없습니다. 내가 일했던 투자 회사에서 우리는 ICO(초기 코인 제공) 거래를 중개하여 참여 기업에 거액의 송금을 보냈고 매번 6 명이 받는 사람 지갑 주소를 확인하게 했습니다.

이더리움 이름 서비스(ENS)를 사용하면 해시를 이름과 .eth 와 같이 읽고 기억하기 쉬운 이름으로 변경할 수 있습니다. 그러나 비용이 많이 들기 때문에 모든 사람이 ENS를 사용하는 것은 아닙니다.

Web3 UX 디자이너는 해시의 처음과 마지막 4개 문자만 표시하여 사용자가 전체 문자열을 확인하지 않고 확인할 수 있도록 하여 트랜잭션의 스트레스를 줄일 수 있습니다. 디자이너는 또한 거래 전에 사용자가 해시를 다시 확인하도록 요구 사항을 작성할 수 있으며 각 수신자 주소 옆에 식별 로고를 포함할 수 있습니다. 이러한 추가 검증 단계에는 자산을 잘못된 주소로 보내면 자금이 완전히 손실된다는 알림이 수반되어야 합니다.

트랜잭션 대기 시간을 명확히

은행을 통해 온라인으로 자금을 이체하면 즉시 상태 업데이트 또는 거래가 완료되었다는 확인을 받게 됩니다. Web3 DEX에서는 그렇지 않습니다. 블록체인 거래의 최소 처리 시간은 3분 정도인데, 2시간을 기다려야 했다. 나는 이 기술을 6년 동안 사용해 왔지만, 지갑에서 돈이 빠져나가고 적시에 배송 확인을 받지 못하면 여전히 당황합니다.

더 많은 DEX는 상태 표시줄이나 알림에서 텍스트 또는 애니메이션을 통해 트랜잭션 상태를 표시해야 합니다. UI에 업데이트를 표시할 수 없는 경우 Ethereum의 Etherscan과 같은 오픈 소스 블록 탐색기에 대한 링크를 제공하는 것이 좋은 대안입니다.

"최대 보내기" 버튼 구현

비트코인, 이더 및 기타 암호화폐는 종종 0.0000085191과 같이 많은 소수 자릿수로 표현됩니다. NFT와 같은 자산을 구매하기 위해 개인이나 기업에 돈을 보낼 때나 스마트 컨트랙트에 자금을 예치할 때 총 금액을 정확하고 효율적으로 입력하는 것은 어렵습니다. 디자이너가 응용 프로그램에서 "최대 보내기" 버튼을 만들어 사용자가 클릭 한 번으로 전체 지갑 잔액을 다른 주소로 전송할 수 있도록 하는 것이 좋습니다.

이것은 개인 지갑의 잔액이 송금해야 하는 금액과 같거나 약간 높을 때 편리합니다. 일부 사용자는 여러 개의 지갑을 가지고 있어 이러한 발생 가능성이 높아집니다. 그들은 전체 잔액을 보낼 수 있으며 기능은 자동으로 이를 비트코인 ​​또는 이더로 변환합니다. 이 기능은 지갑 잔액이 총 미납액보다 많을 때 계산을 수행하지 않으므로 디자이너는 사용자가 실수로 의도한 것보다 더 많이 보내지 않도록 확인 대화 상자를 포함해야 합니다.

가스 가격이 어떻게 작동하는지 설명

Gas는 아마도 Web3에서, 특히 암호화를 처음 접하는 사람에게 가장 성가시고 혼란스러운 것입니다. 가스 가격은 거래를 처리하는 데 필요한 컴퓨팅 성능 비용을 충당하기 위해 사용자가 지불하는 추가 요금입니다. 사용자는 전송 속도를 높이기 위해 더 높은 수수료를 지불하도록 선택할 수 있습니다.

설계자는 가스가 무엇이며 어떻게 작동하는지 설명해야 합니다. 가능하면 사용자에게 가장 일반적인 기본 법정 통화(일반적으로 USD)로 가스 가격을 표시해야 합니다. 설계자는 또한 가스 가격과 그에 따른 전송 속도의 실행 가능한 조합을 제안할 수 있습니다. 낮은 가스 지불로 인해 거래가 중단되거나 실패하는 경우 설계자는 사용자가 전송을 가속화하기 위해 더 높은 수수료를 지불하도록 허용해야 합니다.

사용자의 거래 내역을 쉽게 액세스할 수 있도록 합니다.

거의 모든 중앙 집중식 전자 상거래 웹사이트(web 2.0)를 통해 사용자는 포괄적인 구매 내역을 확인할 수 있습니다. 탈중앙화 거래소에서 이러한 기록에 접근하는 것은 어렵습니다. 지갑은 거래 내역을 제공하지만 한 번에 하나의 계정에 대해서만 제공하며 DApp으로 필터링하기 어렵거나 불가능합니다. 중앙 집중식 플랫폼에서 사용 가능한 기록을 얻으려면 Web3 사용자는 Etherscan과 같은 블록 탐색기로 이동해야 합니다. 이는 사용자 친화적이지 않고 특정 트랜잭션을 찾기 어렵게 만듭니다.

Web3 디자이너는 사람들이 개별 DApp 내에서 수행하는 온체인 트랜잭션을 검토할 수 있는 간단한 방법을 제공해야 합니다. 사이드 패널이나 메뉴와 같이 찾기 쉬운 위치에 배치해야 합니다. 또 다른 옵션은 버튼으로 활성화되는 "체인 뷰" 모드를 만드는 것입니다. 클릭하면 전체 UI에 필터를 배치하여 트랜잭션 기록을 포함하여 블록체인에 저장된 DApp 내의 모든 콘텐츠를 나타냅니다. . 사용자가 거래 기록을 쉽게 필터링하고 내보낼 수 있도록 하는 것도 도움이 됩니다.

간편한 개인 키 관리 활성화

사용자가 디지털 지갑에 액세스할 수 있도록 하는 개인 키는 저장하기 쉽지 않습니다. 사람들은 때때로 백업을 잊어버리거나 백업하는 방법을 모릅니다. 이 키는 한 번 분실하면 복구할 수 없습니다. "비밀번호 재설정" 옵션이 없습니다. 디자이너는 MetaMask의 예를 따르고 각 사용자에게 지갑 잠금을 해제하는 데 사용할 수 있는 일련의 단어인 시드 문구를 제공하여 이 문제를 해결할 수 있습니다.

설계자는 또한 개인 키나 시드 문구를 분실할 경우 자금에 액세스할 수 없고 도난에 취약하다는 점을 사용자에게 경고해야 합니다. 이러한 메시지는 먼저 지갑을 설정할 때 알림으로 사용자의 지갑 앱에 팝업된 다음 미리 설정된 일정에 따라 반복되는 알림으로 표시되어야 합니다.

주요 내용

Web3가 인기를 얻고 디지털 지갑 및 금융 플랫폼을 넘어 확장하려면 디자이너는 Web3 앱을 보다 일관되고 직관적으로 만들어야 합니다. 또한 새로운 사용자가 Web3 플랫폼에서 볼 수 있는 새로운 기능과 상호 작용에 익숙해지도록 돕기 위해 보다 직접적인 사용자 교육을 제공해야 합니다.

DApp이 안전하다고 느끼게 만드는 것 역시 높은 우선순위가 되어야 합니다. Web3의 무신뢰, 무허가 특성을 제어하는 ​​것은 불가능하지만 설계자는 무엇이 잘못될 수 있는지 예측하고 그러한 발생을 방지하는 데 도움을 줄 수 있습니다. 위험에 대한 보다 투명한 경고는 사람들의 우려를 진정시키고 Web3를 수용하도록 설득하는 데 큰 도움이 될 것입니다.

Toptal 블로그에 대한 추가 읽기:

최대의 제품 신뢰를 위한 설계 방법

이러한 성공적인 상호 작용 디자인 원칙으로 UX를 향상시키십시오.

코드 없는 웹 디자인을 위한 Webflow 이점: 사례 연구