# Screenshot-To-Code - GPT-4V로 화면 캡쳐를 코드로 변환하기

> Clean Markdown view of GeekNews topic #11927. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=11927](https://news.hada.io/topic?id=11927)
- GeekNews Markdown: [https://news.hada.io/topic/11927.md](https://news.hada.io/topic/11927.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-11-19T10:02:02+09:00
- Updated: 2023-11-19T10:02:02+09:00
- Original source: [github.com/abi](https://github.com/abi/screenshot-to-code)
- Points: 18
- Comments: 2

## Topic Body

- GPT-4 Vision 을 이용해서 화면 스크린샷을 HTML/Tailwind CSS 코드로 변환   
- 화면에 이미지는 DALL-E 3 를 이용해서 비슷하게 보이는 이미지를 생성해서 대체 가능   
- 추가 프롬프트를 입력해서 원하는 대로 생성되는 코드를 수정 가능   
- React/Vite 프론트엔드 + FastAPI 백엔드

## Comments



### Comment 20745

- Author: [hidden]
- Created: 2023-11-20T14:49:26+09:00
- Points: 1

[숨김 처리된 댓글입니다]

### Comment 20705

- Author: xguru
- Created: 2023-11-19T10:03:01+09:00
- Points: 1

[Make Real - 그림을 동작하는 소프트웨어로 바꾸기](https://news.hada.io/topic?id=11902) 과 비슷하지만 그냥 스크린샷만 넣으면 되는 군요.  
뭔가 따라서 만들 때는 정말 손쉽게 가능할 듯