시작하는 웹 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

 

 

해당 콘텐츠는 이재구님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.

 

 

RELATED ARTICLESMORE FROM AUTHOR