NFT 민팅사이트 만들기

Bosees·2022년 7월 5일
4

블록체인

목록 보기
2/2
post-thumbnail

Intro

최근 회사에서 NFT 프로젝트를 진행하기로 결정이 났다. 회사 인원이 부족한 만큼 개발쪽과 관련한 부분은 내가 전부 담당하기로 결정이 되고, 결과물이 나오기 까지 다사다난했던 경험이었다.

개발을 시작하기에 앞서

NFT 시장의 트랜드가 어떻게 변했는지 리서칭을 시작했다. 아니 근대 왠걸...
예전에 NFT의 대해서 어느정도 알고 있었지만 그건 옛날 얘기였다. 최근 NFT 붐이 일어나면서 다양한 마케팅 방법과 테크닉들이 OpenSea 라고하는 유명한 마켓플레이스에서 범람하고 있는 상황이었다. 우리의 서비스에 맞는 기능은 무엇일까? 고민끝에 결정하게 되었는데,

  • Reveal이라고 하는 미스터리박스를 오픈하는 기능
  • Whitelist를 만들어 정해진 유저들이 먼저 구매할 수 있게 해주는 기능
  • 커뮤니티에서 활발한 활동을 하는 사람들에게 티켓을 나누어주고 티켓을 통해 NFT를 민팅할 수 있는 기능
  • 이더리움 네트워크에 부담스러운 가스비를 해소할 수 있는 폴리곤 네트워크를 채택
  • 결제 통화는 폴리곤 Matic이 아닌 wETH를 사용해 민팅하게 하는 기능

등이 있었다. 정책이나 마케팅적인 요소를 이해하는데 적지않은 시간이 들었었다. 그만큼 블록체인 업계는 트랜드의 변화가 너무 빠르기 때문에 항상 패러다임에 대해서 많은 리서칭이 필요하다고 느낀 순간이었다.

개발환경은 어떻게 구성했나?

요즘은 솔리디티가 v0.8 버전 이상 나오기도 했고 NFT와 관련된 토큰 표준 ERC-1155 등 다양한 기술들이 나열된 상황이었는데. 너무 구식이 아닌 최근에 쓰는 기술들을 많이 사용해보자고 결정했다. 어떤 것들이 있었냐면,

Blockchain (Polygon)

  • Proxy pattern
    내가 배포한 스마트 컨트랙트의 로직단을 수정해야할 상황이 왔을땐, 새롭게 재배포를 해야하는데, 업그레이드 가능한 구조로 변경하여 어떤 문제가 발생 했을때 대응을 할 수 있게 구성했다. 내부적으로 동작되는 원리는 델리게이트 콜을 통한 state를 가지고있는 프록시 컨트랙트와 로직단 컨트랙트를 핸들링 하는 방식이라고 보면 된다.

  • IPFS
    조합된 이미지와 메타데이터는 신뢰성을 좀 더 보장하고 영속성을 증명하기 위해 분산 저장 파일 시스탬을 사용. NFT.storage 라는 파일코인의 API를 사용해 간편하게 사용했다.

  • Hardhat (과거엔 Truffle을 애용했었음)
    배포와 테스트, 컴파일 등을 할 수 있도록 해주는 하드햇 프로그램을 사용했다. truffle과 차이점은 Harthat이 테스트 환경을 제공한다는 점이다.

  • Ethers.js (web3.js 상위 호환)
    web3.js보다 좀 더 적은 코드로 API 호출이 가능하고 signing 하는 로직 자체가 단순해서 채택함.

Client

  • React.js
  • Recoil
    기존에 Redux를 사용했었는데. 코드자체가 매우 복잡해지는 문제점이 마음에 안들어 Recoil을 사용함.
  • Styled-components
    사실 Tail-wind를 사용해볼려고 헀지만 다른것들 배우기도 너무 많은 시간을 들여야 했던 상황이었에 기존에 쓰던 라이브러리를 사용함
  • Metamask
    블록체인에서 가장 유명한 지갑.

Server

  • Whitelist Merkle proof API
    화이트리스트를 검증하기 위해 서버단에서 한번 머클 트리를 만들어 줘야하는 작업이 필요했었다.

  • Token id hashing API
    현 NFT의 문제점인 미리보기 이슈에대해 무결성을 증명할려고 넣은 기능.

Script

  • Hashlips Art Engine
    이미지와 메타데이터를 생성해주는 스크립트. 기존 기능 이외에도 생성한 이미지들이 어떤 비율로 만들어 졌는지 통계를 생성하는 기능과, 토큰 아이디를 통한 파일 이름 암호화 등등 내 입맛에 맞는 기능을 추가해서 사용함.

  • OpenSea Metadata Refresh Bot
    오픈시 캐시서버가 바로바로 반영이 안되기 때문에 봇을 통해 백그라운드에 실행 할 수 있도록 했음.

전체적인 아키텍쳐는 다음 사진과 같이 구성하였다.

구현하면서 느낀점

사실 내용은 간략해 보이지만 구현하면서 너무 많은 어려움들이 있었다. IPFS의 개념이라던가 각종 라이브러리 숙지, 솔리디티 프록시패턴, aws의 로드밸런싱 등 여러 개념들을 배운 좋은 기회였다.

profile
블록체인 프론트엔드 개발자

2개의 댓글

comment-user-thumbnail
2022년 9월 18일

안녕하세요, 서브밋(submeet.xyz)이라는 사이트를 담당하고 있는 Brooklyn이라고 합니다.
혹시 실례가 안된다면 커피챗 등을 통해 관련하여 질의응답 등을 나누고 싶은데 괜찮으실까요?
제 메일 주소는 submeet.music@gmail.com 입니다. 감사합니다.

답글 달기
comment-user-thumbnail
2022년 12월 19일

안녕하세요. 저도 괜찮으시다면 카카오톡 오픈챗등을 통해 질의응답 등을 나누고 싶습니다.
괜찮으시면 h1225699@gmail.com 이쪽으로 연락 부탁 드립니다. 감사합니다.

답글 달기