<aside> 📎

참고 출처

1. Guide to Figma Make (Figma Learn): 디자인 첨부, 대화형 수정, 퍼블리시까지 Figma Make의 기본 사용법을 안내하는 공식 가이드입니다.
2. Beyond the basics: Using Figma Make (Figma Learn): Copy design 기능과 공유 방법 등 심화 활용의 근거가 되는 공식 문서입니다.
3. 8 Essential Tips for Using Figma Make (Figma Blog): 첫 프롬프트 작성법, 파일 정리, 실제 데이터 활용 등 실전 팁을 담은 공식 자료입니다.
4. AI credits on the Education plan (Figma Learn): 교육 플랜에서 제공되는 월 3,000 AI 크레딧 정보를 담은 공식 문서입니다. </aside>

앞 실습에서 프롬프트로 화면을 생성하고 다듬어 봤습니다. 그런데 화면 한 장이 아무리 예뻐도, 그것만으로는 서비스가 되지 않습니다. 사용자는 화면을 한 장씩 감상하는 것이 아니라 첫 화면에서 목표 행동까지 이어지는 흐름을 경험하기 때문입니다. 이번 레슨에서는 Figma Make로 화면들을 연결해 실제로 클릭하며 이동할 수 있는 유저 플로우를 구현하는 방법을 배웁니다. 내 아이디어를 누구에게나 링크 하나로 보여 줄 수 있게 되는 단계입니다.

Figma Make로 유저 플로우 구현하기

화면이 아니라 플로우를 만든다

• 유저 플로우란
  • 유저 플로우는 사용자가 서비스에 들어와 목표를 이루기까지 거치는 화면과 행동의 연결입니다. 예를 들어 커머스 앱이라면 홈에서 상품을 발견하고, 상세를 확인하고, 결제를 마치는 흐름이 핵심 플로우입니다.
  • 화면 단위 디자인이 장면이라면, 플로우는 이야기입니다. 장면이 아무리 좋아도 이야기가 이어지지 않으면 사용자는 중간에 떠납니다.
• 창업가에게 플로우가 중요한 이유
  • 아이디어 검증, 사용자 테스트, 투자 데모에서 상대가 보고 싶어 하는 것은 낱장의 화면이 아니라 직접 눌러 볼 수 있는 흐름입니다.
  • 눌리지 않는 이미지 목업과 달리, 동작하는 플로우는 어디서 사용자가 막히는지를 드러내 줍니다. 검증의 도구가 되는 것입니다.

Figma Make라는 도구

• 무엇을 해 주는 도구인가
  • Figma Make는 Figma 안에서 동작하는 AI 도구로, 프롬프트나 Figma 디자인을 입력하면 실제로 동작하는 프로토타입과 웹 앱을 만들어 줍니다. 버튼이 눌리고 화면이 이동하는, 살아 있는 결과물이 나옵니다.
  • 대화형으로 프롬프트를 이어 가며 수정할 수 있어, 앞 레슨에서 배운 프롬프트 작성법이 그대로 통합니다. 색이나 간격 같은 시각 요소는 화면에서 요소를 직접 선택해 고치는 편집 기능도 있습니다.
• 이 과정에서 쓰는 이유
  • 우리가 디자인을 해 온 Figma와 같은 공간에서 쓸 수 있고, 이 과정에서 지원하는 Figma 교육 플랜에 월 3,000 AI 크레딧이 포함되어 별도 결제 없이 사용할 수 있습니다.
  • 완성한 플로우는 버튼 하나로 웹에 퍼블리시되어, 링크만 보내면 누구든 직접 눌러 볼 수 있습니다.

플로우를 만드는 방법

• 첫 프롬프트에 흐름 전체를 담는다
  • 화면 하나가 아니라 플로우를 요청합니다. 어떤 화면들이 필요한지, 각 화면에서 무엇을 누르면 어디로 이동하는지, 어떤 데이터가 보이는지를 첫 프롬프트에 담습니다. Figma 공식 블로그도 첫 프롬프트에 작업 내용, 맥락, 기대하는 동작을 충분히 담으라고 안내합니다.
  • 예를 들어 "홈, 상품 상세, 결제, 완료의 네 화면으로 이루어진 정기구독 서비스를 만들어 줘. 홈의 상품 카드를 누르면 상세로, 상세의 구독하기 버튼을 누르면 결제로 이동해 줘."처럼 화면 목록과 이동 규칙을 함께 씁니다.
• 작은 단위로 화면을 더해 간다
  • 뼈대가 만들어진 다음에는 화면을 하나씩 추가하거나 수정합니다. 한 번에 여러 가지를 고치기보다 범위를 좁혀 요청할수록 결과가 정교해집니다.
• 상태와 분기를 챙긴다
  • 실제 플로우에는 갈림길이 있습니다. 로그인에 실패했을 때, 장바구니가 비어 있을 때, 결제가 완료되었을 때의 화면을 지정해 요청하면 흐름이 현실에 가까워집니다.
• 실제에 가까운 데이터를 넣는다
  • 상품 이름과 가격 같은 데이터를 실제에 가깝게 넣어 달라고 요청하면 프로토타입의 설득력이 올라갑니다. Figma 공식 블로그도 현실적인 데이터를 넣어 동적인 프로토타입을 만드는 방법을 권장합니다.

Figma Design과 오가며 다듬기

• 왕복하며 생성과 편집을 반복한다
  • 실제 작업은 한 방향으로 끝나지 않습니다. Figma Design에서 만든 프레임을 Make에 첨부해 동작하는 화면으로 만들고, 'Copy design' 기능으로 Make의 화면을 Figma Design의 편집 가능한 레이어로 가져와 다듬은 뒤, 수정한 디자인을 다시 Make에 붙여 재생성하는 식으로 오가며 완성도를 높입니다.
  • 역할을 나누면 효율적입니다. 레이아웃, 컬러, 타이포 같은 시각 편집은 Figma Design에서 하고, 화면 사이의 이동과 동작은 Make의 프롬프트로 다룹니다.