<aside> 📎

참고 출처

1. Use ChatGPT (OpenAI Docs): 아이디어·메모·파일에서 시작해 내용을 설명하고, 아이디어를 발전시키고, 초안을 만들고, 결과를 검토·수정하는 ChatGPT의 기본 작업 방식을 안내합니다.
2. Explore Figma Make (Figma Learn): 기존 Figma 디자인과 컴포넌트를 첨부해 기능형 프로토타입·웹 앱·인터랙티브 UI를 만들고 공유·퍼블리시하는 현재 기능을 안내합니다.
3. AI credits on the Education plan (Figma Learn): 교육 플랜의 개인별 월 3,000 AI 크레딧, 월별 초기화와 잔량 확인 방법을 안내합니다.
4. Introducing “vibe design” with Stitch (Google): 자연어와 다양한 참고 자료로 고해상도 UI를 탐색하고 인터랙티브 프로토타입으로 연결하는 Stitch의 현재 기능을 소개합니다.
5. What is v0? (v0 Docs): 자연어를 바탕으로 웹 인터페이스와 애플리케이션을 생성·수정하고 코드 기반 결과물로 발전시키는 v0의 기본 작업 방식을 안내합니다.
6. Good from Afar, But Far from Good: AI Prototyping in Real Design Contexts (Nielsen Norman Group): AI 프로토타이핑 도구를 세 범주로 나누어 평가한 연구입니다. 개별 제품 추천 목록이 아니라 AI 결과물의 공통 특성과 한계를 이해하는 배경 자료로 활용합니다. </aside>

앞 레슨에서 UI 키트를 선택하고 컴포넌트와 토큰으로 화면을 조립하는 방법을 익혔습니다. 이제는 그 디자인 자원을 AI에 입력해 더 빠르게 시안을 탐색하고, 동작하는 프로토타입으로 발전시킬 차례입니다. 하지만 AI 디자인 도구는 기능이 빠르게 바뀌고 한 도구가 여러 종류의 결과물을 만들기도 하므로, 도구 이름을 외우는 것보다 현재 단계에서 필요한 결과물과 작업 방식으로 분류하고 선택하는 기준을 갖는 것이 중요합니다.

• 이번 레슨에서는 AI 디자인 도구의 세 범주와 경계가 겹치는 이유를 이해합니다.
• 목표 결과물·편집 가능성·디자인 시스템 연결성·비용과 데이터 정책을 기준으로 도구를 선택합니다.
• AI 결과물을 검토하고 다음 단계로 연결하는 공통 작업 흐름을 익힙니다.

AI 디자인 도구의 지형과 대표 도구

AI 기반 디자인 도구의 등장

• 디자인 프로세스의 변화
  • AI 디자인 도구는 자연어, 이미지, 와이어프레임, 기존 Figma 디자인을 입력받아 화면 시안이나 동작하는 프로토타입을 생성합니다. 초안 제작과 반복 수정의 속도는 빨라졌지만, 문제 정의·정보 우선순위·접근성·브랜드 판단까지 자동으로 해결되는 것은 아닙니다.
  • 따라서 AI의 역할은 디자인을 대신하는 것이 아니라 탐색과 제작의 반복 주기를 줄이는 것입니다. 절약한 시간은 사용자 문제를 검증하고 대안을 비교하는 데 사용합니다.
• AI 기반 디자인 도구 활용 범위
  • 비디자이너 창업가도 화면 아이디어를 빠르게 시각화하고 클릭 가능한 데모를 만들 수 있습니다. 다만 결과물이 그럴듯해 보이는 것과 실제 사용 가능하거나 개발 가능한 것은 다르므로, 목적에 맞는 검증 수준을 먼저 정해야 합니다.

AI 도구를 이해하는 세 가지 범주

• Nielsen Norman Group의 연구는 AI 프로토타이핑 도구를 범용 대화형 챗봇, 디자인 시안 생성 도구, 코드 기반 프로토타이핑 도구의 세 범주로 살펴봅니다. 이 분류는 제품명을 외우기 위한 목록이 아니라 입력, 주요 결과물, 후속 편집 경로를 이해하기 위한 틀입니다.
• 첫째, 범용 대화형 챗봇
  • 아이디어와 요구사항을 정리하고, 화면 목록·유저 플로우·UI 문구·프롬프트처럼 디자인 전후의 언어 작업을 돕습니다.
  • 대표 도구 예시: ChatGPT, Claude
• 둘째, 디자인 시안 생성 도구
  • 프롬프트나 스케치에서 와이어프레임과 화면 시안을 만들고 디자인 도구에서 이어서 편집하는 흐름입니다. 대표 사례인 Stitch는 자연어, 이미지, 텍스트, 코드 등을 맥락으로 활용해 고해상도 UI와 인터랙티브 플로우를 탐색할 수 있습니다.
• 셋째, 코드 기반 프로토타이핑 도구
  • 프롬프트나 기존 디자인을 바탕으로 클릭·입력·상태 변화가 동작하는 프로토타입이나 웹 앱을 만듭니다. Figma Make는 기존 Figma 자산과 연결하는 흐름에, v0는 웹 인터페이스와 애플리케이션을 코드 기반 결과물로 발전시키는 흐름에 적합한 대표 사례입니다.

이 과정에서 살펴볼 대표 도구

• ChatGPT: 기획과 언어 작업
  • 서비스 아이디어와 대상 사용자 정리, 화면 목록·유저 플로우 초안, UI 문구 작성, Figma Make에 전달할 요청 정리에 사용합니다. 생성된 내용은 요구사항과 사실에 맞는지 사람이 검토합니다.
  • 비공개 사업 정보와 개인정보를 입력하기 전에는 조직의 데이터 정책과 사용 가능한 정보 범위를 확인합니다.
• Stitch: UI 방향 탐색과 인터랙티브 플로우 제작
  • 자연어와 이미지·텍스트·코드 등의 참고 자료를 바탕으로 여러 UI 방향을 탐색하고, 화면을 연결해 인터랙티브 플로우를 빠르게 확인하는 데 사용합니다.
  • Google Labs의 실험적 제품이므로 기능과 접근 조건이 빠르게 달라질 수 있습니다. 수업에서는 최신 화면과 실제 작동 여부를 확인한 뒤 소개합니다.