Published on

웹툰 이미지 슬라이싱을 자동화하기 위해 Toon Shark를 만든 이야기

Authors
  • avatar
    Name
    Beni
    Twitter
    Tech Lead

웹툰 이미지 슬라이싱을 자동화하기 위해 Toon Shark를 만든 이야기

웹툰을 제작하다 보면, 생각보다 많은 시간이 이미지 정리 작업에 들어갑니다.

특히 플랫폼에 업로드하는 과정은 단순해 보이지만 반복적이고 번거로운 작업의 연속입니다. 긴 이미지를 일정 기준으로 잘라야 하고, 플랫폼마다 요구하는 규격이 달라서 다시 맞춰야 하고, 결과를 하나씩 export 해야 합니다. 이 과정은 창작과는 전혀 상관없는 작업이지만, 매 에피소드마다 반복됩니다.

그래서 이 과정을 자동화하기 위해 Toon Shark를 만들게 되었습니다.

Toon Shark란?

Toon Shark는 웹툰 업로드를 위한 이미지 처리 과정을 자동화하는 Electron 기반 데스크톱 도구입니다.

주요 기능은 다음과 같습니다.

  • PDF 기반 웹툰을 자동으로 슬라이스
  • 플랫폼별 규격에 맞춰 이미지 export
  • 모바일 환경 기준 미리보기 지원

단순한 툴이지만, 실제 작업 흐름에서 반복되는 단계를 줄이는 데 초점을 맞췄습니다.

핵심 문제: 컷을 자동으로 나눌 수 있는가

웹툰 이미지는 일반 이미지와 다르게 컷 사이에 여백이 존재합니다. 이 여백을 기준으로 자동 분할하면, 사람이 직접 자르는 과정을 줄일 수 있습니다.

접근 방식은 이렇습니다.

  1. 이미지의 각 가로 라인을 스캔하여 흰색 픽셀 비율을 계산
  2. 흰색 비율이 일정 threshold 이상인 라인이 연속으로 일정 높이 이상 유지되는 구간을 컷 사이 여백으로 판단
  3. 해당 구간의 중심을 기준으로 자동 분할

여기서 threshold 설정이 중요한데, 완전한 흰색(255, 255, 255)만 체크하면 미세한 노이즈나 압축 아티팩트에 취약해집니다. 그래서 RGB 각 채널이 일정 값 이상이면 흰색으로 간주하는 방식으로 처리했습니다.

다만 이 threshold를 사용자에게 숫자로 노출하면 직관적이지 않습니다. 대부분의 웹툰 작가는 "RGB 240 이상"이라는 값이 어떤 의미인지 바로 와닿지 않기 때문입니다. 그래서 이 값을 슬라이더 기반의 "느슨함 ↔ 엄격함" 옵션으로 제공했습니다. 느슨하게 설정하면 약간의 색상 차이도 여백으로 인식하고, 엄격하게 설정하면 거의 완전한 흰색만 여백으로 판단합니다. 사용자는 기술적인 수치를 몰라도, 결과를 보면서 감각적으로 조절할 수 있습니다.

예상보다 어려웠던 문제: 최소 컷 높이

가장 까다로웠던 부분은 "최소 컷 높이"를 어떻게 정할 것인가였습니다.

  • 너무 작게 설정하면 → 흰 여백만으로 이루어진 영역이 하나의 컷으로 잘리는 문제 발생
  • 너무 크게 설정하면 → 실제 컷 경계를 놓쳐서 제대로 분리되지 않음

게다가 PDF마다 해상도와 이미지 크기가 다르기 때문에 고정값으로 해결하기 어려웠습니다.

초기에는 이미지 전체 높이 대비 비율로 자동 추정하는 방식도 고민했지만, 결국 실사용 관점에서는 완전 자동화보다 "빠르게 검수하고 조정할 수 있는 구조"가 더 중요하다고 판단했습니다.

그래서 현재는 다음과 같은 방식으로 구성했습니다.

  1. 자동으로 컷을 분할한 뒤
  2. 결과를 시각적으로 확인할 수 있는 상세 페이지 제공
  3. 검수 과정에서 컷 높이를 직접 조정할 수 있도록 UI 지원

이미지 분석 기반 자동 분할 + 사용자 검수 UI의 조합이 Toon Shark의 핵심 설계 방향입니다.

Electron을 선택한 이유

데스크톱 앱 프레임워크로 Electron을 선택한 데는 몇 가지 이유가 있었습니다.

PDF 렌더링, 이미지 처리, 파일 시스템 접근이 모두 필요한 작업 특성상 웹 앱으로는 한계가 있었고, HTML 기반 모바일 미리보기를 제공해야 했기 때문에 웹 기술 스택을 그대로 활용할 수 있는 Electron이 자연스러운 선택이었습니다. 또한 플랫폼별 규격 데이터를 로컬에서 관리하고, 대용량 PDF를 서버 왕복 없이 처리할 수 있다는 점도 중요했습니다.

결과

Toon Shark를 도입한 이후, 반복적인 이미지 분할 작업 시간을 크게 줄일 수 있었습니다. 플랫폼별 규격 대응이 자동화되면서 수작업으로 인한 실수도 줄었고, 업로드 전에 결과를 빠르게 확인할 수 있게 되었습니다.

결국 목표는 하나였습니다.

창작자가 반복 작업이 아니라 콘텐츠에 집중할 수 있도록 만드는 것.

마무리

Toon Shark는 작은 도구지만, 실제 작업에서의 불편함을 줄이기 위해 만든 프로젝트입니다.

이름을 지어주신 Bela와, 다양한 아이디어로 함께해 주신 REALDRAW 동료분들께 감사드립니다. 앞으로도 계속 개선해 나갈 예정입니다.

👉 https://tech.realdraw.ai/ToonShark/

피드백은 언제든지 환영합니다.