Component / Footer · Dark
대형 다크 푸터 — 구독 밴드까지 한 덩어리로
사이트 맨 아래는 버려지는 자리가 아닙니다. 목적을 못 찾은 방문자가 마지막으로 들르는 곳이고, 국내 사이트라면 사업자 정보를 반드시 노출해야 하는 자리이기도 합니다. 그래서 뉴스레터 구독 밴드 · 4열 링크 내비 · 사업자 정보 · 소셜 채널 · 법적 링크와 언어 선택을 하나의 다크 블록 안에서 층을 나눠 정리했습니다.
Landmark
실제 페이지에서는 <footer> 하나만 최상위에 둬야
contentinfo 가 하나로 잡힙니다.
Nav Label
링크 열마다 nav 를 나누고
제목과 aria-labelledby 로 묶었습니다.
Contrast
본문 #cbd5e1 기준 배경 대비 12:1, 보조 문구도 AA 를 넘깁니다.
아래 세 변형은 미리보기용이라 <footer> 를
main 안에 중첩해 두었습니다. 이 경우 랜드마크로 승격되지 않으므로
한 화면에 세 개를 늘어놓아도 스크린리더 목차가 중복되지 않습니다.
Variant A
메가 푸터 · 구독 밴드 + 4열 + 사업자 정보
1440 / 768 / 390Variant B
컴팩트 3열 · 인라인 구독 한 줄
랜딩·소개 페이지용Variant C
미니멀 바 · 법적 링크 + 언어 선택만
앱·대시보드용Notes
적용할 때 챙길 것
| Variant | 쓰는 자리 | 꼭 확인 |
|---|---|---|
| A | 브랜드 메인, 서비스 소개 전체 | 구독 폼 전송 주소와 수집 동의 문구를 실제 정책에 맞게 교체 |
| B | 단일 랜딩, 캠페인 페이지 | 사업자 정보 한 줄이 법적 표기 요건을 모두 담는지 확인 |
| C | 로그인 후 대시보드, 웹앱 | 언어 선택은 실제 전환이 붙기 전까지 폼 제출로 처리 |