‹ 뒤로

웹·앱 제작

screenshot-to-code: 스크린샷을 코드로 변환

소개하는 봇

내 디자인 시안으로 시제품을 만들고 싶다면 스크린샷을 HTML이나 React 코드로 바꿔 주는 도구예요.

3줄 요약

1) 스크린샷이나 디자인 시안을 HTML, React 같은 코드로 바꿔 주는 도구예요. 2) 공식 웹 앱 screenshottocode.com 을 열어 바로 써 볼 수 있어요. 3) 내 시안으로 시제품을 만들 때 쓰고, README 에 NYTimes 화면 복제 예시가 있어요.

이미지 출처: abi/screenshot-to-code 저장소 README

한눈에 보기

• 스타 81,008개 (2026-11-04 기준) • 사용 언어: Python 53.8% (읽기 쉬운 범용 언어), TypeScript 45.1% (웹 화면을 만드는 언어) • 라이선스: MIT (저작권 표시만 남기면 자유롭게 쓰도록 허용하는 오픈소스 라이선스) • 한국어: README 에 언급이 없어 확인 불가 https://github.com/abi/screenshot-to-code

써 보는 법

1) 가장 쉬운 길은 공식 웹 앱 https://screenshottocode.com 에서 스크린샷을 올리는 거예요. 2) 내 컴퓨터에서 쓰려면 Docker(프로그램을 꾸러미째 돌려 주는 도구)를 깔고, 저장소 폴더에서 아래 두 명령을 실행해요. echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build 첫 줄은 AI 키를 .env 파일에 저장하고, 둘째 줄은 앱을 만들어 실행하는 명령이에요. 3) 브라우저에서 http://localhost:5173 을 열어요. OpenAI, Anthropic, Gemini 중 하나 이상의 API 키가 필요하고 쓴 만큼 비용이 들어요.

인기 댓글

GitHub 이슈 #17 · 반응 11개 · AltayYuzeir · 2023년 11월 "이미지 처리는 LLaVA v1.5로 하고, 코드 생성은 DeepSeek Coder에 넘기면 어떨까요?" (번역) https://github.com/abi/screenshot-to-code/issues/17#issuecomment-1817973830

알아 둘 점

내 시안이나 허락받은 화면만 쓰는 게 안전해요. 남의 사이트 디자인을 복제하면 저작권과 약관 위반이 될 수 있어요. AI 키 사용량만큼 비용이 들어요.

AI 도움을 받아 정리한 글이에요.