아정당 가전렌탈 화면
UI 디자인 5원칙 분석
혜택은 빠르게 보인다.
제품을 고르는 시작점도 그만큼 빠르게 보일까?
분석일 2026.09.09 · PC 브라우저 1266 × 531px 기준. 같은 가전렌탈 메인 페이지의 첫 화면과 스크롤 영역을 관찰했다. 배너는 자동 순환하므로 아래 캡처 장면을 기준으로 해석한다. 시선 순서와 평가는 화면에 근거한 분석이며 시선 추적 실험 결과는 아니다.
Step 1. 분석할 서비스와 화면 선택하기
| 항목 | 선택 및 이유 |
|---|---|
| 서비스명 | 아정당 |
| 선택한 화면 | 가전렌탈 메인 화면 |
| 화면의 주요 목적 | 필요한 가전의 종류와 제품을 탐색하고, 조건을 살펴본 뒤 상담으로 연결한다. |
| 분석 시나리오 | 렌탈할 가전 종류는 정했지만 브랜드와 모델은 아직 결정하지 않은 방문자가 제품 선택을 시작하는 상황을 가정했다. |
| 선택 이유 | 검색·프로모션·카테고리·상담 도구가 함께 있어 무엇을 먼저 보게 만드는지 비교하기 적합하다. |
Step 2. 시각 디자인 5원칙 분석하기
| 원칙 | 화면에서 발견한 특징 · 1~2문장 | 근거 영역 |
|---|---|---|
| 스케일 | 첫 화면에서 배너가 검색창보다 훨씬 큰 면적을 차지하고, 배너 안에서도 제목이 보조 문구보다 크게 표현된다. 혜택에 주목시키지만 제품 탐색 진입점의 상대적 중요도는 낮아진다. | A · 배너와 검색창 |
| 시각 위계 | 큰 이미지와 굵은 제목이 프로모션을 앞세우고, 선택된 가전 메뉴의 파란색이 현재 위치를 알려준다. 다만 카테고리는 스크롤 뒤에 나와 제품을 고르려는 방문자의 작업 순서와 차이가 생긴다. | A → B · 첫 화면과 다음 영역 |
| 균형 | 배너는 왼쪽 문구와 오른쪽 제품 이미지로 시각적 무게를 나누고, 카테고리는 동일 간격의 격자로 정렬되어 있다. 우측 고정 상담 도구는 본문과 분리되어 있지만 강한 색상으로 별도의 주의를 끈다. | A · 좌우 구성 / B · 격자 |
| 대비 | 선택된 메뉴의 파란색과 흰 배경의 대비로 활성 상태를 구별할 수 있다. 검색 안내 문구는 옅은 회색인 반면 배너와 상담 아이콘은 강한 색을 써 검색 시작점의 주목도가 상대적으로 약하다. | A · 메뉴·검색·우측 도구 |
| 게슈탈트 | 카테고리는 이미지와 이름이 가까이 있고 동일한 배경·크기·간격을 반복해 하나의 선택 그룹으로 인식된다. 유사성과 근접성이 함께 작동해 개별 제품군을 비교하며 훑어보기 쉽다. | B · 이미지와 이름 묶음 |
원칙별 관찰 평가
아래 점수는 분석자의 정성 평가다. 1점은 역할이 거의 드러나지 않음, 3점은 장점과 마찰이 공존함, 5점은 선택한 탐색 과제에 매우 명확함을 뜻한다. 사용자 만족도나 실제 전환율 측정값이 아니다.
Step 3. 시선의 흐름 분석하기
목적과의 일치: 부분적으로 일치. 혜택에 관심을 만들고 탐색으로 연결하는 흐름은 자연스럽다. 그러나 제품군을 이미 정한 방문자에게는 ③이 늦게 나타나므로, 제품 선택을 먼저 시작하게 하는 위계가 더 적합하다고 판단했다. 우측 상담 도구는 이 흐름에서 언제든 이탈해 상담으로 진입할 수 있는 보조 경로다.
Step 4. 잘된 점 2개와 아쉬운 점 2개
잘된 점 ① · 카테고리 묶음
게슈탈트 + 균형동일한 이미지 틀과 일정한 간격으로 제품군이 정렬돼 있다. 이미지와 이름을 한 단위로 읽으며 선택지를 비교하기 쉽다.
잘된 점 ② · 현재 위치 표시
대비 + 시각 위계선택 메뉴의 파란색이 다른 메뉴와 구분된다. 여러 서비스 메뉴 가운데 현재 가전렌탈을 보고 있음을 알아차릴 수 있다.
아쉬운 점 ① · 탐색 시작이 늦음
스케일 + 시각 위계큰 프로모션이 첫 화면의 넓은 면적을 차지해 카테고리가 아래로 밀린다. 제품군을 바로 선택하려는 방문자는 추가 스크롤이 필요하다.
아쉬운 점 ② · 주의가 분산됨
대비 + 시각 위계상단 프로모션, 본문 배너, 우측 상담 아이콘이 각각 강조된다. 상대적으로 옅은 검색 영역이 이 강한 요소들 사이에서 덜 두드러질 수 있다.
Step 5. 개선 방법 제안하기
| 작성 항목 | 제안 내용 |
|---|---|
| 선택한 문제점 | 아쉬운 점 ①: 카테고리 선택이 첫 화면 아래에 있어 탐색 시작이 늦다. |
| 관련 디자인 원칙 | 스케일 · 시각 위계 · 게슈탈트 |
| 개선 방법 | 검색 아래에 주요 가전 4개와 전체보기 진입점을 먼저 배치한다. 기존 전체 카테고리는 유지하고, 프로모션은 그 아래의 작은 보조 영역으로 옮긴다. 빠른 선택 항목은 같은 크기·배경으로 묶어 제품 탐색의 시작점임을 드러낸다. |
| 기대되는 효과 | 배너를 지나 스크롤하지 않아도 제품군 선택을 시작할 수 있다. 혜택 탐색과 제품 탐색의 우선순위를 구분하기 쉬워질 것으로 예상한다. |
| 확인 방법 | 같은 화면 크기에서 지정된 제품군을 찾게 하고, 첫 유효 선택까지 걸린 시간·정확한 선택 여부·선택 전 스크롤 여부를 전후 비교한다. 효과는 아직 측정하지 않았다. |
정보 우선순위 변경 도식
실제 사이트 수정본이 아닌 배치 제안이다. 원문의 요구에 맞춰 개선 방향을 설명하는 개념 도식으로 구성했다.
현재 · 프로모션 우선
제안 · 제품 탐색 우선
첫 화면에서 카테고리 진입 가능 여부
현재는 캡처 A 기준, 개선 목표는 제안 배치 기준의 이진 비교다. 전환율 증가를 뜻하지 않는다.
실습 결과 점검
| Step | 완료한 결과 |
|---|---|
| 1 | 서비스·화면·목적 정의 / 동일 페이지 캡처 2장 |
| 2 | 5가지 원칙별 특징과 화면 근거 작성 |
| 3 | ①→②→③ 시선 흐름과 서비스 목적의 일치 여부 분석 |
| 4 | 원칙에 근거한 장점 2개·아쉬운 점 2개 |
| 5 | 문제 1개 선택 / 원칙·방법·기대 효과·검증 방법 제안 |
이번 분석에서 배운 점은 눈에 잘 띄는 화면과 사용자의 다음 행동이 잘 보이는 화면은 평가 기준이 다를 수 있다는 것이다. 제품을 찾으려는 방문자에게는 탐색의 시작점이 첫 화면에서 분명하게 드러나는지가 중요하다.
분석 대상: 아정당 가전렌탈 · 실습 요구사항. 화면 이미지는 UI 분석을 위한 관찰 증빙이며 브랜드 및 원본 화면의 권리는 해당 서비스에 있다.