💭 서론
교육 24일차
오늘은 NFT 프로젝트에서 백엔드 개발자로 근무하고 계시는 분께서 강의를 오셔서 NFT 발행 실습을 해보았다. 말이 잘 안 들리고 빨라서 따라가기 버거웠.. ㅎ ㅠ 아쉬웠던게 이건 이래서 하는 작업이다~ 이건 이러한 역할을 한다~ 같은 설명이 없어 그냥 따라하는 수 밖에 없던 것.. 코드 생김새가 대충 역할이 짐작가는 것들이긴 했지만 ㅜㅜ 그래도 어떤식으로 발행되는지 찍먹 할 수 있는 시간이었다.
✔️ 일반적인 NFT 민팅 절차
- 프로젝트 기획 및 NFT 아트 준비
- 분산형 저장소에 소스 업로드
- 블록체인 상에 NFT 발행 준비
- Web3 민팅 페이지 오픈
- 사전 마케팅 및 커뮤니티 오픈
- 멤버십 체결 및 연계 해택 발표
- 화이트리스트, OG 이벤트 발표
- 아트 리빌 (reveal)
아트 준비 기간에 많은 시간과 노력이 들기때문에 아트 준비를 늦추기도 한다.
위 절차에 따른 실습을 해볼 것임!
✔️ 아트 생성 방식
아트는 Generative Art와 Fine Art로 구분된다.
Generative Art는 준비된 레이어를 랜덤하게 조합하여 생성된다. 대량의 컬렉션(1천장~1만장 단위)이며 레이어 조합 발생 비율을 조정하여 레어 파츠를 지정할 수 있어 소유욕과 경쟁심을 유발한다. 두들즈, BAYC 등의 NFT가 해당됨.
Fine Art는 한 장씩 그려지는 것이다. 소량의 컬렉션(1장~100장 단위)이며 작품성에 가치를 둔다.
✔️ NFT 발행 실습
node.js와 VSCode가 필요하다. 설치되어 있으니 설명은 패스..
강사님 github에 접속해 코드를 다운로드
설치가 완료되었으면 압축 해제 후 VSCode에서 폴더를 연다.
그리고 VSCode 터미널에서 아래 명령어를 차례로 입력한다.
npm install canvas
npm install
npm run build
layers 폴더 안에 9가지 폴더가 있는데 이 안엔 랜덤으로 조합될 이미지 레이어 파일들이 존재한다.
폴더 안 파일들은 파일명이 위처럼 '특성명#등장비율'로 설정되어있다.
1부터 9까지의 폴더에서 이미지가 하나씩 랜덤으로 조합되어 9개의 이미지가 모여 최종 이미지가 생성되는데, 각 이미지가 가지고 있는 숫자들(#등장비율)을 모두 합하면 100이 된다.
랜덤 조합시 #등장비율/100의 비율대로 이미지가 등장하게 된다.
등장비율을 조정해 레어 파츠를 지정할 수 있다.
config.js 파일 분석
config.js 파일을 보면 위 두 상수가 보인다.
EDITION_SIZE는 생성할 소스의 개수를 뜻하므로 이 프로젝트에선 100개의 이미지를 생성한단 뜻.
LAYERS_ORDER는 삽입한 폴더명을 쌓아올릴 레이어 순서대로 입력한 것이다.
순서가 틀어지면 이미지 정렬 순서가 무너지게 됨
BACKGROUND는 배경색을 생성하는 코드다.
generate를 false로 주면 배경이 투명하게 생성되어 직접 만든 배경을 적용할 수 있다.
📍 IPFS에 소스파일 업로드하기
IPFS? (InterPlanetary File System)
- 분산형 파일 저장 프로토콜이다.
- P2P 통신으로 여러 노드에서 조각을 수집함
- 일부 노드에 장애가 있어도 서비스가 가능함
- 전송 비용을 절감할 수 있다.
NFT Storage에 접속해 계정을 생성하고 로그인 한다. 그럼 아래와 같은 Files 페이지로 이동하게 된다.
API를 이용해 파일을 한 번에 업로드 할 것이다.
상단 메뉴 중 API Keys로 이동해 New Key 버튼을 눌러 key를 생성한다.
create 버튼을 누르면 위처럼 Key가 생성된다.
생성된 키의 Actions-Copy 버튼을 눌러 키값을 복사한다.
복사한 키는 store.mjs 파일을 열어 API_KEY 상수에 붙여준다.
파일 저장후 터미널에 node store.mjs 명령어를 입력해 파일을 실행한다. 오류가 나지 않으면 완료된 것!
오류가 나지 않았다면 Files 페이지에 들어가면 위처럼 파일이 업로드된 것을 확인 할 수 있다.
이미지 파일 100개가 하나의 CID로 업로드된 것이다.
이제 Actions-Copy IPFS URL을 클릭해 URL을 복사해준다.
addr.mjs 파일의 IPFS_BASE에 복사한 IPFS URL을 붙여넣는다.
그리고 터미널에 node addr.mjs 명령어로 파일을 실행 후 오류가 나지 않으면 완료!
storejson.mjs 파일을 열어 아까 발급 받은 API KEY를 다시 복사하여 입력한다.
그리고 터미널에 node storejson.mjs 명령어를 입력해 파일을 실행한다.
Files 페이지에 업데이트 된 것을 확인
📍 블록체인에 NFT 스마트 컨트랙트 발행하기
카이카스를 다운로드 후 시드문구까지 입력해준다.
우리는 실제 발행이 아닌 테스트용, 실습이기 때문에 상단의 메인넷 버튼을 눌러 baobab 테스트넷으로 전환한다.
▶️ 테스트용 클레이튼 발급 받기
해당 링크로 접속 후 지갑 주소를 복사하고 붙여넣은 뒤 KLAY Balance는 0으로 그대로 두고 Run Faucet을 누르면 테스트용 150 KLAY를 받을 수 있다.
▶️ 스마트 컨트랙트 발행하기
* 클레이튼 리믹스로 접속한다.
contract 폴더에 새파일을 생성한다. (안에 있는 모든 sol 파일들은 모두 삭제해도 무방)
이 파일 코드를 복사 해서 붙여넣고 버전 0.5.17로 컴파일한다.
🔑 개인 지갑키 복사하기
디플로이 하려면 지갑 키가 필요하다.
카이카스 지갑을 열어 상단 계정 별명을 클릭한다.
지갑키 관리를 클릭하고 비밀번호를 입력하고 지갑키 내보내기를 클릭한다.
그러면 개인키가 등장~~
다시 리믹스로 이동해서 Environment는 Baobab으로 변경해준다.
account에 방금 복사한 개인키를 붙여넣는다.
CONTRACT는 KIP17NFTToken으로 변경한다.
DEPLOY에서 name과 symbol을 입력하는데 name은 토큰 이름, symbol은 코인 축약어이다.
▶️ NFT 민팅 사전 준비
다시 nft storage의 Files 페이지에서 업로드 했던 이미지 중 용량이 작은 파일의 IPFS URL을 복사한다.
스마트 컨트랙트의 setBaseURI와 setNotRevealedURI에 복사한 주소를 입력하는데 마지막에 슬래시(/)를 붙여준다.
setupSale을 위와 같이 설정한다.
- newAntibotInterval: 연속 시도 방지 지연 시간. 봇을 통한 불공정 민팅을 방지한다.
- newMintLimitPerBlock: 한 번의 트랜잭션에 최대로 민팅할 수 있는 개수
- newMintLimitPerSale: 이번 민팅 기간 동안 한 지갑이 최대로 민팅할 수 있는 개수
- newMintStartBlockNumber: 이번 민팅 기간이 시작되는 블록 높이
- newMintIndexForSale: 이번 민팅 기간에 최초로 민팅될 NFT의 번호
- newMaxSaleAmount: 최대 NFT 개수 제한
- newMintPrice: 민팅 가격 (설정할 땐 클레이튼에 따랐음..)
setPublicMinEnabled의 값을 true로 입력하고 transact한다.
퍼블릭 민팅 설정값을 불가능에서 가능으로 변경해준 것이다.
📍 민팅 페이지 오픈하기
코드를 다운로드 하고 VSCode에서 해당 폴더를 연다.
config.js 파일에서 CONTRACT_ADDRESS를 리믹스에서 디플로이한 컨트랙트 주소를 복사해 붙여넣는다.
📍 민팅 페이지 배포하기
netlify에 접속한다.
Sites 메뉴에서 워크스페이스 폴더를 드래그&드랍 해준다. 그럼 사이트가 생성 됨!
Connect Wallet 버튼을 누르면 카이카스 지갑과 연동되고 민팅 가능 여부가 화면에 표시된다.
📍 거래소에서 프로젝트 관리하기
opensea 테스트넷에 접속해 지갑을 연결하고 서명도 해준다. (sign up)
상단 메뉴의 우측 프로필 버튼을 누르면 민팅에 성공한 NFT 목록을 확인할 수 있다.
NFT 상세 페이지에서 Refresh metadata를 눌러 부가 정보 연동을 요청할 수 있다.
▶️ 프로젝트 정보 및 수수료 설정하기
상단 메뉴 프로필 버튼의 My Collections에서 이름, 로고 이미지, 수수료 등을 설정할 수 있다.
Earnings 탭에서 거래 수수료를 설정할 수 있으며 최대 10%까지 설정 가능하다.
'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글
BM 기획 프로세스 (0) | 2023.06.12 |
---|---|
비즈니스 기획하기 (0) | 2023.06.12 |
CSS 기초: 미디어쿼리, transition / 사례로 보는 NFT (0) | 2023.06.07 |
NFT 종류와 민팅, 화이트리스트 (0) | 2023.06.02 |
블록체인 게임, 메타버스 (0) | 2023.06.01 |
댓글