브라우저 Canvas API로 클라이언트 사이드 이미지 편집기, 밈 생성기, 배경 제거 도구 3개 구현 및 픽셀 조작 성능 최적화

Context

이미지 편집 기능을 웹에서 서버 업로드 없이 제공하려면 Canvas API의 CSS 필터 적용, 텍스트 렌더링, 픽셀 단위 조작 등 여러 기술을 조합해야 한다. 특히 4000x3000 크기 사진의 12백만 픽셀을 JavaScript로 반복 처리할 때 성능 저하가 발생한다.

Technical Solution

• Canvas 필터 적용: Canvas 2D context의 filter 속성으로 brightness(), contrast(), saturate(), blur(), sepia(), grayscale(), hue-rotate() 등 CSS 필터를 픽셀 레벨에서 적용
• 고급 효과 구현: getImageData()로 픽셀 데이터를 직접 조작하여 비네팅 효과 적용, 거리 제곱(dist * dist)을 사용해 중심에서 가장자리로 부드러운 명도 감소 구현
• 텍스트 렌더링 최적화: strokeText()를 먼저 그린 후 fillText()로 덮어쓰고, lineJoin을 'round'로 설정하여 Impact 폰트 스타일 메모 텍스트 생성
• 자동 폰트 크기 조정: 텍스트 길이가 최대 너비를 초과하면 폰트 크기를 72px에서 최소 24px까지 2px씩 감소시키며 3줄 이하로 유지
• Flood Fill 기반 배경 제거: 허용 오차 기반 flood fill 알고리즘으로 배경 제거, 깨끗한 배경의 상품 사진과 로고에 효과적
• 합성 연산 활용: globalCompositeOperation을 'multiply', 'screen', 'source-atop' 등 26가지 블렌드 모드로 설정하여 레이어 효과와 텍스처 적용
• 성능 최적화: 미리보기는 800px 너비의 다운샘플 캔버스에서 처리하고 다운로드 시에만 원본 해상도에서 처리, Float32Array를 사용한 중간 계산으로 JIT 최적화 향상

Key Takeaway

Canvas API의 filter 속성과 globalCompositeOperation을 조합하면 복잡한 이미지 처리를 클라이언트 사이드에서 수행할 수 있으며, 픽셀 반복 처리 성능은 다운샘플링과 Typed Array 선택으로 개선할 수 있다.