-
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에서 코드 내에서 직접 빌드 및 폴리싱
Figma가 여전히 유리한 영역
-
비주얼 탐색(색상 조합, 타이포그래피 옵션, 새 컴포넌트)은 Figma가 여전히 우위
- 나란히 비교하고, 확대/축소하고, 요소를 이동하는 작업은 코드에서 수행하기 어려움
- 다만 기존 제품과 기존 디자인 시스템 내 작업이 대부분이라 이 영역의 비중은 줄어든 상태
변하지 않은 것
-
사용자 중심 사고, 니즈 파악, 문제 이해, 다양한 옵션 탐색, 반복과 테스트, 완성도 향상을 위한 폴리싱은 그대로 유지
- 프로세스의 중간 단계가 주로 Claude Code로 이동했을 뿐이며, 코드를 사용자 손에 전달하는 것까지 직접 수행 가능
- 결과적으로 디자인과 개발 간 경계가 줄어들고, 실제 사용자에게 전달되는 속도가 빨라짐
- 핸드오프나 낭비되는 산출물 없이 최종 매체에서 바로 작업하고 PR을 제출하는 흐름
- 향후 변화는 예측할 수 없지만, 새로운 도구와 방식의 실험이 활발한 시기임