AI 도구로 아이디어를 제품으로 발전시키는 4가지 새로운 방법 | Figma 블로그 (새 탭에서 열림)

AI 도구는 제품 개발의 시작점을 아이디어나 정적 목업에서 실행 가능한 프로토타입으로 확장하고 있다. 팀은 코드를 통해 복잡한 제약과 실제 데이터를 먼저 검증한 뒤 Figma에서 함께 탐색·개선하고, 필요하면 디자인 맥락을 유지한 채 다시 코드로 돌아갈 수 있다. 글은 FloQast, Merkle, Affirm, Accor의 사례를 통해 속도와 의도적인 협업을 결합하는 네 가지 AI 기반 워크플로를 소개한다.

AI 시대의 제품 개발 방식 변화

• 제품팀은 초기부터 프로토타입을 만들며 아이디어를 검증하는 방향으로 이동하고 있다.
• AI 코딩 도구를 활용하면 디자이너나 기획자도 개발자의 큰 투입 없이 복잡한 상호작용을 시험할 수 있다.
• 제품 탐색은 코드, Figma 캔버스, 다시 코드로 이어지는 순환형 과정이 된다.
• AI는 탐색 범위를 넓힐 뿐 아니라, 기존에 핸드오프 과정에서 사라지던 디자인 시스템과 맥락을 개발 단계까지 전달하는 데 활용된다.

코드로 복잡한 제약 검증

• 정적 목업만으로 평가하기 어려운 다음과 같은 상황을 코드 기반 프로토타입으로 테스트할 수 있다.
  • 한 작업이 완료되어야 다음 작업이 활성화되는 다단계 흐름
  • 실제 데이터에 따라 화면과 동작이 달라지는 인터페이스
  • 사용자 권한, 조건부 상태, 외부 시스템 간 데이터 일치 여부
• 제품 담당자는 AI 코딩 도구로 실제 동작하는 프로토타입을 만들고, 이후 Codex to Figma를 통해 Figma 캔버스로 가져와 팀과 함께 검토할 수 있다.
• 디자인에서 추가 조정이 필요하면 Figma에서 작업한 뒤 MCP를 통해 코드로 되돌릴 수 있으며, 디자인 맥락도 함께 유지된다.

FloQast의 복잡한 회계 워크플로 테스트

문제 상황

• FloQast의 회계 소프트웨어에서는 작업 간 의존성, 결제 처리업체와 은행 간 기록 대조, 검토 및 승인 절차 등이 중요하다.
• 기존 워크플로에서는 사용자가 불일치를 확인하기 위해 여러 페이지를 오가야 했다.
• 팀은 작업 목록, 차단된 작업, 문제 해결 기능을 하나의 화면에 통합하려 했다.
• 초기 프로토타입은 가능성을 보였지만, 실제 데이터와 연결된 여러 단계의 상호작용을 정적 디자인만으로는 검증하기 어려웠다.

AI 코딩 프로토타입의 활용

• UX 매니저 Benjamin Ellis는 AI 코딩 도구로 시뮬레이션 백엔드와 실제 고객 워크플로를 기반으로 한 현실적인 데이터를 구성했다.
• 팀은 한 단계의 완료가 다음 단계의 상태를 바꾸는 실제 시나리오를 직접 실행했다.
• 겉보기에는 자연스러워 보였지만 실제 데이터와 로직을 적용하면 무너지는 흐름을 조기에 발견했다.

결과와 적용 시점

• 디자인 방향을 확정하기 전에 실제 시나리오를 충분히 검증해 후속 개발 단계의 예상치 못한 문제를 줄였다.
• 다음과 같은 경우에 이 방식을 적용할 수 있다.
  • 권한이나 조건에 따라 UI 동작이 달라지는 경우
  • 한 동작이 다른 동작과 상태에 연쇄적으로 영향을 주는 경우
  • 작은 수정은 디자인 툴을 거치는 것보다 코드에서 직접 처리하는 편이 빠른 경우
  • 디자이너와 개발자가 복잡한 경험을 함께 정의해야 하는 경우

정적인 화면을 먼저 완성하려 하기보다, AI 도구로 실제 데이터와 로직을 포함한 작동 가능한 프로토타입을 빠르게 만든 뒤 디자인과 개발을 오가는 방식이 효과적이다. 특히 복잡한 제품일수록 초기 코드 검증을 통해 잘못된 상호작용을 일찍 발견하고, Figma를 협업과 refinement의 공간으로 활용하는 것이 유리하다.