AI 요약
노션의 프로덕트 디자이너 브라이언 러빈은 Anthropic의 'Claude Code'를 활용하여 디자인 워크플로우를 완전히 혁신했습니다. 노션 디자인 팀은 '프로토타입 플레이그라운드'라고 불리는 공유 Next.js 환경을 구축하여, 디자이너들이 Figma에서 만든 시각적 디자인을 즉시 실행 가능한 코드로 변환할 수 있도록 했습니다. 이 시스템은 단순히 화면을 그리는 것에 그치지 않고 실제 AI 모델에 연결되어 작동하므로, 디자이너들은 로딩 상태, 다양한 화면 크기 대응, 상호작용 방식 등 실제 환경에서의 제약 사항을 디자인 초기 단계에서 파악할 수 있습니다. 브라이언은 AI에게 반복적인 수동 작업을 시키는 대신, AI가 스스로 해당 업무를 수행할 수 있도록 'Claude Skills'와 커스텀 명령어를 가르쳐 워크플로우를 자동화했습니다. 이러한 방식은 디자인과 엔지니어링 사이의 간극을 좁히고 프로덕션급 코드에 더 빠르게 접근할 수 있게 합니다.
핵심 인사이트
- 디자이너의 생산성 혁명: 브라이언 러빈은 Claude Code를 도입한 이후 지난 3개월 동안 단 한 줄의 프런트엔드 코드도 직접 작성하지 않고 모든 프로토타이핑을 수행했습니다.
- 시간 배분 및 역할 변화: 디자이너는 여전히 시간의 60~70%를 Figma에서 보내지만, 나머지 시간은 AI와 함께 코드로 작업하며 디자인의 기술적 실현 가능성을 검증하는 데 집중합니다.
- 중앙 집중식 공유 시스템: Next.js 기반의 '프로토타입 플레이그라운드' 저장소를 통해 팀 내 모든 디자이너가 작업물을 공유하고, 노션 스타일의 UI 컴포넌트를 재사용하여 협업 효율을 극대화했습니다.
주요 디테일
- 워크플로우 자동화: Claude Code의 'Plan Mode'와 'Slash Commands'를 활용해 Git 관리 및 배포 프로세스를 자동화하여 반복적인 수작업을 제거했습니다.
- 자기 교정 루프: Figma 디자인을 코드로 변환할 때 AI가 오류를 스스로 수정하는 루프를 설정하여, 정밀한 인터랙티브 프로토타입을 신속하게 생성합니다.
- 실제 환경 테스트: 정적 이미지인 '냅킨 스케치' 단계에서 벗어나 브라우저 기반의 실제 모델을 연동함으로써, 목업에서는 발견하기 어려운 로딩 지연이나 데이터 처리 방식의 문제점을 조기에 포착합니다.
- Claude Skills 활용: AI에게 작업 지시를 내리는 것에 그치지 않고, 특정 작업을 수행하는 '기술(Skill)' 자체를 학습시켜 AI 에이전트 중심의 디자인 환경을 구축했습니다.
향후 전망
- 코드 중심 프로토타이핑의 확산: 디자이너들이 AI 모델의 한계와 성능을 직접 코드로 다루게 됨에 따라, 디자인 업무의 중심이 정적 툴에서 실제 실행 환경(Code-first)으로 이동할 것입니다.
- 엔지니어링 장벽 완화: AI 에이전트가 배포와 코드 수정을 담당하게 되면서 디자인 아이디어가 제품화되는 속도가 더욱 빨라지고 직군 간 경계가 모호해질 것으로 보입니다.
출처:lennys_newsletter