AI 제품을 만들고 있다면 한 가지 변화가 빠르게 일어나고 있습니다. 예전처럼 Figma 화면 몇 장만으로 제품을 설명하고 검증하는 방식이 점점 한계를 드러내고 있다는 것입니다.
왜 그럴까요?
기존 소프트웨어는 버튼을 누르면 항상 같은 결과가 나옵니다. 그래서 화면을 예쁘게 설계하고 프로토타입을 연결하는 것만으로도 대부분의 사용자 경험을 확인할 수 있었습니다.
하지만 AI 제품은 다릅니다.
같은 입력을 넣어도 사용자의 이전 대화, 현재 맥락, 말투, 모델의 상태에 따라 결과가 달라집니다. 즉, 화면은 같아도 경험은 매번 달라질 수 있습니다.
그래서 AI 제품에서는 ‘정적인 화면’보다 실제로 동작하는 프로토타입이 훨씬 중요한 역할을 하게 됩니다.
Late Checkout은 어떻게 작업했을까?
최근 Late Checkout의 한 시니어 디자이너는 약 2시간 만에 디자인과 코드를 함께 작성해 실제로 동작하는 프로토타입을 만들었습니다.
단순히 화면만 만든 것이 아닙니다.
마우스를 올렸을 때의 인터랙션, 자연스러운 애니메이션, 실제 로직, 사용자와의 상호작용까지 모두 구현된 상태였습니다.
이 정도면 디자인 시안이 아니라 거의 실제 제품에 가까운 수준입니다.
흥미로운 점은 AI에게 처음부터 “앱 전체를 만들어 달라”고 요청하지 않았다는 것입니다.
대신 작업을 작은 단위로 나누었습니다.
1단계. 먼저 뼈대를 만든다
가장 먼저 하는 일은 예쁜 화면을 만드는 것이 아닙니다.
헤더, 사이드바, 콘텐츠 영역처럼 페이지의 큰 구조만 먼저 만듭니다.
이 단계의 목적은 AI와 사람이 앞으로 함께 작업할 기준을 만드는 것입니다.
처음부터 모든 요소를 한 번에 구현하려고 하면 AI도 맥락을 잃기 쉽습니다.
반대로 구조부터 정리하면 이후 작업이 훨씬 수월해집니다.
2단계. 컴포넌트를 따로 만든다
다음은 버튼, 카드, 드롭다운 같은 UI 요소를 하나씩 따로 제작합니다.
중요한 점은 메인 화면 안에서 수정하지 않는다는 것입니다.
별도의 페이지나 작업 공간에서 컴포넌트를 완성한 뒤 필요한 기능과 상태를 추가합니다.
이렇게 하면 AI는 한 번에 하나의 문제만 해결하면 되기 때문에 더 정확한 결과를 만들어냅니다.
사람이 작업할 때도 유지보수가 훨씬 쉬워집니다.
3단계. 상태와 움직임을 추가한다
컴포넌트가 완성되면 이제 실제 사용감을 만듭니다.
예를 들어
- Hover 상태
- 클릭 효과
- 전환 애니메이션
- 로딩 상태
- AI 응답이 도착했을 때의 변화
같은 인터랙션을 추가합니다.
이 과정에서 긴 프롬프트를 계속 입력하는 대신 실행 중인 화면을 직접 클릭하거나 표시하며 피드백을 전달합니다.
“여기 움직임이 어색합니다.”
“이 버튼의 반응이 너무 느립니다.”
처럼 화면 위에서 직접 지적하면 AI는 위치와 상황을 훨씬 정확하게 이해할 수 있습니다.
4단계. 완성된 부품을 조립한다
마지막으로 완성된 컴포넌트를 실제 화면에 배치합니다.
이미 구조와 이름이 정리되어 있기 때문에 AI도 어디에 어떤 컴포넌트를 넣어야 하는지 쉽게 이해합니다.
그리고 다시 반복합니다.
뼈대 → 컴포넌트 → 인터랙션 → 통합
이 반복이 AI 제품 개발의 새로운 워크플로우가 되고 있습니다.
프로토타입의 역할도 달라지고 있다
예전에는 프로토타입이 디자이너의 결과물을 보여주는 용도였습니다.
하지만 AI 시대에는 성격이 완전히 달라집니다.
이제 프로토타입은
- 디자이너
- 기획자
- 개발자
- AI 엔지니어
- 데이터 분석가
- 사용자 리서처
모두가 함께 사용하는 작업 공간이 됩니다.
실제 데이터를 연결하고,
모델의 응답을 시험하고,
사용자 흐름을 수정하고,
같은 화면을 보며 바로 의사결정을 내릴 수 있습니다.
Figma 댓글과 Slack에서 며칠 동안 이어지던 논의가 하나의 동작하는 프로토타입으로 훨씬 빠르게 해결되는 것입니다.
사용된 핵심 도구
이번 사례에서 소개된 주요 도구는 두 가지입니다.
pencil.dev
코드 편집기 안에서 시각적으로 UI를 만들고 수정할 수 있도록 도와주는 도구입니다.
디자인과 개발을 자연스럽게 연결해 프로토타입 제작 속도를 높여줍니다.
Agentation
실행 중인 화면에서 원하는 위치를 직접 클릭하거나 표시하면 AI가 해당 위치와 문제를 정확하게 이해하도록 돕습니다.
텍스트만으로 설명하는 것보다 훨씬 빠르고 정확하게 수정 작업을 진행할 수 있습니다.
그렇다면 Figma는 이제 필요 없을까?
그렇지는 않습니다.
초기 아이디어를 정리하거나 화면 구성을 빠르게 탐색하는 데에는 여전히 Figma가 강력한 도구입니다.
하지만 실제 AI 응답을 확인하고,
복잡한 상태 변화를 검증하고,
사용자와의 상호작용을 테스트해야 하는 순간부터는 이야기가 달라집니다.
이 단계에서는 정적인 화면보다 실제로 동작하는 프로토타입이 훨씬 많은 정보를 제공합니다.
앞으로 디자인 문서는 ‘이미지’가 아니라 ‘제품’이 될 수 있다
AI 제품에서 중요한 것은 화면이 얼마나 예쁜지가 아닙니다.
사용자가 입력했을 때 제품이 어떻게 반응하는지,
그 반응이 자연스럽고 신뢰할 만한 경험인지 검증하는 것이 더 중요합니다.
그래서 앞으로 최고의 디자인 문서는 Figma 파일이 아니라 실제로 움직이는 프로토타입이 될 가능성이 큽니다.
AI 시대에는 디자인과 개발의 경계가 빠르게 사라지고 있습니다.
이제는 화면을 그리는 능력보다, 실제로 작동하는 경험을 빠르게 만들고 검증하는 능력이 제품 경쟁력을 결정하는 시대가 오고 있습니다.
출처: Late Checkout의 시니어 디자이너가 소개한 AI 제품 프로토타이핑 워크플로우와 Pencil.dev, Agentation 활용 사례를 바탕으로 정리.
