[MetaMask] MetaMask Snaps 너는 누구냐

MetaMask Snaps

주저리

회사에서 사내 세미나를 진행한다는 공지가 올라왔다.

입사 후 처음으로 갖는 사내 세미나!! 요호이

각 세션별 발표자를 모집 했는데, 이것도 하나의 기회라고 생각해서 발표하겠다고 자원했당

미래에 멋짐 뿜뿜하게 될 내가 더 큰 자리에서 발표하기 위한 경험 쌓기 느낌으로,,

그렇게 해서 사내 세미나를 진행하게 된 인피덕

세미나 주제는 바로 MetaMask Snaps 두둥

사실 메타 마스크에 스냅이라는 기능이 있는 지도 몰랐는데

세미나를 준비하며 이것 저것 건들여 보니 참 재밌는 녀석이라고 느껴졌다.

여러분도 한번 메타 마스크 스냅의 자유로움 속에 빠져보시길 바란당

MetaMask

먼저 여러분 모두 다 아시겠지만 메타 마스크에 대해 한번 되짚어 보는 시간을 가져보도록 하겠다.

간단히 되짚어 보기

메타 마스크란 여러 가상 자산들, 예를 들어 이더리움이나 메타디움, 위믹스 등과 같은 이런 자산들을

자유롭게 보관할 수 있고 송금하며 관리할 수 있는 지갑임

물론, 메타 마스크말고 자산을 관리할 수 있는 지갑에는 여러 가지가 있지만

이런 지갑들과 차별화 되는 메타 마스크의 특징은 다음과 같음

개인이 직접 키를 관리

개인이 직접 키를 관리할 때의 이점으로 본인이 자산에 대한 모든 컨트롤이 가능해 지기 때문에

거래소 지갑 등등과는 다르게 본인의 거래를 제 3자의 개입 없이 자유롭게 진행할 수 있다는 장점이 있음

그리고 메타 마스크 생성 시 사용하는 니모닉(Mnemonic) 구문을 활용한다면

메타 마스크가 설치된 어느 곳이든 본인의 지갑을 복구할 수 있음

web3를 활용한 dApp과의 상호작용

메타 마스크는 단순히 거래 만을 위한 지갑이 아니라

NFT를 전송할 수 있고, Defi 서비스에서 내 자산을 관리할 수도 있는 하나의 수단으로 활용할 수 있음

또한, 다양한 커스텀 네트워크를 추가해서 사용할 수 있으므로

dApp 개발자들도 본인들의 자산과 서비스를 자유롭게 테스트할 수 있음

편리한 사용

메타 마스크는 크롬이나 파이어 폭스 같은

누구나 이용할 수 있는 웹 브라우저의 확장 프로그램으로 사용할 수 있음

다른 개인 정보를 필요로 하지 않기 때문에 핸드폰이나 이메일 인증 같은 방법도 필요하지 않음

갓갓 마스크?

이렇듯, 메타 마스크는 단순히 자산을 관리하고 거래하는 사용자 부터,

web3로 서비스를 개발하는 개발자와 해당 서비스를 사용하는 서비스 이용자 까지

전 세계적으로 많은 사용자를 수용하고 지원하게 됨

그러자 다양한 사용자들의 피드백 및 기능 제안 요청 등이 발생했고..

메타 마스크 개발자들이 검토할 수 있을 만한 범위를 넘어서게 됨

이제는.. 한계야..

~~개발자: 살..려…..줘….~~

그래서 메타 마스크 개발자들은 이런 새로운 제안을 수용할 수 있으면서도,

운영되고 있는 프로덕션 메타 마스크는 안정적으로 유지하기 위해 확장성 있는 버전의 메타 마스크를 원하게 됨

즉, 메타 마스크를 사용하는 web3 개발자 및 dApp 개발자들이

직접 메타 마스크를 뜯어 보기도 하고 이것 저것 붙여 보며 활용할 수 있는 테스트 버전을 만들고자 함

이렇게 해서 등장한 것이 바로!!!!!

MetaMask Flask 이고, 메타 마스크 플라스크의 첫 번째 응용 프로그램이 MetaMask Snaps 인 것

아무래도 이런 플러그인들의 활성화를 통한 메타 마스크의 기능 개선 및 개발을 도모하는 듯 보임

MetaMask Flask

잠깐 메타 마스크 플라스크에 대한 설명을 덧붙이자면,

메타 마스크 플라스크는 실험 적인 기능을 테스트 하고 검증하는 개발자 중심 배포판이라고 함

이 친구는 개발자를 위한 것이기 때문에 여러.. 위험이 있다고 하니 사용할 때 주의가 필요함

MetaMask Snaps

자, 여기까지 우리는 메타 마스크와 메타 마스크 플라스크, 메타 마스크 스냅이 나타나게 된 이유까지 알아보게 되었음

이제 본격적으로 메타 마스크 스냅 세계로 퐁당~ 들어가 보도록 하자

스냅은 메타 마스크 플라스크를 통해 출시된 첫 번째 테스트 기능임

특징 및 주의 사항

스냅을 사용하면 개발자가 원하는 모든 종류의 기능을 추가할 수 있다고 함

앞서 말한 모든 종류의 기능이란, 보안 상의 이슈를 발생시킬 수 있는 기능도 포함하고 있으므로

테스트 환경인 메타 마스크 플라스크에서만 사용할 수 있음

(예를 들어 사용자의 자산을 출금시킨다 거나, 사용자의 키를 가져올 수 있는 기능 등등)

또한, 메타 마스크는 한 번에 한 가지의 메타 마스크만 사용할 수 있으므로 프로덕션 환경의 메타 마스크는 disabled 시켜줘야 함

메타 마스크 플라스크는 모바일을 지원하지 않기 때문에 웹 브라우저 확장 프로그램으로만 사용할 수 있다는 점도 기억하자

스냅을 만들고 배포 할 때, 사용할 때는 npm 패키지의 배포 및 설치 과정과 매우 흡사하니 어렵지 않게 사용할 수 있음

Snaps 종류

먼저 메타 마스크 스냅을 사용하려면 스냅의 권한 요청과 설치가 필요한데, 이때 사용하는 스냅이 있음

wallet_enable

요 친구를 사용하면 계정을 가져오는 eth_requestAccounts,

스냅을 설치하는 wallet_installSnaps 와 권한을 요청하는 wallet_requestPermissions 가 합쳐진 스냅임

3개를 무려 1개로 다 쓸 수 있는 갓갓임

코드 상으로는 요렇게 사용하면 됨

...
await ethereum.request({
  method: "wallet_enable",
  params: [
    {
      wallet_snap: {
        "npm:@metamask/test-snap-notification": {},
      }
    },
    eth_accounts: {},
  ]
})
...

그러면 이런 팝업 창이 나타남

wallet_enable

snap_notify

다음으로 방금 예제에 있었던 test-snap-notification, 알림을 보내는 스냅을 알아보도록 하자

요 친구는 메타 마스크 내부에 알림을 띄우는 기능을 함

snap_notify

...
await wallet.request({
  method: "snap_notify",
  params: [
    {
      // inApp: 메타 마스크 내부로 알림을 보냄
      // native: 브라우저 상으로 알림을 보냄 (메타 마스크는 inApp 사용을 권장)
      type: "inApp",
      message: "TEST INAPP NOTIFICATION"
    }
  ]
})
...

type 값으로 어느 곳에 알림을 띄울지 결정할 수 있고,

message 로 띄우고 싶은 알림 메시지를 설정할 수 있음

snap_confirm

이 친구는 메타 마스크로 커스텀 팝업 UI를 띄우는 역할을 함

...
await wallet.request({
  method: "snap_confirm",
  params: [
    {
      // 타이틀
      prompt: "코인플러그 메타마스크 테스트",
      // 타이틀 설명
      description: "설명",
      // 내용
      textAreaContent: "coinplug metamask test"
    }
  ]
})
...

snap_confirm

뭔가 익숙한 듯 안 익숙한 모습의 UI가 뜨는 것을 볼 수 있음

여기서 승인을 누르면 리턴 값으로 true 값이, 거부를 누르면 false 값이 내려옴

transaction-insight

이 친구는 앞서 설명한 다른 친구들 과는 조금 다른 친구인데,

RPC 메소드 쓸 때 추가로 필요한 권한을 허용해주는 느낌이라고 이해하면 됨

또, 요 친구를 사용하는 방식도 약간 다른데 snap.manifest.json 파일에 추가 하거나 수정해서 사용하면 됨

...
{
  "initialPermissions": {
    "endowment:transaction-insight": {},
  }
}
...

initialPermissions 안에 권한 리스트들을 넣어서 사용하면 됨

endowment:transaction-insight 라는 친구는 sendTransaction 시 나오는 팝업 UI 에 커스텀 탭을 추가할 수 있게 해 줌

아래 캡쳐를 보면 TRUST SCORE 라는 탭이 생긴 것을 볼 수 있음

transaction-insight

그 외에도, 여러 스냅이 있다..

메타 마스크 UI를 커스텀 할 수 있는 스냅 (아직 개발 중), 메타 마스크로 예약 작업 (cron-job) 등등

테스트 해보장

스냅으로 만들어진 예제가 많지는 않은데, 매우 interesting 한 예제가 몇 개 있어서 가져와 봤음

Solidity Course

Solidity Course

요 친구는 메타 마스크를 이용해 DID를 생성하는 데모 사이트임

물론, 메타 마스크가 DID를 직접 생성하는 것은 아니지만,

DID를 생성하기 위해 필요한 인증 기관의 역할을 해준다고 보면 됨

기존에는 단순히 트랜잭션을 날리고 송금하는데 메타 마스크를 사용했다면,

메타마스크 스냅을 이용해 더 넓고 포괄적인 인증 요청에 승인할 수 있음

BitcoinSnap

BitcoinSnap

메타 마스크에 비트코인?

기존 메타 마스크였다면 불가능한 일이었지만 스냅으로 무려 메타 마스크에서! 비트코인 월렛을 생성할 수 있음

앞서 말한 데모 사이트 처럼 메타 마스크가 직접적으로 지갑을 만들어 주는 것은 아니지만,

지갑을 만들기 위해 필요한 정보들을 제공하는 역할을 함 (기존 address, pubkey 등)

주저리2

메타 마스크로 이것 저것 다 써볼 수 있다니 얼마나 흥미로운가

보안 측면에서 더더더더더더더 많은 주의가 필요하겠지만..

개발자 테스트용이라 현실성은 거의 없지만..

나~중에 메타 마스크 시즌2로 프로덕션 버전이 나온다면

아주 유용하게 쓰일 것 같은 친구였당

꿀잼!

참고

이전[Blockchain/Ethereum] EIP-747: wallet_watchAsset

다음[SSH] WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!