🪙 NFT 민팅 절차
📍 스마트 컨트랙트란?
블록체인 위에서 정해진 알고리즘대로 기능을 수행하는 프로그램
코인 및 토큰의 입출납을 통합할 수 있다
→ NFT 전송, 퍼블릭 민팅, 민팅 설정, 권한 관리, 개별 NFT 정보, 발행된 NFT 수, 민팅 설정값 등등 모든 것이 NFT 스마트 컨트랙트 안에 포함
📍 일반적인 NFT 민팅 절차
프로젝트 기획 & 아트 준비 → 분산형 저장소에 소스 업로드 → 블록체인 상에 NFT 발행 준비 → Web3 민팅 페이지 오픈 → 사전 마케팅 및 커뮤니티 오픈 → 파트너십 체결 및 연계 혜택 발표 → 화이트리스트, OG 이벤트 → 아트 리빌
NFT 용어가 어려워서 찾아본 블로그
https://m.blog.naver.com/duswnswlstlf/222628473624
📍 아트 생성 방식
Ex) 1000개의 NFT로 구성된 컬렉션을 발행한다면!
➡️ 이미지파일 1000개, 속성 파일 1000개가 필요하다
✔️ Generative Art
→ 레이어 조합 생성, 컬렉션 규모: 대형(1000~10000단위), 커뮤니티나 유틸리티 형성
✔️ Fine Art
→ 한 장씩 드로잉, 컬렉션 규모: 소형(1~100단위), 작품성이 있다
🍔 NFT 소스 파일 생성과 업로드
📍 Generative Art 생성하기
→ 준비된 레이어를 랜덤하게 조합하여 생성된 이미지
✔️ 서로 다른 NFT 이미지를 대량으로 생성 가능하다!
✔️ 발생 비율 조정 가능함 → 레어 파츠 지정 가능 (소유욕, 경쟁심 유발)
📍 실습
1️⃣ Generative Art 코드 복제
https://github.com/LgcLazyboy/hashlips_art_engine
깃허브에서 코드 받아오고 vscode로 실행시키기!
터미널 콘솔에
npm intall canvas➡️ canvas 라이브러리 설치
💡canvas 라이브러리
그래픽을 그릴 수 있게 해주는 api인 것 같다 canvas 엘리먼트를 통해 그래픽을 그려줌
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API
npm install입력
그런데 canvas 라이브러리 설치 후 npm install 명령어를 따로 또 써주는 이유는 모르겠다
수업 끝나기 전에... 물어볼 용기가 생기길... 잊지 말기... (잊었는데걍 중요한거 아니겟지 생각합시다)
2️⃣ Generative Art 코드 실행
npm run build입력
입력 후 위와같이 터미널 콘솔 창에 image와 jason 파일이 잘 생성되었는지 확인해준다! (코드 디렉토리의 build/images, build/jason 확인)
3️⃣ Generative Art 코드 응용
특성명#등장비율로 파일명 설정한다
→ 30 + 1 + 15 + 15 + 20 + 4 = 100 (등장 비율)
➡️ 랜덤 조합 시 위 비율대로 등장한다는 것이다
(Doge Cup이 진짜 레어템... 갑자기 겁나 갖고싶어짐 이런 심리를 자극하는거구나... 납득 완.)
➡️ 분모가 꼭 100일 필요는 없다
config.js
✔️ const EDITION_SIZE = 100; → 이미지 파일 총 100개 (생성할 소스의 개수)
✔️ const LAYERS_ORDER = [ ... ] → 삽입한 폴더명을 코드 디렉토리의 layers 폴더와 일치하게 삽입해주기! 순서를 바꿔서 빌드하면 이미지가 살짝 망가진다!
✔️ NAME_PREFIX - 거래소에 표시될 NFT명
✔️ DESCRIPTION - 거래소에 표시될부가 설명
✔️ BACKGROUND - 배경색 랜덤 생성설정
📍 NFT 파일 조회 구조
거래소, 스코프, 응용 서비스등 실제 활용처 ➡️ 블록체인 내 NFT 조회 ➡️ 부가정보 파일 조회 ➡️ 이미지 파일 조회
📍 IPFS (InterPlanetary File System)
분산형 파일 저장 프로토콜
( HTTP - 중앙 집중형)
✔️ P2P 통신으로 여러 노드에서 조각 수집
✔️ 일부 노드에 장애가 있어도 서비스 가능
✔️ 전송 비용 절감
✔️ 일반인들을 노드에 참여시킬 유인이필요하다
쓰는 이유? 공짜임 그래서 여기다 올림ㅋㅋㅋ
📍 IPFS에 소스 파일 업로드
디렉토리 jason 파일 확인 → image 경로 확인 (나중에 바뀜)
1️⃣ IPFS 가입
나만 네이버 로그인 안돼... 깃헙 계정으로 하면 잘 됩니다... 후 자꾸 내꺼 안돼서 강사님의 어그로를 끄는거 너무 부끄러웠따...
2️⃣ API KEY 생성
처음엔 아무 파일도 없지만! API Keys 들어가서 new key 생성 후 Key 복사!
3️⃣ 이미지 업로드
store.mjs
복사한 키를 const API_KEY에 붙여넣어준다.
터미널 콘솔에
node store.mjs명령어 입력
다시 페이지로 돌아와서 nft.storage의 Files에 업데이트가 되었는지 확인!
CID
하나의 CID 안에 100개의 사진이 묶인 것!
눌러보면 부여된 고유의 아이디를 확인할 수 있고 100개의 파일을 전부 확인할 수 있다
IPFS URL 복사 후
4️⃣ 부가 정보에 이미지 주소 입력
IPFS_BASE에 URL 주소 붙여넣기!
터미널 콘솔에
node addr.mjs실행
→ 각각의 jason 파일의 이미지 주소가 바뀜
5️⃣ 부가 정보 업로드
API Key 다시 복사한 다음에 storejason.mjs 파일에 붙여넣어준다.
터미널 콘솔에
node storejson.mjs실행
그리고 cmd창에 node storejason.mjs 입력해주면 IPFS에 json 파일 업로드 완.
6️⃣ 이미지 업로드
NFT 부가정보 파일까지 업로드가 된 상태인지 확인~
🍔 블록체인에 NFT 스마트 컨트랙트 발행
메인넷과 테스트넷의 차이
작동은 똑같지만! (자원이 덜 할당돼서 조금 느리긴 함)
메인넷에 있는 토큰은 상장이 되고 테스트넷은 상장이 안 된다는게 가장 큰 차이점~ (현금 교환성이 없다!)
📍 Kaikas 계정 생성-테스트넷으로 전환
https://chrome.google.com/webstore/detail/kaikas/jblndlipeogpafnldhgmapagcccfchpi
여기서 확장프로그램 설치 후 지갑 만들기(계정 생성)
짠~
테스트넷으로 전환
📍 테스트용 가짜 클레이튼 발급받기
https://baobab.wallet.klaytn.foundation/faucet 접속
지갑 주소 복붙하고 150 KLAY 받기~
📍 Remix IDE
https://ide.klaytn.com/
이 링크로 들어가서 컨트랙트를 작성할 것이다
📍 스마트 컨트랙트 파일 배치
https://github.com/LgcLazyboy/KIP17NFTContract/blob/main/KIP17NFTTokenFlatten.sol
미리 구현되어 있는 솔리디티 파일을 긁어와서
📍 스마트 컨트랙트 발행
버전 맞춰준 다음 컴파일!
스마트 컨트랙트 실행을 위한 지갑 개인키 획득
지갑 연결하는 과정! 지갑 키 내보내고 (이것도 보안 중요) Account + 버튼을 눌러서 연결!
✔️ 연결 후에 죄측 5번쨰 Klaytn 접속하고 환경을 Baobab으로 바꿔준다
(실제 발행할 때에는 Cypress 메인넷으로 설정함)
✔️ Account 영역의 버튼클릭 후 지갑 개인 키 입력
✔️ Contract를 KIP17NFTToken으로 변경한다
➡️그리고 Deploy!
✔️ Name과 Symbol을 입력하고
transact
Name은 NFT 프로젝트 명, Symbol은 축약어 심볼 입력
- Deployed Contracts에서 스마트 컨트랙트의 주소 확인
- 각종 함수들 확인
📍 NFT 민팅 사전 준비
이렇게 두 가지 함수만 건드릴 거임 (transaction)
setBaseURI에 부가정보 파일의 IPFS URL 입력 후 transact
텍스트 마지막에 꼭 /를 삽입해야 한다
오늘 reveal은 안 할거라서 여기까지 IPFS URL 복붙해준다 (/ 붙여야함)
몇 가지 함수들
BlockNumber: 아씨 머랬지... 까먹음 나중에 검색해서 적기 ㄱ... 는 실패... 뭘 얘기해주려고 하셨는지 까먹었다 ㅠ... 뭔가 통용되는 단위같았는데? 이래서 정리는 꼬박꼬박 안 밀리고 해야 함
newAntibotInterval- 연속 시도 방지 지연 시간 (bot을 이용하여 불공정 민팅 방지)
newMintLimitPerBlock- 한 번의 트랜잭션에 최대로 민팅할 수 있는 개수
newMintLimitPerSale- 이번 민팅 기간동안 한 지갑이 최대로 민팅할 수 있는 개수
newMintStartBlockNumber- 이번 민팅 기간이 시작되는 블록 높이
newMintIndexForSale- 이번 민팅 기간에 최초로 민팅될 NFT 번호
newMaxSaleAmount- 최대 NFT 개수 제한
newMintPrice- 민팅 가격 (peb 단위, 10^-18 KLAY)
마지막으로 setPublicMintEnabled를 true로 입력한 후 transact!
(= 퍼블릭 민팅 설정값을 불가능에서 가능으로 변경하는 것)
민팅 사전 준비는 이렇게 하면 된다... 잘 따라해야 함
🍔 민팅 페이지 오픈
📍 코드 복제
https://github.com/LgcLazyboy/nft-minting-site
코드를 받아서 vscode로 열어줍니다~
📍 내 컨트랙트 연결
config.js
CONTRACT_ADDRESS부분에 복사해둔 컨트랙트 주소를 입력 후 저장
📍 웹 배포
https://www.netlify.com/ 접속한 후 회원가입을 한다!
'Drag and drop your site output folder here' 부분에 코드가 포함된 폴더를 드래그 앤 드랍 해준다! (난 이미 함)
✔️ 배포된 주소로 접속이 가능하다
✔️ Domain Settings에서 Edit site name으로 도메인 일부 변경 가능하다
지갑을 연결한 후 민팅 가능 여부를 확인해준다!
📍 거래소에서 프로젝트 관리하기
https://testnets.opensea.io/login?referrer=%2Faccount 접속 후 Kaikas 지갑을 연결한다
(실제로 발행할 때는 https://opensea.io/login?referrer=%2Faccount에서 발행함)
짠 나의 첫 번째 NFT!!
홈페이지에 들어가 지갑을 연동하면 민팅에 성공한 NFT 목록을 확인할 수 있다!
음... 세 번째 NFT는 실패한 것 같다... 왜 실패하죠... 8ㅅ8...
NFT 상세 페이지에 가면 Refresh metadata를 눌러서 부가 정보 연동을 신청할 수 있다.
📍 거래소 프로젝트 정보 및 수수료 설정
프로필을 클릭하여 MyCollections로 들어가서
- Edit collection: 프로젝트 부가정보 및 수수료 설정
- View earnings: 프로젝트 수수료 수익 내역
- Creator earnings 설정 시 거래 수수료를 최대 10%까지 분배받을 수 있다! (7.5%가 일반적)
📍 NFT 판매
팔아봅시다! (사실 가짜 클레이톤이라 못 팔지만...)
가격을 설정한 다음 Complete listing을 눌러준다
완료!
리스팅에 잘 올라갔음을 확인할 수 있다!
이렇게 첫 NFT 발행을 해봤다~ 재밌는 실습 시간이었다! 아직 모르는 단어, 개념이 많지만... 귀여운 햄버거 세트 발행 완료!
