아정당 가전렌탈
컬러 시스템 분석
파란색으로 선택을 알려주고,
회색으로 정보를 정리한다.
그 회색은 충분히 읽히고 있을까?
분석일 2026.09.09 · 같은 가전렌탈 메인 페이지의 추천 제품 영역과 우측 상담 도구를 관찰했다. 색상값은 화면 요소의 CSS 계산값, 역할과 시선 순서는 나의 분석이다. 공식 브랜드 가이드나 내부 디자인 토큰을 확인한 것은 아니다.
Step 1. 서비스 선택하기
| 항목 | 선택 및 이유 |
|---|---|
| 서비스 | 아정당 · 가전렌탈 메인 |
| 선택한 화면 | 추천 제품 BEST4 · 정수기 선택 상태와 우측 상담 도구 |
| 사용자의 과제 | 제품군을 선택하고 가격·조건을 비교한 뒤 필요하면 상담을 시작한다. |
| 선정 이유 | 파란색 선택 상태, 중립색 배경과 글자, 노란색 상담 진입점이 함께 보여 색의 역할과 접근성을 비교하기 좋다. |
Step 2. 화면 캡처하기
Step 3. 화면 분석하기
실제 화면에서 확인한 컬러 팔레트
사진·로고 이미지의 색을 추정해 HEX로 적지 않았다. 아래 팔레트는 UI의 글자·배경에서 직접 확인한 값이다.
#145CE6#ECF2FD#FEE500#FFFFFF#F4F6FA#1F2429#575E64#8C939A#ACB3BA분석 질문 5개에 대한 답변
| 질문 | 관찰 근거 | 나의 해석 |
|---|---|---|
| ① Primary Color는 무엇인가? | 선택된 정수기 탭, 냉/온수 필터 글자, 할인가에 #145CE6이 반복된다. | 이 화면의 주요 UI 색은 파란색으로 판단한다. 브랜드 인상과 선택·강조를 연결한다. 서비스 전체의 공식 Primary 토큰명은 확인하지 않았다. |
| ② 강조 색은 어디에 쓰이는가? | 파란색은 선택 상태와 가격, 노란색 #FEE500은 우측 카카오 상담 진입점에 사용된다. | 파란색은 제품 탐색을, 노란색은 외부 상담 채널을 구분한다. 카카오 노란색을 아정당 자체의 Secondary Color나 경고색이라고 단정하지 않는다. |
| ③ 성공·경고·오류 색은 어떻게 표현되는가? | 선택한 기본 화면에는 성공 안내, 경고 문구, 오류 메시지가 표시되지 않았다. | 세 상태 모두 관찰 불가다. 노란 상담 아이콘은 경고가 아니고, 파란 할인가도 정보 알림 상태가 아니다. 상태별 컬러 체계의 유무를 이 화면만으로 판단할 수 없다. |
| ④ 배경에는 어떤 색이 쓰이는가? | 본문은 #FFFFFF, 제품 이미지 영역은 #F4F6FA, 선택 필터 배경은 #ECF2FD이다. | 중립색은 제품을 비교하는 바탕이 되고, 옅은 파랑은 선택된 필터를 같은 색 계열로 묶는다. 별도의 보조 브랜드 색은 이 영역에서 확정하기 어렵다. |
| ⑤ 가장 먼저 눈에 들어오는 요소와 이유는? | 본문의 파란 정수기 탭·밑줄과 우측의 작은 노란 상담 아이콘이 중립색 바탕에서 대비된다. | 색만 놓고 보면 본문에서는 선택 탭, 주변부에서는 노란 상담 아이콘이 먼저 눈에 들어온다. 검은 제목은 크기·굵기로 주목된다. 실제 시선 추적 결과가 아니라 캡처에 근거한 판단이다. |
색의 역할을 구분하는 구조
60–30–10은 설계의 출발점. 이 화면은 넓은 중립색 바탕에 작은 강조색을 배치하는 방향으로 읽힌다. 실제 색상 면적은 측정하지 않았으므로 60%·30%·10%로 구현됐다고 표현하지 않는다.
시맨틱 컬러 관찰 범위
색상·아이콘 미확인
카카오 노랑과 구분
오류 체계 평가 보류
접근성 · 글자와 배경의 명도 대비
일반 텍스트는 WCAG AA의 4.5:1 기준으로 비교했다. 측정 대상은 13–18px로, 18px 굵은 탭도 큰 글자 기준인 약 18.67px 굵게에 못 미친다. 비선택 ‘에어컨’ 탭은 클릭 시 선택 상태와 제품 목록이 바뀌어 사용 가능한 요소임을 확인했다. 따라서 비활성 컨트롤의 예외로 처리하지 않았다. W3C 대비 기준
| 요소 | 글자 / 배경 | 대비율 | 해당 글자 조합 판단 |
|---|---|---|---|
| 할인가·선택 탭 | #145CE6 / #FFFFFF | 5.67:1 | 4.5:1 충족 |
| 선택 필터 글자 | #145CE6 / #ECF2FD | 5.05:1 | 4.5:1 충족 |
| 비선택 탭 | #ACB3BA / #FFFFFF | 2.12:1 | 4.5:1 미달 |
| 카드 할인 조건 | #8C939A / #FFFFFF | 3.11:1 | 4.5:1 미달 |
| 보조 본문 | #575E64 / #FFFFFF | 6.58:1 | 4.5:1 충족 |
대비율 비교 그래프
0–8 범위의 선형 축 · 점선은 4.5:1 기준 · 표시값은 소수 둘째 자리까지, 판정은 반올림 전 값으로 계산했다.
계산: sRGB를 상대 휘도로 변환한 뒤 (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05). 투명한 글자 요소의 배경은 부모 배경까지 확인했다. 이 결과는 선택한 글자 조합의 검사이며 사이트 전체의 접근성 인증이나 평가가 아니다.
Step 4. 개선 아이디어 작성하기
| 우선순위 | 현재 문제 | 개선 제안 | 확인할 결과 |
|---|---|---|---|
| 1 · 비선택 탭 | 사용할 수 있는 제품군이 #ACB3BA로 옅어 비활성처럼 느껴질 수 있고 글자 대비가 미달한다. | #575E64로 어둡게 조정. 선택 상태는 기존 파란색과 밑줄을 유지한다. | 비선택 글자 대비 4.5:1 이상 / 다른 제품군으로 전환할 수 있음을 알아차리는지 확인 |
| 2 · 할인 조건 | #8C939A 조건 글자가 흰 배경에서 기준에 못 미친다. | 조건 색을 #575E64로 변경. 가격과 가까운 묶음은 유지한다. 색 효과를 구분하기 위해 전후 예시에서는 글자 크기를 동일하게 둔다. | 가격 적용 조건을 정확히 읽고 설명하는지 확인 |
| 3 · 상태 의미 보강 | 오류·경고·성공 화면은 이번 범위에서 확인하지 못했다. | 후속 상태 화면을 검토할 때 색 + 상태명 + 아이콘의 동시 사용을 점검한다. 현재 누락이라고 주장하지 않는다. | 색을 구분하지 않아도 상태와 다음 행동을 이해할 수 있는지 확인 |
선택 탭에는 이미 밑줄이 있어 색 외의 단서가 있다. 이 단서를 유지하고, 새로운 상태 메시지를 설계할 때도 색만으로 의미를 전달하지 않는 원칙을 적용한다. W3C 색 사용 기준
색상만 바꾼 개선 전후 시안
설명용 시안이며 실제 아정당 사이트는 수정하지 않았다. 같은 크기·굵기·문구에서 색상의 차이를 비교한다.
현재 관찰 색상
월 0원
카드 할인시
비선택 탭 #ACB3BA
할인 조건 #8C939A
개선 제안 색상
월 0원
카드 할인시
비선택 탭·할인 조건 #575E64
파란색 선택과 밑줄 유지
개선안 계산 결과: 6.58:1. 제안 색과 흰 배경의 대비는 4.5:1을 충족한다. 사용자의 이해도·클릭률 개선은 아직 측정하지 않았다.
실습 제출 항목 점검
| 요구사항 | 완료 결과 |
|---|---|
| 서비스 선택 | 아정당 가전렌탈 · 분석 화면과 이유 |
| 화면 캡처 1장 | 선택 탭·필터·회색 배경·상담 아이콘이 보이는 실제 화면 |
| 질문 5개 답변 | Primary · 강조 · 상태 · 배경 · 첫 주목 요소 |
| 개선 아이디어 1개 이상 | 탭·조건 대비 개선 / 상태 메시지 후속 점검 |
| 접근성 분석 | 5개 글자 조합의 대비 계산 및 전후 시안 |
이번 실습에서는 눈에 띄게 하는 색과, 빠짐없이 읽히게 하는 색을 함께 설계해야 한다는 점을 확인했다. 주요 파란색을 유지하면서 보조 글자의 명도만 조정해도 정보 위계를 보존하고 가독성을 높이는 방향을 제안할 수 있다.
분석 대상: 아정당 가전렌탈 · 컬러 시스템과 접근성 · 실습 요구사항. 원본 화면의 권리는 해당 서비스에 있다.