긴 스크롤을 단계형 정보 구조로 정리한 편집 설계
첫 화면은 풀블리드 배경과 전경 제품으로 강하게 주목도를 확보하고, 이후 카드형 요약-체크리스트 콜아웃-상태 비교-기능별 연번 섹션-교차형 설명 블록-스펙 표로 내려가며 정보를 세분화합니다. 각 구간은 대형 번호, 섹션 헤드, 배경 전환, 프레임 박스로 경계를 분명히 해 긴 상세 페이지를 한 장의 카탈로그처럼 읽히게 만듭니다.
PROJECT — 03 / 63
DETAIL PAGE DESIGN
아웃도어 무드를 정교하게 편집한 디테일 페이지아웃도어 무드를 정교하게 편집한 디테일 페이지
Editorial Outdoor Detail SystemSCROLL TO EXPLORE ↓
DESIGN POINTS
딥그린과 화이트 대비 위에 구축한 제품 중심 시각 언어
전체 화면은 화이트 바탕, 딥그린 타이포, 블랙/브라운 계열 제품 컷을 중심으로 통일되어 아웃도어 톤을 유지하면서도 과도하게 무겁지 않게 정리됩니다. 굵은 이탤릭 헤드라인, 반투명 원형 배경, 라운드 프레임, 초록 포인트 라인, 선형 아이콘 같은 반복 장치가 각기 다른 섹션을 하나의 시각 시스템 안으로 묶어 줍니다.
콜아웃, 비교 구도, 표 구성을 통한 높은 가독성
제품 설명은 긴 문장 대신 체크 아이콘, 리더라인, 포인트 점, 원형 확대 인셋, 수직 브래킷, 2열 그리드, 행 단위 스펙 표로 분해되어 빠르게 스캔됩니다. 접은 상태와 펼친 상태, 전체 실루엣과 클로즈업, 좌우 대칭 비교, 이미지와 텍스트의 교차 배치가 반복되면서 사용자는 스크롤만으로도 구조와 차이를 자연스럽게 따라갈 수 있습니다.
POINT COLORS
Point 1#0f2f25
Point 2#1f3a2f
Point 3#ffffff
Point 4#6b5a4a
Point 5#d9d9d9
NEXT PROJECT — 04
DETAIL PAGE DESIGN