내가 원하는 이미지를 NFT로 민팅해보기

학미새🐥·2022년 11월 15일
1

👩🏻‍🏫 "내가 원하는 이미지를 NFT로 민팅해보는 방법"에 대해 알아보자

우선 사용해야 할 블록체인을 선정해야 하는데,
내가 NFT를 어떠한 네트워크로 전송해서 저장할 것인지를 선택하는 것이다.

우리가 사용할 블록체인은 Klaytn이다.

카카오 자회사인 Ground-X가 만든 블록체인 네트워크이기 때문에 K-코인이라는 별명을 가진다.

실습 네트워크로 Klaytn을 선택한 이유는 다음 두 가지인데,
☝🏻 가장 유명한 이더리움 네트워크보다 훨씬 저렴한 gas fee

  • gas fee : 블록체인에 트랜잭션을 남길 때, 즉 데이터를 write할 때 지불해야 하는 수수료

✌🏻 카카오톡 Klip 지갑의 편리성, 접근성

  • 앞서 말했듯 Klaytn은 카카오 출신이기 때문에, Klaytn 블록체인에서 사용하는 가상화폐인 Klay를, 카카오톡 내 가상화폐 지갑 기능인 Klip 지갑에서 다룰 수 있다.

    • 다른 블록체인 화폐의 경우, 웹에 크롬 익스텐션을 설치하여 계정을 별도로 생성하는 등 다소 복잡한 과정을 거친다

  • 사담 :
    현재 진행 중인 프로젝트의 타겟층은 기존에 가상화폐에 익숙하던 유저들이 아닌, 평범한 아이돌 팬들이다. 이들은 2030 여성들이 대다수이기 때문에 web3 생태계와는 다소 거리가 먼 이들이다.
    따라서, 우리의 서비스가 '블록체인'을 선택함으로써 발생하는 '가상화폐'라는 어쩔 수 없는 접근 장벽을 최대한 낮추기 위해 가장 접근하기 쉬운 가상화폐 지갑을 찾아보았고, 전국민이 이용하는 서비스인 카카오톡에서 별도의 설치 없이 이용할 수 있는 Klip 지갑을 발견하였다!

다음 목차에 따라 튜토리얼을 진행해볼 예정이다.

STEP 1. 스마트 컨트랙트 작성하기
STEP 2. 스마트 컨트랙트 컴파일 및 배포하기
STEP 3. NFT로 발행할 이미지를 URI로 변환하기
STEP 4. 원하는 이미지로 NFT 발행해보기
STEP 5. 민팅된 NFT 확인해보기

💁🏻‍♀️ 자 그럼, 본격적으로 실습에 돌입해보자!

STEP 1. 스마트 컨트랙트 작성하기

우리가 사용할 개발 환경은 Klaytn IDE이다.
보통 스마트 컨트랙트 개발환경으로 truffle 을 많이 사용하지만, command 창에서 코딩하는 것이 많이 어색한 코린이들을 위해 매우 친절한 GUI를 제공해주는 웹 기반 IDE를 이용하자 :)

컨트랙트 작성부터 컴파일 및 배포, 그 이후 트랜잭션 실행까지 모두 가능한 아주 편리한 GUI를 제공한다!

👉🏻 Klaytn IDE 바로가기

우리가 발행할 토큰의 종류는 NFT 이다.

Non-Fungible Token으로, 일반적인 명목 화폐와는 달리 각 화폐가 고유한 가치를 지니기 때문에 등가교환이 불가능한 토큰을 말한다.

스마트 컨트랙트는 강력한 보안을 필요로 하기 때문에
개발자가 새로이 작성하는 것이 아닌, 이미 존재하는 표준을 따라야하는데,
다양한 종류의 표준 중에서 NFT 토큰을 위한 표준이 따로 존재한다.

가장 유명한 NFT 표준은 이더리움의 ERC-721,
우리가 사용할 네트워크인 클레이튼에선 KIP-17이다.
해당 표준의 스마트컨트랙트를 사용하면서, 서비스에 추가적인 기능이 필요할 시, 이에 대한 함수를 추가로 작성하면 된다.

그럼 우리가 이번 실습에서 NFT를 민팅하기 위해 스마트 컨트랙트에 추가해야 하는 주요 함수를 간단히 살펴보자.

🎈 setUpSale 함수

    function setupSale(uint256 newAntibotInterval, 
                       uint256 newMintIndexForSale,
                       uint256 newMaxSaleAmount,
                       uint256 newMintPrice) external onlyMinter{
      _antibotInterval = newAntibotInterval;
      _mintIndexForSale = newMintIndexForSale;
      _maxSaleAmount = newMaxSaleAmount;
      _mintPrice = newMintPrice;
    }

NFT를 민팅할 때 필요한 환경을 설정해주는 함수이다.

  • _antibotInterval : NFT를 무한발행시키는 악성 봇을 방지하기 위해, 토큰 연속 발행 시 대기해야 하는 시간 간격
  • _mintIndexForSale : 발행할 토큰의 시작 index 값
  • _maxSaleAmount : 1인당 발행할 수 있는 최대 토큰 수 지정
  • _mintPrice : NFT를 민팅하기 위해 유저가 지불해야 할 KLAY 가격

🎈 publicMint 함수

//Public Mint
    function publicMint(address user, string memory _newBaseURI) public payable {
      require(_lastCallBlockNumber[msg.sender].add(_antibotInterval) < block.number, "Bot is not allowed");  //봇 방지용. 트랜잭션 사이의 최소 시간간격
      require(msg.value == _mintPrice, "Not enough Klay");
      require(_mintIndexForSale.add(1) <= _maxSaleAmount + 1, "Exceed max amount");

      baseURI = _newBaseURI;

      _mint(user, _mintIndexForSale);
      _mintIndexForSale = _mintIndexForSale.add(1);
    }

NFT를 민팅하는 메인 함수이기 때문에 구체적으로 살펴보자

  • 인자 : 민팅할 지갑 주소(NFT의 소유자가 될 주소), 민팅할 토큰의 URI
  • 첫번째 require문 : 악성 봇 방지를 위해 설정한 트랜잭션 사이 최소 시간 간격만큼 지났는지 확인하는 조건문
    • (require는 일반 프로그래밍 언어 문법에서의 if 조건문이라고 생각하면 된다)
  • 두번째 require문 : 사용자가 지불하는 금액이 설정한 민팅 비용과 동일한지 확인, 일치하지 않을 경우 "Not enough Klay"로 알리기
  • 세번째 require문 : 토큰의 index값을 1 늘린 값이 최대 토큰 발행 수를 초과하는지 확인, 초과할 경우 "Exceed max amount"로 알리기
  • baseURI = _newBaseURI : 인자로 받은 URI로 민팅할 토큰의 URI 값을 지정해준다.
  • _mint : KIP17 표준에 정의되어있는 실제 민팅 함수 (인자 : 민팅 받을 주소 to, 민팅할 NFT의 tokenID)
    • user : NFT를 소유할 사용자의 지갑 주소 (to)
    • _mintIndexForSale : 1씩 증가시키고 있는 NFT의 index (tokenID)
  • _mintIndexForSale.add(1) : tokenID가 될 NFT의 index 1 증가시키기 (다음 NFT의 ID)

STEP 2. 스마트 컨트랙트 컴파일 및 배포하기

Klaytn IDE에서 스마트 컨트랙트 작성이 완료되면,
해당 컨트랙트를 Dapp(web3)에서 사용하고, 모두가 볼 수 있도록 블록체인에 기록하기 위해 컴파일 및 배포를 해야 한다.

스마트 컨트랙트를 올릴 수 있는 블록체인엔 두가지 종류가 있는데,
테스트넷과 메인넷이다.

메인넷 : 실제 블록체인 네트워크로, 트랜잭션을 실행할 때 실제 가상화폐를 통해 gas fee를 지불해야 한다.
테스트넷 : 말그대로 테스트를 위한 블록체인 네트워크로, 개발자들이 실제 프로그램을 실행하기 전 개발 단계에서 여러 검증 과정을 거쳐야할 때, 실제 화폐가 아닌 가짜 화폐를 사용하여 시험해볼 수 있는 환경이다.

우리는 실제 서비스 구현이 아닌, 가벼운 실습을 해보는 것이기 때문에 실제 돈을 필요로 하지 않는 테스트넷에서 실습해보겠다.

스마트 컨트랙트 작성이 완료된 IDE에서 다음과 같은 환경을 설정하자!

📌 compile 탭

  • compiler : 0.5.17 버전 (KIP17의 표준 버전 : 0.5.x대)
  • language : solidity
  • evm version :
    - istanbul : 바오밥 (테스트넷) - 선택
     - constantinople : 싸이프레스 (메인넷)

➡ Compile 클릭

📌 Deploy & Run Transactions 탭

  • environment : baobab(테스트넷) / cypress(메인넷)
  • account : +버튼 눌러서 비밀키를 입력하여 나의 KLAY 지갑과 연결
  • value : 유료 트랜잭션(ex-민팅 함수)을 실행할 때, 지불할 KLAY 값을 설정하는 칸이다. 현재는 트랜잭션이 아닌 단순 컨트랙트 배포 단계이기 때문에 별도의 지불 비용이 필요 없다. 0으로 지정!
  • contract : 스마트컨트랙트에서 가장 최상위의 컨트랙트 이름을 선택해준다.
    • 최상위 컨트랙트 : 하나의 solidity 파일 내에 여러가지 표준과 컨트랙트들이 한 데 작성되는데, 이 모든 컨트랙트들을 사용하겠다는 의미에서 하나의 대표 컨트랙트에서 is로 모두 상속받아서 한번에 배포해주는 방식이다. (대개 컨트랙트의 맨 아래에 작성된다)
      ( 우리 프로젝트의 경우 KIP17GimmeDuckToken이다! )
  • Deploy : NFT collection 이름, symbol 설정

➡ transact 클릭

📢 주의!
account에서 나의 지갑을 연결하면 잔액 Klay가 확인되는데, 예시 캡처본과 같이 0Klay면 스마트 컨트랙트 배포 및 실행이 불가하다. 스마트 컨트랙트를 배포하는 데에도 gas fee가 당연히 필요하기 때문! (블록체인에 데이터를 write 하는거니까.)
➡ 테스트넷의 경우 테스트 Klay를 무료로 제공해주니까 이를 사용하자!
(24시간에 150Klay씩 받을 수 있음)

transact 버튼을 누르고 콘솔창에 이렇게 체크 표시가 뜨면 컨트랙트 정상 배포 완료! 💚

📌 Run Transactions (스마트 컨트랙트 함수 실행)

이제 하단의 Deployed contracts에 내가 방금 배포한 새 컨트랙트가 추가된다.
화살표를 누르면 스마트 컨트랙트 내에 정의되어있던 모든 함수를 실행시킬 수 있는 버튼이 나열된다.

  • 붉은 색 함수 (데이터 write) : 가스비 유료
  • 파란 색 함수 (데이터 read) : 가스비 무료

아까 스마트 컨트랙트를 작성하면서 살펴본 함수 중, 민팅하기 전에 관리자(컨트랙트 배포자)가 설정해줘야 했던 함수가 있었다. 바로 setUpSale !

setUpSale 함수의 네가지 인자 값을 모두 설정해주자.

  • 봇 방지 시간 간격 : 5
  • 토큰의 시작 index : 1
  • 발행 가능한 최대 토큰 수 : 1000개
  • 민팅 비용 설정 : 1000000000000000
    • 왜이렇게 비싸?!?!?!?!??! 할 수 있지만 오해다!
      해당 값의 단위는 우리가 아는 KLAY가 아닌 peb 이다.

      1 KLAY = 1000000000000000000 peb

      따라서 우리가 설정한 민팅 비용은 0.001KLAY 이다.
      (당연히 실제 web3 생태계에서는 말도 안되게 저렴한 민팅 비용이지만, 지금은 테스트 과정이니까! 실습용 돈을 아끼기 위해 ㅎㅎ)

여기까지 스마트컨트랙트 준비는 끝!

STEP 3. NFT로 발행할 이미지를 URI로 변환하기

우리가 위에서 배포한 스마트 컨트랙트의 민팅함수에는 사용자의 지갑주소와 함께 tokenURI 가 필요했다. 우리가 NFT로 발행하고자 하는 이미지를 URI로 변환해서 입력해줘야 민팅이 가능하다는 뜻!

여기서 등장하는 새로운 개념이 있다. 바로 IPFS!

❓ IPFS 란?

"InterPlanetary File System"의 약자로서, 분산형 파일 시스템에 데이터를 저장하고 인터넷으로 공유하기 위한 프로토콜이다.
P2P 방식으로 대용량 파일과 데이터를 공유하기 위해 사용한다.
IPFS는 데이터의 내용을 변환한 해시값을 이용하여 전 세계 여러 컴퓨터에 분산 저장되어 있는 콘텐츠를 찾아서 데이터를 조각조각으로 잘게 나눠서 빠른 속도로 가져온 후 하나로 합쳐서 보여주는 방식으로 작동한다.

쉽게 말해, 분산 저장소이다.

그렇다면 블록체인도 결국 분산형 저장소라고 알고있는데,
왜 또다른 분산 저장소를 필요로 할까?? 🤔

블록체인 상에서는 업로드하는 데이터의 용량이 클 수록 수수료가 더 많이 발생한다

땨라서 블록체인에 업로드하는 용량을 최소화 하기 위해
우리가 NFT로 발행하고자 하는 이미지를 직접 올리는 것이 아닌,

  1. 이미지를 IPFS 저장소에 업로드하여 이미지 IPFS URL을 생성하여 반환받고,
  2. 그 이미지 URL을 다른 메타 데이터들과 함께 담아 메타데이터 JSON 파일을 생성하고,
  3. 이 메타데이터 파일 또한 IPFS에 업로드하여 메타데이터 IPFS URL을 반환 받고,
  4. 이 URL을 최종 NFT의 토큰 URI로서 블록체인에 올리는 것이다.

과정을 글로 표현하기에 다소 복잡하기 때문에 간단한 그림으로 나타내보았다.

  1. IPFS 분산 저장소에 PNG 이미지파일을 업로드 -> IPFS 주소 : abc
  2. "image" : abc를 포함하는 JSON 형식의 메타데이터 파일을 생성하여 IPFS 분산 저장소에 업로드 -> IPFS주소 : def
  3. def를 NFT uri로 설정하하고 민팅을 실행하여 블록체인에 업로드

이렇게 구성된다.

한번더!
이번엔 블록체인에서 거슬러 올라가보면,

  • 블록체인에 올라가는 스마트 컨트랙트 안에는 여러 tokenID가 있고,
  • token ID 안에 각 token의 URI가 있고,
  • 그 token URI가 우리가 만든 JSON 메타데이터 파일의 IPFS 주소가 된다.
  • 해당 JSON 파일 내에서 Image 속성의 값이 되는 주소가 이미지 IPFS 주소!

이제 완벽 이해가 됐는가?!?!

그렇다면 실제로 실습하러 이동해보자 😎

📌 IPFS에 이미지 업로드

IPFS는 Pinata라는 서비스 API를 통해 분산 저장소에 원하는 파일을 업로드할 수 있다.

이번 실습에서는 Pinata API 중 NodeJS SDK를 설치하여 사용하자.
(IPFS에 파일을 업로드하는 과정은 백엔드에서 진행되기 때문에 nodejs 사용)

👉🏻 Pinata API NodeJS SDK 공식문서 바로가기

공식문서에 각 파라미터 의미, response, 예시코드까지 정말 너무나도 자세하게 잘 설명되어있기 때문에 Pinata API 설명은 생략하고, 어떤 함수를 사용해야 하는지만 간략히 짚고 넘어가겠다.

이러한 종류의 함수 중 우리가 사용할 것은 딱 두 가지이다.

  • pinFileToIPFS : 이미지를 IPFS에 업로드하기 위해 사용
  • pinJSONToIPFS : JSON파일을 IPFS에 업로드하기 위해 사용

pinFileToIPFS를 통해 IPFS에 이미지를 업로드하기 위해 파일 형태의 이미지를 다음과 같이 readable stream으로 변경해줘야 한다. (fs 모듈 사용)

const readableStreamForFile = fs.createReadStream("image.png");

생성된 stream을 인자로 담아 이미지를 IPFS에 업로드 하는 함수는 다음과 같다.

  • result_ : IPFS URI의 일부인 IPFS hashcode가 담긴다.

📌 메타데이터 JSON 파일 생성하기

이제 이미지 IPFS 주소를 반환 받았으니, 이를 담은 JSON 파일을 생성해야 한다.
이때 JSON 파일은 우리가 발행할 NFT의 메타데이터 역할을 한다.

그렇다면 JSON의 형식은 어떻게 해야할까?

👉🏻 opensea 표준 바로가기

이 JSON 표준 형식은 블록체인에 민팅만 하면 OpenSea에 자동으로 업로드될 수 있도록 OpenSea가 제공하는 Metadata 표준 형식이다.

Opensea란?
현재 세계 최대의 종합 NFT( 대체 불가능한 토큰) 거래 플랫폼으로 사용자는 플랫폼에서 NFT를 발행, 전시, 거래 및 경매할 수 있다

즉, Opensea 메타데이터 표준만 준수하도록 설정하면,
우리가 어느 서비스, 어느 단순한 프로그램에서 NFT를 민팅하더라도
그 NFT는 자동으로 전세계 사람들에게 공개되며 2차 거래가 가능해지는 것이다!
세상 편리

메타데이터 표준에서 우리는 external_url만 제외하고 네 개의 키값을 지정해줄 것이다.

  • name : NFT 이름
  • description : NFT 상세 설명
  • image : 업로드하고자 하는 이미지의 IPFS 주소
  • attributes : 디폴트로 설정하기 위해서는 trait_type과 value 모두 "Unknown"으로 설정해주면 된다.

이 때 attributes 키의 값은 object를 요소로 가지는 배열이라는 점 주의!
형식이 조금이라도 틀리면 메타데이터 연동이 안돼서 고생 많이 한다!!!

이렇게 지정해준 json파일의 내용이 될 body는 아래의 JSON IPFS 업로드 함수의 인자로 들어간다.

📌 IPFS에 JSON 파일 업로드

pinJSONToIPFS 함수도 이미지 함수와 생김새는 동일하다!
pinFileToIPFS는 이미지의 stream을 인자로 넣어주고, pinJSONToIPFS는 json 내용을 넣어준다는 차이 뿐!

📌 IPFS 업로드 코드 배치

Pinata API를 사용하여 IPFS에 File 혹은 JSON을 업로드하려면
API가 요구하는 option 데이터를 만들어서 함수 호출 시 인자로 함께 담아줘야 한다.

option을 포함한 전체 IPFS 업로드 코드의 배치는 다음과 같아야한다.

  • option1 : pinFileToIPFS를 위한 option 데이터 (공식 문서 참고)
  • pinFileToIPFS : local 이미지를 IPFS에 업로드하는 함수
    ( 아래 영역은 함수의 callback 내부 )
    • JSON 생성코드 : 위에서 살펴본 것 처럼 OpenSea Metadata 표준에 맞춘 JSON body
    • option2 : pinJSONToIPFS를 위한 option 데이터
    • pinJSONToIPFS : 생성한 JSON(Metadata)을 IPFS에 업로드하는 함수

그림으로 표현하면 다음과 같다.

❓ 그런데 JSON 업로드와 관련된 코드가 왜 pinFileToIPFS의 callback에 포함되어야 할까?

이미지 파일을 업로드 하는 함수 pinFileToIPFS와
JSON을 업로드하는 함수 pinJSONToIPFS를 별도로 분리시켜놓을 수도 있지만,

그렇게 될 경우, 코드를 실행하였을 때
JSON파일을 업로드 하는 속도가 이미지 파일 업로드 속도보다 빨라서
순서가 바뀌어 JSON이 먼저 업로드 되고 그 후에 이미지가 업로드 된다.

이렇게 될 경우 문제점은
이미지 파일 업로드 후 IPFS주소를 반환받아
그것을 JSON의 image 값으로 넣어줘야 하는데,

image 값에 원하는 이미지 주소가 아닌 빈 문자열을 담은 JSON이 IPFS에 먼저 올라가게 된다는 문제가 발생하게 된다.

그렇기 때문에 반드시 이미지 업로드 -> JSON 업로드 순서를 준수하기 위해
이미지 업로드 함수의 callback 내부에 JSON 관련 코드를 구현한 것이다.

pinFileToIPFS 함수 실행 후 반환되는 결과 중
이미지의 ipfs IpfsHash 값을 JSON image 속성의 값으로 넣어주면 된다.

💡 이때 주의할 점은!!!!!!!!!!!!!!!!
반드시 hash값 앞에 ipfs:// 를 추가해야 한다.
그래야 이미지의 URL이 완성된다.
글쓴이는 실제로 이거 하나 추가 안하고
해시값 변수 그대로 image 값으로 넣었다가,
코드와 컨트랙트 다 완성해놓고 맨 마지막에 OpenSea에서 메타데이터가 연동이 안되는 난관에 봉착해 N시간동안 빠져나오지 못하는 경험을 했다... ㅎ
🤦🏻‍♀️

STEP 4. 원하는 이미지로 NFT 발행해보기

이제 코드가 완성되었으니 실제 실습을 해보자!

  1. 원하는 이미지 파일을 위에서 작성한 코드를 통해 IPFS에 올리기
  • 이미지 업로드 -> 메타데이터 파일 생성 -> 메타데이터 업로드
    가 자동으로 실행됨
  1. 반환받은 메타데이터 IPFS URL을 tokenURI로 설정하여 스마트 컨트랙트 함수 실행하기
  2. 민팅 완료!

📌 1. IPFS에 업로드

나는 이 어마어마하게 귀여운 친구를 한번 민팅해보겠다.

IPFS 업로드 코드가 실행되면, 이렇게 차례대로


✅ File(이미지)과 JSON(메타데이터) 모두 정상적으로 업로드 되었고,
✅ 순서도 이미지->JSON대로 잘 맞춰진다.

여기서 IpfsHash가 이미지 url에서 ipfs://만 제외한 부분이다!

Pinata 페이지에서도 실제로 두 파일이 업로드 된 것을 직접 확인해보자!

이렇게 IPFS에 정상적으로 두개의 파일이 올라갔음을 확인할 수 있고,
우리가 앞으로 사용할 IPFS 주소의 해시값 (CID)도 잘 발급되었다.

이미지를 클릭해서 들어가보면

내가 발행하고자 했던 그 아이가 맞다 ㅎㅎ
귀욥

📌 스마트 컨트랙트 함수 실행하기

우리가 NFT로 발행할 때 필요한 URL은 이미지 URL이 아닌 메타데이터 URL임을 잊지 말자!

IPFS에 업로드되어있는 JSON 파일의 CID를 복사해온다.

물론! 만약 코드로 값을 가져오고자 할 경우,
pinFileToIPFS에서 이미지 url을 가져온 방식과 같이
response에서 Ipfshash 값에 접근하면 된다!

다시 Klaytn IDE로 돌아가서, 우리가 배포한 스마트 컨트랙트의 publicMint 함수를 실행하여 실제로 민팅을 해야 한다.

publiMint를 실행하기 위해 필요한 인자는 두가지 : 사용자 주소, tokenURI 였다.

  • 사용자 주소 : 내 지갑 주소 (공개키)
    (물론 다른 친구의 지갑으로 발행해주고 싶다면 해당 주소를 입력하면 된다)
  • tokenURI : 복사한 JSON 파일의 ipfshash 값을 입력해준다

💡 이때!! 주의할점은 그대로 복붙하지 말고 앞에 ipfs://를 넣어주자.
(아까 봤던 이미지 IPFS URL 주의사항과 똑같다)

즉 url 인자로 ipfs://+CID를 넣어주면 된다.

📢 여기서 바로 transact를 클릭하면 안된다!!

마지막으로 주의해야 할 점,
우리가 스마트 컨트랙트를 작성할 때, 민팅 비용으로 0.001KLAY (1000..00peb)을 설정해줬었다.
그렇기 떄문에 이대로 transact를 실행하면, gas fee가 부족하다는 에러창이 뜰것이다.

이렇게!

그렇기 때문에 우리는 민팅 비용을 지불하기 위해 value 값을 설정해줘야 한다.

value 값은 내가 이 트랜잭션을 실행하면서 동시에 블록체인에 함께 보낼 화폐의 가격 을 정해주는 것이다.

상단에서 value 가격을 이렇게 설정해주고 (0.001KLAY랑 같은 값!)
다시 transact 버튼을 클릭해주면?

성공적으로 민팅완료!

STEP 5. 민팅된 NFT 확인해보기

📌 Klaytn Scope에서 트랜잭션 조회하기

콘솔창이 아닌 다른 곳에서 직관적으로 우리의 트랜잭션을 확인해보면 좋겠다.

klaytnscope는 클레이튼 네트워크의 블록 탐색기다.

즉 클레이튼 블록체인에 존재하는 블록들과 그와 관련된 트랜잭션들을 찾아볼 수 있는 곳이다.

우리는 방금 민팅을 성공함으로써 클레이튼 블록체인에도 자취를 남긴 것이기 때문에 우리의 목적이 정말 달성된 것이라면 klaytn scope 에서도 확인할 수 있어야 한다.

klaytn scope은 메인넷과 바오밥(테스트넷) 사이트가 분리되어있어서 우리가 민팅한 테스트넷 사이트로 선택해서 들어가야 한다.

👉🏻 테스트넷 klaytn scope 바로가기

방금 전, 민팅 성공 후 초록체크버튼을 받았던 콘솔창의 메시지를 클릭하면 나의 트랜잭션에 대한 상세 정보가 나타난다

여기서 transaction hash를 복사해서 클레이튼 스코프 검색창에 붙여넣기 후 검색하면??

Success된 트랜잭션이 조회된다!


트랜잭션 해시가 아닌 우리가 발행한 스마트 컨트랙트의 주소값을 검색해도 정상적인 NFT contract가 조회되는데, 여기서 balance 값이 잘 들어와있음을 확인할 수 있다.

balance : 스마트 컨트랙트 내부에 축적된 화폐의 양

현재 민팅 비용은 0.001klay고 글쓴이는 이 글을 작성하면서 총 두 번 민팅을 시도해보았기 때문에 이로 인한 0.002klay가 잘 담겨있는 것을 볼 수 있다.

우리는 성공적으로 클레이튼 블록체인에 자취를 남긴 것이다!

📌 OpenSea에 연동된 NFT 확인하기

우리가 처음 올리려고 했던 이미지도 직접 눈으로 확인해보고 싶다.
아까 메타데이터를 Opensea 표준에 맞춰서 설정한 이유를 기억하는가??
바로 NFT가 민팅되면 자동으로 Opensea에 업로드되길 바랬기 때문...!

그렇다면
Opensea 에 들어가서 우리의 귀여운 눈사람오리가 업로드 됐는지 확인하자.
👉🏻 테스트넷 opensea 바로가기

민팅한 사용자, 즉 내 지갑으로 opensea 페이지에 로그인해서 마이페이지로 이동하면 collection에서 내 NFT를 모아볼 수 있다.

우왁 반가워😍😍

이렇게 우리는 실습 중에 opensea에 들어가 본 적도 없음에도 불구하고 자동으로 업로드되어 있는 것을 확인할 수 있다!!

지금까지 나만의 이미지를 블록체인에 NFT로 올려보는 실습을 해보았다.
web3 생태계를 향한 부담 없는 첫 발걸음이 되었길!!

💪🏻 Good Luck! 💪🏻

profile
학미새🐥
뭐든 다해보려는 공대생입니다
이전 포스트

Course 5 : ERC721&크립토 수집품

다음 포스트

[JS] if와 '?'를 사용한 조건 처리

0개의 댓글