정보 설계
히어로 구간에서는 대형 타이틀, 메인 목업, 보조 정보 모듈 순으로 위계를 세워 첫 스크롤에서 핵심 화면을 먼저 인지하게 하고, 다음 구간에서는 좌측 타이틀과 우측 카드 리스트의 이원 구조로 전환해 여러 항목을 빠르게 스캔할 수 있게 설계했다.
PROJECT — 11 / 63
DETAIL PAGE DESIGN
네온 그라데이션 위의 프로모션형 UI 전개네온 그라데이션 위의 프로모션형 UI 전개
Neon Gradient Promotional UI ShowcaseSCROLL TO EXPLORE ↓
DESIGN POINTS
시각 표현
블루에서 퍼플, 핑크로 이어지는 네온 그라데이션을 바탕으로 사선 라인, 코인·배지·아이콘 같은 부유 요소를 겹쳐 속도감과 참여형 분위기를 강화했다. 여기에 3D 하이라이트가 적용된 스마트폰 목업과 흰색 카드 박스를 대비시켜 화면 중심 오브젝트와 정보 모듈을 또렷하게 분리했다.
사용자 가독성
굵은 헤드라인과 얇은 보조 텍스트의 대비, 흰색 카드와 반투명 정보 박스의 구분, 카드 단위 반복 레이아웃을 통해 복잡한 배경 위에서도 읽기 흐름을 유지한다. 특히 리스트 영역은 썸네일, 상태 요소, 텍스트가 일정한 패턴으로 정렬되어 비교와 훑어보기에 유리하다.
POINT COLORS
Point 1#2FA4FF
Point 2#6A2CFF
Point 3#FF2F7A
Point 4#FFFFFF
NEXT PROJECT — 12
DETAIL PAGE DESIGN