[튜토리얼] 스케치만 하면 AI가 바로 코드로… 직접 만든 인터랙티브 타이머부터 피아노까지 신기한 실험기
스케치만 하면 AI가 바로 코드로… 직접 만든 인터랙티브 타이머부터 피아노까지 신기한 실험기
이 영상은 메이크 리얼(Make Real)의 AI 툴 ‘tl드라’를 활용해 스케치만으로 HTML, CSS, 자바스크립트 코드를 자동 생성하는 과정을 보여줍니다. 시연자는 간단한 타이머 UI부터 슬라이더, 피아노 건반 같은 복잡한 인터랙티브 디자인까지 직접 그려보고, AI가 이를 실제 작동하는 웹 코드로 변환하는 과정을 단계별로 설명합니다. 특히 GPT API를 연동해 자연어와 스케치를 기반으로 코드를 생성하는 점이 인상적이며, 결과물을 웹에서 바로 확인할 수 있어 실용적입니다. 또한, 피그마(Figma)와 연동해 더 정교한 UI 디자인과 코드 구현이 가능한 ‘빌드(Build)’ 미션도 소개하며, 비주얼 스튜디오 코드 설치부터 위젯 빌드 방법까지 친절하게 안내합니다. AI 기반 UI 자동 생성에 관심 있는 분들께 꼭 추천드리고 싶은 영상입니다.
이 영상은 소유자가 외부 웹사이트에서 재생을 허용하지 않아 썸네일만 표시됩니다.
썸네일을 클릭하면 유튜브로 이동합니다.
[영상 정보]
- 영상 제목: 법으로 금지하고 싶은 AI 대충 그렸는데 이게 된다고...?
- 채널명: 디자인하는AI
- 업로드 날짜: 2023-11-27
- 영상 길이: 7:47
[영상에서 사용한 서비스]
- Make Real tldraw : https://makereal.tldraw.com/ — 스케치를 그리면 디자인부터 코드까지 작성해 주는 AI 도구
- build-it-figma-ai : https://github.com/jordansinger/build-it-figma-ai — 피그마에서 AI 기능을 사용하는 오픈소스 프로젝트
- Visual Studio Code : https://code.visualstudio.com/ — 코드 편집기
- Node.js : https://nodejs.org/en/download — 자바스크립트 런타임 환경
- OpenAI : https://openai.com/ — AI 모델 및 API 제공 플랫폼
- - 메이크 리얼 : https://makereal.ai — 스케치와 텍스트를 입력하면 GPT API를 이용해 HTML, CSS, 자바스크립트 코드를 생성하는 AI 플랫폼
- - GPT API : https://platform.openai.com — OpenAI에서 제공하는 자연어 처리 및 코드 생성용 AI API
- - 피그마 : https://www.figma.com — UI/UX 디자인 협업 및 프로토타이핑 툴
- - 빌드 (Build) : https://github.com/build — 피그마 미션으로 스케치와 텍스트를 입력하면 UI 디자인과 코드를 생성하는 오픈소스 AI 프로젝트
- - 비주얼 스튜디오 코드 : https://code.visualstudio.com — 마이크로소프트에서 제공하는 무료 코드 에디터
[주요 내용]
스케치만으로 AI가 자동으로 타이머 기능을 구현하는 과정을 보여줍니다. 버튼 클릭 후 기다리면 GPT API를 활용해 HTML, CSS, 자바스크립트 코드가 생성되어 카운트업과 카운트다운 타이머가 손쉽게 완성되는 점이 인상적입니다. AI 기반 웹 개발 자동화에 관심 있는 분께 추천합니다.
GPT API를 활용해 CSS와 자바스크립트로 슬라이더 UI를 직접 만들어보고, 스케일과 로테이션 조절 기능까지 테스트하는 과정을 상세히 보여줍니다. 실제 작동 여부를 검증하며 인터랙션 구현 방법을 친절하게 설명해, 웹 개발 입문자도 쉽게 따라할 수 있는 점이 인상적입니다.
세로 박스를 반복해 피아노 건반을 시각적으로 구현하는 과정을 친절하게 설명합니다. 단계별 복사와 색상 적용으로 실제 피아노 모양을 만들고, 완성 후 코드를 활용해 작동 여부까지 확인하는 실용적인 방법을 보여줍니다.
코드를 에디터에 붙여 넣고 웹에서 바로 구현 상태를 확인하는 과정을 친절하게 설명합니다. 특히 피그마와 AI를 활용해 스케치와 텍스트만으로 UI 디자인과 코드를 자동 생성하는 방법을 소개하며, 깃허브 소스를 직접 빌드해 위젯으로 만드는 실용적인 팁도 함께 다룹니다.
비주얼 스튜디오 코드와 노드 JS 설치부터 피그마에서 위젯을 만드는 과정까지 차근차근 알려줍니다. 운영체제에 맞는 에디터 선택과 무료 드래프트 파일 활용법 등 실무에 바로 적용할 수 있는 구체적인 팁이 담겨 있어, 위젯 개발 입문자에게 특히 유용합니다.
피그마와 피그잼에서 혼용 가능한 위젯을 쉽게 만들고 저장하는 과정을 단계별로 친절하게 설명합니다. 위젯 유형 선택부터 저장 경로 지정, 코드 수정까지 실무에 바로 적용할 수 있는 팁을 구체적으로 알려줘 디자인 작업 효율을 높이고 싶은 분들께 추천합니다.
준 위젯 파일과 기터브 다운로드 파일을 같은 경로에 드래그 앤 드롭으로 쉽게 넣고, 터미널에서 노드JS와 npm 설치 과정을 차근차근 확인하는 방법을 친절하게 안내합니다. 파일 대치부터 경로 설정까지 실무에 꼭 필요한 단계별 팁을 담아 초보자도 따라 하기 편한 설명이 돋보입니다.
다운로드 경로를 패키지.json 파일에서 정확히 복사해 터미널에 붙여넣는 방법을 친절하게 설명합니다. 이 과정은 npm 설치와 GPT API 키 설정을 원활하게 진행하는 데 꼭 필요한 단계로, 실무에서 오류 없이 환경을 세팅하는 데 큰 도움이 됩니다.
GPT API 키 발급과 적용 과정을 단계별로 쉽게 설명해 줍니다. 오픈AI 사이트에서 로그인 후 API 키를 생성하는 방법을 친절하게 안내해, 처음 접하는 분들도 어렵지 않게 따라할 수 있습니다.
API 키는 프로그램 간 안전한 소통을 위한 고유 문자열로, 생성 후 반드시 복사해 안전하게 보관해야 합니다. 복사하지 않으면 재발급이 필요하며, API 사용량도 별도 페이지에서 쉽게 확인할 수 있어 관리가 편리합니다.
무료 크레딧 5달러로 시작해 API 키를 적용하고, 비주얼 스튜디오 코드에서 빌드 과정을 거쳐 피그마 위젯을 실행하는 방법을 단계별로 친절하게 안내합니다. 실습에 필요한 구체적인 절차와 추가 충전 필요성까지 명확히 설명해 이해하기 쉽습니다.
빌드 완료된 위젯이 제대로 작동하는지 테스트하고, AI 플러그인 ‘와이어프레임 디자이너’를 활용해 웹 와이어프레임을 빠르고 효율적으로 그리는 과정을 친절하게 설명합니다.
AI가 자동으로 페푸 이커머스 메인 페이지 와이어프레임을 고퀄리티로 그려주고, 이미지 영역과 각 섹션 설명을 텍스트로 명확히 작성해 쉽게 코드 변환까지 할 수 있는 과정을 친절하게 보여줍니다.
와이어프레임을 AI가 자동으로 코드로 변환해 반응형 웹까지 구현하는 과정을 살펴봅니다. 아직 완벽하지는 않지만, 콘택트 폼 활성화와 텍스트 입력까지 자연스럽게 작동하는 점이 인상적이며, 앞으로 디자이너나 비개발자도 쉽게 MVP를 만들 수 있는 가능성을 보여줍니다.
관련 링크: 유튜브 바로가기
