3시간 만에 만든 스크린샷-to-React 생성기

실제 프론트엔드 작업—라우팅(routing), 상태 관리(state), 아키텍처(architecture) 등 정말 중요한 일들—을 시작하기도 전에 Figma 화면과 UI 스크린샷을 JSX로 변환하는 작업에 지쳤습니다. 그래서 저를 대신해 이 작업을 수행할 도구를 만들었습니다.

스크린샷을 넣으세요. 실시간으로 렌더링되는 React + Tailwind 컴포넌트를 얻을 수 있습니다. 스트리밍 방식이며, 브라우저 내에서 빌드 단계 없이 작동합니다.

작동 방식과 그 과정에서 발생한 문제점들을 소개합니다.

기술 스택 (The Stack)

• Next.js 14 — 프론트엔드(frontend), 분할 패널 UI
• Go — 백엔드(backend), 이미지 압축, SSE 스트리밍
• Claude API (claude-sonnet-4-5) — 비전(vision) + 코드 생성
• Babel Standalone + Tailwind CDN — 빌드 없는(zero-build) iframe 미리보기
• localStorage — 변환 기록

작동 방식 (How It Works)
스크린샷 → Go (압축 + 크기 조정) → Claude Vision (스트리밍) → SSE → Next.js → iframe 미리보기

Go 백엔드는 이미지를 5MB 미만으로 압축하고, base64로 인코딩한 뒤 Claude API와 스트리밍 연결을 엽니다. 각 텍스트 델타(delta)는 JSON SSE 이벤트로 브라우저에 전달됩니다:

data: {"delta":"import"}
data: {"delta":" React from 'react';"}

프론트엔드는 스트림을 하나의 코드 문자열로 누적합니다. 생성이 완료되면, CDN을 통해 로드된 React, Babel, Tailwind를 사용하여 document.write()를 통해 iframe에 코드를 주입합니다. 컴포넌트는 빌드 단계 없이 즉시 렌더링됩니다.

고통스러웠던 버그들 (The Bugs That Hurt)
청크 연결(Chunk concatenation). Claude는 토큰을 스트리밍합니다. import와 React가 별개의 이벤트로 도착합니다. 초기에는 이를 단순히 합쳤더니 *importReact from 'react'*와 같이 되어 Babel이 거부하는 문제가 발생했습니다. 해결책: Go 측에서 각 델타를 JSON 객체로 감싸고, 프론트엔드에서 obj.delta를 읽도록 했습니다. JSON은 공백을 정확하게 보존합니다.

iframe 내의 임포트(Import) 문. iframe은 CDN을 통해 React를 로드합니다. 만약 생성된 코드에 *import React from 'react'*가 포함되어 있으면 Babel이 오류를 발생시킵니다. 해결책: 주입하기 전에 모든 임포트 문을 제거하고 export default를 교체합니다:

const clean = code
  .replace(/^import\s+[\s\S]*?from\s+['"][^'"]*['"];?\s*$/gm, "")
  .replace(/^export\s+default\s+/m, "const __Component__ = ")
...

이미지 미디어 타입 불일치(Image media type mismatch) 문제가 발생했습니다. _.png_로 저장된 스크린샷에 때때로 JPEG 바이트가 포함될 수 있는데, Claude는 이러한 불일치를 거부합니다. 해결 방법: Go 압축기(compressor)가 항상 JPEG를 출력하므로, 입력 형식에 관계없이 선언된 미디어 타입을 image/jpeg로 하드코딩합니다.

작동하는 프롬프트 (The Prompt That Works)
당신은 전문적인 React 및 Tailwind CSS 개발자입니다.
스크린샷의 레이아웃(layout), 간격(spacing), 색상(colors), 타이포그래피(typography)를 충실히 재현하는
완전하고 프로덕션 준비가 된(production-ready) React 함수형 컴포넌트(functional component)를 생성하세요.

• Tailwind 유틸리티 클래스(utility classes)만 사용 — 인라인 스타일(inline styles) 금지
• Lorem Ipsum이 아닌 실제와 유사한 플레이스홀더 텍스트(placeholder text) 사용
• 모바일 퍼스트(Mobile-first) 반응형 클래스 적용
• 상호작용 요소에 호버(Hover) 및 포커스(focus) 상태 적용
• 오직 컴포넌트 코드만 반환, 마크다운 펜스(markdown fences) 제외
• 독립적(Self-contained)이어야 하며, 필수 props 없음. "마크다운 펜스 제외"는 매우 중요합니다. 이것이 없으면 Claude가 출력을 세 개의 백틱(triple backticks)으로 감싸게 되고, Babel이 이를 처리하지 못해 오류가 발생합니다.

실제 생성 결과 (What It Actually Produces)
개인 정보(Personal Details) 모바일 화면, 다크 모드 SaaS 랜딩 페이지, 그리고 분석 대시보드(analytic dashboard)에서 테스트했습니다. 세 가지 모두 정확한 레이아웃 구조, 색상 팔레트(color palette), 컴포넌트 계층 구조(component hierarchy), 상호작용 상태(interactive states)를 갖추고 결과가 나왔습니다. 약간의 미세 조정(tweaking)은 필요하지만, 시작점으로 사용하기에는 프로덕션에서 사용 가능한 수준입니다.
완벽하지 않은 부분: 정확한 헥스(hex) 색상(가장 가까운 Tailwind 값으로 근사치 계산), 복잡한 애니메이션(animations), 데이터 기반 요소(data-driven elements).

비용 (Cost)
빌드 과정 중의 모든 디버깅 실행 및 데모 변환을 포함하여 총 5달러 미만입니다.
각 변환당 약 500800개의 프롬프트 토큰(prompt tokens) + 이미지 토큰(image tokens) + 약 2,000개의 생성 토큰(generation tokens)이 소모됩니다. 스크린샷당 몇 센트 수준입니다. 이 도구는 화면당 3060분 소요되는 수동 JSX 작업을 대체합니다.

핵심 요점 (The Point)
이것이 프론트엔드 엔지니어링(frontend engineering)을 대체하는 것은 아닙니다. 엔지니어링이 필요 없는 부분, 즉 정적 비주얼을 보일러플레이트 마크업(boilerplate markup)으로 번역하는 과정을 제거하는 것입니다. 스크린샷에서 구조를 가져온 다음, 아키텍처(architecture), 상태(state), 성능(performance), 그리고 실제 전문 지식이 필요한 상호작용(interactions)에 시간을 투자하세요.
빌드하는 데 3시간. 실행하는 데 5달러. 그 이후로 절약되는 매 시간은 복리로 쌓입니다.

Code
GitHub의 전체 소스 코드: github.com/norbertose/screenshot-figma-to-react
스택 (Stack): Next.js · Go · Claude API. 클론(Clone)한 뒤, ANTHROPIC_API_KEY를 교체하고 실행하세요.
5달러 구독은 여전히 유효합니다.