02 · PART 2 · CLASS / FIGMA UX·UI

실습 02-1
타이포그래피와 정보 위계

텍스트가 많은 상품 비교 영역을 읽기 쉬운 타이포그래피 체계로 다시 설계한다.

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

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

훈련 초점타이포

완료 산출물타입 스케일 표, 개선 전후 화면, 선택 이유 5문장

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

클론 학습 흐름

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

단계	Figma에서 직접 할 일
표본 선택	제목·설명·가격·보조 문구가 함께 있는 카드 영역을 고른다.
역할 분리	Display, H1, H2, Body, Caption의 역할과 크기를 표로 만든다.
리듬 조정	줄높이·자간·문단 간격을 8px 계열로 정리한다.
수동 수정	글꼴 크기만 키우지 않고 굵기와 여백으로 우선순위를 재구성한다.

속성	판단 기준	기록
`텍스트 역할`	Display / Heading / Body / Caption	□ 확인 전
`크기`	단계 간 차이가 눈에 보이는가	□ 확인 전
`굵기`	강조가 너무 많지 않은가	□ 확인 전
`행간`	두 줄 이상에서 숨 쉴 공간이 있는가	□ 확인 전
`문단 간격`	내용 단위가 분명한가	□ 확인 전

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

구조 충실도

4/5

편집 가능성

5/5

반응형

4/5

일관성

4/5

접근성

4/5

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

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

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

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