[후기] makereal tldraw: 와이어프레임으로 HTML 뽑아내기

소개

makereal tldraw은 온라인 화이트보드에 와이어프레임을 그리면, HTML과 Tailwind으로 바꿔주는 기능을 제공한다. 

github의 이 영상을 보고 혁신적이라는 생각이 들어서, 테스트를 해봤다.

준비물

1. openai에 금액 충전하기 

makereal tldraw은 chatgpt의 gpt-4-vision-preview 모델 기반으로 동작한다.

이 기능을 사용하려면 chatgpt credit이 충전되어있어야한다. 최소 5달러는 있어야한다. 

2. chatgpt api key 준비하기

3. open api key 등록하기 

실험1. 단순한 어드민 화면 만들기

 

실험2. 디자인이 적용된 UI 화면 만들기

이러한 화면을 기대하고 실행해봤다.

프롬프트를 날릴 수록 점점 고장나는 UI..

디자인이 적용된 UI를 구성하기에는 어렵단 생각이 들었다. 🤕 

프롬프트를 새로 적용할수록 UI가 점점 고장났다. 

실험3. 

요소를 구체적으로 작성하니, 좀더 괜찮아졌다. 

원리

프롬프트가 궁금해서, 개발자 도구로 API를 어떻게 호출하는지 살펴봤다. 

확인 결과, 직접openai의 생성형 api를 사용한다. 자체 서버를 거치지 않았다. 



system, user라는 역할을 정의하고, 다음과 같은 응답을 내려준다. 

choices > message > content 안에 html 태그가 포함되어있다. 이 정보를 화면에 그려준다. 

총 비용

프롬프트를 6번 호출하고, 한화 245원정도가 나왔다.