설명
Screenshot to Code는 시각적 디자인을 기능적인 코드로 변환하도록 설계된 AI 기반 도구입니다. 스크린샷, 목업, Figma 디자인 및 작동 중인 웹사이트의 화면 녹화를 포함한 다양한 입력을 받아 깨끗하고 즉시 사용 가능한 코드로 변환합니다. 이 도구는 HTML(Tailwind CSS 포함), React(Tailwind CSS 포함), Vue(Tailwind CSS 포함), Bootstrap 및 Ionic(Tailwind CSS 포함)과 같은 인기 있는 프론트엔드 스택을 지원합니다.
사용자는 Screenshot to Code와 상호 작용하는 두 가지 주요 방법을 가지고 있습니다. 사용자 정의 및 기여를 위해 로컬에서 실행하거나 screenshottocode.com의 공식 호스팅 애플리케이션을 사용하여 로컬 설정 없이 즉시 테스트할 수 있습니다. 도구를 로컬에서 실행하려면 React/Vite 프론트엔드와 FastAPI 백엔드를 설정해야 하며, OpenAI, Anthropic 및 Gemini와 같은 AI 모델 제공업체의 API 키가 필요합니다. Gemini는 에셋 추출 기능에 특히 권장되며, 스크린샷에서 실제 로고 및 이미지를 재사용할 수 있도록 합니다. Replicate는 이미지 생성, 배경 제거 및 편집 기능에 중요합니다.
이 프로젝트는 Gemini 3 Flash 및 Gemini 3.1 Pro Preview, GPT-5.5 및 GPT-5.4 Mini, Claude Opus 4.6/4.8을 포함한 다양한 AI 모델을 지원합니다. 여러 API 키의 통합은 앱이 더 강력한 모델 조합을 선택할 수 있도록 하여 생성된 코드의 정확성과 품질을 향상시킵니다. 화면 녹화를 기능적인 프로토타입으로 변환하는 것과 같은 고급 기능에 관심이 있는 사용자에게는 Gemini가 필수입니다. 이 프로젝트는 더 쉬운 배포 및 실행을 위해 Docker 지원도 제공합니다.
Screenshot to Code는 디자인을 코드로 번역하는 지루한 프로세스를 자동화하여 웹 개발 워크플로우를 간소화하는 것을 목표로 합니다. 이는 프로토타이핑을 가속화하고 수동 코딩 노력을 줄이며 디자인과 구현 간의 일관성을 보장하려는 개발자, 디자이너 및 팀에게 특히 유용합니다. 이 프로젝트는 GitHub에서 활발하게 유지 관리되며 커뮤니티 기여 및 피드백을 장려합니다.
Screenshot to Code의 핵심 기능
스크린샷 및 목업을 HTML, Tailwind, React, Vue 코드로 변환합니다.
화면 녹화를 지원하여 기능적인 프로토타입을 생성합니다.
즉시 사용 가능한 호스팅 애플리케이션을 제공합니다.
사용자 정의 및 기여를 위해 로컬 실행을 허용합니다.
Gemini, GPT, Claude를 포함한 여러 AI 모델과 통합됩니다.
Gemini를 사용한 AI 기반 에셋 추출 기능을 제공합니다.
Replicate를 통한 이미지 생성, 배경 제거 및 편집을 지원합니다.
React/Vite 프론트엔드 및 FastAPI 백엔드를 제공합니다.
시각적 확인을 위한 선택적 스크린샷 미리보기를 포함합니다.
간소화된 배포를 위한 Docker 지원을 제공합니다.
Screenshot to Code 시작하기
GitHub에서 리포지토리를 클론합니다.
백엔드는 Poetry를 사용하고 프론트엔드는 Yarn을 사용하여 종속성을 설치합니다.
환경 파일에서 AI 모델 제공업체(OpenAI, Anthropic, Gemini, Replicate)의 API 키를 구성합니다.
Chromium과 같은 필요한 브라우저 종속성을 설치합니다.
Poetry를 사용하여 백엔드 서버를 실행합니다.
Yarn을 사용하여 프론트엔드 개발 서버를 실행합니다.
제공된 로컬 URL(예: http://localhost:5173)을 통해 애플리케이션에 액세스합니다.
Screenshot to Code의 사용 사례
- 신속한 프로토타이핑
- 프론트엔드 개발
- 디자인을 코드로 변환
- UI/UX 워크플로우 가속화
- 화면 녹화를 프로토타입으로 변환
- 에셋 추출
- 코드 생성 비교
