02 · PART 2 · CLASS / UX·UI DESIGN
아정당 가전렌탈
아이콘·시각 요소 분석
익숙한 그림은 빠르게 읽힌다.
기능까지 명확하게 전달될까?
실습 10 · Step 1–4 수행 완료
2026.09.09 · PC 1266 × 529px 첫 화면 기준. 실제 화면과 요소 크기·접근성 이름을 확인했다. 의미의 명확성과 주목도는 나의 분석이며 사용자 실험 결과는 아니다. 자동 순환 배너는 캡처 장면을 기준으로 평가한다.
Step 1. 서비스 선택하기
| 항목 | 선택 및 이유 |
|---|---|
| 서비스 | 아정당 · 가전렌탈 메인 |
| 선택 화면 | 상단 메뉴·검색창·프로모션 배너·우측 상담 및 비교 도구 |
| 사용자 과제 | 원하는 가전을 검색하고, 비교하거나 최근 본 상품으로 돌아가며 필요할 때 상담한다. |
| 선정 이유 | 검색·메뉴 같은 익숙한 기호와 상담·비교처럼 해석이 필요한 기호, 제품 이미지가 한 화면에 함께 나타난다. |
Step 2. 화면 캡처하기
Step 3. 화면 분석하기
아이콘과 시각 요소의 역할 지도
| 요소 | 전달하는 의미 | 명확성·보완점 |
|---|---|---|
| 돋보기 · 검색창 | 브랜드·제품명 검색 | 검색창 안내 문구와 함께 있어 검색 목적을 이해하기 쉽다. |
| 가로선 메뉴 | 전체 메뉴 또는 추가 탐색 | 관습적인 형태이지만 펼쳤을 때 범위까지 알 수는 없다. 메뉴 라벨을 함께 두면 명확하다. |
| 종 모양 | 알림 | 알림을 연상하기 쉽다. 접근성 트리에서는 해당 링크에 설명 이름이 나타나지 않아 보완 대상으로 봤다. |
| 말풍선 · 노란색 | 카카오 상담 진입 | 브랜드 단서와 말풍선으로 상담을 연상한다. 접힌 도구에서는 실시간 상담이라는 구체적 목적을 화면 글자로 읽을 수 없다. |
| 연필 모양 | 상담·가입 관련 입력 | 쓰기·수정·신청 등 여러 의미가 가능하다. 접힌 링크의 이미지 대체 텍스트는 ‘셀프 바로가입’으로 확인돼 기능 라벨이 특히 유용하다. |
| 저울 모양 | 상품 비교 | 비교를 은유하지만 가격 계산이나 균형으로 해석할 여지도 있다. 버튼에는 aria-label=”비교”가 있으나 시각적 라벨은 없다. |
| 원형 제품 사진 | 최근 본 상품 | 버튼의 aria-label은 ‘최근 본 상품’이다. 사진만으로는 최근 기록인지 추천인지 판단하기 어렵다. |
| 큰 배너의 제품 사진·풍선·혜택 장식 | 제품과 프로모션 강조 | 제품 인지와 혜택 전달 역할이다. 인터페이스 아이콘의 선 굵기 기준을 사진·일러스트에 그대로 적용하지 않는다. |
분석 질문 5개에 대한 답변
| 질문 | 관찰에 근거한 답변 |
|---|---|
| ① 어떤 아이콘들이 사용되는가? | 검색 돋보기, 메뉴 가로선, 알림 종, 접기 화살표, 카카오 말풍선, 신청용 연필, 비교용 저울 등이 있다. 별도로 제품 사진과 프로모션 일러스트가 사용된다. |
| ② 아이콘만 보고 기능을 이해하기 쉬운가? | 돋보기·종·메뉴는 익숙한 관습 덕분에 상대적으로 쉽다. 저울·연필·최근 본 상품 사진은 기능을 추측해야 한다. 특히 사진은 상품 자체는 알려주지만 ‘최근 본’이라는 시간적 의미는 전달하지 못한다. |
| ③ 크기와 스타일이 일관적인가? | 메뉴와 비교 그림은 28px, 접힌 상담 그림은 20px로 역할별 크기 묶음이 있다. 선형 기호·채움형 브랜드 아이콘·사진이 섞여 있으나 역할이 달라 혼용 자체를 오류로 보지는 않는다. 같은 도구 그룹 안에서는 아이콘 정렬과 라벨 규칙을 통일하는 것이 좋다. 실제 획 두께가 모두 같다는 측정은 하지 않았다. |
| ④ 아이콘과 텍스트를 함께 사용하는가? | 검색은 안내 문구와 결합돼 있다. 우측 접힌 도구·비교·최근 본 상품에는 항상 보이는 텍스트가 없다. 비교·최근 본 상품에는 접근성 이름이 있어 화면 라벨 부재와 스크린리더 설명 부재를 구분했다. |
| ⑤ 가장 눈에 띄는 시각 요소는 무엇인가? | 선택한 캡처에서는 면적이 큰 정수기 프로모션 배너가 먼저 눈에 들어온다. 큰 제품 사진·제목·혜택 장식이 함께 강조된다. 우측 노란 말풍선은 작은 면적에서도 색 대비로 주의를 끈다. |
그림 크기와 클릭 영역 구분
| 요소 | 그림의 표시 크기 | 버튼·링크 영역 | 해석 |
|---|---|---|---|
| 알림 | 24 × 24px | 24 × 26px | 그림 크기와 링크 높이에 차이가 있다. |
| 메뉴 | 28 × 28px | 40 × 40px | 그림 주위에 조작 공간을 둔다. |
| 접힌 상담 링크 3개 | 각 20 × 20px | 각 32 × 32px | 같은 그룹에 같은 크기를 반복한다. |
| 상품 비교 | 28 × 28px | 56 × 56px | 작은 기호 주위에 넓은 원형 조작 공간을 둔다. |
| 최근 본 상품 | 사진 56 × 56px | 56 × 56px | 사진이 버튼 전체를 채운다. 다른 기능 기호와 성격이 다르다. |
실측 조작 영역의 너비
동일한 0–56px 척도. 접근성 합격 점수나 아이콘 그림 크기가 아니라 버튼·링크의 실제 너비다.
알림 링크
24px
접힌 상담 링크
32px
메뉴 버튼
40px
상품 비교
56px
최근 본 상품
56px
화면에 보이는 라벨과 접근성 이름은 서로 다른 역할이다. 대체 텍스트가 있어도 화면을 보는 사용자가 기능명을 읽을 수 있는 것은 아니다. 반대로 옆에 글자가 있다고 해서 실제 접근성 이름이 적절하게 연결됐다고 자동 판단하지 않는다.
Step 4. 개선 아이디어 작성하기
| 개선 항목 | 제안 | 검증 방법 |
|---|---|---|
| 우선 · 비교와 최근 기록 | 저울 옆에 ‘상품 비교’, 최근 기록 기호 옆에 ‘최근 본 상품’을 상시 표시한다. 기존 접근성 이름도 기능에 맞게 유지한다. | 처음 방문한 사용자에게 두 기능을 찾게 하고 기능 예측 정답률·찾는 시간을 비교한다. |
| 상담 도구 명확화 | 말풍선에 ‘카카오 상담’, 연필에 실제 연결 기능에 맞는 ‘셀프 가입’ 등 짧은 라벨을 붙인다. 공간이 부족하면 명확한 ‘상담·가입’ 열기 버튼 아래 목록으로 묶는다. | 각 라벨과 실제 도착 화면이 일치하는지 확인한다. 상담과 가입을 혼동하지 않는지 점검한다. |
| 알림·메뉴 접근성 이름 | 현재 접근성 트리에서 이름이 비어 있는 알림 링크와 메뉴 버튼에 ‘알림’, ‘전체 메뉴’처럼 목적을 설명하는 이름을 제공한다. | 키보드 이동과 스크린리더로 역할·이름이 전달되는지 확인한다. 이번에는 스크린리더 실사용 시험은 하지 않았다. |
| 시각 스타일 | 기능 기호는 같은 선 스타일·광학 크기로 정렬하고 브랜드 아이콘은 식별성을 유지한다. 사진은 최근 기록 패널 안의 콘텐츠로 활용한다. | 작은 화면과 확대 화면에서도 라벨 겹침·기호 잘림이 없는지 확인한다. |
아이콘 단독 → 아이콘과 기능명
아래 기호는 이해를 돕기 위해 단순화한 설명용 도식이다. 원본 아이콘을 그대로 복제한 디자인이나 실제 사이트 수정본이 아니다.
현재 방식 · 기능 추측
저울과 사진만 표시
기능명은 화면에서 보이지 않음
개선 제안 · 기능 확인
상품 비교
최근 본 상품
기호 + 짧은 기능명
최근 기록은 시간 기호로 보조
기대 효과는 그림을 해석하는 부담을 줄이고 다음 행동을 분명하게 만드는 것이다. 라벨 추가에 따른 실제 이해도·클릭률 변화는 아직 측정하지 않았다.
실습 제출 항목 점검
| 요구사항 | 완료 결과 |
|---|---|
| 서비스 선택 | 아정당 가전렌탈 · 사용 과제와 선택 이유 |
| 화면 캡처 1장 | 메뉴·검색·상담·비교·제품 배너를 포함한 실제 화면 |
| 질문 5개 답변 | 종류 · 이해 가능성 · 일관성 · 텍스트 병행 · 주목 요소 |
| 개선 아이디어 1개 이상 | 기능 라벨 추가 중심의 개선안과 전후 도식 |
이번 분석에서 중요한 기준은 아이콘이 익숙해 보이는지보다, 사용자가 다음 행동을 정확히 예상할 수 있는지였다.
분석 대상: 아정당 가전렌탈 · 아이콘과 시각 요소 활용 · 실습 요구사항. 원본 화면의 권리는 해당 서비스에 있다.