아정당 가전렌탈
레이아웃·그리드 분석
카드의 시작선은 가지런하다.
가격을 비교하는 줄도 가지런할까?
2026.09.09 · PC 가전렌탈 메인의 추천 제품 BEST4 영역을 관찰했다. 수치는 CSS와 화면 요소의 위치에서 측정했고, 편의성 평가는 나의 해석이다. 서비스의 공식 디자인 그리드나 사용성 실험 결과로 제시하지 않는다.
Step 1. 서비스 선택하기
| 항목 | 선택 및 이유 |
|---|---|
| 서비스 | 아정당 · 가전렌탈 메인 |
| 선택한 화면 | 정수기 추천 제품 4개가 가로로 배치된 목록 영역 |
| 사용자의 과제 | 제품명과 월 렌탈료를 나란히 비교한 뒤 상세 정보로 이동한다. |
| 선정 이유 | 제목·탭·필터·이미지·제품 정보가 반복돼 여백, 정렬선, 그룹 간 관계를 확인하기 좋다. |
Step 2. 화면 캡처하기
Step 3. 화면 분석하기
실측으로 읽은 4열 그리드
카드 폭 244px · 카드 사이 거터 16px · 콘텐츠 폭 1,024px. 도식은 비례 구조를 설명하며 화면 픽셀과 1:1 크기는 아니다.
| 측정 항목 | 실제 확인값 | 해석 |
|---|---|---|
| 카드 그리드 | CSS grid / 244px × 4열 / gap 16px | 같은 폭과 간격으로 제품 비교 단위를 반복한다. |
| 좌우 정렬 | 제목·첫 카드 왼쪽 x ≈ 113.33px / 전체 폭 1,024px | 같은 왼쪽 기준선을 공유한다. 문서 표시 폭 1,251px 기준 좌우 약 113px로 중앙에 배치된다. 소수 좌표는 브라우저 렌더링 값이다. |
| 섹션 패딩 | 상단 64px / 하단 64px | 다른 콘텐츠 묶음과 충분히 분리한다. |
| 제목 아래 마진 | 20px | 섹션 제목과 제품군 탭 사이의 간격 |
| 이미지 영역 | 244 × 180px / 내부 패딩 상하 12px·좌우 30px | 동일한 틀 안에서 제품 이미지를 보여준다. |
| 이미지 → 정보 | 12px | 한 카드 안의 이미지와 설명을 연결한다. |
| 제품 정보 → 가격 묶음 | 8px | 제품명·브랜드와 가격 그룹을 구분한다. |
| 카드 목록 → 더보기 | 40px / 버튼 영역 폭 480px·높이 48px | 목록을 읽은 후 다음 탐색 행동으로 이어진다. |
4열 카드 ≠ 12컬럼 디자인 시스템. 실제로 확인한 것은 이 영역의 CSS 4열 그리드다. 이론의 데스크톱 12컬럼·모바일 4컬럼은 설계 예시이며, 화면에 4개 카드가 있다고 전체 서비스의 디자인 컬럼 수까지 확정할 수는 없다.
간격의 크기 비교
실측 px · 막대는 0–64px의 같은 척도. 작은 간격은 카드 내부, 큰 간격은 그룹 구분에 쓰인다.
8·16·40·64px처럼 8의 배수도 있지만 12·20px, 이미지 좌우 패딩 30px도 사용된다. 따라서 전체가 8-point 시스템이라고 단정하지 않는다. 간격의 일관성은 배수 여부뿐 아니라 같은 역할에 같은 간격을 적용했는지로 판단했다.
분석 질문 5개에 대한 답변
| 질문 | 관찰 근거 | 나의 판단 |
|---|---|---|
| ① 일정한 간격으로 배치됐는가? | 4개 카드의 폭은 모두 244px, 가로 간격은 모두 16px이다. | 가로 반복 규칙은 일정하다. 다만 카드 내부의 가격 시작 높이는 제품명 줄 수에 따라 달라진다. |
| ② 관련 있는 정보끼리 묶였는가? | 이미지와 정보는 12px, 제품 설명과 가격 묶음은 8px으로 연결된다. 다른 카드와는 16px 떨어져 있다. | 이미지·브랜드·제품명·가격을 하나의 상품 단위로 읽기 쉽다. 제품군 탭과 필터도 목록 위에 있어 탐색 조건과 결과의 관계가 자연스럽다. |
| ③ 좌우 정렬이 일정한가? | 제목과 첫 카드의 왼쪽 좌표가 같고, 카드 안 텍스트도 이미지 영역의 왼쪽에 맞춰진다. | 본문 정렬선이 일관돼 안정적으로 훑어볼 수 있다. 더보기는 중앙 정렬이지만 폭과 별도 간격으로 후속 행동임을 구분한다. |
| ④ 중요한 요소가 한눈에 구분되는가? | 제목 → 제품군 → 필터 → 카드 → 더보기 순서. 가격은 파란색으로 강조된다. | 탐색 순서와 주요 행동은 잘 구분된다. 가격의 세로 위치가 한 카드에서 22px 올라가 가로 비교 시 시선이 위아래로 이동한다. |
| ⑤ 여백 때문에 읽기 편한가? | 카드 내부 8·12px보다 섹션 64px, 더보기 위 40px가 크다. | 관련 정보는 가깝게, 다른 그룹은 멀게 두어 읽기 편하다. 여백을 전반적으로 줄이기보다 가격처럼 비교해야 하는 정보의 정렬을 먼저 개선하는 것이 적절하다. |
가격 줄의 높이 차이
| 카드 | 제품명 높이 | 이미지 상단 → 할인가 상단 | 첫 카드 기준 차이 |
|---|---|---|---|
| 1 · 쿠쿠 MINI100 | 44px · 2줄 | 288px | 0px |
| 2 · 웰스 슈퍼쿨링 | 22px · 1줄 | 266px | −22px |
| 3 · 쿠쿠 끓인물 | 44px · 2줄 | 288px | 0px |
| 4 · SK매직 | 44px · 2줄 | 288px | 0px |
네 카드 이미지의 상단은 동일하다. 제품명 1줄과 2줄의 높이 차이가 그대로 가격 위치에 반영됐다. 사용자 혼동 정도는 아직 측정하지 않았다.
Step 4. 개선 아이디어 작성하기
| 항목 | 제안 내용 |
|---|---|
| 선택한 개선점 | 제품명 길이에 관계없이 가격 비교 줄을 맞춘다. |
| 유지할 규칙 | PC 1,024px 콘텐츠 폭 · 4열 · 16px 거터 · 이미지 180px 높이 |
| 변경할 규칙 | 한 행의 제품명 영역을 최소 2줄(44px)로 확보한다. 이후 8px 간격으로 가격 묶음을 배치해 가격 시작 높이를 맞춘다. |
| 긴 제목 처리 | 제목을 강제로 잘라 핵심 모델명이 사라지지 않게 한다. 더 긴 이름·글자 확대에서 2줄을 초과하면 해당 행의 제목 영역을 함께 늘리는 방식을 검토한다. |
| 기대 효과 | 가격을 같은 수평선에서 비교할 수 있어 시선의 상하 이동을 줄일 것으로 예상한다. |
| 검증 방법 | 제품명 1·2·3줄을 포함한 카드로 가격 상단 정렬 여부를 확인한다. 사용자에게 특정 조건의 최저가 제품을 찾게 해 소요 시간·정답률을 비교한다. 효과는 미측정이다. |
가격 정렬 개선 전후 도식
실제 서비스 수정본이 아닌 설명용 도식이다. 제품명 영역 높이와 가격 기준선의 관계를 보여준다. 좁은 화면에서는 도식을 가로로 움직여 볼 수 있다.
현재 관찰 · 두 번째 카드 가격이 위로 이동
모델·기능
모델·기능
모델·기능
개선 제안 · 가격 기준선 일치
모델·기능
모델·기능
모델·기능
현재 실측
가격 상단 편차 22px
동일 행에서 제품명 길이에 따라 달라짐
개선 목표
가격 상단 편차 0px
비교 대상 행의 제목 영역 높이를 공유
반응형은 후속 검증 항목. 이번 실측은 PC 영역에 한정한다. 모바일 원본의 카드 열 수나 좌우 여백은 추정하지 않았다. 개선안을 적용할 때는 좁은 화면·글자 확대에서도 제목이 잘리지 않고 가격과 조건의 묶음이 유지되는지 확인해야 한다.
실습 제출 항목 점검
| 요구사항 | 완료 결과 |
|---|---|
| 서비스 선택 | 아정당 가전렌탈 추천 목록 / 분석 목적 |
| 화면 캡처 1장 | 실제 전체 페이지 원본과 추천 영역 표시 |
| 질문 5개 답변 | 간격 · 그룹 · 좌우 정렬 · 위계 · 여백 |
| 개선 아이디어 1개 이상 | 제품명 영역 높이를 맞추는 가격 정렬 개선 |
| 근거 도식 | 4열 그리드 계산 · 간격 그래프 · 가격 위치표 · 전후 도식 |
이번 실습에서는 카드의 외곽을 맞추는 것과 사용자가 비교할 정보의 기준선을 맞추는 것은 별도의 설계 과제라는 점을 확인했다.
분석 대상: 아정당 가전렌탈 · 레이아웃과 그리드 시스템 · 실습 요구사항. 원본 화면의 권리는 해당 서비스에 있다.