이제 Figma보다 Claude로 더 많이 디자인한다

Figma 목업을 대체한 AI 기반 Code-First 프로토타이핑 워크플로 전환

neo2026년 6월 8일15분intermediate

AI 요약

Context

명세서와 Figma 목업 중심의 전통적 디자인 프로세스로 인한 긴 피드백 루프와 구현 단계의 괴리 발생. 특히 OCaml 및 Bonsai와 같은 생소한 기술 스택 도입 시 디자인-개발 간의 높은 진입장벽과 커뮤니케이션 비용이 병목 지점으로 작용.

Figma 기반의 정적 시각화 대신 Claude를 활용하여 실제 코드베이스에서 동작하는 인터랙티브 프로토타입을 직접 생성하는 흐름으로 전환
'문제 정의 → LLM 프롬프팅 → 개발 환경 배포 → 사용자 피드백 → Feature 제출'로 이어지는 Rapid Iteration 루프 구축
프로토타입 코드를 '살아있는 제안 문서'로 정의하여, 구현 상세보다는 UX/UI 검증에 집중하고 최종 프로덕션 코드는 리뷰어가 재작성하는 소유권 분리 구조 채택
JSQL 등 내부 도구의 복잡한 인터랙션(단축키, 확인 메시지 등)을 실제 동작하는 코드로 구현하여 엣지 케이스를 조기에 발견하는 검증 체계 마련
2,000줄 이상의 Diff를 포함하는 대규모 기능 변경까지 LLM 기반 프로토타이핑 범위 확대

실천 포인트

1. 단순 시각적 확인이 필요한지, 실제 인터랙션 검증이 필요한지 구분하여 프로토타이핑 도구 선택

2. AI 생성 코드를 프로덕션에 직접 반영하기보다, 검증용 PoC로 활용 후 엔지니어가 리팩토링하는 워크플로 검토

3. LLM 기반 생성 시 발생할 수 있는 '사고의 외주화' 및 세부 설계 누락 방지를 위한 리뷰어의 비판적 코드 분석 단계 추가

4. 프로토타입 구현 시 정밀한 문서화 대신 '동작하는 코드'를 통해 요구사항을 명확히 전달하는 방식 시도

태그