이 글은 누구를 위한 것인가
- 와이어프레임에서 바로 디자인으로 넘어가다가 방향이 틀려 재작업하는 팀
- Figma 프로토타입 기능을 제대로 활용하지 못하는 디자이너
- 개발 전에 아이디어를 빠르게 테스트하고 싶은 PM/PO
들어가며
와이어프레임은 "어디에 무엇을 배치할지"를 결정하는 단계다. 이 단계에서 방향을 잡으면, 디자인 단계에서 픽셀을 아름답게 채우면 된다. 순서를 건너뛰면 나중에 레이아웃을 통째로 다시 그리게 된다.
이 글은 bluefoxdev.kr의 Figma 워크플로우 가이드 를 참고하여 작성했습니다.
1. 단계별 충실도 가이드
[디자인 충실도 단계]
로파이 와이어프레임 (Lo-fi):
도구: Figma 기본 도형, 회색 박스
목적: 레이아웃과 정보 계층 결정
시간: 화면당 15-30분
검토 항목: 정보 구조, 페이지 흐름
규칙:
- 색상 없음 (회색만)
- 실제 텍스트 아닌 Lorem Ipsum
- 이미지 박스만 표시
- 아이콘 라벨만 (실제 아이콘 없음)
미드파이 와이어프레임 (Mid-fi):
도구: UI 키트, 기본 컴포넌트
목적: 인터랙션 검증
시간: 화면당 1-2시간
검토 항목: 인터랙션 플로우, 컴포넌트
하이파이 디자인 (Hi-fi):
도구: 실제 디자인 시스템
목적: 시각 디자인 완성
시간: 화면당 2-4시간
검토 항목: 비주얼, 픽셀 퍼펙트
프로토타입:
도구: Figma Prototype
목적: 인터랙션 시뮬레이션
사용: 사용성 테스트, 개발 참고
[언제 무엇을 사용할까]
아이디어 탐색: 로파이 (빠른 수렴)
팀 피드백: 미드파이
클라이언트 발표: 하이파이
사용성 테스트: 프로토타입
개발 핸드오프: 하이파이 + 프로토타입
2. Figma 프로토타입 핵심 기능
[Figma 인터랙션 설정]
기본 연결:
화면 A → 버튼 클릭 → 화면 B
Trigger: On Click
Action: Navigate To [Frame B]
Animation: Smart Animate (변화 자동 감지)
오버레이 (모달, 팝업):
Action: Open Overlay
Position: Centered / Bottom
인터랙티브 컴포넌트:
한 컴포넌트 내에서 상태 변화
Toggle: Default ↔ Checked
Button: Default → Hover → Pressed → Disabled
[설정 방법]
1. 변형 세트 생성 (Variants)
2. Prototype → 변형 간 연결
3. "While hovering" 트리거
Figma 변수 (Variables):
Text 변수: 사용자 이름, 가격 등 동적 텍스트
Boolean 변수: 로그인 여부, 토글 상태
Number 변수: 장바구니 수량
[활용]
로그인/비로그인 화면을 하나의 프레임으로
→ Boolean 변수로 상태 전환
[프로토타입 공유]
링크 공유: 브라우저에서 직접 재생
Mirror 앱: 실제 폰에서 테스트
Present 모드: 발표 모드
3. 사용성 테스트 프로토타입 설계
[테스트 프로토타입 체크리스트]
1. 태스크 시나리오 정의:
"새 상품을 장바구니에 추가하고 결제하세요"
→ 이 태스크에 필요한 화면만 연결
2. 클릭 가능 영역 설정:
테스트에 필요한 경로만 활성화
틀린 경로는 비활성 (사용자 실수 관찰)
3. 피드백 수집 포인트:
특정 화면에서 멈추도록 설계
"여기서 다음에 어떻게 하실 것 같으세요?"
4. 참여자 모집:
5-7명으로 주요 이슈 80% 발견 가능
실제 타겟 사용자 (나이, 디지털 친숙도 고려)
5. 관찰 포인트 사전 정의:
□ 장바구니 버튼을 즉시 찾는가?
□ 결제 단계에서 혼란이 있는가?
□ 오류 메시지를 이해하는가?
[테스트 도구]
대면 테스트: Figma Mirror + 화면 녹화
원격 테스트: Maze, UserTesting, Lookback
비동기 테스트: Maze 미션 설정 후 공유
마무리
와이어프레임의 목적은 "결정"이다. 레이아웃 결정, 인터랙션 결정, 정보 구조 결정. 이 결정을 로파이 단계에서 빠르게 검증하면, 하이파이 단계에서는 비주얼에만 집중할 수 있다. 사용성 테스트는 7명이면 충분하다 — 완벽한 프로토타입을 만들기 위해 사용자 테스트를 미루지 마라.