개발자가 브라우저 기반 비디오-GIF 변환기를 의존성 없이 구현해 영상 처리를 클라이언트 로컬에서 완전 실행

Context

기존 온라인 GIF 제작 서비스들은 비디오를 서버에 업로드하여 처리하는 방식으로 인해 프라이버시 노출, 네트워크 지연, 파일 크기 제한, 서비스 장애 시 운영 중단 문제가 발생했다.

Technical Solution

• HTML5 <video> 요소와 <canvas> 조합으로 프레임 추출: video.currentTime 설정 후 video.onseeked 이벤트를 대기하여 각 프레임을 canvas에 drawImage로 렌더링
• 메모리 최적화를 위한 동적 스케일링: 1080p 원본 대비 480px 너비로 축소하여 메모리 사용량 75% 감소 (1920×1080×4바이트/프레임에서 480×270×4바이트/프레임으로 축소)
• LZW(Lempel-Ziv-Welch) 압축 알고리즘을 JavaScript에서 자체 구현: 색상 패턴 딕셔너리를 구축하면서 4096 코드 제한 도달 시 clear code 발생으로 딕셔너리 리셋
• GIF 무한 루프 지원: Netscape Application Extension(0x21 0xFF 0x0B 시그니처)을 GIF 바이너리에 작성하여 루프 카운트 0x00으로 설정
• 중앙값 단절(median-cut) 색상 양자화: RGB 색상 공간을 축 별 범위가 가장 넓은 기준으로 반복 분할하여 256색 팔레트 생성

Key Takeaway

클라이언트 사이드 멀티미디어 처리에서 색상 양자화 품질을 우선적으로 구현해야 인코더가 완벽하더라도 팔레트 오류로 인한 품질 저하를 방지할 수 있다.