02 · PART 2 · CLASS / FIGMA UX·UI

실습 21
디자인 시스템 기반 클론

나정당 화면을 자체 토큰과 컴포넌트로 재구축해 품질을 반복 유지할 수 있는 클론을 완성한다.

진행 중 · 실습지와 검수 기준 준비

대상나정당 인터넷 비교 화면

훈련 초점최종 클론

완료 산출물디자인 시스템, Hi-Fi 2~3장, 프로토타입, 회고

최종 목표는 화면 이미지를 베끼는 것이 아니라, 위계·여백·반응형·컴포넌트 규칙을 이해하고 편집 가능한 화면으로 직접 재구성하는 것이다.

나정당 인터넷 페이지 PC 참고 화면 — 나정당 PC 참고 화면. 실습에서는 이 화면을 분석한 뒤 편집 가능한 Figma 요소로 다시 구성한다.

클론 학습 흐름

참고 화면 고정요소 측정수동 재구성반응형 검사차이와 근거 기록

수행 단계

단계	Figma에서 직접 할 일
토큰	색·타입·간격·반경·그림자 변수를 정리한다.
UI Kit	버튼·입력·카드·내비게이션·배지를 컴포넌트화한다.
Hi-Fi	PC·모바일 핵심 화면 2~3장을 같은 규칙으로 완성한다.
검증	320/390/1440px, 상태·예외·개발 전달값, 회고를 확인한다.

편집 속성과 판단 기준

속성	판단 기준	기록
`Foundation`	색·타입·간격 변수	□ 확인 전
`Components`	반복 UI	□ 확인 전
`Screens`	PC·모바일 2~3장	□ 확인 전
`States`	기본·호버·오류·빈 상태	□ 확인 전
`Handoff`	토큰·측정·예외	□ 확인 전

품질 점검 그래프

작업 후 각 항목을 5점으로 자기 평가한다. 현재 막대는 목표 기준이며 실제 점수는 결과물 검수 후 기록한다.

구조 충실도

4/5

편집 가능성

5/5

반응형

4/5

일관성

4/5

접근성

4/5

Figma Make 입력 프롬프트

아래 프롬프트로 동작 초안을 만든 뒤, 시각 규칙과 레이어 구조는 Figma에서 직접 검수한다.

나정당 디자인 시스템을 적용한 인터넷 비교 서비스 프로토타입을 만들어줘.
Foundation: 브랜드/중립/상태 색, 타입 스케일, 4·8·16·24·32·48 간격, radius, shadow.
Components: 내비게이션, 버튼 variants, 입력 상태, 통신사 탭, 요금제 카드, 혜택 배지, 상담 카드.
Screens: 메인, 요금제 상세, 상담 신청. PC 1440px과 모바일 390px을 포함해.
핵심 흐름과 오류·빈·로딩 상태를 연결하고, 모든 문구는 조건을 명확히 설명하는 한국어로 작성해.
디자인 토큰과 컴포넌트 이름이 개발 전달에 사용할 수 있도록 일관되게 구성해.

결과물 기록란

① Figma 결과 링크작업 완료 후 보기 링크와 프레임 이름을 기록한다.

② 전후 비교원본·수정본 이미지와 바꾼 이유를 기록한다.

③ 수치 검증폭, padding, gap, 대비, 컴포넌트 속성을 적는다.

④ 회고재사용할 규칙과 다음에 고칠 한 가지를 적는다.

완료 기준

참고 화면과 수동 편집 결과가 나란히 비교된다.
텍스트·도형·이미지가 편집 가능한 레이어로 정리된다.
Auto Layout과 컴포넌트 사용 이유를 설명할 수 있다.
PC·390px·320px에서 가로 넘침과 읽기 순서를 확인한다.
실제 결과 링크·수치·회고를 채운 뒤 상태를 완료로 바꾼다.

참고

참고 수업 · 실습 안내 또는 참고 화면 · 나정당