Screenshot to Code 시작하기 — 로컬 셋업
Screenshot to Code 시작하기
로컬로 돌리려면 모델 API 키와 백엔드·프론트엔드 셋업이 필요합니다. 앱은 React/Vite 프론트엔드와 FastAPI 백엔드로 구성됩니다.
API 키
모델 제공자 키(OpenAI, Anthropic, Gemini 중 하나 이상)가 필요합니다. 품질을 위해 Gemini 와 Replicate 를 강력히 권장합니다. Gemini 는 스크린샷에서 실제 자산(로고·이미지) 추출을, Replicate 는 이미지 생성·배경 제거·이미지 편집을 담당합니다.
| 키 | 필수? | 무엇을 여는가 |
|---|---|---|
OPENAI_API_KEY |
셋 중 하나 | GPT 코드 생성 변형 |
ANTHROPIC_API_KEY |
셋 중 하나 | Claude 코드 생성 변형 |
GEMINI_API_KEY |
셋 중 하나(강력 권장) | Gemini 코드 생성; 스크린샷 자산 추출; 비디오 모드 필요 |
REPLICATE_API_KEY |
강력 권장 | 이미지 편집·배경 제거·이미지 생성 |
키가 많을수록 변형별로 더 좋은 모델 조합을 자동 선택합니다.
백엔드 실행
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry run playwright install chromium
poetry run uvicorn main:app --reload --port 7001
프론트엔드 실행
cd frontend
pnpm install
pnpm dev
http://localhost:5173 에서 앱을 씁니다. Docker 가 있으면 루트에서 docker-compose up -d --build 로 한 번에 띄울 수도 있습니다.