원문에서 시작하기
제공된 「영상만들기.md」는 영상 제작에 사용할 기술을 다음 네 줄로 정리한 메모입니다.
그리기 → HTML Canvas 2D + WebGL + p5.brush
폰트 → Jua + Permanent Marker
렌더링 → Chrome Headless + Puppeteer + Node.js
인코딩 → ffmpeg + libx264
이 가이드는 위 구성을 손그림 스타일의 설명 영상 제작 흐름으로 풀어 쓴 학습 자료입니다. 원문에는 실행 코드·설치 버전·완성 영상이 없으므로 아래 내용은 제작 설계와 실습 예시이며, 원문 프로젝트의 실행 성공을 확인한 보고서는 아닙니다.
1. 각 도구는 어떤 일을 하나요?
| 단계 | 도구 | 쉬운 설명 | 확인할 결과 |
|---|---|---|---|
| 그림 | HTML Canvas 2D | 선·도형·글자를 그리는 도화지 | 원하는 크기의 화면 |
| 그래픽 처리 | WebGL | GPU를 이용하는 별도의 그래픽 렌더링 방식 | 실행 환경의 지원 여부 |
| 손그림 표현 | p5.brush | 브러시·채움·해칭 등 회화적 표현을 만드는 라이브러리 | 선택한 버전의 예제 재현 |
| 글꼴 | Jua·Permanent Marker | 한글 제목과 마커 느낌 영문 등 표현에 맞게 선택 | 글꼴 로딩·지원 문자 |
| 프레임 출력 | Node.js·Puppeteer·Chrome Headless | 정해진 시점의 브라우저 화면을 이미지로 저장 | 순서가 있는 PNG 묶음 |
| 영상 변환 | FFmpeg·libx264 | 이미지 묶음을 H.264 영상으로 인코딩 | 재생 가능한 MP4 |
Canvas 2D와 WebGL은 단순히 같은 캔버스에서 모드만 바꾸어 섞는다고 생각하면 안 됩니다. 필요한 경우 배경·브러시·글자 레이어를 별도 캔버스로 그린 뒤 합성하도록 설계합니다. p5.brush의 p5.js 연동 방식과 standalone 방식은 API가 다를 수 있으므로 사용하는 버전의 문서를 확인하세요. standalone 안내는 WebGL2 컨텍스트를 요구합니다.
2. 먼저 짧은 장면표 만들기
처음부터 긴 영상을 만들기보다 10초·30fps·1280×720 같은 작은 실습을 설계합니다. 이 경우 출력 프레임은 300장입니다.
| 시간 | 보여줄 것 | 움직임 |
|---|---|---|
| 0–2초 | 제목 | 종이에 제목을 쓰듯 나타남 |
| 2–7초 | 핵심 도형과 설명 | 선이 그려지고 색이 채워짐 |
| 7–10초 | 요약 한 문장 | 핵심 부분 강조 후 정지 |
10초짜리 손그림 설명 영상을 설계해줘.
주제는 ‘AI에게 목표를 알려주면 도구를 활용해 작업한다’야.
1280×720, 30fps. 제목·도형 설명·요약의 3장면으로 구성해줘.
흰 종이 배경, 파란 잉크와 부드러운 브러시 느낌을 사용해줘.
먼저 장면표, 레이어 구성, 필요한 파일과 설치 버전을 정리해줘.
3. 글꼴과 브러시를 먼저 검증하기
원문에서 제안한 Jua와 Permanent Marker를 제목·강조 문구에 시험해 봅니다. 한글 문장은 한글을 지원하는 글꼴로, 영문 마커 표현은 해당 문자를 지원하는 글꼴로 지정합니다. 한 글꼴이 모든 문자를 지원한다고 가정하지 않습니다.
폰트 파일을 로컬 에셋으로 준비하고, 브라우저의 글꼴 로딩 완료 후 프레임을 저장합니다. 기본 글꼴로 먼저 캡처되어 첫 장면만 모양이 달라지는 문제를 예방할 수 있습니다. 글꼴을 배포하거나 영상에 사용할 때는 각 배포처의 라이선스도 보관합니다.
p5.brush는 프로젝트에서 선택한 버전의 최소 예제부터 확인합니다. 그다음 브러시 종류·선 굵기·색·채움을 바꾸고, 정지 프레임 한 장에서 원하는 질감이 나오는지 봅니다. 읽어야 하는 글자까지 지나치게 흔들리게 만들지 않습니다.
4. 시간을 프레임으로 고정하기
실시간 재생을 화면 녹화하듯 기다리기보다, 프레임 번호로 장면 상태를 결정하면 렌더링 속도와 무관하게 같은 결과를 얻기 쉽습니다.
프레임 번호 0부터 299까지 받을 수 있는 renderFrame(frame) 함수를 설계해줘.
시간은 frame / 30으로 계산하고 같은 프레임은 같은 그림이 나오게 해줘.
브러시의 무작위 효과에는 고정 시드를 사용해줘.
글꼴·이미지·비동기 그리기 완료를 확인할 수 있게 해줘.
누적 브러시 효과를 쓴다면 이전 프레임 재생 상태를 어떻게 복원할지도 정해줘.
renderFrame은 이 실습에서 정하는 사용자 정의 함수 이름이며 p5.brush나 Puppeteer의 기본 API가 아닙니다. 누적해서 그리는 브러시는 임의 시점으로 이동할 때 과거 상태를 재현해야 합니다. 매 프레임 초기화·시뮬레이션 재생·중간 상태 저장 중 적절한 방식을 선택합니다.
5. 브라우저 화면을 PNG로 저장하기
Node.js 스크립트가 Puppeteer로 Headless Chrome을 실행하고, 로컬 작업 페이지를 연 뒤 한 프레임씩 캡처하도록 구성합니다. 단순한 고정 대기 시간에 의존하지 말고, 해당 프레임의 그리기와 에셋 로딩이 끝났다는 신호를 기다립니다.
- 브라우저 뷰포트·캔버스 크기·출력 배율을 정합니다.
- 글꼴과 이미지, 브러시 초기화를 완료합니다.
- 요청한 프레임의 화면을 계산하고 그리기를 완료합니다.
- 캔버스 영역만 캡처해
frames/frame-000000.png처럼 저장합니다. - 0–299까지 반복한 뒤 파일 수와 해상도를 검사합니다.
초기에는 첫 장면·중간·마지막 프레임만 저장해 품질과 WebGL 동작을 확인합니다. Headless 실행 환경에서 WebGL을 사용할 수 있는지 먼저 확인하고, 브라우저 보안 설정을 무조건 끄는 방식으로 문제를 해결하지 않습니다.
6. FFmpeg로 MP4 만들기
FFmpeg가 설치되어 있고 libx264 인코더를 사용할 수 있는 환경에서 실행합니다. 아래 명령은 0부터 시작하는 6자리 PNG 시퀀스, 30fps, 모든 이미지의 동일한 크기를 전제로 한 예시입니다.
ffmpeg -framerate 30 -start_number 0 -i frames/frame-%06d.png -c:v libx264 -pix_fmt yuv420p -crf 18 -movflags +faststart sketch-video.mp4
PowerShell이나 일반 터미널에서 실행하는 예시이며, Windows .bat 파일 안에 적을 때는 입력 패턴을 frame-%%06d.png처럼 작성합니다. 이 명령에는 오디오 입력이 없으므로 무음 영상이 만들어집니다. 음성이 필요하면 별도 오디오 트랙과 길이를 맞추는 단계를 추가합니다.
-framerate 30은 입력 이미지의 재생 속도, libx264는 H.264 인코더, yuv420p는 출력 픽셀 형식, -crf 18은 품질 설정 예시입니다. 출력 크기는 짝수로 맞추고 최종 파일을 실제 재생 기기에서도 확인합니다.
결과를 확인하는 기준
- 300장이 모두 있고 번호가 빠지지 않았는지 확인합니다.
- 30fps 기준 재생 시간이 약 10초인지 확인합니다.
- 첫·중간·마지막 프레임의 글꼴과 브러시가 동일하게 표현되는지 봅니다.
- 글자 잘림·깜빡임·배경 누락·예상하지 않은 무작위 움직임을 확인합니다.
- PNG 품질과 MP4 압축 후 품질을 비교합니다.
- 음성을 추가했다면 장면 시작·끝과 실제 오디오 길이를 대조합니다.
Remotion 가이드와 연결하기
이 구성은 Canvas·WebGL에서 직접 그린 프레임을 브라우저로 출력하는 방식입니다. Claude 모션그래픽 가이드의 Remotion은 React 기반 장면·시간 구성을 사용합니다. 손그림 질감 실험에는 이 가이드를, 카드·자막·화면 캡처를 조합하는 작업에는 Remotion 가이드를 함께 참고하세요. 어느 쪽이든 장면표와 프레임·글꼴·최종 파일 검증은 필요합니다.
출처와 확인 범위
- 제공 문서: 「영상만들기.md」의 기술 구성 네 줄. 원문에 없는 제작 단계와 요청문은 학습용으로 보완했습니다.
- p5.brush 공식 저장소
- p5.brush standalone 안내
- Puppeteer 화면 캡처 문서
- FFmpeg 문서
공식 기술 문서 확인일: 2026-10-19. 위 예시는 이 홈페이지에서 실제 영상을 렌더링한 결과를 의미하지 않습니다.