PaintPlay
Project Case Study
PaintPlay
이미지를 올리면 선화를 자동으로 만들어 주고, 브러시와 지우개, 페인트통으로 색칠할 수 있는 무료 웹 색칠 앱입니다. 정적 Next.js 사이트 위에 Canvas 2D 도구를 직접 만들어 올렸고, 로그인도 DB도 서버도 없습니다.
라이브 프로젝트 보기 →Overview
PaintPlay는 무료 웹 색칠 앱입니다. 첫 화면의 한 줄이 하는 일을 그대로 설명합니다. "Upload an image, auto-generate line art, and paint with brush, eraser, and bucket fill. Export your result as a PNG."
기능 못지않게 중요한 것이 구조입니다. 로그인도, DB도, 서버 액션도, API 라우트도 없습니다. 앱 전체가 정적 Next.js 빌드이고, 사용자가 가져온 이미지는 그 사람의 기기 밖으로 나가지 않습니다. 업로드가 없는 이유는 간단합니다. 보낼 서버가 아예 없기 때문입니다.
설계 제약
가볍게 쓰는 사람과 아이를 위한 색칠 도구는 참을성이 오래가지 않습니다. "사진이 있다"에서 "색칠하고 있다"까지 가는 사이에 놓인 모든 단계가 떠날 구실이 됩니다. 여기서 세 가지 규칙이 나왔습니다.
계정을 만들지 않습니다. 앱을 열면 바로 도구가 나옵니다.
업로드하지 않습니다. 프라이버시를 약속으로 지키는 대신 구조로 지킵니다. 이미지를 보낼 서버 자체가 없습니다.
색이 새지 않게 합니다. 페인트통이, 사용자가 그리지도 않은 선화를 정확히 지켜야 합니다. 여기가 진짜 어려운 부분입니다.
Technical Implementation
Stack
| 영역 | 구현 | 비고 |
|---|---|---|
| 프레임워크 | Next.js 16.1.1, output: 'export' | 완전한 정적 빌드, Turbopack 사용 |
| UI | React 19.1.0 + Tailwind CSS 4 | 런타임 의존성은 모두 합쳐 4개 |
| 상태 관리 | 없음 | 직접 만든 스토어와 React 훅으로 처리 |
| 그래픽 | 순수 HTML Canvas 2D | 캔버스나 이미지 라이브러리를 쓰지 않음 |
| 오디오 | Web Audio | 배경음 루프와 클릭 소리 |
| 오프라인 | 서비스 워커 + 자동 생성 프리캐시 | 클라이언트에서 등록, 오프라인 페이지 제공 |
의존성 목록은 그냥 다 적는 편이 빠릅니다. next, react, react-dom, lucide-react. 이게 전부입니다. 그림을 그리는 엔진은 직접 만들었습니다.
선화 추출
사진을 선화로 바꾸는 과정은 ImageData 위에서 도는 순수 자바스크립트입니다. 조절 가능한 엣지 임계값과 직접 짠 알파 팽창 처리를 씁니다. OpenCV도, WASM도, 모델 호출도 없습니다. 사용자가 이미 손에 들고 있는 기기에서 바로 돌아갑니다.
레이어를 나눈 캔버스
색칠 화면은 source, line, paint, mask, overlay 캔버스를 겹쳐서 만듭니다. 이렇게 나눈 덕분에 도구를 제대로 만들 수 있었습니다.
페인트통은 임계값을 적용하고 팽창시킨 라인 마스크를 기준으로 채웁니다. 그래서 안티에일리어싱 때문에 생긴 틈으로 색이 새지 않고 선에서 멈춥니다
되돌리기와 다시 하기는 획을 그을 때마다 화면 전체를 저장하는 대신, 개수를 제한한 히스토리 스택으로 처리합니다
내보내기는 칠한 레이어를 선 아래에 깔아서 합칩니다. 그래서 칠이 외곽선을 덮지 않고, PNG로 기기에 바로 저장됩니다
질감이 있는 브러시
paint, marker, pencil, crayon, ink, glow 여섯 가지를 준비했습니다. 단순한 획이 아니라 패턴 텍스처 위에 얹어서, 채운 것이 아니라 그린 것처럼 보이게 만들었습니다.
PWA
프리캐시 매니페스트를 자동으로 만들고, 서비스 워커와 오프라인 페이지, 전체화면 모드를 붙였습니다. 태블릿에서는 설치해서 네이티브 색칠 앱처럼 쓸 수 있는데, 실제로 이 앱을 쓰는 사람들이 손에 들고 있는 기기가 바로 태블릿입니다.
찾아오게 만드는 콘텐츠 구조
도구 자체 말고도 테마별 색칠 도안 갤러리를 테마와 도안 단위의 정적 페이지로 제공하고, 검색 의도에 맞춘 랜딩 페이지(photo-to-coloring, doodle-to-coloring, free-coloring, online-coloring)와 안내 문서를 함께 두었습니다. 정적 빌드라 이 페이지가 전부 미리 만들어진 HTML입니다.
What This Case Study Shows
라이브러리에 기대지 않고 순수 Canvas API 위에 실제로 쓸 만한 그래픽 도구를 만든 경험
프라이버시를 정책 문구가 아니라 구조의 성질로 만든 방식
색칠 앱에서 진짜 어려운 문제, 즉 자동으로 만든 선화 안에 색을 가두는 일을 해결한 사례
정적 빌드만으로 설치되고 오프라인에서도 도는 PWA를 내놓은 경험
한자리에 앉아 전부 살펴볼 수 있을 만큼 의존성을 적게 유지한 선택
Live: https://paintplay.app/
Role: 1인 개발 (선화 추출 → 캔버스 엔진 → 도구 → PWA → 콘텐츠·SEO)
