--- title: "screenshot-to-code (abi/screenshot-to-code)" creative_title: "스크린샷 한 장, 30초 뒤엔 진짜 웹페이지" url: https://github.com/abi/screenshot-to-code source: GitHub 공식 저장소 README license: MIT stars: 72.8k date: 2026-08-31 purpose: "화면 캡처를 실제 동작 코드로 바꿔주는 오픈소스 도구의 핵심을 빠르게 파악하고, 바로 써먹기 위한 정리 문서" curated_by: 다비(davi.kr) --- # 스크린샷 한 장, 30초 뒤엔 진짜 웹페이지 🔗 **원문**: --- ## 쉬운 설명 **screenshot-to-code**는 웹사이트 화면을 캡처한 사진(스크린샷), 디자인 시안(Figma 목업), 심지어 화면 녹화 영상까지 넣으면 AI가 그걸 보고 **실제로 작동하는 웹 코드**로 바꿔주는 무료 오픈소스 프로그램입니다. 뉴욕타임스나 인스타그램 화면을 넣으면 거의 똑같이 생긴 페이지가 만들어질 정도예요. GitHub에서 별(추천) **72,800개**, 복제(포크) **9,000개**를 받은 인기 프로젝트이고, MIT 라이선스라 상업적으로도 마음껏 쓸 수 있습니다. 만들어주는 코드는 **HTML+Tailwind, HTML+CSS, React+Tailwind, Vue+Tailwind, Bootstrap, Ionic+Tailwind, SVG** 등 7가지 방식 중에 고를 수 있습니다. 뒤에서 일하는 AI는 **Gemini 3 Flash Preview / Gemini 3.1 Pro Preview, GPT-5.5 · GPT-5.2 Codex · GPT-5.4 Mini, Claude Opus 4.6 · 4.8**이고, 그림이 필요하면 **Flux Schnell**이 대신 그려줍니다. 프로그램 자체는 화면 부분(프론트엔드)이 React/Vite, 처리 부분(백엔드)이 Python의 FastAPI로 되어 있습니다(코드 비율 TypeScript 52.3% / Python 46.6%). ## 활용 방법 - **가장 쉬운 길**: 설치 없이 [screenshottocode.com](https://screenshottocode.com)에 접속해 스크린샷을 끌어다 놓아라. API 키도 필요 없다. - **내 PC에서 돌리려면**: OpenAI·Anthropic·Gemini 중 최소 1개의 API 키를 준비하고, 백엔드는 `poetry run uvicorn main:app --reload --port 7001`, 프론트엔드는 `yarn dev`로 실행한 뒤 `http://localhost:5173`을 열어라. - **더 간단히**: Docker가 있다면 루트 폴더에서 `docker-compose up -d --build` 한 줄이면 끝난다. - **실전 팁**: 키를 2개 이상 넣고 같은 화면을 여러 모델로 돌려 비교하라. 마음에 드는 참고 사이트를 캡처해 초안을 뽑고, 그 위에 내 문구와 색을 얹는 방식이 가장 빠르다. ## 전문가 의견 (사실 기반) - **강점**: 처음부터 코드를 짜는 것과 비교해 초안 제작 시간을 크게 단축한다. 별 72.8k·커밋 1,318회는 유지보수가 살아있다는 신뢰 신호다. - **한계**: 결과물은 **픽셀 단위 복제가 아니라 유사 재현**이다. 영상→코드는 저장소 스스로 "실험적(experimental)"이라 명시한다. Ollama 같은 무료 오픈소스 모델은 품질이 낮아 **권장하지 않는다**고 공식 문서에 적혀 있다. - **비용·법적 주의**: 로컬 실행 시 모델 호출 비용은 본인 부담이다. 남의 사이트를 그대로 복제하면 저작권·상표권 문제가 생길 수 있으므로 **학습·프로토타입 용도로만** 쓰고 상용에는 반드시 새로 디자인하라. --- ## Bottom Line 기획서를 더 쓰지 마라. 지금 참고할 화면 하나를 캡처해서 [screenshottocode.com](https://screenshottocode.com)에 던져 넣어라. 10분이면 첫 프로토타입이 손에 잡힌다. --- 정리: 다비(davi.kr) · 원문 출처: GitHub abi/screenshot-to-code (MIT)