프로젝트 사례
PaintPlay
이미지를 올리면 선화를 자동으로 만들어 주고, 브러시와 지우개, 페인트통으로 색칠할 수 있는 무료 웹 색칠 앱입니다. 정적 Next.js 사이트 위에 Canvas 2D 도구를 직접 만들어 올렸고, 로그인도 DB도 서버도 없습니다.
라이브 프로젝트 보기 →개요
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 빌드이고, 사용자가 가져온 이미지는 그 사람의 기기 밖으로 나가지 않습니다. 업로드가 없는 이유는 간단합니다. 보낼 서버가 아예 없기 때문입니다.
설계 제약
가볍게 쓰는 사람과 아이를 위한 색칠 도구는 참을성이 오래가지 않습니다. "사진이 있다"에서 "색칠하고 있다"까지 가는 사이에 놓인 모든 단계가 떠날 구실이 됩니다. 여기서 세 가지 규칙이 나왔습니다.
계정을 만들지 않습니다. 앱을 열면 바로 도구가 나옵니다.
업로드하지 않습니다. 프라이버시를 약속으로 지키는 대신 구조로 지킵니다. 이미지를 보낼 서버 자체가 없습니다.
색이 새지 않게 합니다. 페인트통이, 사용자가 그리지도 않은 선화를 정확히 지켜야 합니다. 여기가 진짜 어려운 부분입니다.
운영 측면에서 달라진 점
사진이 기기 밖으로 나가지 않음: 서버도 DB도 아예 없기 때문에 모든 이미지가 사용자 기기에만 머물고, 뒤에서 관리해야 할 것도 없습니다.
계정도 설치도 없이 바로 시작: 앱을 열면 곧바로 도구가 나오고, 사진을 선화로 바꾸는 작업도 사용자가 가진 기기에서 즉시 이뤄집니다.
손으로 그린 듯한 결과물: 페인트통은 선에서 깔끔하게 멈추고, 칠이 외곽선을 덮지 않으며, 질감 있는 브러시 여섯 가지로 채운 것이 아니라 그린 것처럼 보이고, 완성작은 이미지로 기기에 바로 저장됩니다.
태블릿에서는 네이티브 앱처럼: 설치해서 전체화면으로 쓰고 오프라인일 때도 안내 페이지가 나오는데, 실제 사용자 대부분이 손에 든 기기가 바로 태블릿입니다.
검색으로 찾아오게 만드는 구조: 테마별 색칠 도안 갤러리, 안내 문서, 검색 의도에 맞춘 랜딩 페이지가 모두 미리 만들어진 페이지라 빠르게 열립니다.
이 프로젝트가 보여주는 역량
라이브러리에 기대지 않고 순수 Canvas API 위에 실제로 쓸 만한 그래픽 도구를 만든 경험
프라이버시를 정책 문구가 아니라 구조의 성질로 만든 방식
색칠 앱에서 진짜 어려운 문제, 즉 자동으로 만든 선화 안에 색을 가두는 일을 해결한 사례
정적 빌드만으로 설치되고 오프라인에서도 도는 PWA를 내놓은 경험
한자리에 앉아 전부 살펴볼 수 있을 만큼 의존성을 적게 유지한 선택
Live: https://paintplay.app/
Role: 1인 개발 (선화 추출 → 캔버스 엔진 → 도구 → PWA → 콘텐츠·SEO)
