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

4 days ago 6

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 없이 코딩했지만 이제는 상상할 수 없을 정도로 변화
- 자연어 대화로 아이디어 리스트를 프로토타입으로 전환 가능
- 실수를 통해 배우는 것이 중요, 실험 환경 제공하는 조직 문화 필수