SketchTo: AI 스케치 변환 SaaS 툴

손그림 스케치를 AI로 고품질 이미지로 변환하는 풀스택 SaaS 서비스인 SketchTo를 소개합니다.
Sketch-to

 

sketch-to

 

SketchTo는 사용자가 러프하게 손그림 스케치를 업로드하면 AI가 선택한 아트 스타일에 맞춰서 고품질 이미지로 변환해주는 서비스이다.

Flat icon, Pixel Art, Anima 등 26가지 스타일을 지원하며, 프리미엄 모델 기반의 구독 결제 시스템을 갖추고 있다.

 

Sketch-to

 

Next.js 16 App Router를 사용한 풀스택 개발

SketchTo는 Next.js 16 App Router와 Supabase를 기반으로 만들었다.

프론트엔드와 백엔드를 하나의 프로젝트에서 관리할 수 있다라는 점이 1인 개발에서 가장 큰 장점으로 차지하고 있다.

 

API Routes 구조

app/
├── api/
│   ├── generate/route.ts          # 이미지 생성 API
│   ├── payments/stripe/
│   │   ├── checkout/route.ts      # 결제 세션 생성
│   │   └── webhook/route.ts       # Stripe 이벤트 처리
│   └── subscriptions/
│       └── cancel/route.ts        # 구독 취소
├── auth/
│   ├── login/page.tsx             # 로그인 페이지
│   └── callback/route.ts          # OAuth 콜백
├── pricing/page.tsx               # 요금제 페이지
└── page.tsx                       # 메인 페이지

 

Server Component와 Client Component를 분리하여 SSR의 이점을 최대한 활용했다.

특히 meta data와 SEO 관련 설정은 서버 사이드에서 사용자 인터랙션이 필요한 업로드/스타일 선택등은 클라이언트 사이드에서 처리하도록 했다.

 

 

Gemini 2.5 Flash

멀티 모달 AI 이미지 생성을 위해서 Google Gemini 2.5 Flash 모델을 활용했다.

 

왜 Gemini를 사용했는가?

"이미지를 만들 수 있는 모델인가?" "빠른 응답 속도를 보이는가?" "비용이 합리적인가?" 이 세 가지를 이유로 사용하게 되었다.

하나씩 보자면....

"이미지를 만들 수 있는 모델인가?" 에 대한 대답은 가능하다! 멀티모달 입출력이 된다.

두 번째로 "빠른 응답 속도를 보이는가?" 에 대한 대답은 Flash 모델 특유의 저지연 응답을 기대한다.

세 번째로 "비용이 합리적인가?" 에 대한 것은 이미지당 0.04$ 정도 나온다고 한다. 그래서 대량의 이미지 생성에도 가격이 부담 없었다.

 

프롬프트 엔지니어링

26가지 스타일 각각에 대해서 200~300단어 분량의 상세한 프롬프트를 설계하고자 했다.

단순히 "플랫 아이콘으로 변환해줘" 정도가 아니라 색상 팔레트, 선의 두께, 배경 설정 등 세밀한 지시를 포함했다.

// 프롬프트 구조 예시

{
  id: "flat-icon",
  name: "Flat Icon",
  emoji: "🎯",
  category: "Icons",
  tier: "free",
  prompt: "Transform this sketch into a modern flat icon design..."
}

 

 

커스텀 프롬프트 기능

사용자가 스타일 프롬프트에 추가 지시사항을 덧붙일 수도 있도록 했는데 500자 제한으로 짧게 추가하도록 했다.

예를 들어 "배경을 파란색으로 해줘" 등과 같이 세부 조정이 가능하다.

서버 사이드에서 입력값을 검증하여 프롬프트 인젝션을 방지하도록 했다.

 

이미지 처리 파이프라인

[사용자 스케치 업로드]
    ↓ 클라이언트: Base64 인코딩 (최대 4MB)
    ↓ API: 인증 → 사용량 확인 → 티어 검증
    ↓ Gemini API: 스타일 프롬프트 + 이미지 전송
    ↓ 응답: Base64 이미지 수신
    ↓ 클라이언트: 포맷 변환 (PNG/JPG/ICO) + 리사이즈
[결과 이미지 다운로드]

 

 

SEO 최적화

한국어/영어 이중 언어 지원과 함께 포괄적인 SEO 전략을 적용했다.

 

• 메타데이터: Open Graph, Twitter Card 태그
• JSON-LD: 구조화된 데이터
• robots.txt: 프로그래밍 방식 생성
• Sitemap: 동적 사이트맵 생성
• 다국어: hreflang 태그로 한국어/영어 대응
• Google Search Console: 웹마스터 도구 인증

export const metadata: Metadata = {
  title: "SketchTo - Transform Sketches into Stunning 2D Graphics with AI",
  description: "AI 기반 스케치 변환 서비스...",
  alternates: {
    languages: { ko: "/ko", en: "/en" },
  },
  openGraph: { ... },
};

 

 

수익화 전략

플랜은 크게 Free, Silver, Gold, Platinum으로 구성하려고 했다.

일단 Supabase DB에 연동도 해놨고, Stripe와 Toss도 연동하려고 했는데 이건 사업자가 없으면 안되서 우선은 주석처리만 해놨다.

우선은 사용자를 받아보고 메일이 온다면 그 때 결정하려고 한다.

 

 

기술적인 도전들

ICO 포맷 변환

브라우저에서 직접 iCO 바이너리 헤더를 생성해야 했다. Canvas API로  리사이즈 한 후 6Byte ICO헤더 + 16Byte 디렉토리 엔트리를 수동으로 조립했다.

 

일일 사용량 추적

UPSERT와 UNIQUE(user_id, date) 제약 조건을 활용해서 날짜별 카운트를 증가시키도록 했다.

 

Webhook 멱등성

Stripe Webhook 이벤트가 중복되어 전달될 수 있으므로 동일한 이벤트를 여러번 처리해도 안전한 구조로 설계했다.

 

 

---

 

 

 

이번에도 어김없이 바이브코딩으로 빠르게 구축하는 AI SaaS 툴이다.

1인 개발자가 아이디에이션을 통해서 빠르게 프로덕션 레벨의 서비스를 만들 수 있다는 점에서 한 주에 하나씩 해나가고 있다.

핵심은 "직접 구축하지 않아도 되는 것은 위임하고, 차별화 되는 핵심 기능에 집중하는 것" 이었다.

그래서 이번에 내가 집중했던 것은 프롬프트 엔지니어링과 UX 설계라고 할 수 있겠다.