기획 배경: 뮤직비디오 제작 도구

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

제작 과정에서 검토한 변환기들은 정지 이미지를 중심으로 구성되어 있거나 밀도, 대비, 해상도를 필요한 범위까지 조정하기 어려웠습니다.

그래서 이미지·동영상·웹캠 입력을 실시간으로 변환하고 문자의 밀도와 질감을 조절하는 도구를 제작했습니다. 뮤직비디오 작업에 사용한 기능을 정리해 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로 프레임의 픽셀 밝기를 읽어 문자로 치환하도록 구현했습니다.

플로이드-스타인버그(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);
        }
    }
}