요약
- 소프트웨어는 무료, 토큰은 무료가 아닙니다. abi/screenshot-to-code 는 MIT 라이선스라 직접 돌려 쓰는 비용이 0원이지만, OpenAI·Anthropic·Gemini 중 최소 한 개의 모델 키가 필요하고 그 요금은 토큰 단위로 해당 사업자에게 냅니다.
- DeepSeek은 이 도구의 선택지에 없습니다. README 기본 모델은 Gemini 3 Flash / 3.1 Pro, GPT-5.5 / 5.4 Mini, Claude Opus 4.6 / 4.8 이며, 리포지토리를 "deepseek"으로 검색하면 결과가 0건입니다.
- DeepSeek에서 이미지를 읽는 모델은 deepseek-flash 입니다. 공식 가격표의 Vision 행을 보면 flash 는 ✓, deepseek-v4-pro 는 "Not supported". 이미지 입력은 base64, 공개 URL, Files API의 file_id 세 가지입니다.
- 두 길의 종착점은 같습니다 — 더블클릭으로 열리는 HTML 파일 하나. DeepSeek이 공개한 Flash 단가 기준으로는 스크린샷 한 장과 마크업 몇 천 토큰에 1센트도 들지 않습니다.
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
채널:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
채널:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
문서:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
문서:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
문서:api-docs.deepseek.comDocs
이미지는 두 개의 깨끗한 화면 녹화(카메라 오버레이 없음, 번인 자막 없음)에서 추출했습니다. 지원 스택, 필요한 키, Docker 명령, DeepSeek 이미지 제한은 abi/screenshot-to-code README, 저장소 소스 파일, api-docs.deepseek.com 에 대조해 확인했습니다.
스크린샷은 녹화 채널을 출처로 표기하고 각 단계를 정확한 타임스탬프로 딥링크했습니다. 두 녹화 모두 현재의 DeepSeek 모델 명칭보다 앞서 찍힌 것이므로, 화면의 옛 라벨과 본문이 다를 때는 공식 문서를 따릅니다.
15단계 전체: 스크린샷 한 장에서 실행되는 페이지까지
스크린샷 한 장에서 시작
- 1
재현할 UI 영역을 캡처한다
이미지는 아무거나 괜찮습니다 — 도구 자체 데모는 YouTube 채널 페이지를, 아래 DeepSeek 경로에서는 log.PNG로 저장한 68KB 로그인 목업을 씁니다. 크린샷이 글자 설명보다 강한 이유는 여백·색·위계가 이미 정해져 있기 때문입니다. 모델이 만들어내는 대신 읽어들이기만 하면 됩니다.찾는 컴포넌트만 잘라내세요. 화면 전체를 담으면 나중에 지울 외곽 장식으로 토큰을 태우게 됩니다.
출발점. PNG로 저장해 둔 로그인 카드. 아직 아무것도 변환하지 않았습니다.1:02 지점 보기 - 2
변환기를 열고 네 가지 입력 경로를 확인한다
로컬 설치가 끝나면 http://localhost:5173 에 업로드 상자와 세 개의 지름길이 놓여 있습니다. Record Screen(실제 사이트를 녹화), Enter URL과 Capture(도구가 대신 URL을 캡처), Import from Code(기존 HTML을 붙여 계속 편집). Generating 드롭다운에서 출력 스택을 고릅니다 — HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind. 계정 가입은 전혀 없고, 앱은 직접 자기 모델 사업자와 통신합니다.
셀프호스트 앱의 현관. 드롭 존, 화면 녹화, URL 캡처, 코드 가져오기.4:00 지점 보기
무료 오픈소스 변환기 설치
- 3
설치 전에 호스트를 확인한다
이 앱은 React/Vite 프런트엔드에 FastAPI 백엔드 구조이고, Docker 경로라면 동작하는 Docker Engine이 필요합니다. Fahd Mirza 는 먼저 cat /etc/*release 로 기계를 확인합니다 — 여기서 출력은 Ubuntu 22.04.4 LTS. 뒤따르는 명령이 POSIX 셸과 사용 가능한 docker compose를 전제하기 때문입니다. macOS와 Windows도 Docker Desktop이 돌아가면 똑같이 됩니다.
2초짜리 환경 확인. Ubuntu 22.04.4 LTS, 뒤에서 Docker Desktop이 돌고 있습니다.2:12 지점 보기 - 4
리포지토리를 클론하고 backend/.env 에 키 하나를 넣는다
git clone https://github.com/abi/screenshot-to-code 를 실행하고 cd 한 뒤, compose가 읽는 .env 파일에 키를 적습니다. README 원문이 그대로 echo "OPENAI_API_KEY=sk-your-key" > .env 입니다. 시작만 한다면 키 하나로 충분합니다. README가 인정하는 건 OpenAI·Anthropic·Gemini 셋이고, 많이 넣을수록 앱이 매 생성마다 더 강한 모델 조합을 고릅니다. DeepSeek은 이 목록에 없으며, 그 사정은 FAQ 두 번째 문항에 적었습니다.
README의 자리표시자 키를, 백엔드가 부팅 때 읽는 파일에 그대로 썼습니다.2:55 지점 보기 - 5
두 컨테이너를 명령 하나로 빌드·실행한다
리포지토리 최상위에서 docker compose up -d --build. 기본 이미지를 받고 백엔드에 Poetry를, 프런트에 yarn 의존성을 설치한 뒤 둘을 백그라운드에 띄워 둡니다. 캐시가 비어 있으면 몇 분 걸립니다. compose 파일은 백엔드를 7001, 프런트를 5173 포트로 매핑합니다. README는 이 방법이 개발용이 아니라 실행용이라고 경고합니다 — 파일을 고쳐도 재빌드되지 않습니다.
설치 전체가 명령 한 줄. -d 가 붙어 터미널을 닫아도 그대로 돕니다.3:25 지점 보기 - 6
프런트·백엔드 레이어가 빌드되는 로그를 본다
실패할 때 진짜 유용한 부분이 이 로그입니다. backend 2/7 RUN pip install "poetry==1.4.1" 와 frontend 4/5 RUN yarn install 두 레이어가 프록시 아래나 막힌 네트워크에서 가장 잘 깨집니다. 여기서 멈췄다면 고칠 대상은 앱이 아니라 Docker DNS나 npm 미러일 가능성이 큽니다. 마지막 레이어가 끝나면 localhost:5173 이 응답하기 시작합니다.
빌드 20초. 두 이미지 모두 의존성 설치 레이어를 통과했습니다.3:45 지점 보기
변환, 저장, 다듬기
- 7
스크린샷을 끌어다 놓는다
파일을 점선 상자에 드래그하거나 클릭해서 선택 창을 열면, 이미지가 왼쪽 레일에 ORIGINAL SCREENSHOT 으로 남아 이후 모든 버전의 참조가 됩니다. 다크냐 라이트냐는 톱니바퀴 아이콘 안의 취향 문제이지 기능 차이가 아닙니다. 그 톱니바퀴 대화상자에서 키를 바로 붙여넣을 수도 있습니다(.env를 수정 안 해도 됨). README에 따르면 여기서 설정한 키는 브라우저에만 저장되고 .env 설정을 덮어씁니다.
같은 앱의 다크 테마. 파일을 기다리는 중이고, 드롭 존이 화면의 거의 전부입니다.4:45 지점 보기 - 8
생성하고 변형을 비교한다
이 앱은 하나의 프롬프트로 여러 모델을 돌리기 때문에, 첫 결과를 강요받는 대신 결과를 고를 수 있습니다. Option 1과 Option 2는 같은 스크린샷에 대한 탭이고, 몇 개가 나오는지는 backend/config.py 의 NUM_VARIANTS 가 정합니다 — 이미지 입력은 4개, 영상 입력은 2개. 코드는 만들어지는 대로 사이드바에 스트리밍되므로 방향이 틀렸으면 Cancel 로 멈출 수 있습니다. 모든 실행은 Versions 에 남으니 마음껏 실험해도 잃는 게 없습니다.
같은 스크린샷의 두 변형이 생성 중이고, 아래에 원본이 고정돼 있습니다.5:00 지점 보기 - 9
세 가지로 본다: Desktop, Mobile, Code
미리보기 창 위에는 세 개의 스위치 — Desktop, Mobile, Code — 가 있고, 넘길 때 진짜 쓰는 건 Code 입니다. 복사할 수 있는 원시 마크업이 여기에 나옵니다. Reset 은 그 실행을 버리고, Download 는 내보내고, 변형 아래에는 Update(다른 지시 보내기), Regenerate(같은 지시 재실행), Select and update(바꿀 영역을 박스로 지정)가 놓여 있습니다. 여기서 스크린샷 변환은 시연에서 편집 루프로 바뀝니다.
재현된 페이지와, 그 옆에 붙은 계속 다듬는 제어들.5:20 지점 보기 - 10
마크업을 평범한 .html 파일로 저장한다
Code 탭에서 코드를 복사해 파일에 붙입니다 — 여기서는 mycode 폴더의 test.html —それで 빌드 절차가 끝입니다. 출력은 자기완결적인 HTML에 Tailwind 클래스이므로, 사이에 패키지 설치도 개발 서버도 필요 없습니다. 실제 컴포넌트 트리에 넣고 싶다면 React나 Vue 파일에 붙여 넣고 클래스 이름을 거기에 맞추세요.
파일 하나, 3.1kB. 우클릭해서 Firefox로 열었습니다.5:40 지점 보기 - 11
로컬에서 열고 무엇이 살아남았는지 점검한다
파일 시스템에서 바로 열면 백엔드 없이도 돌아간다는 사실이 확인됩니다. 그다음 ORIGINAL SCREENSHOT 축소판과 정직하게 비교하세요. 레이아웃, 타이포 위계, 여백은 대체로 잘 옮겨 오지만 근사처리가 되는 건 제3자 로고와 사진입니다. 그래서 README가 Gemini 키를 강하게 권합니다(에셋 추출 — 스크린 속 실제 이미지를 재활용하는 역할)하고, Replicate 키도 권합니다(이미지 생성과 배경 제거). 빠진 건 처음부터 다시 만드는 게 아니라 추가 지시로 채우는 것입니다.
로컬 파일 상태로 실행된 변환 결과. 배너와 채널 헤더가 재구축됐습니다.6:12 지점 보기 - 12
재생성 대신 추가 지시로 다듬는다
변형 아래 입력창에 바꿀 내용을 적습니다 — 여기서는 "change the background color to deep blue". 앱은 새 페이지가 아니라 새 버전을 만들기 때문에 Versions 에 Create v1 과 v2 가 나란히 남습니다. "Include screenshot of current version?" 을 체크하면 현재 렌더링도 함께 전송돼, 미세 조정이 제네릭 레이아웃으로 되돌아가는 것을 막을 수 있습니다. 이 루프가 있기에 설치할 가치가 있습니다.
지시 한 통으로 수정본이 v2 로 저장되고, v1 은 클릭 한 번으로 되돌아갑니다.6:45 지점 보기
두 번째 길: DeepSeek에게 이미지를 보여주자
- 13
두 번째 길: 스크린샷을 DeepSeek에 붙인다
아무것도 설치하기 싫다면 DeepSeek 채팅 제품이 이미지를 직접 받습니다: 클립으로 log.PNG 를 추가하면 composer 에 68.14KB 첨부로 뜨고, 지시는 한 문장 — "give me html and css code for this image in a single html file". 이 녹화의 칩은 DeepThink (R1) 으로 표시되지만, 선택지 라벨은 해설보다 빨리 바뀌니 이름이 아니라 원리를 믿으세요. 돌아오는 건 붙여서 열면 되는 파일 하나입니다.
DeepSeek 채팅에 스크린샷을 첨부하고, 아래에 "단일 HTML 파일로" 라는 지시를 입력한 상태.1:22 지점 보기 - 14
코드보다 먼저 계획을 읽는다
thinking 패널이 모델이 실제로 이미지를 봤는지 판별하는 지점입니다. Login 제목, User Name 과 Password 레이블, 입력 필드, Submit 단추를 하나씩 열거한 뒤, flexbox 에 justify-content 와 align-items 중앙 정렬, 높이는 100vh 로 정하겠다고 결정합니다. 재현이 어긋났을 때 봐야 할 곳이 여기입니다. 레이블을 건너뛴 모델은 레이블 없는 폼을 내밀어 놓습니다. 펼쳐 보고 설명이 어긋나 있으면 스크린샷을 다시 잘라 보내세요.
10초의 추론. 재현할 요소마다 이름을 불러 넘기고 있습니다.1:45 지점 보기 - 15
미리본 뒤 코드를 꺼낸다
DeepSeek 은 자기 답을 미리보기 모달로 렌더링합니다 — 레이블을 위에 놓고 입력 두 개, 전체 폭의 파란 Submit 단추로 재구성한 로그인 카드이며, 아래에 "AI-generated, for reference only" 가 찍혀 있습니다. 복제가 아니라 단순화라, 목업의 그라디언트 번짐과 필드 아이콘은 사라졌습니다. HTML을 복사해 index.html 로 저장하고 열면 됩니다. 10·11단계와 똑같습니다. 분명히 적어 두면, DeepSeek 채팅 제품과 API 는 둘 다 이미지를 받지만 텍스트 전용 생성기 — 이 사이트의 아티팩트 생성기도 포함 — 는 받지 않습니다. 그런 도구에서는 스크린을 봐주길 바라지 말고 UI를 문장으로 설명하세요.
DeepSeek 미리보기 속 재구성 카드. 이어서 작업할 만큼 가깝고, 확인할 만큼 단순화돼 있습니다.2:48 지점 보기