Project) Olchaeneez NFT Preview(23.08.19 수정)

 

 

🔗배포링크 / 🔗gif test 배포링크

작업기간: 2023.07.26 - 2023.08.04(2주)

 

# 회고 

좋은 기회로 GGNZ 이벤트 페이지를 제작하게 되었다. 개발에 앞서 Canvas를 학습하였지만, 역시나 쉽지 않은 작업이었다. gif 파일을 다루기가 쉽지 않아서 더욱 그랬다. 처음 계획대로 gif로 만들고 animated gif 형태로 저장하는 형태가 아닌 png로 레이어를 쌓아 customized Olchaeneez를 만들고 png 저장하는 형태가 되어 아쉬움이 많이 남는다. 현재는 sub domain을 따로 받아, gif로 작업할 수 있는 형태를 시도해보고 있는 중이다. 

 

## 기술적인 문제점 1 - canvas animated gif renderinng

canvas는 animated gif를 지원하지 않으므로 정적인 이미지만 보여주는 이슈가 있었다. 디자이너분께 받은 데이터는 animated gif이므로, 이를 렌더링 하기 위해 라이브러리를 사용해 해결하고자 했다. 하지만 추가적인 문제가 있었다. 단순히 하나의 gif 파일을 렌더링 하는 것이 아닌, 여러장의 animated gif 이미지를 canvas에 쌓아야 했고 쌓인 이미지가 동시에 특정 영역에 보여져야했다.
gif를 이렇게 다뤄본건 처음이어서 약 3일간 여러 gif라이브러리를 시도해보았다. 그 중 gifencoder의 경우, 각각의 이미지가 시간차를 두고 순차적으로 렌더링 되어 사용할 수 없었다. 여러 시도 끝에 gifuct와 fabric 라이브러리를 사용해 여러 animated gif 이미지를 렌더링 할 수 있었다.

 

## 기술적인 문제점 2 - canvas animated gif motion

23.08.04

 canvas에 gif animation을 렌더링하는데는 성공했지만, 각각의 gif 이미지들의 동작이 서로 일치하지 않는 문제가 발생했다. setTimeout을 사용해보기도 하고 이미지를 모두 가져온 후 이미지를 렌더링 하게 해 보기도 했지만, 문제가 해결되지 않았다(dev 환경에서는 setTimeout으로 문제를 해결할 수 있었지만, 배포시에는 다시 동일한 문제가 발생했다).
 추가로 canvas에 animated gif의 레이어가 쌓일 수록, 캐릭터의 동작이 느려지고 렌더링 되는데 시간이 오래 걸린다는 문제가 있었다. 해당 프로젝트를 위해 추가적으로 canvas에 대해 학습했지만, canvas 사용을 포기하고 figure tag에 이미지를 렌더링 하는 방식으로 문제를 해결했다.(23.08.04)

 

23.08.19 

 

 8월 말에 GGNZ 오프라인 행사가 있다는 말에, 다시 한 번 해당 문제를 해결하고자 도전해 보았다. 먼저, 부트캠프 멘토님께서 조언해주신 내용을 바탕으로 모든 이미지를 가져온 후에 canvas에 그리고자 했다. 이전에는 Promise.all()을 사용해서 canvas에 여러장의 animated gif를 그리는 시도를 했었지만, 동작이 제 각각이어서 이미지 자체가 불안정해보이는 문제가 있었다. 하지만 이번에는 fabric의 내장 함수인 'requestAnimFrame()'을 사용해 모든 gif 파일을 가져온 후 canvas에 그리는 코드를 짰다. 완벽하진 않지만, 이전보다 각 gif  frame이 따로 논다는 느낌은 줄었다. 

* fabric.util.requestAnimFrame
 브라우저에게 다음 화면 그리기가 일어나기 전에 특정 함수를 실행하도록 요청하는 기능으로 주로 애니메이션을 만들 때 사용된다.
 예를 들어, 우리가 움직이는 공을 화면에 그리고 싶다고 가정해보자. 공이 움직이는 것처럼 보이게 하려면 공을 계속해서 새로운 위치에 그려야 한다. 이를 위해 requestAnimationFrame을 사용하면, 브라우저가 화면을 다시 그리기 직전에 공을 새로운 위치에 그리는 함수를 실행하도록 요청할 수 있다.
 이런 식으로 requestAnimationFrame을 사용하면, 애니메이션이 부드럽게 보이게 할 수 있다. 왜냐하면 브라우저가 화면을 그리는 타이밍에 맞춰 애니메이션을 업데이트하기 때문이다.
 fabric.util.requestAnimFrame은 fabric.js 라이브러리에서 제공하는 requestAnimationFrame의 wrapper 함수다. 이 함수를 사용하면 fabric.js를 사용하여 Canvas에 그려진 객체들의 애니메이션을 쉽게 제어할 수 있습니다.

 

 

## 새로 배운 stack 1 -  폴더 내 모든 파일 import  (Webpack require.context)

layer 폴더 하위의 폴더 내에 있는 모든 이미지 파일을 import 해와야 했다. 파일 양이 보통 50개라 하나씩 import 하기에는 무리가 있었기에 이틀 동안 구글링하여 방법을 찾을 수 있었다. webpack의 require.context()를 사용해 특정 위치의 폴더에 접근해 하위의 모든 파일을 import할 수 있게해 주니, 정말 편리하게 사용했다.

const imgUrl: IImgUrl = {
    base: {
      base: require.context("/public/파일경로", false, /\.(png|gif)$/),
    },
...
}

const markdownContext: __WebpackModuleApi.RequireContext =
    imgUrl[상위폴더][하위폴더];

  const importAll = (requireContext: __WebpackModuleApi.RequireContext) => {
    const keys = requireContext.keys();
    const images: IModule[] = keys.map((key: string) => {
      return requireContext(key) as IModule;
    });

    return images.map((el) => el.default.src).slice(images.length / 2);
  };

  const importFile = () => {
    return require(`/파일경로)
      .default;
  };

  return  fileName ? importFile() : importAll(markdownContext);

reference) https://eams.dev/post/require-context

 

## 새로 배운 stack 2 -  canvas API (Github,  배포사이트)

본격적인 개발에 들어가기 전, canvas API에 대해 학습했다. 이전에 부트캠프에서 캔버스 강의를 수강하며 canvas API를 사용해 지렁이 게임을 만든 경험은 있지만, canvas API 자체가 생소해서 전체적인 이해보다는 강의를 따라가기에만 급급했다. 덕분에 이번에는 MDN  문서를 통해 전체적인 개념을 이해하고 노마드코더 강의를 통해 간단하게 토이프로젝트로 그림판을 구현해보았다. 

 처음에는 canvas, context 등 처음 다뤄보는 것들이라 생소했지만, 토이프로젝트에 하나, 둘 씩 기능을 추가하면서 직접 그림판의 기능을 구현할 수 있다는 점이 흥미롭게 다가왔다. 

* 기능 : 브러쉬 크기조절, 배경색 넣기, 지우개, 캔버스 비우기, 이미지 파일 넣기, 캔버스 이미지 저장

 

## 새로 배운 stack 3 -  canvas image 저장 - png

canvas에 animated gif를 에러없이 렌더링 하지 못해, 보다 안정적인 png 형태의 이미지를 화면에 보여주고 이를 사용자가 로컬에 저장할 수 있게 개발했다. 해당 부분은 html2canvas 라이브러리를 사용해 쉽게 구현할 수 있었다. 특히 이미지가 들어있는 tag가 canvas tag가 아니더라도 png 형태로 이미지를 저장할 수 있는 부분이 신기했다. 

if (figureRef.current) {
    html2canvas(figureRef.current).then((canvas) => {
      const link = document.createElement("a");
      link.download = "image.png";
      link.href = canvas.toDataURL();
      link.click();
    });
}

 

 

## 새로 배운 stack 4 -  canvas image 저장 - webm

animated gif를 canvas에 그린 후, animation 형태로 로컬에 저장할 수 있도록 시도해 보았다. 초기에는 ccapture 라이브러리 사용에 대해 알아보다가 stackoverflow에서 canvas capturestream과 mediaRecoder를 사용해 canvas에 그려진 animation을 webm 형태로 저장하고 있다는 글에서 힌트를 얻어 코드를 작성했다.

HTMLCanvasElement의 capturestream()을 사용해 canvas에 그려진 midia stream을 capture한 후 이를 video 형식으로 기록했다. 이후 chunks 배열에 담아 Blob객체를 생성한 후 사용자의 로컬에 저장하도록 했다.

const canvas = canvasRef.current as HTMLCanvasElement;
if (canvas) {
  const stream = canvas.captureStream(); // 캔버스에서 미디어 스트림을 캡처
  const mediaRecorder = new MediaRecorder(stream, { // 캡처한 스트림을 사용해 새로운 MediaRecorder instance 생성
    mimeType: "video/webm", // instance는 video/webm 형식을 비디오로 기록함
  });

  const chunks: Blob[] = []; // 기록된 비디오 데이터를 저장할 배열 생성
  
  // dataavailable 이벤트 핸들러 설정
  // 핸들러는 media data가 사용가능해질 때 마다 호출되어 데이터를 chunks 배열에 추가
  mediaRecorder.ondataavailable = (event) => {
    chunks.push(event.data); 
  };

// stop() 이벤트 핸들러 설정
// 미디어 기록이 중지될 때 호출되며, 이때, chunks 배열에 저장된 데이터를 사용해 새로운 Blob 객체를 생성 및 다운로드 링크 제공
  mediaRecorder.onstop = () => { 
    const blob = new Blob(chunks, { type: "video/webm" });

    const downloadLink = document.createElement("a");
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = "제목없음.webm";
    downloadLink.click();
  };

  mediaRecorder.start(); // 미디어 기록 시작

  setTimeout(() => {
    mediaRecorder.stop();
  }, 1600);
}

reference)

Record animation of canvas with a long time

 

 

## 새로 배운 stack 5 -  canvas image 저장 - gif

 webm 형태로 저장하는 것으로 test 페이지 개발을 마무리하려 했다. 하지만, 사용중인 아이폰 safari에서는 webm 파일을 다운로드할 수 없는것으로 보여졌다. 그래서 어쩔 수 없이 gif로 저장하는 형태로 다시 개발을 했다. webm의 경우 사용자가 저장버튼을 누르면 평균 1초 내로 canvas에 그려진 animation을 로컬에 저장할 있었다. 하지만, gif의 경우, 생각보다 긴 시간이 지난 후에야 animated gif가 그려졌기에, ux를 고려한다면, gif로 저장하는 것은 지양하고 싶었다. 하지만, 불가피했다.

gif.js 를 사용해 canvas의 animated gif를 저장하는 기능을 구현했다. 하지만 저장 버튼을 누르니 다음 에러가 발생했다. 

 Failed to load resource: the server responded with a status of 404 (Not Found)

 

node_modules 폴더 내 @types 폴더의 gif.js 폴더에 gif.worker.js 파일이 있지만, 서버가 요청한 리소스를 찾을 수 없다는 에러가 발생했다. 첫 번째 방법으로 web-loader를 설치하고 next.config.js 파일을 수정한 후 다시 save 버튼을 클릭해봤지만, 여전히 동일한 에러가 발생했다. 

두 번째 방법으로 public 폴더에 gif.worker.js를 넣어주니 save 버튼의 기능이 정상적으로 동작했다.