현생이 바빠 오랜만에 들어온 블로그.
요즘엔 정말 AI 없이 어떻게 살았나 싶은 날들의 연속이다.
최근에 피그마를 그리려던 중에, AI로 UI를 그려주는 AI가 분명히 있겠다는 생각이 들었다.
사실은 이걸 검색해서 바로 찾은 건 아니고,
오히려 UI 관련 강자인 galileo ai / UIzard가 먼저 검색어로 떠올랐는데
내가 원하던 AI 기능은 아닌 것 같아 며칠 동안 서치만 하고 사용하지는 않았었다.
보통 프로젝트를 시작하기 전엔 이전에 기획 - UI - APP 구성의 순서가 하던 버릇 그대로 남아서,
1. 잼보드로 그림을 그려가며 기획 (살도 붙이고 레퍼런스도 찾고)
2. 와이어프레임 그리기 (draw.io)
3. 피그마로 넘어가기 (figma)
...
이 순서로 진행되는데, 1단계인 나의 소중한 잼보드가 올해 종료를 한다는 것이다. (안돼 구글아 돌려줘 내 잼보드)
아무튼 그렇다보니 새로운 어플리케이션을 찾아야하는데
Jamboard에 나온 예시인 패들렛은 써봤는데 그닥 비슷하다고 생각이 들진 않았고 (2-3년전에 써봄)
잼보드를 대안하는 다른 툴들(패들렛, 퀴즈앤보드, 루시드스파크)
안녕하세요 히얼스토리입니다!~ 오늘은 에듀테크 툴 중 하나인 잼보드의 사업 정리 소식과 그에 대한 대안...
blog.naver.com
나머지를 찾아보던 중 하나의 글을 타고 들어간다.
최대 30명까지 함께 사용할 수 있는 화이트보드 ‘tldraw’ | 요즘IT
저는 킥오프 미팅이나 아이디어를 구체화하는 과정에서 화이트보드 서비스를 자주 활용하는데요. 아이디어를 펼쳐서 입체적으로 확인하기 좋고, 노션에 텍스트로 작성하는 것보다 더 적극적으
yozm.wishket.com
근데 검색해보니 이 친구의 진짜 기능은 AI로 UI를 그려주는 것!
설레서 타고 타고 들어가서 가입과 사용까지 해보았다.
따끈한 후기
tldraw를 소개한다.
1. tldraw 접속
make real • tldraw
Draw a ui and make it real with tldraw.
makereal.tldraw.com
아 참고로 그냥 tldraw는 화이트보드 어플이니 makereal로 들어가야 보인다!
(이 부분도 처음 쓴다면 헤맬 수 있음.)
* 아래의 과정이 필요한 이유는, makereal tldraw은 ChatGPT의 gpt-4-vision-preview 모델 기반으로 동작하기 때문이다.
2. 충전하기
OpenAI API에 충전된 금액이 없다면 작동하지 않으니, 최소 5달러 충전을 해야한다.
https://platform.openai.com/account/billing
3. OpenAI API key 생성하기
API key를 입력해야만 작동하므로, 키를 발급받아둔다.
https://platform.openai.com/api-keys
4. OpenAI API key 입력하기
발급받은 OpenAI API 키를 복사해서, make real 화면 아래쪽에 "OpenAI API key" 에 붙여넣는다.
(그 아래는 안해도 된다.)
이제 AI를 사용할 준비는 완료!
5. 도안 그리기
나는 아주 간단한 프로필 화면을 하나 구상해보았다.
6. 드래그 한 상태로, make real 실행
UI로 만들고 싶은 요소들을 클릭한 다음, 오른쪽 상단의 make real 버튼을 눌러준다.
7. 결과
아쉬운 점은 로고로 만들어줬음 하던 부분(school)이 이름처럼 설정된 부분 제외하고는
정말 깔끔하게 내가 심지어 그리지도 않은 submit 버튼까지 만들어줬다.
8. HTML 코드 사용해보기
오른쪽 점 세개를 누르면 HTML 코드를 카피할 수 있다.
코드펜에 실행해보았더니 동일하게 적용되었다.
정말 5분도 안걸려서 프로필 페이지를 하나 만든 셈이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Form</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
<div class="text-center mb-6">
<div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gray-200 flex items-center justify-center">
<svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4a4 4 0 100 8 4 4 0 000-8zM6.343 17.657A8 8 0 0112 14a8 8 0 015.657 3.657M12 14v7m0 0H9m3 0h3"></path>
</svg>
</div>
<h1 class="text-2xl font-bold">School</h1>
</div>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="age" class="block text-gray-700">Age</label>
<input type="number" id="age" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button type="submit" class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">Submit</button>
</form>
</div>
</body>
</html>
후기
다른 예시들을 보니 UI가 복잡해질수록 먹통이 된다고는 하지만,
사실 레퍼런스를 두고 내가 피그마로 직접 구현한다고 치면
이정도 퀄리티면 나쁘지 않다. (아니 너무 좋다.)
너무 크게 바라지 않는다면,
어느정도의 시간과 노력을 save해줄 수 있을 것이라는 기대가 좀 된다.