스크린샷을 올리면 동작하는 웹 코드가 완성되는 경험
디자인 시안이나 경쟁사 사이트의 스크린샷을 하나만 올리면, 브라우저에서 바로 열 수 있는 HTML과 CSS 코드가 나옵니다. 디자이너가 만든 픽셀을 개발자가 다시 손으로 치지 않아도 되는 순간을 만듭니다. 이 도구는 AI가 화면을 분석해 실제 로고와 이미지를 추출하고, 원하는 프레임워크에 맞는 코드를 생성해 줍니다.
화면에서 코드로, 그리고 영상에서 프로토타입으로
이 도구의 핵심은 정적인 이미지나 동적인 화면 기록을 기능적인 코드로 변환하는 것입니다. 단순히 레이아웃만 복제하는 것이 아니라, 스크린샷 안에 있는 실제 로고나 배경 이미지를 AI가 찾아내서 코드에 그대로 재사용합니다. 또한 웹사이트를 작동하는 모습으로 녹화한 영상까지 받아들이며, 이를 바탕으로 인터랙션이 포함된 프로토타입을 만들어 줍니다. HTML과 Tailwind, React, Vue, Bootstrap, Ionic 등 다양한 스택을 지원하므로 팀의 기술 스택에 맞춰 바로 적용할 수 있습니다.
모델 조합과 로컬 실행 환경
코드의 품질은 사용하는 AI 모델에 따라 달라지며, Gemini와 Replicate 키를 함께 사용하는 것을 강력히 권장합니다. Gemini는 스크린샷에서 실제 에셋을 추출하는 데 필수적이고, Replicate는 이미지 편집과 배경 제거 기능을 담당합니다. 로컬에서 실행하려면 Python 기반의 FastAPI 백엔드와 React/Vite 프론트엔드를 각각 설정해야 합니다. Poetry를 사용해 의존성을 관리하고, Playwright를 통해 Chromium 브라우저를 설치해야 스크린샷 미리보기 기능이 활성화됩니다. Docker를 사용하면 이 복잡한 설정 과정을 한 명령어로 줄일 수 있습니다.
실행 전 반드시 확인해야 할 것들
OpenAI, Anthropic, Gemini 중 하나만 있어도 동작하지만, 모든 키를 추가할수록 더 강력한 모델 조합이 자동으로 선택됩니다. 특히 영상 모드나 고품질 에셋 추출을 원한다면 Gemini 키는 사실상 필수입니다. 로컬 실행 시에는 백엔드와 프론트엔드 포트 설정이 맞는지, 그리고 Chromium이 정상적으로 설치되었는지 설정 다이얼로그에서 점검해야 합니다. 이 도구는 개발을 대체하는 것이 아니라, 반복적인 마크업 작업을 줄여주는 보조 도구로 사용하는 것이 가장 효과적입니다.
