프로덕트 디자인

주요 사용 사례

프론트엔드 폴리시 및 상태 관리 변경

기존에는 상세 디자인 문서를 작성하고 엔지니어와 여러 차례 피드백(서체, 색상, 간격)을 주고받았다. 이제 Claude Code로 직접 구현한다. 엔지니어들도 “보통 디자이너가 하리라 기대하지 않는 대규모 상태 관리 변경(“large state management changes that you typically wouldn’t see a designer making”)“을 해내고 있다고 평가하며, 본인이 구상한 정확한 품질을 달성할 수 있게 됐다.

GitHub Actions 자동 티켓팅

GitHub 이슈/티켓에 필요한 변경을 기술하면 Claude가 자동으로 코드 솔루션을 제안한다. 별도로 Claude Code를 열 필요 없이, 지속적인 버그 수정과 폴리시 워크플로우가 유지된다.

목업 이미지로 빠른 인터랙티브 프로토타이핑

목업 이미지를 Claude Code에 붙여넣으면 엔지니어가 즉시 이해하고 반복할 수 있는 완전한 기능 프로토타입이 생성된다. 정적 Figma 디자인 → 설명 → 코드 번역의 기존 반복 사이클을 대체한다.

엣지 케이스 발견 및 시스템 아키텍처 이해

Claude Code로 에러 상태, 로직 흐름, 시스템 상태를 매핑한다. 개발 단계가 아니라 디자인 단계에서 엣지 케이스를 식별하여 초기 디자인 품질을 근본적으로 향상시킨다. 이후 디버깅 시간을 수 시간 절약.

복잡한 카피 변경 및 법적 컴플라이언스

“research preview” 문구를 전체 코드베이스에서 제거하는 작업. 모든 인스턴스 찾기 → 주변 카피 리뷰 → 법무팀과 실시간 조율 → 업데이트 구현. 1주일의 왕복 커뮤니케이션이 30분 콜 2회로 완료.

팀 임팩트

영역	변화
핵심 워크플로우	Figma + Claude Code가 80% 시간 차지하는 주력 도구
실행 속도	2-3배 빠름 — 엔지니어 왕복 없이 직접 구현
사이클 타임	수 주 → 수 시간 (GA 런칭 메시징 등 복잡 프로젝트)
디자인-엔지니어링 협업	디자이너가 시스템 제약과 가능성을 미리 이해

팀 팁

초기 셋업은 엔지니어 도움을 받아라

레포 접근, 권한 설정 등 기술적 온보딩이 비개발자에겐 어렵다. 일단 셋업되면 일상 워크플로우가 변환된다.

커스텀 메모리 파일로 행동을 가이드하라

“나는 코딩 경험이 적은 디자이너이므로 상세 설명과 작은 점진적 변경을 해달라” 지시를 메모리 파일에 넣으면 Claude 응답의 품질과 접근성이 대폭 향상되고 덜 위협적으로 느껴진다.

이미지 붙여넣기로 프로토타이핑하라

Cmd+V로 스크린샷을 직접 Claude Code에 넣어라. 디자인을 읽고 기능 코드를 생성하는 데 탁월하다. 정적 목업을 엔지니어가 즉시 이해할 수 있는 인터랙티브 프로토타입으로 변환해준다.