‘웹 3.0’ 디자이너와 PM을 위한 메타마스크 API
시작하는 웹 3.0 디자이너와 기획자를 위한, 메타마스크 API 요약
‘웹 3.0’ 서비스는 ‘로그인’이 아니라 ‘지갑 연결’로 서비스를 시작합니다. 웹 3.0 ‘지갑’은 토큰과 NFT 등 가상자산을 보관하는데요. ‘지갑’은 크게 두 가지입니다. 첫 번째는 업비트, 코인원 등 거래소에서 가상자산 거래 사용자를 위해 만들어주는 지갑입니다. 비밀번호와 가상자산을 거래소에서 관리해주기 때문에 중앙화 지갑으로 분류합니다. 주로 거래소에서 만든 서비스만 이용할 수 있습니다.
두 번째는 거래소 기능 없이 가상자산 지갑 서비스만 제공하는 지갑입니다. 비밀번호와 가상자산 모두 사용자가 직접 관리합니다. 사용자가 직접 정보를 관리하기 때문에 탈중앙화 지갑으로 분류하는데요. 모든 웹 3.0 서비스에 연결할 수 있습니다. 가장 인기 있는 탈중앙화 지갑은 ‘메타마스크(MetaMask)’입니다. 이번 글은 이제 시작하는 웹 3.0 PM 혹은 PO 그리고 프로덕트 디자이너를 위한 ‘메타마스크’ API 요약입니다.
MetaMask 기본
MetaMask 정의
‘메타마스크’를 이용하면 Ethereum 생태계의 다른 dApp(및 추가할 다른 블록체인)과 상호 작용하여 다양한 스마트 계약에 서명하고 거래를 할 수 있습니다.
‘메타마스크’는 이더리움에 연결된 API를 제공합니다.
브라우저 앱(크롬, 파이어폭스, 브레이브) / 모바일 앱에서 서비스를 제공합니다.
MetaMask 기본
‘메타마스크’는 사용자가 버튼 클릭과 같은 직접적인 액션을 통해서만 작동합니다. 또한 ‘메타마스크’에 “연결”은 “사용자 이더리움 계정에 연결하는 것”을 의미합니다.
‘메타마스크’는 사용자의 버튼 클릭과 같은 행동을 통해 연결을 시작해야 합니다.
연결 요청이 진행 중인 경우 서비스의 “연결” 버튼을 비활성화해야 합니다.
사용자 버튼 클릭과 같은 행동 없이 자동으로 연결 요청을 시작할 수 없습니다.
‘메타마스크’ 계정(지갑 주소)이 없는 경우, 사용자가 계정 생성을 시작하도록 권장합니다. *권장 사항
MetaMask 주요 flow 기능
MetaMask 설치& 계정 연결
보통 사이트에 지갑 연결 메시지가 표시됩니다. 보안을 이유로 ‘메타마스크’는 자동 연결되지 않습니다. 이러한 메시지는 ‘메타마스크’가 호환되는 모든 사이트에서 표시됩니다.
‘메타마스크’가 브라우저에 설치되지 않은 경우, ‘메타마스크’는 설치 버튼을 호출할 수 있습니다.
설치 후, 새로고침을 통해서만 설치된 ‘메타마스크’ 확장을 감지합니다.
‘메타마스크’ 연결이 끊긴 경우, 다시 연결하려면 페이지를 다시 로드해야 합니다.
MetaMask에 사이트 추가(연결)
처음으로 사이트 접속을 시도할 경우, 메타마스크 화면이 등장하며 해당 사이트를 사용자 ‘메타마스크’에 추가할 것인지를 묻습니다.
첫 이용 후, 허용된 사이트의 경우 다시 연결이 필요하지 않습니다.
지갑은 연결했지만, 주소가 다른 경우 토큰이 표시되지 않을 수도 있습니다.
주소가 다른 경우, 사용자가 직접 주소를 변경해야 합니다.
네트워크 추가&전환
‘메타마스크’에 지정된 네트워크를 추가하도록 사용자에게 요청하는 확인을 생성합니다. 사용자는 네트워크가 추가되면 추가된 네트워크로 전환할 수 있습니다.
‘메타마스크’ 네트워크 추가 후, 네트워크 추가 요청을 보낸 페이지로 사용자를 다시 보낼 수 있습니다.
네트워크 변경 시, 이유가 없는 한 페이지를 다시 로드하는 것이 좋습니다.
네트워크 추가 거부 상황은 체인 ID가 잘못된 경우입니다. 또한 지정된 체인 ID의 체인이 ‘메타마스크’에 추가되지 않은 경우입니다.
거래 접근 승인&거래 허용
‘메타마스크’ 사용자는 거래를 위해 최대 2번 승인을 해야 합니다. 첫 번째는 거래에 대한 접근을 승인하는 액세스 허용입니다. 두 번째는 실제 거래를 허용하는 절차입니다.
데스크톱 웹은 거래 승인과 거래 허용 flow가 한 페이지에서 끊김 없이 진행됩니다.
모바일의 경우 첫 승인 이후 다시 ‘메타마스크’ 모바일 페이지로 이동하지 않습니다.
‘메타마스크’ 인앱 브라우저에서 거래를 진행하는 경우, 끊김 없이 두 번의 승인을 진행할 수 있습니다.
지갑 토큰 추가
사용자 편의를 위해 메타마스크에 토큰 추가 요청 기능을 추가할 수 있습니다.
‘메타마스크’는 주요 암호화폐를 자동으로 감지하고 자동으로 표시합니다.
토큰 추가 요청 기능을 통해 사용자는 ‘메타마스크’에서 추가된 토큰 목록을 쉽게 확인할 수 있습니다.
추가 요청 완료된 토큰의 경우에도 토큰 추가 요청 Flow는 거래 후, 반복해서 진행됩니다.
토큰 추가 flow가 없는 경우, 사용자는 직접 토큰 추가 페이지에서 암호화폐를 추가해야 합니다.
MetaMask 브랜드 에셋
서비스 이름 추가
‘메타마스크’서명 시, 서비스 이름을 표기할 수 있습니다.
앱 아이콘 추가
제작한 서비스가 ‘메타마스크’ 사용자에게 로그인(사이트 연결)을 요청할 때 ‘메타마스크’는 사이트 아이콘을 ‘메타마스크’에 표기할 수 있습니다.
사이트 아이콘 지정은 파비콘 표준을 따라야 합니다.
기타 요소
MetaMask 앱 장점
빠른 사용자 온보딩과 Dapp(웹 3.0 서비스) 연결에 장점을 가지고 있습니다.
브라우저 혹은 데스크톱과 모바일 관계없이 ‘메타마스크’ 서비스를 이용할 수 있습니다.
손쉽게 암호화폐를 구매할 수 있습니다.
딥 링크 사용(딥링크 생성 페이지 바로가기)
딥링크를 사용하면 매개변수화된 트랜잭션으로 사용자가 선호하는 지갑 애플리케이션을 즉시 호출할 수 있습니다.
사용자가 (금액, 네트워크 등이 포함된 버튼 생성)쉽게 결제할 수 있는 경험을 제공할 수 있습니다.
reference
해당 콘텐츠는 이재구님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.
