구간별 역할이 분명한 정보 설계
히어로에서는 인상 형성, 이어지는 구간에서는 CTA와 번호형 설명, 카드 요약, 확대 디테일, 크기 비교, VS 비교, 최종 정보 정리까지 단계적으로 구조를 나눴습니다. 각 섹션이 하나의 메시지만 선명하게 담당하도록 구성해 긴 페이지에서도 흐름이 끊기지 않습니다.
PROJECT — 20 / 63
DETAIL PAGE DESIGN
질감 대비로 완성한 정보 집중형 상세 디자인질감 대비로 완성한 정보 집중형 상세 디자인
Textured Contrast Detail FlowSCROLL TO EXPLORE ↓
DESIGN POINTS
텍스처·사선 구도·워터마크를 활용한 시각 표현
콘크리트, 카본 계열의 배경 텍스처와 청록·남색 포인트, 사선으로 겹치는 제품 이미지, 옅은 워터마크 타이포를 반복적으로 사용해 정적인 정보 페이지에 리듬을 부여했습니다. 특히 흰 배경과 어두운 질감 배경의 교차는 구간 전환을 명확하게 만들며 제품 컷의 존재감을 끌어올립니다.
강한 타이포 위계와 라벨링으로 높인 가독성
대형 헤드라인, 숫자 마커, 박스형 라벨, 캡슐형 태그, 확대 인셋 같은 장치를 통해 사용자가 어디를 먼저 보고 무엇을 비교해야 하는지 즉시 파악할 수 있게 했습니다. 중앙 정렬과 좌우 분할을 상황에 따라 병행하면서도 여백을 충분히 확보해 복잡한 정보가 답답하게 뭉치지 않도록 조절했습니다.
POINT COLORS
Point 1#FFFFFF
Point 2#111111
Point 3#15A9C7
Point 4#1F2D3A
Point 5#D7D7D7
NEXT PROJECT — 21
DETAIL PAGE DESIGN