아정당 가전렌탈
UI 개선 제안서
조건은 빠짐없이 읽고,
가격은 나란히 비교하고,
기능은 이름으로 찾도록.
2026.09.09에 수행한 실습 02·04·06·08·10의 관찰을 종합했다. 측정값과 해석, 제안 목표를 구분했다. 본 문서는 개선 제안서이며 실제 아정당 사이트를 수정하거나 개선 효과를 측정한 결과는 아니다.
Step 1. 서비스 선택하기
| 항목 | 선택 내용 |
|---|---|
| 서비스 | 아정당 · 가전렌탈 메인 |
| 사용자 상황 | 정수기 렌탈을 검토하며 여러 제품의 월요금과 카드 할인 조건을 비교하고, 필요한 경우 상담하거나 이전에 본 제품을 다시 찾는 방문자 |
| 핵심 과제 | 제품 탐색 → 가격·조건 비교 → 상세 확인 또는 상담 |
| 제안 목표 | 기존 파란색 중심의 시각 체계와 4열 카드 구조를 활용하면서 정보 이해와 기능 탐색의 마찰을 줄인다. |
Step 2. 화면 선택하기
같은 메인 페이지의 첫 화면과 추천 제품 영역 두 장면을 선택했다. 앞선 실습에서 확보한 원본 캡처를 재사용해 같은 관찰 시점의 근거를 연결한다.
Step 3. UI 종합 분석하기
다섯 관점마다 장점과 개선점을 함께 정리했다. 판단은 위 두 화면의 제품 탐색·비교 과제에 한정한다.
| 분석 관점 | 잘 설계된 점 | 개선이 필요한 점 · 근거 |
|---|---|---|
| 시각 위계 | 큰 제목과 반복되는 제품군·필터·카드 순서가 탐색 흐름을 만든다. | 첫 화면에서는 큰 프로모션과 우측 도구가 함께 주목된다. 제품군을 이미 정한 방문자는 카테고리를 찾기 위해 스크롤해야 한다. 검색 아래 빠른 제품군 진입점을 후속 개선으로 검토한다. |
| 타이포그래피 | 제목 24px와 제품명 16px의 1.5배 크기 차이로 영역 위계가 분명하다. | 할인 조건은 13px로 작고 가격보다 약하게 보인다. 구매 판단에 필요한 조건을 보조 장식처럼 놓칠 가능성이 있다. |
| 컬러 시스템 | 파란색 #145CE6은 선택·가격을 일관되게 강조하며 흰 배경에서 5.67:1 대비를 보인다. | 할인 조건 #8C939A는 3.11:1, 사용 가능한 비선택 탭 #ACB3BA는 2.12:1로 일반 글자 기준 4.5:1에 미달한다. |
| 레이아웃과 여백 | 244px 카드 4개·16px 거터·1,024px 콘텐츠 폭으로 가로 정렬이 일정하다. | 제품명 1줄 카드와 2줄 카드의 가격 시작 높이가 22px 차이 난다. 가격을 나란히 비교할 때 시선이 상하로 이동한다. |
| 아이콘 및 시각 요소 | 검색은 돋보기와 안내 문구가 결합돼 목적이 명확하다. 비교·최근 기록 버튼에는 접근성 이름이 있다. | 저울과 제품 사진에 화면 라벨이 없어 비교·최근 기록 기능을 추측해야 한다. 접근성 이름만으로 화면을 보는 사용자의 의미 해석을 해결하지는 못한다. |
Step 4. 개선 우선순위 정하기
가격·조건을 올바르게 이해하는 문제를 가장 먼저, 제품 간 비교를 다음으로, 보조 기능을 찾는 문제를 세 번째로 선정했다. 사용자 영향과 관찰 근거를 기준으로 정한 우선순위이며 정량 사용자 조사 순위는 아니다.
조건의 가독성
금액을 해석하는 데 필요한 정보가격 기준선
제품 간 비교를 돕는 정렬기능 라벨
다음 행동을 알려주는 이름| 문제 · 우선순위 | 왜 개선이 필요한가? | 관련 원칙 | 사용자에게 주는 도움 |
|---|---|---|---|
| 1 · 할인 조건의 작은 크기·낮은 대비 | 할인가만 읽으면 적용 조건을 빠뜨릴 수 있다. 13px·3.11:1이라는 실제 관찰 근거가 있다. | 타이포그래피 위계 · 명도 대비 · 정보의 근접성 | 조건까지 함께 읽어 월요금을 이해하도록 돕는다. |
| 2 · 카드별 가격 높이 차이 | 같은 행에서 가격이 최대 22px 어긋나 빠른 가로 비교를 방해할 수 있다. | 그리드 정렬 · 반복 · 일관성 | 같은 수평선에서 금액을 비교할 수 있다. |
| 3 · 비교·최근 기록의 라벨 부재 | 저울은 여러 의미로 해석될 수 있고 사진은 최근 기록임을 설명하지 못한다. | 인지 가능성 · 아이콘과 텍스트 병행 | 기능을 누르기 전에 어떤 행동인지 예측하기 쉽다. |
후속 검토: 첫 화면의 카테고리 진입 순서, 비선택 탭의 대비, 알림·메뉴의 접근성 이름. 이번 핵심 3개에 포함되지 않았다는 것이 문제가 없다는 뜻은 아니다.
Step 5. UI 개선 제안서 작성하기
| 문제 | 개선 방안 | 기대 효과 |
|---|---|---|
| ① 할인 조건을 놓치기 쉽다. | 조건을 13→14px, 행간 20→21px, 색상 #8C939A→#575E64로 변경한다. 파란 할인가 바로 아래에 붙여 같은 정보 묶음으로 읽게 한다. | 조건의 글자 대비가 계산상 3.11→6.58:1로 높아진다. 가격을 조건과 함께 이해하기 쉬워질 것으로 예상한다. |
| ② 제품명 길이에 따라 가격 위치가 달라진다. | 같은 행의 제품명 영역을 최소 2줄(44px)로 확보하고 8px 뒤에 가격 묶음을 둔다. 긴 제목은 강제로 자르지 않고 해당 행의 제목 영역을 함께 늘린다. | 관찰한 1·2줄 카드에서 가격 상단 편차를 22→0px로 줄이는 것이 목표다. |
| ③ 아이콘만으로 기능을 추측해야 한다. | 저울에 ‘상품 비교’, 최근 기록 기호에 ‘최근 본 상품’을 함께 표시한다. 접근성 이름도 유지한다. 좁은 화면에서는 이름 있는 도구 목록으로 묶는다. | 기능 예측의 모호함을 줄이고 원하는 행동을 찾기 쉽게 한다. |
제안 ① · 같은 조건을 더 잘 읽히게
현재 관찰
13px / #8C939A / 대비 3.11:1
개선 제안
14px / #575E64 / 대비 6.58:1
색 대비는 흰 배경 기준 계산값이다. 시안은 표시 규칙을 비교하며 실제 상품의 할인 조건을 추가하거나 변경하지 않았다.
제안 ② · 가격을 같은 줄에서 비교
현재 관찰 · 22px 차이
모델·기능
개선 제안 · 기준선 일치
모델·기능
제안 ③ · 기호와 기능명 결합
현재 방식
저울 기호 / 제품 사진
그림에서 기능을 추측
개선 제안
기호와 기능명을 함께 읽기
위 전후 비교는 설명용 도식이다. 최종 아이콘 자산·배치 시안은 별도 설계하며 실제 서비스 적용 결과가 아니다.
검증 계획과 판단 기준
| 개선안 | 검증할 과제 | 완료 판단 기준 |
|---|---|---|
| 조건 가독성 | 전후 화면에서 제시 금액의 적용 조건을 설명하게 한다. | 조건 글자 대비 4.5:1 이상 및 겹침 없음. 사용자 조건 이해 정답률·응답 시간을 비교한다. 현재 사용자 기준선은 미측정이다. |
| 가격 정렬 | 1·2·3줄 제목과 글자 확대 환경에서 동일 행의 금액을 비교한다. | 같은 행의 가격 상단 일치, 긴 이름·조건 잘림 없음. 최저가 찾기 정답률·시간을 비교한다. |
| 기능 라벨 | 비교·최근 기록 기능을 처음 사용하는 사람에게 찾게 한다. | 라벨과 도착 기능이 일치하고 모바일에서 겹침 없음. 기능 예측 정답률·첫 선택 시간을 비교한다. |
적용 순서: 현재 화면의 측정값 보존 → 제안 시안 작성 → 사용성 비교 → 결과에 따라 채택·수정. 여러 변경을 동시에 적용한 경우 특정 요소 하나의 효과로 단정하지 않는다.
제출 항목 점검
| 필수 항목 | 완료 결과 |
|---|---|
| 서비스 화면 1~2장 | 첫 화면 A / 추천 영역 B |
| 5가지 관점 종합 분석 | 각 관점의 잘된 점 1개 이상·개선점 1개 이상 |
| 중요 문제 3가지 | 조건 가독성 · 가격 정렬 · 기능 라벨 / 이유·원칙·사용자 도움 |
| 개선 제안 3개 이상 | 문제·개선 방안·기대 효과 형식의 3개 제안 |
| 근거와 결과 구분 | 관찰값 / 해석 / 제안 목표 / 미측정 사용성 효과 구분 |
분석 근거 연결
| 선행 실습 | 제안서에 반영한 근거 |
|---|---|
| 02 · UI 디자인 원칙 | 탐색 시작점과 프로모션의 위계 |
| 04 · 타이포그래피 | 제목·제품명·조건의 크기와 행간 |
| 06 · 컬러 시스템 | 실제 색상과 글자 대비 계산 |
| 08 · 레이아웃·그리드 | 4열 구조와 22px 가격 위치 차이 |
| 10 · 아이콘·시각 요소 | 비교·최근 기록의 라벨과 접근성 이름 |
실습 11 요구사항 · 원본 화면의 권리는 해당 서비스에 있다.