아정당 가전렌탈
타이포그래피 분석
가격은 잘 보인다.
그 가격이 적용되는 조건도 함께 읽힐까?
2026.09.09 관찰 · 가전렌탈 메인 페이지의 추천 제품 영역을 분석했다. 수치는 PC 화면의 CSS 계산값이며, 시선 순서와 읽기 편의성은 화면에 근거한 나의 해석이다. 실제 시선 추적·사용성 시험 결과와 구분한다.
Step 1. 서비스 선택하기
| 항목 | 선택 및 이유 |
|---|---|
| 서비스 | 아정당 · 가전렌탈 메인 |
| 선택한 화면 | 아정당 추천 제품 BEST4 / 정수기 탭 |
| 사용자의 과제 | 제품명과 월 렌탈료를 비교하고, 표시된 할인가의 적용 조건을 확인한다. |
| 선정 이유 | 제목·탭·필터 버튼·제품명·가격·보조 설명이 함께 있어 역할별 글자 위계를 비교하기 좋다. |
Step 2. 화면 캡처하기
Step 3. 화면 분석하기
역할별 글자 속성
크기 / 행간 단위는 CSS px. 조사한 요소의 font-family 첫 지정값은 Pretendard이며 대체 글꼴이 함께 설정돼 있다. 실제 렌더링 글꼴 파일까지 확인한 것은 아니다. 자간은 모두 normal로, 고정된 0px이라고 단정하지 않았다.
| 역할 · 화면 텍스트 | 크기 / 굵기 | 행간 / 자간 | 색상 · 해석 |
|---|---|---|---|
| 섹션 제목 · 추천 제품 BEST4 | 24 / 700 | 34 / normal | #1F2429 · 영역의 시작 |
| 탭 · 정수기 / 다른 제품군 | 18 / 700 | 26 / normal | 선택 #145CE6 / 비선택 #ACB3BA |
| 버튼 · 냉/온수, 제품 더보기 | 15 / 500 | 18 / normal | 필터·더보기의 행동 역할 |
| 제품명 · MINI100 초소형 냉온정수기 | 16 / 700 | 22 / normal | #1F2429 · 비교 대상 |
| 브랜드 · 쿠쿠 | 13 / 400 | 20 / normal | #575E64 · 보조 분류 |
| 할인 전 표시 금액 · 월 28,900원 | 15 / 500 | 24 / normal | #575E64 · 취소선 |
| 할인 후 금액 · 월 0원 | 16 / 700 | 22 / normal | #145CE6 · 가격 강조 / 원 단위는 13px·500 |
| 조건 · 카드 할인시 | 13 / 500 | 20 / normal | #8C939A · 가격 적용 조건 |
실측 글자 크기 비교
막대 길이는 실제 크기에 비례한다. 최대값 24px 기준이며 평가 점수가 아니다.
제목 : 제품명 = 1.5 : 1 · 24 ÷ 16. 크기 차이는 분명하다. 반면 제품명과 할인가는 모두 16px·700이므로 두 역할의 구분에는 색상이 함께 작용한다.
분석 질문 5개에 대한 답변
| 질문 | 관찰 근거 | 나의 판단 |
|---|---|---|
| ① 가장 먼저 보이는 텍스트는? | 영역 상단 제목은 24px·700. 카드 안 할인가에는 파란색을 사용한다. | 선택한 영역에서는 제목이 먼저, 카드 내부에서는 파란 할인가가 빠르게 눈에 들어온다고 판단했다. 전체 페이지 첫 진입 화면에 대한 평가는 아니다. |
| ② 제목과 본문의 크기 차이는 충분한가? | 제목 24px / 제품 설명 역할의 제품명 16px / 보조 설명 13px. | 영역 제목과 제품 정보 사이의 차이는 충분하다. 다만 이 화면은 장문 본문이 없는 카드 목록이므로 긴 문단의 가독성까지 평가하지 않는다. |
| ③ 버튼·본문·보조 설명의 역할이 구분되는가? | 버튼 15px·500과 테두리, 제품명 16px·700, 조건 13px·500. | 형태와 글자 위계가 함께 역할을 구분한다. 그러나 할인 조건은 단순한 부가 정보보다 구매 판단에 중요해 현재의 약한 강조를 보완할 필요가 있다. |
| ④ 글자가 읽기 편한가? | 제품명 행간 22/16=1.38배, 조건 20/13=1.54배. 카드에서 제품명은 여러 줄로 표시된다. | 짧은 문구와 반복 정렬은 훑어읽기 좋다. 조건의 행간은 여유가 있지만 13px의 작은 크기와 옅은 회색은 읽기 부담을 줄 수 있다. 본문 1.5배 기준을 짧은 버튼에 일률 적용하지 않는다. |
| ⑤ 굵기를 과도하게 사용했는가? | 제목·탭·제품명·할인가 700, 버튼·조건 500, 브랜드 400. | 전부 굵게 처리하지 않아 기본 구분은 있다. 다만 비선택 탭까지 700이므로 활성 항목 중심으로 굵기를 차등화하는 대안을 검토할 수 있다. 과도한 사용이라고 단정할 정도는 아니다. |
정보를 읽는 흐름
Step 4. 개선 아이디어 작성하기
| 개선 항목 | 현재 관찰 | 제안 | 기대 효과·확인 방법 |
|---|---|---|---|
| 우선 개선 · 할인 조건의 가독성 | 13px / 500 / 20px / #8C939A | 14px / 500 / 21px / #575E64로 조정. 할인가 바로 아래에 조건을 같은 묶음으로 배치한다. | 조건을 빠뜨리는 오해를 줄일 것으로 예상한다. 가격 적용 조건을 정확히 설명하는지 전후 화면으로 확인한다. |
| 보조 개선 · 선택 탭의 굵기 | 선택·비선택 모두 700 | 선택 700 유지, 비선택 500을 시안에서 비교한다. 선택 색상·밑줄 유지. | 현재 선택과 다른 선택지를 빠르게 구분하는지 확인한다. 실제 효과는 미측정이다. |
할인가와 조건 · 개선 전후 예시
아래는 글자 규칙을 비교하는 설명용 시안이다. 실제 사이트 수정본이 아니며 상품 조건을 추가하거나 바꾸지 않았다.
현재 관찰
쿠쿠 인스퓨어 MINI100
월 0원 카드 할인시
가격 16px·700 / 조건 13px·500
조건 #8C939A
개선 제안
쿠쿠 인스퓨어 MINI100
월 0원
카드 할인시
가격 16px·700 유지 / 조건 14px·500
조건 #575E64 · 가격 바로 아래 배치
타이포그래피는 가장 중요한 글자를 크게 만드는 것뿐 아니라, 그 정보를 올바르게 이해하는 데 필요한 조건까지 함께 읽히게 만드는 설계라고 정리했다.
실습 제출 항목 점검
| 요구사항 | 완료 결과 |
|---|---|
| 서비스 선택 | 아정당 가전렌탈 추천 제품 영역 및 선택 이유 |
| 화면 캡처 1개 | 원본 전체 캡처와 선택 영역 표시 |
| 분석 질문 답변 | 5개 질문 모두 관찰 근거와 판단 작성 |
| 개선 아이디어 1개 이상 | 우선 개선 1개 + 보조 개선 1개 / 전후 시안 |
분석 대상: 아정당 가전렌탈 · 타이포그래피와 폰트 시스템 · 실습 요구사항. 화면은 분석 증빙이며 원본 권리는 해당 서비스에 있다.