clonex nft 들을 after-effect 를 적용해서 clonex 사용자들의 참여를 이끌어 내기 위한 사이트

기술

• next, emotion, storybook, lottie-web, web3, sentry, skottie-wasm, ffpeg-wasm

page

• home
  • /
    • 배너와 함께 지갑연결할수 있는 페이지
  • /list
    • 사용자가 가진 clonex nft 들을 불러올 수 있는 페이지
  • /generator
    • 적용된 after effect효과를 qrcode생성, 비디오,이미지 로 다운 트위터에 공유할수 있는 페이지
• inspector
  • qrcode를 통해 연결되면 nft와 after-effect를 적용해서 보여주는 페이지

시연영상

after effect가 적용된 움직이는 파일(mp4, gif)을 다운받을수 있는 기능 구현

lottie-web 라이브러리를 쓸경우 svg로 랜더링해야 하는데 gif encoder https://www.npmjs.com/package/gif-encoder 를 사용하려는데 svg 로는 만들수 없었다.

svg 로 이미지 데이터를 먼저 얻어야 한다.

이미지 데이터 얻기

1. 라이브러리 사용

2. 직접 코드구현

   svg to image

1이 5초 2가 1초 정도 걸려서 2로 결정

우리의 Template는 최대프레임이 450 이여서 단순계산해봐도 프레임을 이미지로 변환하는데에만 450초 가 걸려서 이 방법으로는 다운로드 기능을 구현하기에는 무리가 있었다.

이 방법으로는 멈춰있는 이미지 다운로드할때에만 쓰기로 했다.

프론트에서는 포기하고 서버를 이용해서 움직이는 파일 다운 기능을 구현하려고 했다.