React & Next.js

React와 Next.js를 사용하여 스크롤 캡처 및 이미지로 동영상 생성 앱 구축하기

0

React와 Next.js를 사용하여 스크롤 캡처 및 이미지로 동영상 생성 앱 만들기

현대 웹 개발에서 사용자 경험을 강화하고 다양한 기능을 추가하는 일은 매우 중요합니다. 이번 글에서는 React와 Next.js를 사용하여 웹 페이지의 스크롤 움직임을 캡처하고 이를 동영상으로 변환하는 방법과, 이미지 파일을 가져와 간단한 동영상을 생성하는 방법을 알아보겠습니다. 이 과정은 특히 쇼핑몰 운영자들이 제품 설명 페이지 등을 동영상으로 만들고자 할 때 유용할 수 있습니다. 단계별로 쉽게 따라 할 수 있도록 자세히 설명드리겠습니다.

1. 준비물과 프로젝트 설정

  • React
  • Next.js
  • html2canvas
  • FFmpeg (ffmpeg.wasm)

먼저, Next.js를 설치하고 프로젝트를 설정합니다. Next.js는 React 기반의 프레임워크로, Static Site Generation (SSG)을 지원하여 정적 웹사이트를 쉽게 만들 수 있습니다.

npx create-next-app@latest
cd your-next-app
npm install @ffmpeg/ffmpeg html2canvas

2. 화면 캡처 기능 구현

React 컴포넌트를 생성하여 화면 캡처 기능을 구현합니다. 이를 위해 html2canvas를 사용하여 페이지의 특정 영역을 이미지로 변환합니다.

// pages/index.js
import React, { useState, useRef, useEffect } from 'react';
import html2canvas from 'html2canvas';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

const ScreenRecorder = () => {
  const [capturing, setCapturing] = useState(false);
  const [videoUrl, setVideoUrl] = useState('');
  const frames = useRef([]);

  useEffect(() => {
    if (capturing) {
      const interval = setInterval(async () => {
        const canvas = await html2canvas(document.body);
        frames.current.push(canvas.toDataURL('image/png'));
      }, 500); // 0.5초마다 캡처
      return () => clearInterval(interval);
    }
  }, [capturing]);

  const startCapture = () => {
    frames.current = [];
    setCapturing(true);
  };

  const stopCapture = async () => {
    setCapturing(false);
    if (!ffmpeg.isLoaded()) {
      await ffmpeg.load();
    }
    frames.current.forEach((frame, index) => {
      ffmpeg.FS('writeFile', `frame${index}.png`, fetchFile(frame));
    });
    const inputFiles = frames.current.map((_, index) => `-loop 1 -t 0.5 -i frame${index}.png`).join(' ');
    const filter = `-filter_complex "concat=n=${frames.current.length}:v=1:a=0" output.mp4`;
    await ffmpeg.run(...inputFiles.split(' '), ...filter.split(' '));
    const data = ffmpeg.FS('readFile', 'output.mp4');
    const video = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
    setVideoUrl(video);
  };

  return (
    <div>
      <button onClick={startCapture}>Start Capture</button>
      <button onClick={stopCapture}>Stop Capture</button>
      {videoUrl && <video src={videoUrl} controls></video>}
    </div>
  );
};

export default ScreenRecorder;

3. 이미지 파일을 동영상으로 변환

React를 사용하여 이미지 파일을 가져와 동영상을 만드는 기능을 구현합니다. 이를 위해 FFmpeg를 사용하여 이미지를 동영상으로 변환합니다.

// pages/create-video.js
import React, { useState } from 'react';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });

const ImageToVideo = () => {
  const [images, setImages] = useState([]);
  const [videoUrl, setVideoUrl] = useState('');

  const handleFileChange = (event) => {
    setImages(Array.from(event.target.files));
  };

  const createVideo = async () => {
    if (!ffmpeg.isLoaded()) {
      await ffmpeg.load();
    }

    images.forEach((image, index) => {
      ffmpeg.FS('writeFile', `image${index}.png`, fetchFile(image));
    });

    const inputFiles = images.map((_, index) => `-loop 1 -t 2 -i image${index}.png`).join(' ');
    const filter = `-filter_complex "concat=n=${images.length}:v=1:a=0" output.mp4`;

    await ffmpeg.run(...inputFiles.split(' '), ...filter.split(' '));

    const data = ffmpeg.FS('readFile', 'output.mp4');
    const video = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
    setVideoUrl(video);
  };

  return (
    <div>
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={createVideo}>Create Video</button>
      {videoUrl && <video src={videoUrl} controls></video>}
    </div>
  );
};

export default ImageToVideo;

4. Next.js에서 SSG 적용

Next.js에서 Static Site Generation을 사용하려면 `getStaticProps` 함수를 이용해 빌드 시 데이터를 가져옵니다. 예제에서는 기본적인 설정만 다루지만, 실제 데이터는 API 호출 등을 통해 가져올 수 있습니다.

// pages/index.js
export async function getStaticProps() {
  const productImages = [
    'https://example.com/image1.png',
    'https://example.com/image2.png'
  ];

  return {
    props: {
      productImages,
    },
  };
}

5. 동영상 생성 및 결과 확인

화면 캡처가 완료되면 FFmpeg를 사용하여 이미지를 동영상으로 변환합니다. `ffmpeg.wasm`을 사용하면 브라우저 내에서 이 작업을 수행할 수 있습니다.

6. 프로젝트 빌드 및 배포

프로젝트를 빌드하고 정적 파일로 내보내어 배포할 수 있습니다.

npm run build
npm run export

이 명령어를 실행하면 Next.js 앱이 빌드되고 `out` 디렉토리에 정적 파일로 내보내집니다. 이를 웹 서버에 업로드하여 배포할 수 있습니다.

결론

이번 글에서는 React와 Next.js를 사용하여 웹 페이지의 스크롤 움직임을 캡처하고 이를 동영상으로 변환하는 방법과 이미지 파일을 가져와 간단한 동영상을 생성하는 방법을 소개했습니다. 이 기능은 특히 쇼핑몰 운영자들이 제품 설명 페이지를 동영상으로 제공할 때 유용합니다. html2canvas와 ffmpeg.wasm을 활용하여 브라우저 내에서 모든 작업을 처리할 수 있으며, Next.js를 사용해 SSG 방식으로 배포할 수 있습니다. 이러한 기술을 활용하여 웹사이트의 사용자 경험을 한층 더 향상시켜 보시기 바랍니다.

답글 남기기