<aside>
📎
참고 출처
- Guide to Figma Make (Figma Learn): 이 종합 실습에서 유저 플로우를 구현하고 퍼블리시하는 데 쓰는 Figma Make의 공식 가이드입니다.
- 8 Essential Tips for Using Figma Make (Figma Blog): 파일 정리와 실제 데이터 활용, 핸드오프 보조 활용의 근거가 되는 공식 자료입니다.
- Start designing with UI kits (Figma Learn): 클론 디자인의 기반이 되는 UI 키트 활용법을 안내하는 공식 문서입니다.
</aside>
이 영역의 마지막 실습이자, 'Figma로 하는 UX/UI 디자인' 단원 전체를 마무리하는 종합 프로젝트입니다. 앞서 배운 와이어프레이밍, 디자인 시스템과 UI 키트, 프롬프트와 Figma Make를 모두 동원해, 실제 서비스의 화면을 나만의 디자인 시스템으로 클론하고 눌러 볼 수 있는 유저 플로우까지 완성합니다. 마지막에는 앞 레슨에서 배운 대로 결과물을 핸드오프할 수 있는 형태로 정리합니다. 이 결과물은 포트폴리오이자 다음 MVP 개발 교과목의 출발점이 됩니다.
실습: 디자인 시스템 기반 화면 클론 프로젝트
실습 목표와 산출물
- 실습 목표
- 실제 서비스 화면을 분석하고, UI 키트와 Figma Make를 활용해 나만의 디자인 시스템으로 재구성합니다.
- 와이어프레임, 디자인 시스템, 유저 플로우 구현, 핸드오프 정리까지 전체 워크플로우를 한 번에 경험합니다.
- 최종 산출물
- 분석 문서(대상 화면의 레이아웃, 컴포넌트, 시각 위계 분석)
- UI 키트 기반으로 재구성한 Figma 디자인(화면 두세 개)
- 화면 간 이동까지 동작하는 클론 플로우의 퍼블리시 링크
- 핸드오프 패키지(정리된 Figma 파일, 프로토타입 링크, 예외 상황 설명)와 회고
Step 1. 클론 대상 선정과 분석 (40분)
- 클론할 실제 서비스 화면을 정합니다. 음악 앱의 플레이리스트 화면이나 커머스 앱의 상품 상세 화면처럼, 핵심 플로우가 뚜렷한 화면이 좋습니다. 저작권을 고려해 학습 목적의 구조 분석에 집중합니다.
- 대상 화면을 분석합니다.
- 레이아웃 구조(그리드와 영역 분할)
- 사용된 UI 컴포넌트(버튼, 카드, 리스트 등)
- 시각 위계와 디자인 토큰(색, 타이포, 간격)
- 화면 사이의 이동, 즉 이 서비스의 핵심 플로우가 어떻게 이어지는지도 함께 분석합니다.
- 점검 질문: 앞서 배운 시각 위계, 그리드, 컴포넌트 개념으로 화면을 분해해 설명할 수 있는가?
Step 2. 와이어프레임으로 구조 잡기 (40분)
- 분석한 구조를 바탕으로 Lo-Fi 와이어프레임을 그립니다.
- AI 도구로 빠르게 초안을 잡거나 Figma에서 직접 그립니다.
- 콘텐츠의 위치와 우선순위를 먼저 정하고, 시각적인 디테일은 다음 단계로 미룹니다.
Step 3. UI 키트로 디자인 완성 (60분)
- 14번 레슨에서 배운 기준으로 고른 UI 키트를 가져와 와이어프레임을 Hi-Fi 디자인으로 완성합니다.
- 키트의 컴포넌트를 배치하고 오토레이아웃으로 반응형 구조를 잡습니다.
- 토큰(Variables)을 나만의 브랜드 컬러와 타이포로 커스터마이징해, 단순히 따라 그리는 것이 아니라 나만의 변형을 만듭니다.
- 프레임을 정리하고 레이어 이름을 의미 있게 붙여 둡니다. 다음 단계에서 Make가 디자인을 정확하게 읽는 조건이자, 마지막 핸드오프 품질의 기반이 됩니다.
- 점검 질문: 토큰을 커스터마이징해 원본과 차별화된 디자인을 만들었는가?
Step 4. Figma Make로 유저 플로우 구현 (50분)