Claude Code가 디자인 프로세스를 변화시키고 있다

(jlzych.com)

Claude Code를 활용해 중간 단계의 목업 없이 바로 작동하는 코드를 제작하며 디자인 효율을 높이고 있음
Figma 사용량이 크게 줄었으며, 작동하는 코드에서 실제 데이터로 기능을 편집하면 정적 목업보다 UX 개선점이 훨씬 빠르게 드러남
소규모 기능은 Figma 없이 바로 Claude Code로 구현하고, 대규모 기능은 발견 작업 후 인터랙티브 아티팩트를 생성해 팀과 공유
핸드오프나 낭비되는 산출물 없이 PR 제출까지 직접 완료하는 프로세스로 변화
사용자 중심 사고와 문제 탐색, 반복적 개선은 유지하면서 디자인의 핵심 원칙은 유지하며, 디자인과 개발의 경계를 줄이는 새로운 워크플로우로 진화 중

핵심 변화: Claude Code를 통한 디자인 작업

Claude Code를 매일 사용하며, 내 Git 커밋 그래프의 커밋 수 증가가 디자인과 개발의 통합을 보여줌
- Figma 사용은 크게 줄었으며, 코드 기반 디자인으로 전환
의도한 사용자 경험(유스케이스, 예상 동작, 기능 발전 방향)을 자연어로 설명하면 Claude Code가 구현 방법을 파악
기존에 엔지니어와 협업하던 방식과 동일하지만, 디자이너가 직접 통제권을 가짐
중간 충실도(mid-fi) 목업을 완전히 건너뛰고 바로 Claude Code에서 프롬프팅으로 작동 버전을 수 분 내 구현 가능
실제 데이터가 포함된 작동 버전에서 편집하면 정렬, 필터링, 데이터 길이 문제 등 UX 개선 사항이 즉각적으로 눈에 띔

최근 몇 달간 프로세스가 크게 변화
소규모 기능은 Figma 없이 Claude Code로 직접 구현
- QoL 개선, 목록에 검색 필드 추가 등 기존 패턴과 컴포넌트를 활용하는 기능은 Figma를 완전히 건너뛰고 바로 Claude Code로 진행
- 와이어프레임도 핸드오프도 없음
- Claude Code가 적절한 컴포넌트와 패턴을 잘 사용하며, 특히 Opus 4.6은 코드베이스를 이해하고 명시적 지시 없이도 올바른 작업을 수행
대규모 기능운 여전히 사전 탐색과 문제 정의를 수행
- 문제, 유스케이스, 좋은 솔루션의 "형태"(예: "빠르고 마찰 없는 느낌", "사용자에게 추가 작업을 시키지 않음"), 잠재적 접근 방식을 글로 작성
- 이를 일반 Claude 채팅에 가져가 추가 아이디어를 요청하면, 고려하지 못한 흥미로운 아이디어 몇 개와 맥락에 맞지 않는 것들이 함께 나옴
- 선호하는 방향에 대해 Claude로 인터랙티브 아티팩트를 생성, 직접 느낌을 확인하고 팀원과 공유해 피드백 수집
- 프롬프트 작성보다 빠른 경우에는 Figma에서 간단한 로파이 와이어프레임을 그리기도 함
- 반복과 팀 논의, 사용자 피드백으로 접근 방식을 확정한 후 Claude Code에서 코드 내에서 직접 빌드 및 폴리싱