02 · PART 2 · CLASS / FIGMA UX·UI
실습 07-1
Lo-Fi 와이어프레임
색과 장식 전에 정보 구조와 상담 전환 흐름을 Lo-Fi로 검증한다.
진행 중 · 실습지와 검수 기준 준비
대상나정당 인터넷 비교 화면
훈련 초점Lo-Fi
완료 산출물Lo-Fi v1·v2, 변경 이유, 핵심 경로 주석
최종 목표는 화면 이미지를 베끼는 것이 아니라, 위계·여백·반응형·컴포넌트 규칙을 이해하고 편집 가능한 화면으로 직접 재구성하는 것이다.
클론 학습 흐름
참고 화면 고정요소 측정수동 재구성반응형 검사차이와 근거 기록
수행 단계
| 단계 | Figma에서 직접 할 일 |
|---|---|
| 목적 정의 | 사용자가 통신사와 요금제를 비교하고 상담을 시작하는 한 가지 목적을 적는다. |
| 필수 요소 | 내비게이션·핵심 제안·비교·신뢰·상담 CTA만 남긴다. |
| 초안 제작 | 회색 박스와 텍스트만으로 첫 Lo-Fi를 만든다. |
| 구조 수정 | CTA 위치 또는 비교 순서를 한 번 이상 바꾸고 이유를 기록한다. |
편집 속성과 판단 기준
| 속성 | 판단 기준 | 기록 |
|---|---|---|
Task |
요금제 비교→상담 | □ 확인 전 |
Order |
인지→비교→신뢰→행동 | □ 확인 전 |
Density |
한 화면의 정보량 | □ 확인 전 |
CTA |
다음 행동의 위치 | □ 확인 전 |
Revision |
구조 변경 전후 | □ 확인 전 |
품질 점검 그래프
작업 후 각 항목을 5점으로 자기 평가한다. 현재 막대는 목표 기준이며 실제 점수는 결과물 검수 후 기록한다.
구조 충실도
4/5
편집 가능성
5/5
반응형
4/5
일관성
4/5
접근성
4/5
결과물 기록란
① Figma 결과 링크작업 완료 후 보기 링크와 프레임 이름을 기록한다.
② 전후 비교원본·수정본 이미지와 바꾼 이유를 기록한다.
③ 수치 검증폭, padding, gap, 대비, 컴포넌트 속성을 적는다.
④ 회고재사용할 규칙과 다음에 고칠 한 가지를 적는다.
완료 기준
- 참고 화면과 수동 편집 결과가 나란히 비교된다.
- 텍스트·도형·이미지가 편집 가능한 레이어로 정리된다.
- Auto Layout과 컴포넌트 사용 이유를 설명할 수 있다.
- PC·390px·320px에서 가로 넘침과 읽기 순서를 확인한다.
- 실제 결과 링크·수치·회고를 채운 뒤 상태를 완료로 바꾼다.
참고
참고 수업 · 실습 안내 또는 참고 화면 · 나정당