Create a Solana NFT marketplace and mint NFTs using Metaplex

https://learn.figment.io/tutorials/create-a-solana-nft-marketplace-with-metaplex

Figment Learn | Building Web 3

Figment Learn의 "Create a Solana NFT marketplace and mint NFTs using Metaplex" 튜토리얼을 따라가보자..

"Learn how to deploy a Metaplex marketplace that allows you to mint and sell your own NFTs on Solana." 라고 적혀있다. Metaplex 마켓플레이스를 개발해서 NFT를 민팅하고 팔 수 있는 방법을 배우는 것 같다. Metaplex는 Solana에서 출시한 최초의 NFT 마켓플레이스라고 한다.

1. Introduction

이 튜토리얼을 통해 우리는 Solana blockchain을 활용하여 NFT(non-fungible token)와 marketplace를 만들 수 있다.

우리는 우리의 자체적인 marketplace에서 NFT를 만들 것이다. NFT를 만들면, 우리는 이것을 DigitalEyes나 Solanart와 같이 더 큰 marketplace에 판매용으로 등록할 수 있다.

2. Prerequisites

• You will need around $2 USD of SOL accessible, which we will send to a browser wallet. You can get some SOL through an exchange, such as FTX.
• Something to upload in the NFT, such as an image, video, audio file or an AR/3D file (.glb).
• A Github account
• Git installed
  홈페이지에 있는 내용을 그대로 가져왔다.

Create and fund an SOL wallet

Phantom 을 통해 Solana 지갑을 만들 것이다. 그리고 블록체인에서 NFT를 민팅하는 것은 블록체인의 데이터가 변경되는 것이기 때문에 거래에 대한 비용을 지불해야 한다. Solana는 거래 비용을 지불하기 위해 SOL 토큰을 사용하므로 생성한 Phantom 지갑에 SOL을 입금해야 한다.

 

나는 다행히 이번 프로젝트 지원금으로 SOL을 조금 받았기에 이것을 사용하려 한다.

팬텀 지갑을 만들고 SOL을 입금하는 방법은 검색해보면 친절히 설명되어 있는 블로그가 많을 것이다.. 나도 그거 보고 했다.

3. Fork and clone the Metaplex repository

https://github.com/metaplex-foundation/metaplex

GitHub - metaplex-foundation/metaplex: Protocol and application framework for decentralized NFT minting, storefronts, and sales.

Metaplex 저장소를 Github 페이지에서 쉽게 호스팅할 수 있도록 자신의 Github 계정에 Fork 하자.

그리고 로컬에 저장할 폴더를 만들고 git clone 까지 진행한다.

4. Change the default addresses

웹사이트를 배포할 때, 포크한 Meteaplex 레포에 저장하고 싶다. 이를 통해 our own live marketplace online을 쉽게 확보할 수 있다고 한다.. 어쨌든 하라니까 하자. 배포 주소를 내 Github에 포크한 주소로 변경한다.

 

이때 그냥 들어가자마자 있는 package.json이 아니라 metaplex > js > packages > web > package.json 을 들어가서 변경해야 한다.

"deploy:gh": "yarn export && gh-pages -d ../../build/web --repo https://github.com/내 Github 이름/metaplex -t true"

 

위와 같이 변경하자.

 

그리고 store's wallet address 도 바꾼다.

방금 변경한 package.json이 위치한 곳과 같은 곳에 있는 .env 파일을 들어가서

REACT_APP_STORE_OWNER_ADDRESS_ADDRESS=

 

위의 공백 부분에 내 Phantom 지갑의 공개 주소를 넣는다. 그러면 store에서 관리 액세스 권한을 부여할 사람을 알 수 있다고 한다.

5. Setup and deploy our store

이제 우리의 store를 만드는 마지막 단계라고 한다!(뭐 했다고..?)

Marketplace 웹 사이트를 배포하는 데 필요한 모든 패키지를 다운로드해야 한다. command line에서 현재 디렉토리를 js 폴더로 변경하자.

cd metaplex/js

디렉토리를 marketplace 폴더로 변경했을 때 이전의 터미널이 여전히 열려 있어야 한다.. 무슨 소리지? 그냥 하던 터미널에서 진행하면 된다.

yarn

그리고 다음 yarn 명령을 실행하여 모든 dependencies을 설치한다. Metaplex 레포를 clone 할 때 패키지를 다운로드하지 않고 어떤 패키지/종속성이 필요한지 알려주는 코드만 다운했기 때문이다. 모든 다운이 완료되면 마지막에 Done을 출력한다. 생각보다 시간이 많이 걸렸다.

wsl 을 이번에 깔아서 우분투 환경에서 진행하려 했더니 node.js랑 yarn이랑 모두 설치해야했다..ㅎㅎ

 

yarn bootstrap

실행이 완료되면 yarn bootstrap 을 실행해서 dependencies가 잘 작동하는지 확인한다.

 

자 이제 깃허브 페이지에 업로드하기 전에 로컬에서 우리의 새로운 NFT marketplace를 테스트할 수 있다.

yarn start

컴파일이 완료되기까지 몇 분이 소요될 수 있다. compiled succesfully 메시지가 뜨면 http://localhost:3000/#/ 주소를 통해 marketplace를 확인할 수 있다.

💣
아.. 웬일로 잘 된다 했다.. 역시나 오류가 발생..
WSL로 webpack을 이용할 때 발생하는 오류인 것 같다.
https://stackoverflow.com/questions/66841580/watchpack-error-initial-scan-error-eacces-permission-denied-lstat-mnt-c
세상에.. 경로의 문제라니.. 우분투 한 번 사용해보겠다고 하다가 이런 역경이... 깃허브 issue까지 확인해보니.. 많은 사람들이 경로를 옮겨야 한다는 데 분노하고 있다.. WSL2 에서 발생하는 에러인 것 같은데.. 슬프다..

그렇다고 윈도우에서 하려니.. 노드도 업데이트해야되고.. 어유 복잡해서 그냥 /mtn/c 를 벗어나서 루트 디렉토리에 새 폴더를 만들어서 깃 클론을 새로 했다. 앞으로 wsl 환경에서 개발할 때는 이 폴더에서 해야겠다.

와.. 이러니까.. 바로 된다..!!!!!!!!ㅠㅠ
Tip: wsl 터미널에서 explorer.exe . 을 입력하면 현재 디렉토리가 파일탐색기로 열린다.

 

이제 build만 하면..!

yarn build

Done 메시지가 출력되면, build가 완료된 것이다. 시간이 조금 걸렸다. 이제 js 폴더 안에 build 폴더가 생긴 것을 확인할 수 있다. 아무리 새로고침을 해봐도 vscode에서 보이지 않았지만.. deploy 명령 실행하니 build 폴더가 보이더라.

 

이제 web 폴더로 현재 디렉토리를 바꾼 후에 deploy 명령을 실행한다.

yarn deploy

여기서 또 에러가 났다. 별다른 에러 메시지 없이 Please tell me who you are.. 이라고 git config 정보를 설정하라기에 하고 다시 deploy를 해봤더니 유후 잘 되었다.

 

깃허브 레포로 돌아가서 Settings > Pages 에 들어가면

Your site is published at https://이름.github.io/metaplex/ 라고 뜬다!

해당 url 을 통해서 접속해보니 잘 된다. 근데 로딩이... 로딩이 너무 상상이상으로 느리다...

6. Mint an NFT on a marketplace

도저히 실습을 진행할 정도가 아니라.. 그냥 여기서부터는 튜토리얼을 번역만 하겠다.

 

Create 버튼을 누르면 Category 섹션이 뜨고 여기서 우리가 만들 NFT의 종류를 선택한다.

 

그 다음 Upload 섹션에서는 안내를 따라 필요한 파일을 업로드 한다. 파일 이름은 공백이 없어야 한다.

 

Continue to Mint 버튼을 누르고 NFT의 이름과, 설명을 자유롭게 입력한다.

Maximum supply 는 NFT로 생성될 prints의 수이며, 각 NFT는 번호가 매겨진 edition이다.

Attributes 는 해시태그같은 개념인 것 같다. "background: blue", "eyes: closed", "mouth: smoking" 이런 형식으로 적는다고 한다.

 

Continue to Royalties 버튼을 클릭하자. 로열티 비율을 설정하면 Creator가 향후 해당 NFt에서 발생하는 모든 판매의 일부를 받게 된다. 다른사람이 NFT 생성에 참여했다면 Creator를 추가해야 한다.

 

이제 NFT를 launch 할 시간이다!

브라우저 지갑에 SOL이 충분한지 확인하고 Pay with SOL 버튼을 클릭한다. 메타데이터(제목, 설명, 속성 등)가 Arweave에 저장되기 때문에 NFT가 업로드되는 데 몇 분이 소요된다. 이것은 데이터를 영구적으로 저장하기 위한 블록체인 도구이다. Solana 체인 자체에 저장하는 것은 너무 비싸기 때문에 Solana의 NFT에는 Arweave에서 NFT 정보가 저장되는 위치에 대한 링크가 포함된다.

 

이제 NFT 민팅이 끝났다. 이제 Solana 네트워크에서 액세스 가능한 NFT를 가지게 되었다.

 

나의 NFT는 My Items 페이지에서 확인할 수 있다. Phantom지갑의 Collectibles 탭에서도 확인이 가능하다. 이미지와 메타데이터가 동기화되는 데 시간이 조금 걸릴 수 있다.

7. BONUS: List the NFT for sale

만든 NFT를 DigitalEyes 에 올려보자.

 

지갑을 연결한 후 Sell 탭으로 이동해서 팔고 싶은 나의 NFT를 클릭하고, 얼마에 팔 건지 가격을 결정한 후 List 한다.

 

NFT를 등록하기 위한 transaction을 승인한다. 이때도 비용이 지불되기 때문에 내 지갑에 충분한 SOL이 있어야 한다.

 

이제 우리의 NFT가 marketplace에 올라간 것을 확인할 수 있다! "Unverifeyed" 라는 label이 붙어있을텐데 이것은 DigitalEyes에서 NFT를 아직 verify하지 않았기 때문에 기존 컬렉션의 가짜 사본인지 확신할 수 없다는 의미이다.

Conclusion

이 튜토리얼에서는 발행을 위해 Metaplex를 사용하고 상장을 위해 DigitalEyes를 사용하여 Solana 블록체인에서 자체 NFT marketplace과 NFT를 만들었습니다. 더 많은 NFT를 발행하고, 자체 시장에 나열하고, 토큰을 다른 지갑으로 보내고, 컬렉션을 만드는 등 자유롭게 실험을 계속하십시오. (갑자기 번역체.. 구글 번역 복붙함..)

 

---

그냥 메타플렉스에서 제공하는 코드를 그대로 가져다 써서 build랑 deploy만 한 실습이었다. 그래도 NFT를 민팅하는 과정을 한 번 훑을 수 있어서 튜토리얼로 좋았다. 다음번엔 실제로 NFT를 한 번 사봐야겠다.. 그리고 이 metaplex 코드도.. 참고할 수 있지 않을까?

 

또, 윈도우로 진행을 하려 해보니 수많은 오류와.. 설치해야 할 것들이.. 발생해서 역시 프로젝트 진행할 때는 ubuntu 환경에서 해야겠다는 다짐을 다시 한 번 하게되었고..

WSL2 의 기본 홈 디렉토리인 mtn/c/ 에서 발생하는 오류를 ^^ 알아서 루트 디렉토리에 다른 개발 폴더를 만들어서 거기서 진행하려 한다. 그래도 지금 확인해서 다행이다.. 휴.. 쉽지 않다..