AI 요약
Notion AI의 디자이너 Brian Lovin은 2026년 2월 인터뷰를 통해 AI 기술이 디자인 프로세스를 어떻게 근본적으로 혁신하고 있는지 상세히 공유했습니다. 그는 팀원들이 고립된 환경에서 작업하는 대신, 공동으로 접근 가능한 Next.js 기반의 '프로토타입 플레이그라운드'를 구축하여 실제 작동하는 코드를 기반으로 소통합니다. 특히 Brian은 Claude Code의 '계획 모드(plan mode)'와 커스텀 슬래시(/) 명령어를 활용해 Figma 디자인을 단 한 번의 프롬프트로 실제 웹 코드로 변환하는 워크플로우를 실현했습니다. 이 방식을 통해 그는 최근 3개월간 단 한 줄의 프론트엔드 코드도 직접 작성하지 않고도 복잡한 기능을 구현할 수 있었습니다. 이는 정적인 디자인 툴인 Figma의 한계를 넘어, AI 기반 제품의 동적인 특성을 실제 환경에서 테스트해야 한다는 그의 철학을 반영합니다. 결과적으로 이러한 AI 협업 방식은 디자인과 엔지니어링 사이의 경계를 허물고 제품 출시 속도를 획기적으로 가속화하고 있습니다.
핵심 인사이트
- 코딩 없는 디자인 구현: Notion AI 디자이너 Brian Lovin은 2026년 2월 기준, Claude Code 도입 이후 지난 3개월 동안 수동으로 프론트엔드 코드를 작성하지 않았음을 밝혔습니다.
- 공유 프로토타입 환경: Figma의 정적인 한계를 극복하기 위해 Next.js, Tailwind CSS, Bun을 활용한 전사적 '프로토타입 플레이그라운드'를 구축하여 실제 제품과 유사한 환경에서 테스트를 진행합니다.
- AI 교육 원칙: "Claude가 사용자에게 특정 작업을 요청하면, 반대로 Claude가 그 작업을 스스로 수행하도록 가르치라"는 원칙을 통해 워크플로우 자동화를 극대화했습니다.
- 즉각적인 코드 변환: Figma 디자인 파일의 스크린샷이나 정보를 단일 프롬프트로 입력하여 프로덕션 수준의 코드로 즉시 변환하는 워크플로우를 확립했습니다.
주요 디테일
- Claude Code 활용: '계획 모드(plan mode)'를 사용하여 복잡한 프로토타이핑 작업 실행 전 최적의 경로를 설계하고 결과물의 정확도를 높였습니다.
- 커스텀 명령어 개발: 반복적인 작업을 줄이기 위해 '아이콘 찾기(find icon)'와 같은 커스텀 슬래시(/) 명령어와 특수 스킬(skills)을 생성하여 디자인 시스템 연동을 최적화했습니다.
- 배포 프로세스 간소화: GitHub 워크플로우를 단순화하는 커스텀 '배포(deploy)' 명령어를 제작하여 개발 지식이 적은 디자이너도 손쉽게 결과물을 배포할 수 있도록 지원합니다.
- 실제 환경 테스트의 중요성: AI 제품은 정적인 툴에서 예측이 불가능하므로, 실제 코드 환경에서 '현실(reality)'을 조기에 마주하는 것이 더 나은 제품을 만드는 핵심임을 강조했습니다.
- 기술 스택의 조화: Next.js를 중심으로 Cursor, GitHub Desktop, Monologue 등의 도구를 결합하여 유기적인 AI 코딩 생태계를 구성했습니다.
향후 전망
- 디자이너 역할의 변화: 디자이너의 역할이 직접 픽셀을 그리거나 코딩하는 것에서 AI에게 의도를 전달하고 시스템을 조율하는 '오케스트레이터'로 빠르게 전환될 것입니다.
- 제품 개발 가속화: 코드 기반 프로토타이핑이 일반화되면서 디자인과 개발의 경계가 허물어지고, 아이디어에서 실제 제품화까지의 속도가 비약적으로 향상될 것으로 예상됩니다.
출처:lennys_newsletter