전투코딩
[Blockchain] Klaytn 체인에서 Generative Art 방식을 사용하여 NFT 민팅해보기
개요
이번 포스팅에서는 Klaytn 체인 위에서 NFT 를 발행하고 조회하며
이를 분산형 저장소에 업로드하고,
간단한 민팅 페이지를 만들어 보는 실습을 해 보려고 한다.
먼저,
위 레파지토리에서 해당 소스코드를 Clone 해 로컬로 가져온다.
설치 및 실행
npm install canvas
Canvas 는 HTML5 요소를
Node.js 환경에서 사용할 수 있도록 해 주는 라이브러리 이다.
해당 라이브러리를 통해
JavaScript 코드에서 그래픽 작업을 수행하고 이미지를 생성 및 수정할 수 있다.
npm install
깃허브 레파지토를 로컬로 Clone 해 가져올 경우,
프로젝트 내부에 존재하는 .gitignore 파일로 인해
./nodemodule 폴더가 포함되지 않은 채 다운로드 된다.
이를 해결하기 위해
Git Clone 을 했다면 npm i 명령을 통해
프로젝트에(./package.json) 적용되어있는 라이브러리를 먼저 설치 해 주는것이 좋다.
npm run build
해당 명령을 통해 프로젝트를 실행한다.
./package.json 을 확인 해 보니
npm run build 명령을 실행 할 경우
index.js 를 실행하는 구조로 지정되어 있다.
명령을 실행하니
약 100 개의 무언가가 실행되며,
디렉토리 내부에는 build 디렉토리가 새로 생성된다.
디렉토리 내부에는 images 와 json 디렉토리가 생성되며
그 안에는,
각각의 고유한 이미지 파일과 json 형태의 데이터가 담긴 파일들이 생성된다.
등장빈도
대게 특성명 #등장빈도율로 파일명을 설정한다.
해당 파일 명을 살펴보면
분모를 100 으로 기준하여 설정할 경우 30 의 기준으로 등장하는 비율로 지정이 되어있다.
30/100, 1/100, 15/100, 15/100, 15/100, 20/100, 4/100
이 기준은
랜덤 조합 시 레어리티 빈도를 지정하여 등장하는 기준이다.
IPFS 에 소스파일 업로드하기
로그인을 위해 이메일을 입력 후 버튼을 클릭하면,
입력한 이메일에 cirnfim 메일이 온다.
로딩 화면이 끝나게 되면 페이지가 리다이렉션 되며,
로그인 버튼이 로그아웃 버튼으로 바뀌게 되며 로그인 상태로 변환된다.
API Key 탭 에서 새로운 Key 를 생성 해 준다.
이름은 임의로 설정 해 주었다.
발급받은 API 키를 store.mjs 내부에 넣어준다.
파일을 저장 후 터미널에서 node store.mjs 명령을 실행하면,
다음과 같은 데이터가 담긴 객체가 생성된다.
다시
파일이 추가 된 것을 볼 수 있다.
생성된 파일에 CID 에 접근해보면,
생성된 100 개의 이미지파일을 분산형 스토리지인 IPFS 에 업로드 한 것이다.
해당 이미지 정보를 build/json 내 1.json 을 확인 해 보면
image 가 복사한 IPFS URL 로 변경된것을 확인할 수 있다.
다음으로는 이미지에 해당하는 부가정보(메타데이터)를
IPFS 서버에 업로드하려 한다.
이미지 파일이 담긴 URL 을 복사하여
./addr.mjs 에 붙여넣어준다.
터미널에 node addr.mjs 실행 !
명령을 실행하게 되면
./build/json/1.json 의 image 주소가 변경됨을 확인할 수 있다.
마찬가지로 storejson.json 파일 내부에 api 키를 입력 해 준뒤
터미널에 node storejson.mjs 명령을 실행하면,
IPFS 서버에 파일이 추가로 생성 됨을 확인할 수 있다.
생성된 파일의 CID 로 접근 해 보면,
추가로 업로드 한 부가정보(메타데이터) 가
IPFS 서버에 업로드 됨을 확인할 수 있다.
Remix
이제 IPFS 에 업로드한 데이터를 기반으로
클레이튼 체인 위에서 스마트컨트랙트를 배포하려한다.
Wallet 은 KaiKas 를 사용하며
Baobab 테스트넷으로 전환하여 사용할 예정이다.
Faucet 과정 생략.
해당 레파지토리로 접근하여
KIP17NFTTokenFlatten.sol 컨트랙트를 Remix 에 불러온다.
불러온 컨트랙트를 컴파일 해 보면 에러가 발생하는데,
이 때
컴파일러의 버전을 0.5.17 로 변경 후 다시 컴파일을 진행
하단에 클레이튼 Deploy 탭으로 접근하여
KaiKas 개인키 주소를 입력 해 준다.
그리고 Contract 부분에는 확장 버튼을 눌러,
KIP17NFTToken 을 선택한다.
Deploy 탭을 확장하여
Name 과 Symbol 을 지정하여 Transact 버튼을 클릭한다.
Name -> NFT 프로젝트명
Symbol -> 비트코인 = BTC 등의 축약어 심볼
생성된 트랜잭션을 확인하고,
Deployed Contracts 에서
복사 버튼을 눌러 스마트 컨트랙트의 주소를 획득한다.
확장 버튼을 클릭하여
컨트랙트에 작성된 함수의 기능을 확인할 수 있다.
우리는 setBaseURI 함수를 사용할 것이며,
이곳에 Copy 한 IPFS URL 을 입력하고
주소 마지막에는 ‘/’ 를 삽입한 후 Transact 버튼을 클릭한다.
민팅된 NFT 의 판매 설정을 초기화 하는 함수인
setupSale 을 다음과 같이 입력 후 Transact 버튼을 클릭한다.
setPublicMintEnabled 함수를 true 로 입력 후 Transact 버튼을 클릭한다.
이 함수는,
퍼블릭 민팅 설정값을 불가능에서 -> 가능으로 변경하는 의미이다.
함수
newAntibotinterval- 연속 시도 방지 지연시간
- bot 을 통한 불공정 민팅 방지
newMintLimitPerBlock- 한 번의 트랜잭션에 최대로 민팅할 수 있는 개수
newMintLimitPerSale- 이번 민팅 기간동안 한 지갑이 최대로 민팅할 수 있는 개수
newMintStartBlockNumber- 이번 민팅 기간이 시작되는 블록의 높이
newMintIndexForSale- 이번 민팅 기간에 최초로 민팅될 NFT 번호
newMaxSaleAmount- 최대 NFT 개수 제한
newMintPrice- 민팅 가격 (peb 단위, 10^18 Klay)
프론트엔드
Deploy 한 컨트랙트를
웹에서 보여주기위한 작업을 한다면 해당 포스팅은 마무리 된다.
해당 레파지토리를 Clone 하여
config.js 파일 내부에 Deploy 한 컨트랙트의 주소를 넣는다.
해당 수정사항을 저장하고,
코드가 포함된 폴더를 Netlify 에 업로드 한다
해당 과정은 정적인 웹 페이지를 배포하는 과정으로
Netlify 서버에 해당 프로젝트를 배포한 경우
언제 어디서나 URL 을 통해 접근이 가능하다.
Drag & Drop 방식으로 해당 프로젝트 업로드
배포하지 않은 채
index.html로 접근하여 보니
Wallet 연결이 에러와 함께 되지 않음을 알 수 있었다.
민팅
프론트엔드 단 에서 민팅을 시도하면,
트랜잭션을 확인하고 민팅이 완료된다.
이 과정을 opensea testnet 에서 확인 가능하며
지갑 연결을 하고 mycollection 으로 접근하면 서명 메세지가 출력이 된다.
서명을 동의하고 난 후,
내 컬렉션 페이지에서 직전에 민팅한 NFT 를 확인할 수 있다.
해당 NFT 는 등록한 부가정보가 불러와지지 않은 상태이므로,
More - Refresh metadata 를 눌러 부가정보를 연동 시킬 수 있다.
그리고,
민팅된 NFT 는 Klaytn 체인 위에서 발행했기 때문에
Klayscope 에서 트랜잭션을 확인할 수 있다.
Reference
https://github.com/LgcLazyboy/KIP17NFTContract
https://github.com/LgcLazyboy/hashlips_art_engine
https://github.com/LgcLazyboy/nft-minting-site
https://nft.storage/