AI 도구를 통해 아이디어를 제품으로 전환하는 4가지 새로운 방법

제품 팀은 AI 시대의 새로운 작업 방식에 빠르게 적응하고 있습니다. 이들은 초기에 프로토타입을 제작하고

, 디자인을 하기 전에 코드를 테스트하며, 전례 없는 규모로 탐색하고 있으며, 이전에는 핸드오프 과정에서 손실되던 디자인 시스템의 콘텍스트를 유지한 채 제품을 출시하고 있습니다. 이러한 변화가 실제로 어떻게 나타나고 있는지에 대해 FloQast, Merkle, Affirm, Accor의 제품 제작자들과 이야기를 나누어 보았습니다.

1. 코드로 제약 조건 테스트하기

하나의 행동이 다음 행동을 트리거하는 다단계 흐름이나 데이터에 따라 다르게 작동하는 인터페이스 등, 복잡한 제약 조건 속에서 아이디어를 테스트하는 것은 과거에는 상당한 개발 투자가 필요했습니다. 오늘날에는, AI 코딩 도구 덕분에 제품 팀의 더 많은 사람들이 특정 방향을 확정하기 전에 이러한 종류의 인터랙션을 빠르게 제작하고 테스트할 수 있게 되었습니다. 이로 인해 새로운 업무 흐름이 가능해졌습니다. 제품 제작자는 코드로 작동하는 프로토타입을 만든 다음 Codex to Figma

를 사용하여 이를 Figma 캔버스로 가져와 전체적인 모습을 확인하고 함께 다듬을 수 있습니다. 거기서 코드로 추가 작업이 더 필요한 경우, 디자인 컨텍스트를 유지한 채 MCP를 통해 다시 코드 환경으로 돌아갈 수 있습니다.

FloQast가 코드로 복잡한 업무 흐름을 테스트한 방법

FloQast는 회계 팀이 실제 복잡한 작업을 관리할 수 있도록 돕는 소프트웨어를 개발합니다. 다른 작업이 끝나야만 진행할 수 있는 작업, 결제 처리 업체와 은행 계좌 간 기록 일치 확인, 모든 것이 검토될 때까지 보류되는 최종 승인 작업 등이 이에 해당합니다.

과제

최근, 팀은 사용자가 하나의 불일치 항목을 추적하기 위해 여러 페이지를 오가야 하는 표준 업무 흐름 중 하나를 재구상해야 했습니다. 예를 들어, 계정에서 문제를 발견한 회계사는 문제를 확인하기 위해 하나의 페이지로 가야 하고, 원인을 조사하기 위해 다른 페이지로 이동한 뒤, 다시 첫 번째 페이지로 돌아와 문제를 해결해야 했습니다. 팀은 이 모든 작업을 하나의 페이지로 통합하여 사용자가 화면을 벗어나지 않고도 작업을 보고, 차단된 항목을 추적하며, 모든 작업을 수행할 수 있도록 하고자 했습니다.

초기 프로토타입은 유망했으나, 페이지에 너무 많은 상호 연결된 단계들이 있었으며, 각각 실제 데이터와 로직에 의존하고 있어서 팀이 모형만으로 평가하기는 어려웠습니다.

해결을 위한 열쇠

FloQast의 UX 매니저인 Benjamin Ellis는 AI 코딩 도구를 사용하여 실제 고객의 업무 흐름을 기반으로 한 시뮬레이션 백엔드와 현실적인 데이터를 갖춘 작동하는 프로토타입을 구축했습니다. 코드 기반 프로토타입 덕분에 팀은 실제 시나리오를 클릭해 하나의 단계를 완료하면 다음 단계가 트리거되는지, 그리고 페이지 전체가 잘 맞물려 돌아가는지 확인할 수 있었습니다. 그 과정에서 겉보기에는 괜찮아 보였지만 실제로는 잘못된 흐름을 발견했으며, 이는 실질적인 데이터와 로직을 사용하여 작업할 때만 나타나는 문제입니다.

영향

Benjamin의 팀과 디자이너가 방향성을 결정할 무렵에는 이미 실제 시나리오를 기반으로 코드에서 압박 테스트를 마치고 디자인 파일만으로는 드러나지 않았을 인터랙션 문제들을 발견한 상태였습니다. 그 결과 추후 예상치 못한 문제를 줄이고 팀이 만드는 것에 대한 더 확신을 가질 수 있었습니다.

추천 활용 시점:

• 사용자 권한이나 한 행동이 다음 행동에 영향을 미치는 다단계 흐름 등, 모형에서는 평가할 수 없는 조건에 따라 UI가 다르게 작동할 때
• 작은 수정 사항이라 디자인 파일을 거쳐 돌아오는 것보다 코드에서 직접 변경하는 것이 더 빠를 때
• 디자이너와 개발자는 복잡한 경험 범위를 함께 설정해야 하는데, 실제로 작동하는 것이 있으면 논의가 더 쉬워질 때

2. 캔버스에서 AI로 탐색하기

팀은 항상 캔버스 위에서 탐색해 왔지만, AI는 그 탐색의 범위를 얼마나 확장할 수 있는지를 변화시켰습니다. Figma AI 에이전트

를 사용하면 디자이너는 해당 디자인 시스템에 기반하여 파일을 벗어나지 않고도 다양한 레이아웃 변형을 생성하고, 사실적인 콘텐츠를 작성하며, 작업의 공백까지 찾아낼 수 있습니다. 팀이 어떤 방향으로 발전시킬 준비가 되면, Figma Make

7 tips for using Figma Make credits more efficiently

While everyone’s talking about “tokenmaxxing,” we’ve compiled seven best practices to help you build smarter—without prompting more—in Figma Make.

를 사용해 이를 인터랙티브 프로토타입으로 전환하고 MCP를 사용해 디자인 컨텍스트를 실제 프로덕션 코드로 전달할 수 있습니다.

Merkle이 깊게 파고들기 전에 넓게 탐색한 방법

Merkle의 UX 어소시에이트 크리에이티브 디렉터인 Easton Thomas는 통신 고객사 웹사이트에서 제품을 구성하고 보여주는 방식을 재구상하고 있었습니다. 이는 올바른 방식을 찾기 전까지 수많은 다양한 접근 방식을 탐색해야 하는 정보 아키텍처 과제였습니다.

과제

이 작업에는 광범위한 탐색이 필요했습니다. Easton은 한 가지 방향에 확신을 갖기 전에 여러 레이아웃과 콘텐츠 접근 방식을 테스트해야 했으며, 기존 사이트의 콘텐츠가 제한적이어서 실제 제품이 페이지에 있을 때 그 중 어떤 것이 제대로 어울릴지 쉽게 평가할 수 없었습니다.

해결을 위한 열쇠

Easton은 먼저 캔버스에서 다양한 접근 방식을 탐구하기 위해 대략적인 레이아웃 방향 7가지를 디자인했습니다. 그 후 Figma의 AI 에이전트에게 그 레이아웃 중 하나를 기반으로 10개의 변형을 생성하고, 또 10개를 더 생성하는 식으로 요청하여 약 50개의 변형을 만들었습니다. 그 시점에 에이전트는 찾을 수 있는 모든 조합을 소진한 상태였고, Easton은 가장 강력한 아이디어들을 골라 거기서부터 디자인을 계속 발전시킬 수 있었습니다.

방향이 정해진 후에는 Figma의 에이전트를 계속 활용하여 세부 사항을 다듬었습니다. 그는 에이전트를 다음과 같이 사용했습니다.

• 이해관계자들에게 페이지가 추상적으로 느껴지지 않도록 실제와 같은 입력 예시 카피 문구 생성
• 주석 카드에 개발자 사양 주석을 직접 작성
• 완성된 작업을 검토하여 스크린 리더 접근성 고려 사항 같은 공백을 찾아내고 표시

그 후에 Figma Make로 이동하여 실제 인터랙션을 통해 검색 페이지의 프로토타입을 제작했고, 필터링 메뉴와 같은 요소들의 다양한 상태를 생성하여 페이지가 실제로 어떻게 작동하는지 확인할 수 있었습니다. 그리고 개발자 핸드오프를 위해 이러한 화면들을 다시 캔버스로 가져왔습니다.

영향

며칠이 걸렸을 프로덕션 작업이 몇 시간으로 단축되었습니다. 하지만 진정한 이점은 Figma의 AI 에이전트로 가능해진 깊이 있는 탐색이었습니다. 7개의 레이아웃 중 하나를 결정하고 그것이 올바르길 바라는 대신, Easton은 옵션 공간 전체, 즉 50가지 변형을 소진하고 나서 결정을 내릴 수도 있었습니다. 작업이 개발자에게 전달될 때쯤, 그는 이미 여러 차례 더 많은 탐색을 거치고 원래라면 찾아내지 못했을 공백들까지 발견할 수 있었습니다. 그 결과 더 큰 확신을 가지고 방향을 결정할 수 있었습니다.

추천 활용 시점:

• 새로운 작업 환경을 만들고 있어서 결정 전에 수많은 방향을 탐색해야 할 때
• 복잡한 흐름에서 여러 가지 상태와 예외 상황을 빠르게 생성하고 테스트해야 할 때
• 개발자에게 전달하기 전에 디자인 시스템을 기반으로 상세한 인터랙션 사양을 정의하고 싶을 때

3. 프로토타입으로 시작하기

Figma Make 같은 도구를 사용하면, 팀은 아무런 요구 사항을 작성하지 않고도 몇 시간 만에 실제로 작동하는 프로토타입을 제작할 수 있습니다. 사양부터 시작해 이해관계자들이 그 비전을 상상해 주기를 바라는 대신, 팀은 실질적인 무언가를 먼저 만들고 그다음에 방향을 구체화해 나갑니다. 그 후 프로토타입을 Figma 캔버스로 가져와 다듬거나, 이해관계자 검토를 위한 프레젠테이션으로 이동할 수 있으며, MCP를 통해 코드로 전환할 수도 있습니다.

Accor가 새로운 비전에 대한 확신을 구축하기 위해 Figma Make를 활용한 방법

Accor는 수십 개의 호텔 브랜드를 보유한 글로벌 호스피탈리티 그룹입니다. 최근 Accor의 디자인 팀은 AI를 통해 자사의 럭셔리 브랜드 중 하나의 웹 경험을 어떻게 끌어올릴 수 있을지 탐색하고 있었습니다.

과제

문제는 실제로 그 AI 경험이 어떤 모습이어야 하는지 파악하는 것이었습니다. 사이트에 단순히 챗봇을 추가하는 것과 같은 일반적인 접근 방식으로는 브랜드의 정체성을 반영하거나 고객층의 기대치를 충족 수 없었습니다. Accor의 리드 브랜드 디자이너인 Justine Grave는 브랜드를 알아볼 수 있게 만드는 감성적인 분위기와 개성을 담아낸 결과물을 제공해야 했습니다.

결정적인 순간

Justine은 Figma Make를 열고 손으로 직접 만들었다면 할 수 없었을, 사용자의 입력 내용에 따라 자동으로 재구성되는 웹페이지의 프로토타입을 제작했습니다. "골프"를 검색하면 골프 코스가 있는 숙소, 엄선된 야외 활동, 관련 경험을 중심으로 중심으로 페이지가 재편됩니다. Make가 마이크로 인터랙션과 화면 전환을 처리했으며, Figma MCP 서버는 모든 요소가 브랜드의 디자인 시스템과 연결된 상태를 유지하도록 했습니다. 며칠 만에, 그녀는 경영진에게 가능성을 보여줄 만큼 야심 차면서도, 다음에 무엇을 만들어야 할지 실제 논의를 시작할 수 있을 만큼 구체적인 프로토타입을 완성했습니다.

영향

이제 Justine과 그녀의 팀은 프로토타입을 브랜드 및 마케팅 이해관계자들에게 가져가, 단순한 슬라이드 덱 대신 직접 반응하고 맞춰서 조정할 수 있는 구체적인 무언가를 제공하고 있습니다.

추천 활용 시점:

• 아직 세상에 존재하지 않는 비전에 대해 이해관계자들의 의견을 조율해야 할 때
• 아이디어가 너무 미묘해서 문서나 슬라이드 덱으로는 제대로 전달하기 어려울 때
• 디자인과 엔지니어링 리소스를 본격적으로 투입하기 전에 그 아이디어가 실제 가능성이 있는지 테스트해보고 싶을 때

4. 디자인 시스템 강화하기

작업이 디자인에서 코드로 이동할 때 구현 결과가 일반적인 패턴이 아닌 실제 디자인 시스템

을 기반으로 생성되는 것이 중요합니다. 예전에는 개발자가 사양을 참고하면서 컴포넌트를 수작업으로 다시 만들어야 하는 수동 프로세스였습니다. 하지만 이제 팀이 MCP를 사용하여

5 shifts redefining design systems in the AI era

As AI reshapes how we make products, design systems are evolving from libraries of reusable parts into living frameworks that scale taste and craft. We spoke with product leaders and practitioners about the shifts they’re seeing in how design systems are built, used, and maintained.

실제 컴포넌트, 토큰 및 레이아웃 구조를 코딩 환경에 직접 전달할 수 있으므로, AI 코딩 도구는 처음부터 실제 디자인 시스템을 기반으로 생성할 수 있습니다.

Affirm이 캔버스에서 코드까지 디자인 컨텍스트를 보존한 방법

Affirm은 결제 시 고객이 구매 금액을 할부 플랜으로 나누어 낼 수 있도록 돕는 금융 상품을 제공합니다. 이 결제 경험은 데스크톱, 모바일 웹, Android, iOS에 걸쳐 모두 존재하며, 모든 환경에서 일관성을 유지하는 것은 지속적인 과제입니다.

과제

팀은 고객이 올바른 옵션을 더 빨리 찾을 수 있도록, 어떤 플랜이 0% 이자인지, 어떤 플랜이 가장 빨리 상환되는지 등을 표시하는 배지를 할부 플랜에 추가하고자 했습니다. 하지만 어떤 고객에게 어떤 배지를 어떤 결제창에서, 어떤 기기에서 보여줄지 등 해결해야 할 조합이 매우 많았습니다. 모든 변형은 이러한 모든 환경 전체에서 디자인 시스템에 충실해야 했으며, 단순한 변경 사항 하나조차 아이디어 단계에서 실제 제작까지 보통 약 6주가 걸리곤 했습니다.

해결을 위한 열쇠

한 PM이 Figma Make에서 배지의 여러 변형을 프로토타입으로 제작했고, 일반적으로 걸리던 6주 대신 단 2일 만에 실제 동작하는 프로토타입으로 완성했습니다. 디자이너들은 채택된 방향성을 캔버스에서 다듬었으며, 팀이 그 디자인을 제작으로 옮길 준비가 되었을 때, 디자인 결과물을 Figma MCP 서버에 로드하고 Cursor에 연결했습니다. MCP가 컴포넌트, 토큰, 레이아웃 구조를 코딩 환경으로 직접 전달했고, AI 에이전트가 프론트엔드 구현 코드를 생성했습니다. 개발자들은 이를 시작점으로 사용하여 처음부터 디자인을 다시 해석하는 대신 이미 디자인이 반영된 상태의 프로덕션 코드를 개발할 수 있었습니다.

영향

프로토타입 제작 작업만 보더라도 6주에서 며칠로 단축되었습니다. 하지만 더 중요한 점은 MCP가 전체 과정에서 디자인 컨텍스트를 유지해 주었기 때문에 개발자들이 디자인을 재해석하거나 컴포넌트를 처음부터 다시 만들 필요가 없었다는 점입니다. 결과적으로 출시된 제품은 디자이너가 의도한 것과 일치했습니다.

추천 활용 시점:

• 디자인을 제작 단계로 넘기면서 구현 결과가 디자인 시스템을 충실하기를 원할 때
• 동일한 디자인을 여러 작업 환경이나 플랫폼에서 일관되게 유지해야 할 때
• 디자인 시스템 팀이 시스템을 업데이트(변경 사항 배포)할 때, 이러한 업데이트가 모든 엔지니어의 코딩 환경에 자동으로 전달되어 새로운 코드들이 처음부터 최신 디자인 시스템을 반영하도록 만들고 싶을 때

오늘날 뛰어난 제품을 제공하는 팀들은 하나의 도구나 하나의 작업 순서에 얽매이지 않으며, 해결해야 하는 질문에 따라 어디서 시작할지 선택하고, 작업이 진행됨에 따라 여러 작업 환경을 이동합니다. AI 시대에 제품 개발 방식을 바꾸고 있는 새로운 업무 흐름에 대해 자세히 알아보세요.