피그마에서 코드로: AI는 어떻게 핸드오프 단계를 혁신하고 있는가
1. 문제는 파일 전달이 아니라 실행 환경의 차이
- 정적인 Figma 프레임과 실제 브라우저 사이의 간극이 핸드오프 비용을 만듭니다.
- 디자이너의 설명이 부족해서가 아니라, 화면만으로 동작과 상태를 모두 전달하기 어렵기 때문입니다.
- 로딩, 빈 데이터, 긴 텍스트처럼 운영 중 마주치는 예외는 정적 화면에서 빠지기 쉽습니다.
- 명세에 없는 상태를 개발자가 추측하면서 디자인 의도와 구현 결과가 어긋납니다.
2. AI가 핸드오프를 실행 가능한 검증으로 바꾸기
- v0, Figma Make, Claude Design은 아이디어와 스케치를 빠르게 작동하는 프로토타입으로 바꿉니다.
- 빈 상태와 오버플로처럼 정적 시안에서 놓치던 문제를 개발 전에 확인할 수 있습니다.
- Cursor, Claude Code, Figma MCP 서버와 Code Layers는 디자인 캔버스와 실제 코드베이스를 연결합니다.
- 결과물을 넘겨주는 방식에서 같은 구현물을 함께 수정하고 검증하는 방식으로 협업이 이동합니다.
3. 새로운 흐름을 만드는 세 단계
- 먼저 디자인 토큰과 shadcn/ui, Radix 같은 공통 컴포넌트로 AI가 따를 규칙을 만듭니다.
- 규칙이 분명할수록 생성된 코드가 제품의 기존 패턴과 가까워집니다.
- 다음으로 아이디어를 빠르게 프로토타입으로 만들어 실제 데이터와 상호작용을 점검합니다.
- 정적 프레임에서 보이지 않던 상태와 사용 흐름을 더 일찍 드러낼 수 있습니다.
- 마지막에는 디자이너가 리포지토리 안에서 수정하고 PR을 제안합니다.
- 엔지니어는 반복적인 레이아웃 조정보다 아키텍처와 비즈니스 로직 검토에 집중하게 됩니다.
4. 자동화가 커질수록 검증의 책임도 커지기
- AI가 만든 화면은 빨라 보여도 중복 코드와 일관성 저하를 함께 만들 수 있습니다.
- 컴포넌트 소유권과 재사용 기준이 없으면 속도가 기술 부채로 바뀝니다.
- 시각적 정합성만으로 접근성, 비동기 상태, 실제 사용성을 보장할 수 없습니다.
- 키보드 탐색과 오류·로딩 상태에는 여전히 사람의 테스트와 리뷰가 필요합니다.
- Figma는 사라지기보다 아이디어를 여러 상태로 검증하고 협업 규칙을 조율하는 공간으로 이동합니다.
- 화면을 그리는 도구에서 제품의 품질과 거버넌스를 연결하는 작업대로 역할이 넓어집니다.
