▲

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

 (youtube.com)
12P by neo 4일전 | ★ favorite | 댓글과 토론
  • 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의 대중화로 인해 ‘누가 구현할 수 있느냐’보다 ‘무엇을 만들고자 하느냐’ 가 더 중요한 시대가 도래함