<aside> 📎

참고 출처

1. Guide to Figma Make (Figma Learn): 디자인 첨부, 대화형 수정, 퍼블리시 등 이 실습에서 쓰는 기본 기능을 안내하는 공식 가이드입니다.
2. Beyond the basics: Using Figma Make (Figma Learn): Copy design 기능과 공유 방법의 근거가 되는 공식 문서입니다.
3. 8 Essential Tips for Using Figma Make (Figma Blog): 첫 프롬프트 작성법과 실제 데이터 활용 등 실습 진행의 근거가 되는 공식 자료입니다. </aside>

앞 이론 레슨에서 화면이 아니라 플로우를 만든다는 관점과 그 방법을 배웠습니다. 이번 실습에서는 그 방법을 직접 손으로 따라 합니다. Figma Make로 화면들을 생성해 연결하고, Figma Design과 오가며 다듬어서, 처음부터 끝까지 눌러 볼 수 있는 유저 플로우를 완성해 퍼블리시합니다. 실습이 끝나면 내 아이디어를 링크 하나로 보여 줄 수 있게 됩니다.

실습: Figma Make로 UI 생성하고 유저 플로우까지 구현하기

실습 목표와 산출물

• 실습 목표
  • Figma Make로 화면 두세 개가 이어지는 유저 플로우의 뼈대를 생성합니다.
  • 앞서 만든 Figma 디자인을 첨부하고, Make와 Figma Design을 오가며 완성도를 높입니다.
  • 빈 상태 같은 예외 상황과 실제에 가까운 데이터를 더해 플로우를 현실에 가깝게 만듭니다.
• 최종 산출물
  • 화면 간 이동이 동작하는 유저 플로우와 퍼블리시 링크
  • 사용한 프롬프트와 수정 과정, 왕복 편집 내역의 기록

Step 1. 첫 프롬프트로 플로우 뼈대 만들기

• 앞 실습에서 다듬은 프롬프트를 바탕으로, 이번에는 화면 하나가 아니라 플로우를 요청합니다.
  • 필요한 화면 목록(두세 개), 각 화면에서 무엇을 누르면 어디로 이동하는지, 어떤 데이터가 보이는지를 첫 프롬프트에 담습니다. 프롬프트를 정리할 때 ChatGPT의 도움을 받아도 좋습니다.
  • 요청 한 번마다 AI 크레딧이 소모되므로, 보내기 전에 프롬프트를 정리해 명확하게 요청합니다.
• 생성된 결과를 라이브 미리보기에서 눌러 보며, 화면이 의도한 대로 이어지는지 확인합니다.
• 점검 질문: 첫 화면에서 목표 행동까지 클릭으로 이동할 수 있는가?

Step 2. Figma 디자인 첨부해 화면 완성도 높이기

• 앞 영역에서 UI 키트로 만든 Figma 디자인이 있다면 Make에 첨부해 반영합니다.
  • 디자인 프레임을 작은 단위로 나눠 붙여넣고, 생성 결과가 원본 디자인과 얼마나 일치하는지 비교합니다.
  • 차이가 크면 프롬프트로 보완하되, 한 번에 하나씩 좁은 범위로 요청합니다.
• 점검 질문: 키트로 구조를 정리한 디자인이 그렇지 않은 디자인보다 반영 결과가 더 정확한가?

Step 3. Figma Design과 오가며 편집하기

• 생성 결과에서 시각적으로 아쉬운 화면을 골라 'Copy design'으로 Figma Design에 가져옵니다.
  • 가져온 레이어를 Figma Design에서 직접 편집합니다. 컬러, 타이포, 간격처럼 눈으로 다듬는 작업은 이쪽이 빠릅니다.
  • 수정한 디자인을 다시 Make에 첨부해 재생성하고, 결과가 어떻게 달라졌는지 비교합니다.
• 점검 질문: 시각 편집은 Figma Design에서, 이동과 동작은 Make 프롬프트에서 다루는 역할 구분을 체감했는가?