작업 방식
whiteboard-animation은 손이 다이어그램이나 캡션을 그리는 착시를 만듭니다. SVG 획이 순서대로 드러나는 동안 마커 이미지가 현재 그려지는 끝점을 따라갑니다. 손 위치와 드러난 경로는 같은 진행 값을 공유하므로 정확한 시점에서 함께 검사할 수 있습니다.
원문은 짧은 브라우저 장면과 내레이션이 있는 영상 내보내기를 구분합니다. 독립형 장면은 HTML 파일 하나와 탐색 가능한 타임라인을 사용하고, 전체 영상은 같은 원리를 프레임 기반 컴포지션으로 옮깁니다. 획 순서, 펜 들기, 내레이션 타이밍도 디자인의 일부입니다.
예상 산출물
- 독립형 HTML 드로잉 장면 또는 요청한 영상 컴포지션.
- 순서 있는 SVG 획과 펜촉 위치를 보정한 마커 손 자료.
- 획을 그리는 도중의 손과 완성된 보드를 보여 주는 정지 프레임 근거.
브리프에서 검토까지
- 01그릴 수 있는 그림을 준비하세요
일러스트를 자연스러운 그리기 순서의 열린 획으로 바꾸세요. 채워진 영역에는 색보다 먼저 드러날 윤곽을 만드세요.
- 02펜촉을 획에 연결하세요
손 자료의 펜촉 오프셋을 측정하고 획의 등장과 같은 진행 값으로 손 위치를 제어하세요. 분리된 경로 사이에서는 손을 드세요.
- 03순서를 만들고 검사하세요
각 그림을 내레이션 비트와 맞춘 뒤 획 중간에서 멈추세요. 펜촉 정렬, 최종 완성, 레이아웃, 보드 섹션 사이 전환을 확인하세요.