사진을 색칠 도안으로 변환하는 브라우저 기반 도구 — 보로노이·등고선·모자이크·스케치 4종 알고리즘

개요

사진을 색칠 도안(coloring diagram)으로 변환하는 작업은 전통적으로 전문 소프트웨어(Adobe Illustrator, Inkscape 등)를 필요로 했다. 본 도구는 순수 HTML5 Canvas API와 JavaScript만으로 브라우저에서 즉시 실행 가능한 변환기를 구현한다.

알고리즘

1. 보로노이 분할 (Voronoi Tessellation)

소벨 엣지 감지로 추출한 엣지 맵을 가중치로 삼아 씨앗점(seed point)을 에지 밀집 영역에 우선 배치한다. Jump Flood Algorithm(JFA) 근사를 통해 O(n log n) 복잡도로 셀을 생성한다. 결과는 진흙 갈라짐과 유사한 불규칙 셀 패턴으로, 원본 이미지의 구조적 특징을 보존한다.

2. 등고선 (Contour Lines)

가우시안 블러로 노이즈를 제거한 그레이스케일 이미지에 복수의 밝기 임계값을 적용해 마칭 스퀘어(Marching Squares) 방식으로 등고선을 추출한다. 지형도와 유사한 레이어드 구조를 만든다.

3. 모자이크 (Mosaic)

균일 타일 격자를 생성한다. 타일 크기는 셀 수 파라미터에 반비례하여 조정된다.

4. 스케치 (Sketch)

소벨 필터로 수평·수직 그래디언트를 계산하여 엣지 강도 맵을 생성한다. 강한 엣지와 약한 엣지를 두 개의 선 굵기로 이중 렌더링해 손 그림 스케치 효과를 구현한다.

구현 특징

• 서버리스: 모든 처리가 클라이언트에서 수행되어 이미지가 외부로 전송되지 않음
• 파라미터 조정: 셀 수, 선 굵기, 엣지 강도, 배경색(흰색·검정·크라프트)을 실시간 조정 가능
• PNG 다운로드: 결과물을 즉시 저장 가능
• 드래그앤드롭 업로드 지원

결론

본 도구는 thesis.hyperbook.com에 제출된 색칠 도안 이미지(모네 풍 수련 연못 보로노이 도안)를 분석하는 과정에서 개발되었다. 브라우저만으로 예술적 도안을 생성할 수 있음을 보인다.