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