도입부의 강한 정보 위계 설계
상단은 오렌지·옐로우 계열의 고채도 배경, 초대형 굵은 타이포, 검정 외곽선과 그림자 효과를 결합해 첫 화면에서 즉시 주목되는 포스터형 위계를 만든다. 이후 화이트 배경, 원형 카드, 말풍선 라벨, 중앙 집중형 헤드라인으로 리듬을 바꾸며 복잡한 내용을 단계형·체크리스트형 정보로 자연스럽게 전환한다.
PROJECT — 08 / 63
DETAIL PAGE DESIGN
포스터형 도입과 카탈로그형 정리의 리듬포스터형 도입과 카탈로그형 정리의 리듬
Poster Energy, Catalog ClaritySCROLL TO EXPLORE ↓
DESIGN POINTS
반복 모듈을 통한 시각적 통일감
중반 이후에는 남색 라벨 박스, 대형 제목, 2열 불릿, 와이드 제품 이미지, 흑백 가격표가 거의 동일한 순서로 반복되며 카테고리별 비교 구조를 안정적으로 고정한다. 상품군이 바뀌어도 같은 편집 규칙을 유지해 사용자가 스크롤 중 현재 위치와 섹션 성격을 빠르게 파악할 수 있게 한다.
가독성을 높이는 대비와 분리 장치
화이트 여백을 기반으로 블랙 타이포와 네이비 구분 바를 사용해 텍스트 계층을 선명하게 나누고, 표는 검은 헤더와 옅은 그리드 라인으로 비교성을 높였다. 후반의 프로세스 안내, 카드형 혜택 정리, Q&A 말풍선, 노란 NOTICE 배너는 각각 다른 정보 성격을 색과 프레임으로 분리해 긴 페이지에서도 스캔 읽기가 유지되도록 설계했다.
POINT COLORS
Point 1#F6A300
Point 2#FFC700
Point 3#0B1F44
Point 4#111111
Point 5#FFFFFF
NEXT PROJECT — 09
DETAIL PAGE DESIGN