정보 설계
도입부의 대형 메시지 이후 아이콘 3단 구성, STEP 배지형 안내, 반복형 박스 섹션, 하단 리스트형 고지로 정보 구조를 점진적으로 세분화했다. 각 화면은 한 번에 이해할 수 있는 단위로 잘게 나뉘며, 색상 전환과 좌우 분할 레이아웃으로 서로 다른 성격의 정보를 명확히 분리한다.
PROJECT — 50 / 63
DETAIL PAGE DESIGN
친근한 캐릭터와 단계형 정보 구조로 완성한 상세페이지 디자인친근한 캐릭터와 단계형 정보 구조로 완성한 상세페이지 디자인
Playful Visual Flow with Structured Step LayoutSCROLL TO EXPLORE ↓
DESIGN POINTS
시각 표현
청록과 노랑의 선명한 대비 위에 검정 타이포를 얹어 즉각적인 주목도를 만들고, 펫 일러스트·발자국 패턴·손그림 화살표·캡슐형 라벨로 전체 톤을 일관되게 유지했다. 여기에 스마트폰 목업, 소셜 카드형 UI, 실사 컷아웃 이미지를 겹쳐 배치해 안내형 콘텐츠에 입체감과 친근한 리듬을 더한다.
사용자 가독성
굵은 제목, 소형 보조 문구, STEP 라벨, 체크형 박스, 얇은 구분선 등 위계 요소를 반복적으로 사용해 긴 페이지에서도 읽기 순서를 놓치지 않게 했다. 중앙 정렬과 좌측 정렬을 구간별로 선택적으로 운영하고, 넓은 여백과 단순한 배경을 유지해 모바일 환경에서도 핵심 정보가 빠르게 스캔되도록 구성했다.
POINT COLORS
Point 1#23C2C8
Point 2#FFE86A
Point 3#000000
Point 4#FFFFFF
Point 5#F5A800
NEXT PROJECT — 51
DETAIL PAGE DESIGN