<div id="readability-page-1" class="page"><div><h2 data-ke-size="size26">소개</h2>
<p data-ke-size="size16"><a href="https://makereal.tldraw.com/" target="_blank" rel="noopener">makereal tldraw</a>은 온라인 화이트보드에 와이어프레임을 그리면, HTML과 Tailwind으로 바꿔주는 기능을 제공한다.&nbsp;</p>
<video src="https://user-images.githubusercontent.com/23072548/284266284-aa181d77-6ce6-41de-990d-e5905153579e.mp4" data-canonical-src="https://user-images.githubusercontent.com/23072548/284266284-aa181d77-6ce6-41de-990d-e5905153579e.mp4" controls="controls" muted="muted">

  </video>
<p data-ke-size="size16"><a href="https://github.com/tldraw/make-real" target="_blank" rel="noopener">github</a>의 이 영상을 보고 혁신적이라는 생각이 들어서, 테스트를 해봤다.</p>
<h2 data-ke-size="size26">준비물</h2>
<p data-ke-size="size16">1. <a href="https://platform.openai.com/account/billing/overview" target="_blank" rel="noopener">openai</a>에 금액 충전하기&nbsp;</p>
<p data-ke-size="size16">makereal tldraw은 chatgpt의<span>&nbsp;</span>gpt-4-vision-preview 모델 기반으로 동작한다.</p>
<p data-ke-size="size16">이 기능을 사용하려면 chatgpt credit이 충전되어있어야한다. 최소 5달러는 있어야한다.&nbsp;</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-11-20 오후 10.55.34.png" data-origin-width="1370" data-origin-height="854"><span data-url="https://blog.kakaocdn.net/dn/cgLzft/btsAxaabydK/AazUFxAygP2yv7RThCKkNk/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/cgLzft/btsAxaabydK/AazUFxAygP2yv7RThCKkNk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="300" height="187" data-filename="스크린샷 2023-11-20 오후 10.55.34.png" data-origin-width="1370" data-origin-height="854"></span></figure>

<p data-ke-size="size16">2. <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener">chatgpt api key</a> 준비하기</p>
<p data-ke-size="size16">3. open api key 등록하기&nbsp;</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-11-20 오후 11.00.25.png" data-origin-width="468" data-origin-height="145"><span data-url="https://blog.kakaocdn.net/dn/bfCTgA/btsAzDppyDy/2xQrxekVD6Wj8U7KiuYMIk/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/bfCTgA/btsAzDppyDy/2xQrxekVD6Wj8U7KiuYMIk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-11-20 오후 11.00.25.png" data-origin-width="468" data-origin-height="145"></span></figure>

<h2 data-ke-size="size26">실험1. 단순한 어드민 화면 만들기</h2>
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="kakaotv" data-video-url="https://tv.kakao.com/v/442607505" data-video-thumbnail="https://scrap.kakaocdn.net/dn/cvX4yg/hyUB97TRoO/dedXUiPZ0g24QGk7LjFKbK/img.jpg?width=1920&amp;height=958&amp;face=0_0_1920_958,https://scrap.kakaocdn.net/dn/bYyCyk/hyUyqDsP0E/83A8HZRXz5GpJ2NZnNTRtK/img.jpg?width=1920&amp;height=958&amp;face=0_0_1920_958" data-video-width="860" data-video-height="429" data-video-origin-width="860" data-video-origin-height="429" data-ke-mobilestyle="widthContent" data-video-play-service="daum_tistory" data-original-url="" data-video-title="">

<img src="https://scrap.kakaocdn.net/dn/cvX4yg/hyUB97TRoO/dedXUiPZ0g24QGk7LjFKbK/img.jpg?width=1920&amp;height=958&amp;face=0_0_1920_958,https://scrap.kakaocdn.net/dn/bYyCyk/hyUyqDsP0E/83A8HZRXz5GpJ2NZnNTRtK/img.jpg?width=1920&amp;height=958&amp;face=0_0_1920_958"></figure>

<h2 data-ke-size="size26">실험2. 디자인이 적용된 UI 화면 만들기</h2>
<figure data-ke-mobilestyle="widthOrigin" data-filename="edited_스크린샷 2023-11-14 오후 11.56.25.png" data-origin-width="403" data-origin-height="866"><span data-url="https://blog.kakaocdn.net/dn/bhhnx7/btsAGRsCAbA/DAvLDCBJsGR1wErHP634Kk/img.png" data-lightbox="lightbox" data-alt="이러한 화면을 기대하고 실행해봤다."><img src="https://blog.kakaocdn.net/dn/bhhnx7/btsAGRsCAbA/DAvLDCBJsGR1wErHP634Kk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="300" height="620" data-filename="edited_스크린샷 2023-11-14 오후 11.56.25.png" data-origin-width="403" data-origin-height="866"></span><figcaption>이러한 화면을 기대하고 실행해봤다.</figcaption>
</figure>

<p>
<figure data-ke-type="video" data-ke-style="alignCenter" data-video-host="kakaotv" data-video-url="https://tv.kakao.com/v/442607019" data-video-thumbnail="https://scrap.kakaocdn.net/dn/smReT/hyUCdWLjHa/jusFmK2QTD7tJTP2xKeISK/img.jpg?width=1920&amp;height=958&amp;face=0_0_1920_958,https://scrap.kakaocdn.net/dn/tkvZF/hyUB9UmkBV/oVJdO2CeHSfAdcmgk8aun1/img.jpg?width=1920&amp;height=958&amp;face=0_0_1920_958" data-video-width="860" data-video-height="429" data-video-origin-width="860" data-video-origin-height="429" data-ke-mobilestyle="widthContent" data-video-play-service="daum_tistory" data-original-url="" data-video-title="">

<img src="https://scrap.kakaocdn.net/dn/smReT/hyUCdWLjHa/jusFmK2QTD7tJTP2xKeISK/img.jpg?width=1920&amp;height=958&amp;face=0_0_1920_958,https://scrap.kakaocdn.net/dn/tkvZF/hyUB9UmkBV/oVJdO2CeHSfAdcmgk8aun1/img.jpg?width=1920&amp;height=958&amp;face=0_0_1920_958"></figure>
</p>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-11-20 오후 10.58.08.png" data-origin-width="1661" data-origin-height="410"><span data-url="https://blog.kakaocdn.net/dn/CGRkK/btsAF64HHCq/bVUHWVqdiLqoxOifxMA0V0/img.png" data-lightbox="lightbox" data-alt="프롬프트를 날릴 수록 점점 고장나는 UI.."><img src="https://blog.kakaocdn.net/dn/CGRkK/btsAF64HHCq/bVUHWVqdiLqoxOifxMA0V0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="스크린샷 2023-11-20 오후 10.58.08.png" data-origin-width="1661" data-origin-height="410"></span><figcaption>프롬프트를 날릴 수록 점점 고장나는 UI..</figcaption>
</figure>

<p data-ke-size="size16">디자인이 적용된 UI를 구성하기에는 어렵단 생각이 들었다. 🤕&nbsp;</p>
<p data-ke-size="size16">프롬프트를 새로 적용할수록 UI가 점점 고장났다.&nbsp;</p>

<h2 data-ke-size="size26">총 비용</h2>
<figure data-ke-mobilestyle="widthOrigin" data-filename="스크린샷 2023-11-20 오후 10.57.48.png" data-origin-width="792" data-origin-height="684"><span data-url="https://blog.kakaocdn.net/dn/D1aWP/btsACkJC6cK/qoAzqGzSh5U6WOX1aaN1O1/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/D1aWP/btsACkJC6cK/qoAzqGzSh5U6WOX1aaN1O1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="322" height="278" data-filename="스크린샷 2023-11-20 오후 10.57.48.png" data-origin-width="792" data-origin-height="684"></span></figure>

<p data-ke-size="size16">프롬프트를 6번 호출하고, 한화 245원정도가 나왔다.&nbsp;</p>

<p data-ke-size="size16">&lt;우당탕탕 찍먹후기 끝&gt;</p></div></div>

복세편살

소개
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가 점점 고장났다. 
 
총 비용
프롬프트를 6번 호출하고, 한화 245원정도가 나왔다. 
 
<우당탕탕 찍먹후기 끝>

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

댓글