Screenshot to Code

핵심 기능은 평면 이미지를 받아 구조화된 프런트엔드 코드를 돌려준다. 어떤 인터페이스든 PNG나 JPG를 올리면, 도구가 레이아웃 블록, 텍스트, 버튼, 이미지를 식별하고 그것에 맞는 마크업과 스타일을 쓴다. 깔끔한 시안과 표준 앱 화면에서 가장 잘 작동한다. 지저분한 스크린샷? 그건 한 번 더 봐야 한다.

정지 이미지에서 시작할 필요가 없다. Figma 디자인과 실시간 URL 모두 입력으로 쓸 수 있어, 먼저 그리지 않고도 실제 페이지 구조를 뽑아낼 수 있다. Figma에서 설계하는 팀이나 기존 사이트를 다시 만들려는 팀에게 한 단계를 덜어 준다. 이미 있는 것을 왜 다시 그리겠는가?

프로젝트에 맞는 프레임워크를 고른다. 지원하는 스택은 HTML과 Tailwind, 순수 HTML과 CSS, React와 Tailwind, Vue와 Tailwind, Bootstrap, Ionic과 Tailwind다. 같은 디자인을 몇 가지 스택에서 보는 것은 무엇으로 실제로 만들지 정할 때 유용하다. 어느 쪽이든 구속은 없다.

이 도구는 하나의 모델에 묶여 있지 않다. Gemini, GPT, Claude 계열 등의 옵션을 지원하고, 제공자 키를 더 넣으면 더 강한 조합을 고를 수 있다. 직접 돌린다면 자기 키를 가져오므로, 품질과 비용을 모두 손에 쥔다.

Gemini 키가 있을 때 도구는 스크린샷에서 실제 로고와 이미지를 뽑아 재사용한다. 회색 자리 표시자를 넣는 것과는 다르다. 이 작은 차이가 이미지가 많은 페이지에서 정리 시간을 놀랄 만큼 줄인다. 자리 표시자는 나중에 쫓아다니기 번거롭다.

정지 이미지 너머로, Screenshot to Code는 동작 중인 사이트의 화면 녹화를 받아 작동하는 시제품으로 바꿀 수 있다. 정지한 한 장 이상을 얻는 셈이고, 단일 화면이 아니라 흐름을 담고 싶을 때 쓸모 있다.

프로젝트가 오픈소스라서 복제하고 백엔드와 프런트엔드를 로컬에서 돌리며 자신의 방식대로 맞출 수 있다. 디자인을 제3자 서비스에 보낼 수 없는 팀은 모든 것을 자기 기계에 둘 수 있다. 프라이버시는 중요하다. 완전한 통제도 마찬가지다.