DSDesignSkill
|

/컴포넌트/메가 푸터 — 뉴스레터 밴드 결합형

새 창 ↗

컨테이너 폭 그대로 · sandbox 미리보기

설명

#0f172a 다크 배경 위에 네이비 딥 #1e3a5f 그라디언트 밴드를 얹어, 푸터를 "구독 → 탐색 → 신뢰 정보 → 법적 고지" 네 층으로 눌러 담은 대형 블록입니다. 최상단 구독 밴드는 좌측 폼과 우측 지난 호 미리보기 카드(4:3 그라디언트 플레이스홀더)를 1.12:0.88로 나눠 "이 편지가 무엇인지"를 먼저 보여주고, 관심 주제는 peer-checked 칩으로 스크립트 없이 고릅니다. 그 아래는 브랜드 소개와 4열 링크 내비를 5칼럼 그리드로 펼치고, 사업자 정보는 dl 정의형 2단으로, 소셜은 인라인 SVG 5종 아이콘 버튼으로 정리했습니다. 모노 라벨·사업자번호·발송 통계·저작권 연도는 JetBrains Mono, 본문 카피는 Pretendard로 나눠 정보의 층위를 폰트 자체로 구분했습니다. 하단 바는 #0a0f1c로 한 단 더 눌러 법적 링크와 언어 선택 select를 좌우로 갈랐고, 배경에는 blur-3xl 광원 두 개가 14초·19초 주기로 느리게 흐르되 prefers-reduced-motion에서는 멈춥니다. 링크는 hover 시 밑줄이 좌→우로 그려지는 background-size 트랜지션을 씁니다. 컴팩트 3열형(랜딩용)과 미니멀 법적 바(웹앱용) 변형을 함께 세로로 배치했고, contentinfo 랜드마크가 문서에 하나만 잡히도록 미리보기 3종의 footer는 main 안에 의도적으로 중첩했습니다.

섹션 구성

  1. 01컴포넌트 개요 · 랜드마크 안내 카드 3종
  2. 02변형 A — 뉴스레터 구독 밴드 (폼 + 관심 주제 칩 + 지난 호 미리보기 카드)
  3. 03변형 A — 브랜드 소개 + 서비스 상태 배지 + 4열 링크 내비
  4. 04변형 A — 사업자 정보 정의형 목록 + 소셜 채널 5종 + 상담 예약 CTA
  5. 05변형 A — 하단 법적 링크 + 언어 선택 + 데모 고지
  6. 06변형 B — 컴팩트 3열 푸터 (인라인 구독 한 줄)
  7. 07변형 C — 미니멀 법적 바 (링크 + 소셜 + 언어 코드)
  8. 08적용 메모 표 (변형별 사용처 · 확인 항목)
  9. 09페이지 실제 contentinfo 고지 스트립

변경 이력

v1.0.02026-07-31

최초 등록