이미지 조합으로 NFT 이미지 대량 생성 방법

NFT 이미지의 레이어를 만든 후, 만들어진 이미지들을 조합해서 고유한 NFT 이미지를 대량으로 생성하는 방법을 배워보자.

 

본 포스팅에서는 hashlips_art_engine라는 툴을 사용하는데, hashlips_art_engine 툴은 제공된 레이어를 기반으로 아트웍의 여러 인스턴스를 만드는 데 사용되는 도구이다.

 

 

NFT 조합 이미지 만드는 과정은 크게 두가지 단계로 나뉜다.

먼저 레어어를 기반으로 생성한 NFT 이미지를 만드는 단계이고, 이를 여러 인스턴스 조합으로 고유의 이미지를 대량으로 생성하는 단계이다.

 

---

 

1. NFT 이미지 만들기

 

•  NFT 이미지 만드는 방법은 이미지 편집툴이라면 어떤 툴을 써도 무방하다.
• 본 포스팅에서는 웹기반으로 무료로 사용이 가능한 figma 툴을 추천한다.

구글에서 figma로 검색하면 figma github 주소가 포함된 링크가 나온다. 사용 방법은 figma 웹사이트에서 온라인 강의로 배울 수 있습니다. 직관적으로 개발된 툴이라 기본적인 사용은 어렵지 않다.

https://www.figma.com/resources/learn-design/

Learn Design with Figma

 

2. hashlips_art_engine로 이미지 조합 후 NFT 이미지 대량 생성

 

먼저 hashlips_art_engine 다운로드 후 설치한다. 다운로드 방법은 구글에서 hashlips_art_engine 라고 검색하면 최상단에 github 주소가 나온다.

 

들어가서 Code - Download ZIP으로 zip파일을 다운로드한다.

 

hashlips_art_engine

 

 

hashlips_art_engine를 다운로드했다면, 홈페이지의 설치 가이드를 참고해서 다음 순서로 파일을 설치한다.

 

필요 설치 파일:

1. visual studio code

2. node js

3. npm install

 

visual studio code는 코드를 편집하고 컴파일하기 위한 편집 툴로 설치가 되지 않았다면 다운로드하여 설치하자.

 

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

1. visual studio code 

2. node js

3. npm install

 

visual studio code가 설치되었다면 컴파일을 위해 필요한 라이브러리인 node js와 npm을 각각 설치한다.

 

hashlips_art_engine

 

nodejs는 크롬용 자바스크립트 엔진으로, 다음 링크에서 다운로드 후 설치가 가능하다.

 

https://nodejs.org/ko/download/

node.js

Node JavaScript 플랫폼의 패키지 관리자인 npm의 설치는 visual studio 실행 후, 명령 prompt를 연다.

다음의 hashlips_art_engine의 설치 지침대로 npm install 명령으로 npm을 설치한다.

 

 

If you are cloning the project then run this first, otherwise you can download the source code on the release page and skip this step.Alternatively you can run this command if you have node installed.

 

npm install

 

 

visual studio code의 Project 코드로 돌아가서, 다음의 layerConfigurations를 수정해 준다.

 

constlayerConfigurations= [

  {

   growEditionSizeTo:5,

   layersOrder:[

      {name:"Background"},

      {name:"Eyeball"},

      {name:"Eye color"},

      {name:"Iris"},

      {name:"Shine"},

      {name:"Bottom lid"},

      {name:"Top lid"},

    ],

  },

];

 

layerConfigurations

 

 

일단 동작이 어떻게 되는지의 확인을 위해 실행을 해보자.

 

npm run build 명령으로 빌드를 실행하면, 다음과 같은 로그가 출력된다.

 

> hashlips_art_engine@1.1.1 build

> node index.js

Created edition: 1, with DNA: 9bbb5b6b181ea759599177d7b0416de3c1c6dddd

Created edition: 2, with DNA: a8d6ffa349fd27b3be266c9855ba3708b75f5d80

Created edition: 3, with DNA: 60c46c557c974bc61a1838eaaff68fdb0738723e

Created edition: 4, with DNA: 92d6f5150aead5820b188bc56464b5e1961b160b

DNA exists!

Created edition: 5, with DNA: 0ecc8dec487279abbeeb4e21b930cb6a4ae29706

 

또한 visual studio code의 좌측 build 카테고리를 보면 다음의 이미지 파일과 json파일이 생성된 것을 확인할 수 있다.

json파일은 각각의 이미지에 대한 메타 정보가 들어가 있다.

 

 

 

해당 이미지의 메타 데이터 정보를 수정하려면 'config.js'파일의 // General metadata for Ethereum부분의 해당 내용을 수정한다.

 

constnamePrefix="emoji sticker collection";

constdescription="own collection of emoji stickers";

constbaseUri=" ipfs://NewUriToReplace";

 

config 파일의 내용을 업데이트하려면, npm run update_info 명령어로 업데이트한다. 다음 로그처럼 업데이트가 반영되는 것을 확인할 수 있다.

 

> hashlips_art_engine@1.1.1 update_info

> node utils/update_info.js

Updated baseUri for images to ===> ipfs://NewUriToReplace

Updated description for images to ===> own collection of emoji stickers

Updated name prefix for images to ===> emoji sticker collection

 

실제 빌드된 json파일을 확인해보면, name과 description 필드가 업데이트되어 있다.

json파일

 

빌드까지 확인이 되었다면, 실제 생성한 이미지를 project의 layers 폴더에 넣는다.

테스트를 위해 Background와 eye라는 두 폴더에 여러 개의 이미지를 넣었다.

 

hashlips_art_engine

 

project의 src/config.js 파일에도 layerConfigurations의 각 필드를 수정한다. Background와 eye폴더에 이미지 layer가 들어갔으므로 Background와 eye로 각각 수정했다.

 

growEditionSizeTo 필드는 몇 개까지 이미지를 생성할지를 지정하는 필드로, 100개로 지정해 본다.

// If you have selected Solana then the collection starts from 0 automatically
const layerConfigurations = [
  {
    growEditionSizeTo: 100,
    layersOrder: [
      { name: "Background" },
      { name: "eye" },    
    ],
  },
];

 

빌드는 다음 두 npm run build 외에도 node index.js command로도 빌드 가능하다.

npm run build

or

node index.js

 

빌드 실행하면, project에서 build 폴더와 함께 images와 json 폴더가 생성된다.

100개의 png 이미지와 json 파일이 생성된 것을 확인할 수 있다.

 

NFT 이미지