Guides

(10mins) NFT Minting in Luniverse

루니버스 NFT 민팅 튜토리얼에 오신걸 환영합니다! 🙌
이 튜토리얼에서는 루니버스 NFT API를 사용하여 NFT를 발행해봅니다. NFT API를 사용하면 스마트 컨트랙트를 직접 구현하지 않고도 손쉽게 NFT를 민팅 할 수 있습니다.

Suggest Edits

이번 튜토리얼에서는 Frontend인 Demo Web 코드를 제공합니다. 가장 먼저 루니버스 사이드 체인에 NFT 스마트 컨트랙트를 배포한뒤, 예제로 제공된 Demo Web을 구동하고, NFT API를 호출하여 스마트 컨트랙트의 민팅 기능을 실행합니다.

튜토리얼은 다음 순서에 따라 진행됩니다.

  1. 개발 환경 셋팅
  2. 루니버스 NFT 관련 설정 진행하기
  3. 지갑 계정 생성하기
  4. Input Data 및 Metadata로 NFT 민팅하기

1. 개발 환경 셋팅

Luniverse Console 가입 및 Testnet 연결

Luniverse Console로 이동하여 회원 가입을 진행합니다.

회원가입이 완료되었다면 아래 링크를 참조하여 Luniverse Testnet에 연결합니다.
Luniverse Testnet 연결 가이드


NodeJS & NPM 설치

NodeJS는 자바스크립트 런타임 환경이며, 아래 공식 홈페이지 링크를 클릭하여 자신의 운영체제에 맞는 파일로 다운로드 및 설치합니다.

(NodeJS 최신 버전 다운로드 받기)

❗️꼭 LTS의 최신 버전으로 받아주세요! 일반 최신 버전은 튜토리얼 진행시 에러가 발생할 수 있습니다.

NodeJS 설치가 완료 되었다면, 버전이 18버전 이상인지 확인합니다. 설치에 포함되어 있는 NPM 버전을 함께 확인할 수 있습니다.

node -v
# v18.16.1
npm -v
# 9.8.1

Visual Studio Code 설치

이 튜토리얼에서는 Visual Studio Code (VS Code)를 사용합니다. 기존에 사용하던 IDE가 없다면 아래 링크를 클릭하여 VS Code 설치를 권장 드립니다.

Visual Studio 최신 버전 다운로드 받기


Metamask 설치(선택 사항)

EOA를 관리하기 위한 지갑 어플리케이션이 필요합니다. 아래 링크를 클릭하여 Metamask 지갑을 설치할 수 있습니다.

메타마스크 지갑 최신 버전 다운로드 받기


Demo Web 코드 다운로드 받기

아래 Github 링크를 클릭하여 NFT Demo Web 구동을 위한 샘플 코드를 다운로드 받으세요.

[Github] NFT Demo Project

VS Code로 nft-demo 폴더를 열면 아래와 같은 파일 구조를 확인하실 수 있습니다.


터미널을 열고 npm 모듈을 설치합니다.(터미널 여는 단축키: ctrl + `)

npm install

모듈을 설치한 후에는 node_modules 폴더가 생성됩니다.


VS Code 터미널 창에 아래 명령어를 입력하여 로컬 서버를 실행하세요.

npm run dev


서버가 실행되면 표기된 URL(http://localhost:[port])을 클릭하거나, 웹 브라우저에 해당 주소를 입력하여 접근합니다. 위의 과정이 잘 완료되었다면 아래와 같은 메인 화면이 나타납니다.


루니버스 NFT 관련 설정 진행하기

API 호출을 위한 API Key 설정하기

루니버스 콘솔(https://console.luniverse.io/)에 접속 합니다. Luniverse API Key페이지를 참조하여 API Key를 생성합니다.

💡API key 생성 시 반드시 NFT API 권한을 선택해 주세요.

DEMO 웹의 우측 상단 메뉴에서 AuthToken 메뉴를 클릭하여 발급받은 API Key를 입력한 뒤, [Submit]버튼을 클릭하여 API 인증 토큰을 발급받을 수 있습니다.


💡 관련 코드를 확인해보면 알 수 있듯이, [Submit]버튼을 누르면 Auth API를 호출합니다.

Expiry Value는 생성할 토큰의 유효 기간(초 단위)를 의미합니다. 기본값은 3600초로 되어있으며, 원하는 기간으로 설정할 수 있습니다. (최대 31536000초)

인증 토큰이 발급되면, 이를 설정 파일에 추가해야 합니다.


.env_template 파일 이름을 .env로 변경한 후, 파일을 열어 VITE_AUTH_TOKEN 에 해당하는 값 부분에 위에서 발급 받은 인증 토큰 값을 입력합니다.


NFT Contract 생성 및 Contract ID 입력하기

먼저 Luniverse NFT Contract 생성 가이드를 참조하여 나만의 NFT contract를 생성하세요.

콘솔 좌측 메뉴에서 NFT > Contracts 로 이동한 뒤 생성한 Contract를 클릭하여 Contract Detail 페이지로 이동합니다.


상단 URL 주소에 표기된 Contract ID를 복사하여 .env의 VITE_CONTRACT_ID에 입력해주세요.

위의 과정을 모두 진행하셨다면 .env 파일에는 아래와 같이 값이 입력됩니다.

// 아래 값은 예시입니다. 실제 입력 값은 아래 값과 입력값이 다를 수 있습니다.  
VITE_AUTH_TOKEN = "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJ2ZXIiOiJ2MSIsInRrbiI6IjkxMGJkYWU0ZWQzNjQyNmIiLCJ0cGUiOiJJQU0iLCJzbHQiOiJmMWYwYWQxNmY4NTMxZmExIiwiaWF0IjoxNjYzMDYwMzQ0LCJleHAiOjE2NjMwNjM5NDQsImlzcyI6Imx1bnZzOmJhYXM6YXV0aDpzZXJ2aWNlIn0.SNiN-sYhHm5j2o1arCIN1YoZk02IGBvFQAd3PNcvDfqcfJg7YqpPtbvKWK7nyliJfV7GXC7ZvP8nInRSliSc9A"    
VITE_CONTRACT_ID = "1475884144532610131"  
VITE_ACCOUNT_ADDRESS = "Your wallet address(public key). If Metamask is installed, this variable can be deleted"

📘

VITE_ACCOUNT_ADDRESS는 사용자 지갑의 공개키입니다.

현재는 해당 값을 변경하지 않고, 다음 세션에서 이 값을 설정합니다.


API Key에 IP 등록하기

이제 데모 페이지를 다시 열고 상단 메뉴의 MyPage를 클릭 하면, 에러 메세지가 나타난 것 확인할 수 있습니다. 이 에러는 현재 IP주소의 접근이 허용되지 않았기 때문에 발생한 에러입니다. 이를 해결하기 위해 현재 IP주소를 whitelist에 등록하겠습니다. 먼저, 에러 메세지에 나온 IP 주소를 복사해주세요.


다시 콘솔로 돌아와 이전에 생성한 API Key의 IP Whitelists 탭으로 이동합니다. 그리고 Register IP Whitelist 버튼을 클릭해주세요.


Register IP Whitelist 버튼을 클릭 한 뒤 이전에 복사한 본인의 IP 주소를 입력하고 [Create] 버튼을 눌러 해당 IP를 등록해주세요.


whitelist 등록이 설정 후 데모 웹을 새로고침 해주면, 아래와 같이 에러 메시지가 변경된 것을 확인할 수 있습니다.

이제 지갑 주소 등록을 진행해야 합니다.


3. 지갑 계정 생성하기

DEMO 구동을 위해서 하나 이상의 유효한 지갑 계정이 필요합니다. 실제 서비스에서는 사용자로부터 지갑 주소를 입력 받거나 지갑 어플리케이션을 연동하여 주소를 조회합니다. DEMO에서는 아래와 같이 두가지 방법을 통해 주소를 확인해보겠습니다.

(1) EOA를 생성하고 Metamask 등 지갑에 등록하여 연동한 후 Frontend에서 Metamask와 통신하기

(2) EOA를 생성하고 환경 변수로 등록하여 사용하기

EOA를 생성하는 방법은 같습니다. Local환경에서 스크립트 코드 등을 실행하여 생성하거나, 주소 생성 서비스를 제공하는 웹사이트를 사용하여 생성하는 것도 가능합니다. DEMO에서는 루니버스에서 제공하는 Environment Account 생성 기능을 활용해보겠습니다.

Account(Wallet) 가이드를 참고하여 EOA 계정을 생성하세요. 대상 환경은 위에서 확인한 Environment와 동일한 환경인 Luniverse LPOA 체인으로 선택합니다.


(1) EOA를 생성하고 Metamask 등 지갑에 등록하여 연동한 후 Frontend에서 Metamask와 통신하기

EOA 생성이 완료되면, 이를 Metamask에서 Import해야 합니다. 크롬(Chrome)환경에 설치한 Metamask를 실행하고, 우측 상단에 위치한 계정 프로필을 클릭하여 계정을 Import할 수 있습니다.


위 그림의 4에 콘솔에서 생성한 계정의 Private Key를 입력합니다.

Import가 완료되면, DEMO앱으로 돌아와 우측 상단 [Connect] 버튼을 클릭하세요!

Metamask 앱에서 아래와 같이 이 사이트를 네트워크에 추가할 것인지 묻는 화면이 보여집니다. [Approve] 버튼을 클릭하여 Luniverse Demo 네트워크를 메타마스크에 추가합니다. 이후 Switch Network 버튼을 클릭하여 방금 추가한 네트워크로 변경합니다.


DEMO사이트와 연결할 계정을 선택하고 Next 버튼을 누릅니다. 마지막으로 Connect 버튼을 클릭하면 계정 연결이 완료됩니다.


(2)EOA를 생성하고 환경 변수로 등록하여 사용하기

EOA 생성이 완료되면, 이를 .env 파일의 VITE_ACCOUNT_ADDRESS에 붙여넣기 합니다. 이를 통해 DEMO를 위한 일종의 설정 값으로 생성한 계정을 사용할 수 있습니다.

// 아래 값은 예시입니다. 실제 입력 값은 아래 값과 입력값이 다를 수 있습니다.
VITE_AUTH_TOKEN = "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJ2ZXIiOiJ2MSIsInRrbiI6IjkxMGJkYWU0ZWQzNjQyNmIiLCJ0cGUiOiJJQU0iLCJzbHQiOiJmMWYwYWQxNmY4NTMxZmExIiwiaWF0IjoxNjYzMDYwMzQ0LCJleHAiOjE2NjMwNjM5NDQsImlzcyI6Imx1bnZzOmJhYXM6YXV0aDpzZXJ2aWNlIn0.SNiN-sYhHm5j2o1arCIN1YoZk02IGBvFQAd3PNcvDfqcfJg7YqpPtbvKWK7nyliJfV7GXC7ZvP8nInRSliSc9A"
VITE_CONTRACT_ID = "1475884144532610131"
VITE_ACCOUNT_ADDRESS = "0x67694aee2a5385acbbbc9fc6ea165092e1a0674a"

Input Data 및 Metadata로 NFT 민팅하기

이제 NFT 민팅을 위한 준비가 끝났습니다. NFT API를 호출하여 민팅을 시작해볼까요?

먼저, 데이터 입력을 통한 NFT 발행을 시작해보겠습니다. DEMO 웹에서 사용자가 NFT 발행에 필요한 데이터를 모두 입력하고 Submit 버튼을 누르면, NFT API 서에 몇 가지 요청을 보내게 됩니다. 그 자세한 과정은 아래 시퀀스 다이어그램과 같습니다.


  1. 유저가 이미지 파일 업로드와 필요한 정보를 모두 입력하고 Submit 버튼을 누릅니다.
  2. NFT API 서버에 미디어 파일 업로드 요청을 보냅니다.
  3. 미디어 파일을 오프체인 DB에 저장합니다.
  4. 업로드한 미디어 파일의 URL을 반환합니다.
  5. 서버는 미디어 파일의 URL을 포함한 응답을 프론트 단에 전송합니다.
  6. 유저가 입력한 정보와 미디어 파일의 URL을 담은 메타데이터를 만듭니다.
  7. NFT API 서버에 메타데이터 업로드 요청을 보냅니다.
  8. 메타데이터를 오프체인 DB에 저장합니다.
  9. 메타데이터 ID를 NFT API 서버에 반환합니다.
  10. 서버는 메타데이터 ID를 포함한 응답을 프론트 단에 전송합니다.
  11. 메타데이터 ID와 함께 ERC-721 형식의 NFT 발행 요청을 NFT API 서버에 보냅니다.
  12. 메타데이터 ID를 스마트 컨트랙트에 저장하고 특정 토큰 ID와 매핑합니다.
  13. 매핑된 토큰 ID를 NFT API 서버에 반환합니다.
  14. 서버는 반환된 토큰 ID를 포함한 응답을 프론트 단에 전송합니다.
  15. 발행 결과를 유저에게 표시합니다.

위 과정을 실제로 실행해보겠습니다. DEMO 웹 페이지를 열고, 상단 메뉴에서 Mint를 클릭하여 Mint Page로 이동합니다. 아래 순서대로 필요한 값들을 입력해봅니다.

  • 이미지를 업로드합니다.
  • Metadata ID는 입력하지 않고, 나머지 필수 정보를 모두 입력합니다.
  • Properties를 입력합니다. (선택 사항)
  • Submit 버튼을 클릭합다.

API가 호출되고 실제 체인에 배포된 스마트 컨트랙트를 실행하여 NFT가 발행되는 트랜잭션이 발생하게 됩니다. 발행된 NFT의 온체인 데이터를 확인해볼 수 있습니다. 먼저, 생성된 NFT 아이템 카드를 클릭하여 아이템 정보 페이지로 이동합니다.


루니버스의 사이드체인 블록 익스플로러(Block Explorer)인 사이드 스캔을 통해 발행된 토큰의 정보를 확인해봅니다. 상세 화면에서 사이드 스캔 링크를 클릭하여 온체인 데이터를 확인합니다. 토큰 URI링크를 클릭하면 NFT의 metadata를 확인할 수 있습니다.


민팅에 필요한 몇가지 정보를 API로 입력하는 것 만으로 NFT 민팅을 쉽게 완료했습니다! 이제 다른 NFT API들을 활용하거나 직접 스마트 컨트랙트를 호출하여 발급한 토큰을 전송하거나 거래할 수 있습니다.


매번 토큰 생성에 필요한 정보를 입력하지 않고, 메타데이터(Metadata)를 생성한뒤 메타데이터 ID를 입력하여, 서로 다른 미디어에 대해 동일한 속성을 가지는 NFT를 여러개 반복적으로 민팅할 수도 있습니다. 이 방법으로 생성한 NFT는 edition number를 제외하면 이전에 생성한 메타데이터와 동일한 정보를 갖게 됩니다. 동작 순서는 어떻게 달라지는지 확인 해볼까요?


  1. 유저가 메타데이터 ID를 입력하고 Find 버튼을 누릅니다.
  2. NFT API 서버에 메타데이터 ID에 맞는 정보를 요청합니다.
  3. 서버는 DB에 메타데이터 ID를 전송합니다.
  4. 오프체인 DB은 메타데이터 ID와 매칭되는 메타데이터를 서버에 보냅니다.
  5. 서버는 메타데이터를 포함한 응답을 프론트 단에 전송합니다.
  6. 불러온 메타데이터를 Mint Page에 표시합니다.
  7. 유저가 메타데이터 내용을 확인하고 Submit 버튼을 클릭합니다.
  8. 메타데이터 ID와 함께 ERC-721 형식의 NFT 발행 요청을 NFT API 서버에 보냅니다.
  9. 메타데이터 ID를 스마트 컨트랙트에 저장하고 특정 토큰 ID와 매핑합니다.
  10. 매핑된 토큰 ID를 NFT API 서버에 반환합니다.
  11. 서버는 반환된 토큰 ID를 포함한 응답을 프론트 단에 전송합니다.
  12. 발행 결과를 유저에게 표시합니다.

위 튜토리얼에서 생성한 메타데이터 ID를 입력하여 전체 데이터의 입력 없이 NFT 민팅을 동일하게 진행 할 수 있습니다. How to Mint Multi-edition NFT API 가이드를 참고하여 메타데이터를 활용한 Multi-edition NFT를 발행해보세요.


튜토리얼을 마치며

어떠셨나요? 루니버스의 NFT 기능을 통해 쉽게 NFT 컨트랙트를 배포하고, 토큰을 생성해보았습니다. 각 API에 대한 자세한 사용법은 예제 코드의 API 호출부와 함께 API Speicfication 페이지를 참고해주세요. 이를 응용하여 NFT 민팅을 위한 다양한 도구를 개발하실 수 있습니다. 튜토리얼이 흥미있으셨다면, 다른 코스도 체험해보세요!

Updated about 1 year ago