# Make Real - 그림을 동작하는 소프트웨어로 바꾸기

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=11902](https://news.hada.io/topic?id=11902)
- GeekNews Markdown: [https://news.hada.io/topic/11902.md](https://news.hada.io/topic/11902.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-11-17T10:46:01+09:00
- Updated: 2023-11-17T10:46:01+09:00
- Original source: [makereal.tldraw.com](https://makereal.tldraw.com/)
- Points: 25
- Comments: 4

## Topic Body

- 협업 화이트보드 앱 tldraw 제작자가 공개한 프로토타입  
- 사용자가 그린 소프트웨어 이미지를 AI를 사용하여 실제 작동하는 Tailwind CSS 및 JavaScript 웹 코드로 변환  
- OpenAI의 GPT-4 Vision API를 사용하여 벡터 드로잉을 시각적으로 해석하고 사용자 인터페이스를 복제하거나 간단한 게임을 만들 수 있음  
- 그림과 함께 동작하는 방식을 자연어로 넣으면 그걸 이해해서 동작함   
- 깃헙에 코드도 공개(자신의 OpenAI Key를 입력해야 함)

## Comments



### Comment 20660

- Author: kuroneko
- Created: 2023-11-17T11:04:19+09:00
- Points: 1

이게... 되네요?  
Vision API가 나와서 뭔가 재미있는게 나올거란 생각은 했는데, 놀랍습니다.

### Comment 20659

- Author: bigtallee
- Created: 2023-11-17T10:49:56+09:00
- Points: 1

놀랍네요....

### Comment 20658

- Author: xguru
- Created: 2023-11-17T10:48:01+09:00
- Points: 1

코드 Repo : https://github.com/tldraw/draw-a-ui

### Comment 20657

- Author: xguru
- Created: 2023-11-17T10:47:02+09:00
- Points: 1

사람들이 만들어 본 예제들   
  - 동작하는 슬라이더 만들기 : https://twitter.com/multikev/status/1724908185361011108  
  - 틱택토 게임 : https://twitter.com/multikev/status/1724925816381792661  
  - 블럭깨기(Breakout) : https://twitter.com/andreasklinger/status/1725213534806794285  
  - 스네이크바이트 : https://twitter.com/awwstn/status/1725250076560568668  
  - Pong: https://twitter.com/kenschumacherr/status/1725172202830438680