kimwontae

기획 배경: BZR 뮤직비디오를 위한 자체 제작 툴

이 프로젝트는 밴드 BZR(basementzerofloor)의 정규 1집 타이틀곡 'LEMON SLICE' 뮤직비디오 작업을 위해 시작되었습니다. 뮤직비디오 연출상 아날로그적이면서도 기괴한 분위기를 내기 위해 역동적인 아스키 아트(ASCII Art) 씬이 필요했습니다.

그러나 기존 웹상에 존재하는 대부분의 변환기들은 정지된 이미지만을 지원하거나, 픽셀의 해상도 및 명암비(Contrast)를 디테일하게 조절할 수 없어 전문적인 영상 소스로 활용하기에는 한계가 명확했습니다.

이에 실시간 고프레임 비디오 렌더링과 텍스트의 질감을 정교하게 제어할 수 있는 툴을 직접 개발하게 되었고, 이후 그래픽 디자이너와 프론트엔드 개발자들이 실무에서 시각적 소스로 즉시 활용할 수 있도록 UI를 다듬어 ASCII Studio Pro라는 퍼블릭 웹 유틸리티로 배포하게 되었습니다.

주요 기능 (Features)

• 실시간 미디어 렌더링: 단순 이미지를 넘어 로컬 MP4/WebM 동영상 및 사용자의 실시간 웹캠 화면을 아스키아트로 변환합니다.
• 전문가용 디테일 제어: 픽셀 단위의 해상도(Density), 밝기, 대비, 채도를 미세 조정할 수 있는 슬라이더 패널을 제공합니다.
• 터미널 테마 및 특수효과: Hacker Green, Retro Amber, Cyber Cyan 등 5가지 색상 테마와 함께, 브라운관 모니터의 감성을 재현하는 CRT Scanline 및 Text Glow 이펙트를 지원합니다.
• 다양한 내보내기 포맷: 렌더링된 결과물을 일반 TXT 텍스트, 인라인 스타일이 적용된 HTML 코드, 원클릭 투명 PNG 이미지로 다운로드할 수 있습니다.

기술적 구현: Canvas API와 디더링 알고리즘

프레임워크의 오버헤드를 최소화하기 위해 React 환경 내에서도 핵심 렌더링 로직은 순수 Canvas API의 픽셀 조작(Pixel Manipulation)을 통해 구현했습니다.

특히 빈티지한 그라데이션과 풍부한 명암을 표현하기 위해 플로이드-스타인버그(Floyd-Steinberg) 오차 확산 디더링 알고리즘을 도입했습니다. 각 픽셀의 밝기 오차를 주변 픽셀로 분산시켜 텍스트만으로도 밀도 높은 이미지를 만들어냅니다.

// Floyd-Steinberg Dithering 구현 일부 (Canvas Pixel Data)
if (settings.dither === 'floyd') {
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            const idx = (y * cols + x) * 4;
            // 현재 픽셀의 밝기(Luminance) 계산
            const oldL = (data[idx]*0.299 + data[idx+1]*0.587 + data[idx+2]*0.114);
            const steps = chars.length;
            const newL = Math.round((oldL/255) * (steps-1)) * (255/(steps-1));
            const err = oldL - newL;
            
            // 주변 픽셀로 오차(Error) 확산 분배
            dist(1, 0, 7/16); 
            dist(-1, 1, 3/16); 
            dist(0, 1, 5/16); 
            dist(1, 1, 1/16);
        }
    }
}