쉬운 설명
웹사이트 화면을 캡처한 이미지 한 장만 넣으면, AI가 그 화면을 보고 비슷하게 작동하는 코드를 자동으로 만들어주는 도구입니다. 마치 그림을 보고 캔버스에 척척 따라 그리는 화가처럼, 스크린샷이나 디자인 시안, 심지어 화면 녹화 영상까지 보고서 HTML이나 React 같은 실제 코드로 바꿔주는 거죠.
요약
이 프로젝트는 'screenshot-to-code'라는 오픈소스 도구인데요, 이름 그대로 스크린샷을 코드로 바꿔주는 게 핵심 기능입니다. 웹사이트 화면이나 목업, 피그마(Figma) 디자인 시안, 화면 녹화 영상 등을 넣으면 HTML/Tailwind, React, Vue 같은 깔끔한 코드로 변환해 줍니다. 공식 웹사이트(screenshottocode.com)에서 바로 사용해 볼 수도 있고, 내 컴퓨터에 직접 설치해서 돌려볼 수도 있습니다.
이 도구가 주목받는 이유는, 디자인을 코드로 옮기는 작업이 생각보다 손이 많이 가기 때문입니다. 디자이너가 만든 시안을 개발자가 픽셀 하나하나 맞춰가며 구현하려면 시간이 꽤 걸리는데요. 이 초기 작업을 AI가 대신해 주기 때문에 작업 시간을 크게 줄일 수 있습니다. 특히 화면 녹화 영상을 넣으면 실제로 움직이는 프로토타입까지 만들어준다는 점이 아주 매력적입니다.
활용 포인트
실무에서는 이렇게 활용해 볼 수 있습니다. 기획자나 디자이너가 피그마로 만든 화면 시안을 캡처해 넣으면, 개발자가 밑바닥부터 코드를 짤 필요 없이 AI가 만든 초안 코드를 다듬는 방식으로 작업 속도를 높일 수 있습니다. 예를 들어 랜딩 페이지 시안이 나왔을 때, 스크린샷을 올려서 React 코드를 먼저 뽑아낸 뒤 세부 스타일이나 반응형 화면만 손으로 손질하는 식이죠.
직접 설치해서 쓰려면 OpenAI, Anthropic, Gemini 중 최소 하나의 API 키(AI 모델을 쓰기 위한 인증 암호)가 필요한데요. Gemini와 Replicate 키를 함께 쓰면 결과물의 완성도가 더 높아집니다. Gemini는 스크린샷 속 실제 로고나 이미지를 그대로 찾아 쓰는 역할을 맡고, Replicate는 이미지 생성이나 배경 제거 같은 작업을 도와주거든요. 백엔드는 FastAPI, 프론트엔드는 React/Vite로 구성되어 있어서, 개발 환경을 직접 만져보고 싶은 분들에게는 코드 구조를 뜯어보고 커스터마이징하기 좋은 학습 자료가 됩니다. Docker로도 간단히 띄워볼 수 있어서 테스트용으로 실행하기에도 좋습니다.
주의 사항
원문에서는 Ollama 같은 로컬 오픈소스 모델을 쓰는 방법도 소개하고 있지만, 아직 품질이 떨어져서 추천하지 않는다고 분명히 밝히고 있습니다. 또한 여러 API 키를 함께 쓸수록 결과물이 좋아지는 구조라서, 키가 하나뿐이라면 그 모델로만 생성되기 때문에 기대만큼 결과가 나오지 않을 수도 있습니다. Docker로 실행할 때는 파일을 고쳐도 내용이 바로 반영되지 않는다는 점도 개발 시 미리 알아두어야 합니다. 마지막으로, AI가 만든 코드는 어디까지나 '초안' 수준이므로 실제 서비스에 적용하기 전에는 꼭 사람이 직접 검토하고 수정해야 합니다.
자체 검증
원문 기준으로 스크린샷·목업·피그마 디자인·화면 녹화 영상을 코드로 변환한다는 점, HTML/Tailwind/React/Vue를 지원한다는 내용, OpenAI/Anthropic/Gemini 중 최소 하나의 키가 필요하며 Gemini와 Replicate를 추가하면 품질이 더 좋아진다는 점, FastAPI 백엔드와 React/Vite 프론트엔드 구조, Docker 실행 시 파일 변경이 자동 반영되지 않는다는 점, 그리고 Ollama 사용은 품질 문제로 권장하지 않는다는 사실 모두 원문 내용을 그대로 담고 있습니다. 다만 실제 변환 정확도나 구체적인 사용 후기, 성능 비교 수치 등은 원문에 나와 있지 않아 별도로 적지 않았습니다.
태그
#AI #screenshottocode #오픈소스 #코드생성 #프론트엔드 #GPT #Gemini #개발도구
원문
https://github.com/abi/screenshot-to-code