02 · PART 2 · CLASS / FIGMA UX·UI
응용 실습
외부 URL 응용 · Notion 홈 클론
나정당에서 익힌 규칙을 다른 서비스에 옮겨, 참고 화면을 보고 직접 재구성하는 능력을 검증한다.
진행 중 · 실습지와 검수 기준 준비
대상나정당 인터넷 비교 화면
훈련 초점응용
완료 산출물PC·모바일 수동 클론, 컴포넌트 3종, 차이 기록표
최종 목표는 화면 이미지를 베끼는 것이 아니라, 위계·여백·반응형·컴포넌트 규칙을 이해하고 편집 가능한 화면으로 직접 재구성하는 것이다.
클론 학습 흐름
참고 화면 고정요소 측정수동 재구성반응형 검사차이와 근거 기록
수행 단계
| 단계 | Figma에서 직접 할 일 |
|---|---|
| 범위 고정 | 내비게이션·Hero·CTA·메인 비주얼·첫 기능 영역만 분석한다. |
| 빈 프레임 | PC 1440×1600 12열, 모바일 390×1500 4열 빈 프레임에서 시작한다. |
| 수동 재구성 | 텍스트·도형·Auto Layout·컴포넌트로 위계와 간격을 직접 맞춘다. |
| 고유화 | 참고 브랜드의 로고·문구·이미지를 그대로 쓰지 않고 자체 서비스 내용으로 교체한다. |
| 차이 기록 | 원본과 결과의 차이 5개와 의도적인 변경 이유를 기록한다. |
편집 속성과 판단 기준
| 속성 | 판단 기준 | 기록 |
|---|---|---|
Scope |
Nav / Hero / CTA / Visual / Feature | □ 확인 전 |
Desktop |
1440×1600, 12 columns | □ 확인 전 |
Mobile |
390×1500, 4 columns | □ 확인 전 |
Components |
Button / Nav / Feature card | □ 확인 전 |
QA |
320px와 차이 5개 | □ 확인 전 |
품질 점검 그래프
작업 후 각 항목을 5점으로 자기 평가한다. 현재 막대는 목표 기준이며 실제 점수는 결과물 검수 후 기록한다.
구조 충실도
4/5
편집 가능성
5/5
반응형
4/5
일관성
4/5
접근성
4/5
결과물 기록란
① Figma 결과 링크작업 완료 후 보기 링크와 프레임 이름을 기록한다.
② 전후 비교원본·수정본 이미지와 바꾼 이유를 기록한다.
③ 수치 검증폭, padding, gap, 대비, 컴포넌트 속성을 적는다.
④ 회고재사용할 규칙과 다음에 고칠 한 가지를 적는다.
완료 기준
- 참고 화면과 수동 편집 결과가 나란히 비교된다.
- 텍스트·도형·이미지가 편집 가능한 레이어로 정리된다.
- Auto Layout과 컴포넌트 사용 이유를 설명할 수 있다.
- PC·390px·320px에서 가로 넘침과 읽기 순서를 확인한다.
- 실제 결과 링크·수치·회고를 채운 뒤 상태를 완료로 바꾼다.
참고
참고 수업 · 실습 안내 또는 참고 화면 · 나정당 · Notion 한국어 홈