# AI는 디자인 워크플로우를 어떻게 변화시키고 있을까? [유튜브]

> Clean Markdown view of GeekNews topic #24153. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=24153](https://news.hada.io/topic?id=24153)
- GeekNews Markdown: [https://news.hada.io/topic/24153.md](https://news.hada.io/topic/24153.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-11-05T10:21:01+09:00
- Updated: 2025-11-05T10:21:01+09:00
- Original source: [youtube.com](https://www.youtube.com/watch?v=5ADHIIBtzQw)
- Points: 13
- Comments: 0

## Summary

디자인 현장이 빠르게 **AI 프로토타이핑 도구 중심의 워크플로우**로 재편되고 있습니다. 이제 디자이너는 Figma에서 멈추지 않고 **Cursor, Claude, V0, Lovable** 같은 도구로 직접 **프론트엔드 코드와 인터랙티브 프로토타입**을 구현하며, 브랜드 시스템까지 자동화 가능한 형태로 산출물을 만들어 전달합니다. 이 변화는 단순히 속도를 높이는 것이 아니라, 디자이너의 역할을 **‘시각적 제작자’에서 ‘제품 비전 커뮤니케이터’** 로 확장시키는 흐름입니다. 결국 중요한 건 도구 숙련도가 아니라, **무엇을 만들지 판단하는 직관과 빠른 실행력**이라는 점 입니다. 코드와 디자인의 경계가 사라지는 지금, 이 흐름은 개발자에게도 꽤 흥미로운 시그널입니다.

## Topic Body

- **AI 프로토타이핑 도구**의 등장으로 디자이너들이 정적 목업을 넘어 **인터랙티브 프로토타입과 실제 코드 구현까지 직접 수행하는 워크플로우로 전환** 중  
- Perplexity, Vercel 등 주요 스타트업에서 디자이너들이 **Cursor, Claude, Lovable, V0 같은 AI 도구를 활용해 프론트엔드 코드 작성 및 프로덕션 배포**까지 담당  
- 브랜딩 영역에서는 **Lovable로 그래픽 시스템 생성 도구를 직접 구축**해 클라이언트에게 인계, 패턴 확장 및 브랜드 유지 관리 자동화  
- **제품 직관력(product intuition)과 그래픽 디자인 기본기(색상, 간격, 비주얼 판단력)** 는 여전히 핵심 역량으로 남아 있으며, AI는 실행 속도를 높이는 가속기 역할  
- 디자이너의 역할이 "사각형 그리기"에서 **"비전 커뮤니케이션 및 의사결정"** 으로 확장되며, 도구 활용 능력보다 **명확한 아이디어와 빠른 판단력**이 더욱 중요해짐  
  
---  
  
### AI 도구 기반 브랜딩 워크플로우  
  
- **Nick Patterson(Lovable, Craft, Maven 등 브랜딩 담당)** 은 Lovable을 활용해 브랜드 그래픽 시스템 생성 도구를 1시간 만에 제작  
  - Flow Glad 결제 프로세서 브랜딩 프로젝트에서 **이슬람 기하학 패턴을 기반으로 한 Pattern Architect 도구** 구축  
  - 클라이언트가 반지름, 별 밀도, 선 두께, 간격 등을 실시간으로 조정 가능한 인터랙티브 툴  
  - 2주 스프린트(10일) 내에 여러 버전의 패턴 생성 도구를 개발하고 클라이언트에게 인계  
- **무드보드 단계부터 완성도 높은 비주얼** 제시 가능  
  - 과거에는 다른 디자이너 작업 레퍼런스 위주였으나, 이제는 자체 제작물이 무드보드의 중심  
  - 2일 차에 이미 타이포그래피 및 지하철 노선도 스타일 패턴 통합 작업 진행  
- **도구를 클라이언트에게 인계하는 새로운 핸드오프 방식**  
  - 브랜드 구축 후 클라이언트가 직접 패턴을 확장하고 변형할 수 있도록 도구 자체를 제공  
  - 클라이언트가 "중간 지점"을 요청할 때 직접 파라미터를 조정해 의도를 표현 가능  
  - 빠르게 움직이는 기업들이 브랜드를 즉시 구현하고 확장할 수 있도록 지원  
  
### AI 프로토타이핑 도구의 실무 활용  
  
- **Pranati Perry(Vercel V0 디자인 리드)** 는 V0를 **자산 생성 및 인터랙션 프로토타이핑**에 활용  
  - 포트폴리오용 카트리지 컴포넌트 제작: Figma에서 SVG 생성 → V0에서 동적 도구로 변환  
  - 단일 프롬프트로 SVG 그라데이션 색상 변경, 텍스트 동적화, 투명 효과 추가 등 구현  
  - 스프라이트 애니메이션 생성 및 웹 기반 RPG 게임 제작 준비  
- **제품 디자인 워크플로우: 사전(Pre) - 진행 중(During) - 사후(Post) 단계**  
  - 사전: Figma와 V0에서 아이디어 탐색, Figma는 더 이상 UI의 단일 소스가 아님  
  - 진행 중: **Claude를 활용한 프로덕션 코드 작성**, 디자이너가 대부분의 디자인 직접 구현  
  - 사후: Vercel Agent가 PR에 자동 코멘트를 남겨 코드 리뷰 지원  
- **V0 활용 범위**  
  - 빌링 플로우 같은 복잡한 프로토타입: Figma에서 스파게티 프로토타이핑 대신 자연어로 모달 흐름 정의  
  - Next.js 컨퍼런스 광고 및 이메일 헤더용 디더링 큐브 효과 생성 도구(브랜드 디자이너 Dan 작업)  
  - CTA 버튼 애니메이션을 V0에서 완성 후 디자인 엔지니어에게 직접 전달  
- **V0 사용자 트렌드**  
  - 초기에는 랜딩 페이지, 그래픽, 셰이더 제작 위주  
  - 최근에는 **세일즈 및 PM 직군이 업무용 개인 소프트웨어 제작**에 활용  
  - PM들이 PRD 보완용 인터랙티브 목업 생성, 정적 프로토타입을 넘어 라이브 데이터 연결 및 AI 통합  
  
### 제품 디자인에서의 AI 도구 통합  
  
- **Henry Modiset(Perplexity VP of Design)** 은 디자이너의 역할을 **문제 해결 + 비전 커뮤니케이션**으로 정의  
  - AI 도구는 인터랙티브 커뮤니케이션 도구로 활용, 완벽한 앱 목업이 아닌 **방향성 시각화**에 초점  
  - 엔지니어에게 작업을 요청하기 전 빠르고 저렴하게 아이디어 탐색 가능  
- **Perplexity 디자인 팀의 AI 활용 현황**  
  - 브랜드 디자인 팀: **속도(velocity)와 볼륨(volume)** 원칙 하에 모든 도구 실험 및 조합  
  - 제품 디자인 팀: **Cursor와 Claude Code로 매일 프로덕션 코드 작성**  
  - 일부 디자이너는 프로토타입 샌드박스에서 애니메이션 조정 후 엔지니어에게 전달  
  - 게임 디자인 팀: 게임 메커니즘 디자이너 + UI 디자이너 + 음악 생성 디자이너 협업  
- **가장 많이 채택된 도구: Cursor**  
  - 제품 디자인 측면에서 가장 완전히 통합된 도구  
  - 작은 단위(특정 애니메이션 등) 탐색 시에는 V0, Lovable 같은 샌드박스형 도구 활용  
  - 브랜드 팀은 Midjourney → Sora(동영상) → 음악 생성 → Frame.io로 이어지는 파이프라인 구축  
- **디자이너의 기술 스펙트럼**  
  - 수년간 프로덕션 코드 작성 경험자: AI를 주요 가속기로 활용  
  - 코딩 경험 없는 디자이너: 애니메이션 미세 조정 및 브랜드적 디테일 추가를 위해 코드 학습 시작  
  - Gunnar(디자이너): 코딩 경험 없었으나 현재 Cursor로 Svelte UI 컴포넌트 작성  
  
### 디자이너가 코드베이스에 기여하는 방법  
  
- **구현이 이제 테이블 스테이크(table stakes)** 로 자리 잡음 (디자이너로서 갖춰야 할 기본 역량이 됨)  
  - 구현 속도가 빨라지면서 **크리에이티브 사고에 더 많은 시간 투자** 가능  
  - 과거 2~3주 걸리던 기능 후속 작업이 이제 1주로 단축  
- **프로토타입 범위 설정이 중요**  
  - 전체 플로우 프로토타이핑은 비효율적, 중간 단계에서 PR 생성 후 실제 구현으로 전환  
  - **핀포인트 인터랙션 프로토타이핑**에 AI 도구가 가장 효과적  
  - 엣지 케이스 처리: 자연어로 조건 설명하는 것이 일일이 목업 만들기보다 효율적  
- **코드 리뷰 및 학습 접근법**  
  - **"블라인드 코딩"을 넘어 LLM이 작성한 코드를 실제로 이해하는 단계**로 진화 필요  
  - LLM을 "인턴"처럼 취급, 구체적인 기술적 지침 제공 시 결과물 품질 향상  
  - Claude Memory에 "나는 디자이너이며, 코드 작동 원리를 배우고 싶다"고 명시해 학습 기회 확보  
  - 엔지니어에게 피해 주지 않기 위해 "발자국(footprint) 최소화" 목표 설정  
  
### 디자이너 역할의 진화와 채용 기준  
  
- **AI 시대 디자이너의 핵심 역량**  
  - **제품 직관력(product intuition)** : 무엇을 만들지 결정하고 대부분의 아이디어에 "노"라고 말하는 능력  
  - "왜 사람들이 이것을 사용할까? 직관적으로 작동하는가? 시장에 어떻게 적합한가? 홈스크린에 둘 만큼 매력적인가?"  
  - **그래픽 디자인 기본기**: 색상, 간격, 캐릭터 정의 등 "좋음과 나쁨"을 판단하는 능력  
- **Perplexity 채용 시 주목하는 신호**  
  - 창업 디자이너 또는 프리랜서 솔로 경력: 독립적 의사결정에 익숙한 인물  
  - 제품 직관력과 아트 디렉션 양면성을 갖춘 인재  
  - **지속적인 학습 의지**: 도구가 빠르게 변화하므로 적응력 중요  
- **디자이너의 역할 재정의**  
  - "사각형 그리기"에 갇히면 권한(power)이 없음  
  - AI 도구를 통해 **머릿속 비전을 더 강력하게 커뮤니케이션** 가능  
  - 디자이너 코딩의 핵심 이점: "내 생각을 설명하기보다 직접 만드는 것이 더 쉬움"  
  - 인터랙티브하고 깊이 있는 결과물을 며칠 내에 제작 가능  
  
### 협업 구조와 실무 조언  
  
- **PM과 디자이너가 모두 프로토타이핑 가능한 환경**  
  - 최악의 경우 혼란, 최선의 경우 더 나은 소프트웨어 탄생  
  - 첫 원칙부터 재검토: "정적 이미지 도구로 소프트웨어를 기획하는 것은 비합리적"  
  - 인터랙티브 프로토타입이 소프트웨어 디자인의 자연스러운 방식  
- **명확한 의사결정 문화와 소유권 설정 필요**  
  - 누구나 제작 가능할 때 **더 빠른 결단력**이 요구됨  
  - 디자이너의 강점: 불확실성 속에서 방향 선택에 능숙함  
- **실무 적용 조언**  
  - 아이디어가 80%, 도구 활용은 20%  
  - 2~3년 전에는 AI 없이 코딩했지만 이제는 상상할 수 없을 정도로 변화  
  - 자연어 대화로 아이디어 리스트를 프로토타입으로 전환 가능  
  - 실수를 통해 배우는 것이 중요, 실험 환경 제공하는 조직 문화 필수  
  
### 결론 — AI가 확장하는 디자인의 스펙트럼  
- AI는 **디자이너의 속도를 높이는 도구가 아니라, 창의적 산출물의 폭을 넓히는 매개체**로 작용  
- 이제 디자이너는 **툴 사용자에서 툴 제작자**로 진화하며, 코드·AI·그래픽의 경계를 넘나듦  
- **Figma 이후의 디자인 시대**는 “정적 이미지가 아닌 상호작용하는 아이디어”를 설계하는 방향으로 이동 중  
- AI의 대중화로 인해 **‘누가 구현할 수 있느냐’보다 ‘무엇을 만들고자 하느냐’** 가 더 중요한 시대가 도래함

## Comments



_No public comments on this page._