<aside> 📎

참고 출처

Guide to Figma Make (Figma Learn): 프로토타입 제작과 공유, 퍼블리시 기능을 안내하는 공식 가이드입니다.
8 Essential Tips for Using Figma Make (Figma Blog): 파일 정리 습관과 Make를 핸드오프 보조 도구로 쓰는 방법의 근거가 되는 공식 자료입니다. </aside>

이 영역에서 우리는 AI 디자인 도구의 지형, 프롬프트 작성법, 그리고 Figma Make로 유저 플로우를 구현하는 방법까지 배웠습니다. 이제 이 조각들을 하나의 워크플로우로 꿰어 볼 차례입니다. 아이디어에서 시작해 와이어프레임, 디자인, 동작하는 프로토타입까지 이어지는 전체 흐름을 정리하고, 마지막으로 중요한 질문을 다룹니다. 내가 만든 디자인을 구현할 사람에게 어떻게 넘길 것인가, 즉 핸드오프입니다. 이 레슨은 다음 실습인 종합 클론 프로젝트의 설계도 역할을 합니다.

AI 디자인 워크플로우 통합과 핸드오프

전체 워크플로우 한눈에 보기

아이디어에서 동작하는 프로토타입까지
- 전체 흐름은 네 단계로 이어집니다. 아이디어 단계에서 서비스의 목표와 핵심 플로우를 정의하고, 와이어프레임 단계에서 빠르게 구조를 잡고, 디자인 단계에서 화면을 완성하고, 프로토타입 단계에서 눌러 볼 수 있는 흐름으로 만듭니다.
- 각 단계는 앞에서 배운 내용과 대응합니다. 와이어프레임은 영역 B에서, 컴포넌트와 디자인 시스템과 UI 키트는 영역 C에서, AI 도구와 프롬프트와 Figma Make는 이 영역에서 다뤘습니다.

단계별 도구 조합 전략

아이디어와 와이어프레임 단계
- 빠른 탐색이 목표입니다. 챗봇으로 화면 목록과 플로우 초안을 정리하고, AI 도구로 여러 버전의 구조를 생성해 비교합니다. 이 단계에서는 완성도보다 방향 잡기가 중요합니다.
디자인 단계
- Figma에서 UI 키트를 기반으로 디자인 시스템을 잡습니다. 토큰과 컴포넌트를 정리해 두면 다음 단계에서 AI가 만드는 결과의 일관성이 올라갑니다.
프로토타입 단계
- Figma Make로 화면을 연결해 동작하는 유저 플로우를 만듭니다. Figma Design과 Make를 오가며 시각 편집과 동작 수정을 나누어 다듬고, 완성되면 퍼블리시해 공유합니다.
도구는 목표에 따라 조합한다
- 하나의 도구가 모든 단계를 해결하지 않습니다. 단계마다 목적에 맞는 도구를 고르는 것이 핵심이고, 고르는 기준은 언제나 같습니다. 지금 단계의 목표가 무엇인지, 디자인과 얼마나 잘 연결되는지, 비용은 감당할 만한지를 봅니다.

핸드오프란 무엇인가

디자인을 구현하는 사람에게 넘기는 과정
- 핸드오프는 디자인 결과물을 실제로 구현할 사람에게 전달하는 과정입니다. 창업가에게 그 상대는 외주 개발자일 수도, 팀에 합류한 개발자일 수도, 다음 교과목에서 MVP를 직접 만드는 미래의 나일 수도 있습니다.
- 과거의 핸드오프는 디자이너가 화면 명세를 문서로 만들고 개발자가 그것을 해석하는 과정에서 의도가 자주 손실되었습니다. 잘 정리된 디자인 시스템과 동작하는 프로토타입은 이 손실을 크게 줄여 줍니다.
무엇을 넘기는가
- 완성된 화면만 넘기는 것이 아닙니다. 색과 타이포 같은 토큰 값, 컴포넌트와 그 상태들, 화면 사이의 이동 규칙, 빈 상태와 오류 같은 예외 상황까지 함께 전달해야 구현하는 사람이 헤매지 않습니다.
좋은 핸드오프의 조건
- 받는 사람이 추측할 일이 없어야 합니다. 프레임이 정리되어 있고, 레이어 이름이 의미를 담고 있고, 오토레이아웃이 적용되어 있고, 같은 요소가 화면마다 같은 모습인 파일이 좋은 핸드오프의 출발점입니다. Figma 공식 블로그도 정돈된 파일이 좋은 결과를 만든다고 강조합니다.
- 이 조건은 사람만을 위한 것이 아닙니다. AI 도구에 디자인을 입력할 때도 정돈된 파일일수록 결과가 정확해집니다. 사람에게 잘 넘어가는 디자인이 AI에게도 잘 전달됩니다.

AI 시대의 핸드오프

동작하는 프로토타입이 가장 좋은 설명서
- 긴 문서보다 직접 눌러 볼 수 있는 프로토타입이 의도를 정확하게 전달합니다. Figma Make로 만든 플로우의 퍼블리시 링크를 함께 넘기면, 받는 사람은 화면이 어떻게 이어지고 어떤 동작을 기대하는지 바로 확인할 수 있습니다.
- 문서가 필요 없다는 뜻은 아닙니다. 프로토타입이 보여 주지 못하는 정책이나 예외 규칙은 짧은 설명으로 보완합니다.