정보 설계
상단 히어로-구성품 소개-관제 화면-연결 도식-비교표-설치 절차-앱 화면-문의 배너로 이어지는 긴 흐름을 챕터형으로 분절했다. 각 구간은 한 번에 하나의 정보 목적만 맡도록 나뉘어 있어, 장비 구성과 연결 관계처럼 복잡한 내용을 스크롤 순서만 따라가도 이해할 수 있게 만든다.
PROJECT — 33 / 63
DETAIL PAGE DESIGN
강한 대비로 정리한 기술 정보 흐름강한 대비로 정리한 기술 정보 흐름
High-Contrast Technical StorytellingSCROLL TO EXPLORE ↓
DESIGN POINTS
시각 표현
블랙·화이트의 극단적 대비 위에 레드 캡슐 배지, 원형 VS 마커, 체크 아이콘, 연결선, 단계 노드 같은 반복 장치를 얹어 전체 톤을 통일했다. 제품 실사와 모니터·스마트폰 목업, 다크 UI 캡처를 크게 사용해 기술적 분위기를 강화하면서도, 배경 전환과 대각선 분할, 오버레이 그래픽으로 섹션마다 리듬을 만들었다.
사용자 가독성
대형 중앙 정렬 타이틀, 굵기 차가 큰 헤드라인, 넓은 여백, 2열 비교와 3단 STEP 구조, 박스형 표 구성으로 긴 페이지의 스캔성을 높였다. 특히 비교 영역은 색상과 명도 차로 열과 행을 분리하고, 도식 구간은 라벨과 선 연결을 활용해 텍스트를 길게 읽지 않아도 관계를 빠르게 파악할 수 있도록 했다.
POINT COLORS
Point 1#FFFFFF
Point 2#000000
Point 3#D40000
Point 4#2B2B2B
Point 5#FFD400
NEXT PROJECT — 34
DETAIL PAGE DESIGN