설명

배경을 #0b0b12로 깔고 #312e81 인디고를 두 개의 라디얼 글로우와 blur 오브로 흘려 넣어 '깊은 밤' 톤을 만든 히어로 컴포넌트입니다. 64px 그리드를 라디얼 마스크로 가장자리에서 사라지게 처리해 화면 가장자리는 검게, 중앙은 은은하게 빛나도록 시선을 모았습니다. 제목은 Sora 700, 본문은 Inter로 분리해 헤드라인의 기하학적 무게와 본문의 가독성을 대비시켰고, 강조 구절만 인디고 200~400 그라디언트 텍스트로 뽑았습니다. 변형 A는 좌측 카피·우측 라이브 프리뷰 카드의 스플릿 구성으로, 인라인 폼(아이콘 인풋 + 인디고 600 버튼) 아래 신뢰 지표 3종을 구분선으로 얹었고 프리뷰 카드에는 SVG 영역 차트와 채널 비중 바를 넣었습니다. 변형 B는 같은 DNA를 센터 정렬로 재구성하고 하단에 그라디언트 제품 프레임(브라우저 크롬 + 구조 힌트 + 글래스 지표 오버레이)을 화면 밖으로 흘려 깊이를 줬습니다. 변형 C는 중단 삽입용 컴팩트 밴드입니다. 글로우는 16~24초 드리프트 애니메이션으로 움직이되 prefers-reduced-motion에서 전부 정지하며, 모든 인풋에 라벨, 모든 인터랙션에 오프셋 포커스 링, 본문 대비는 AA 이상을 유지했습니다.

섹션 구성

1. 01변형 A — 스플릿 스포트라이트 히어로 (공지 pill · 그라디언트 헤드라인 · 인라인 이메일 캡처 폼 · 신뢰 지표 3종 · 라이브 프리뷰 카드)
2. 02변형 B — 센터 정렬 스포트라이트 히어로 (인라인 신뢰 배지 3종 · 그라디언트 제품 프레임 플레이스홀더 · 글래스 지표 오버레이)
3. 03변형 C — 컴팩트 캡처 밴드 (주간 다이제스트 구독 폼 · 미니 바 차트 타일 · 3칸 지표)
4. 04데모용 가상 정보 고지 한 줄

변경 이력