사이트 바닥글 시스템은(는) 무엇을 하나요?
목적
사이트 바닥글 시스템은 웹 사이트의 최하단 앵커를 설계하기 위한 방법론을 제공합니다. 사용자가 필요한 정보를 찾지 못했을 때의 안전망 역할을 하며, SEO에 중요한 링크의 디렉토리, 그리고 필수 법률, 브랜드, 소셜 정보를 위한 컨테이너 역할을 합니다. 잘 설계된 바닥글은 인지 과부하를 유발하지 않으면서 페이지 경험에 마무리를 제공합니다.
유즈케이스
- 다중 페이지 웹사이트의 글로벌 바닥글 설계
- 복잡한 사이트맵을 관리 가능한 내비게이션 클러스터로 구성
- 유틸리티 링크(약관, 개인정보처리방침, 저작권)의 표준화된 배치
- 글로벌 콜투액션(뉴스레터, 연락처)을 페이지 끝에 통합
- 다중 열 링크 목록을 위한 반응형 전략 수립
사용하지 말아야 할 경우
- 단일 페이지 미니 사이트: 단순한 "저작권" 줄만으로 충분한 경우
- 하단 탭이 있는 프로그레시브 웹 앱(PWA): 영구적인 앱 형태의 내비게이션이 기존 바닥글을 대체하는 경우
- 전환 전용 랜딩 페이지: 바닥글이 사용자를 기본 CTA에서 멀어지게 하는 "누출"이나 방해 요소를 제공할 수 있는 경우 (단, 법적 링크가 포함된 최소한의 바닥글은 일반적으로 여전히 필요함)
입력
- 정보 구조(IA): 기본 헤더에 포함되지 않은 모든 링크
- 법률 및 규정 준수 요구 사항: 개인정보처리방침, 서비스 약관 등
- 브랜드 아이덴티티: 로고, 소셜 미디어 프로필, 회사 사명 선언문
- 글로벌 액션: 뉴스레터 가입과 같은 보조 전환 목표
- 기기 중단점: 반응형 열 쌓기를 위한 그리드 시스템 정의
출력
- 바닥글 해부도: 영역(아이덴티티, 링크, 유틸리티, CTA)의 시각적 또는 구조적 정의
- 링크 계층 구조: 분류된 보조 내비게이션 클러스터
- 반응형 청사진: 모바일에서 열이 쌓이거나 축소되는 방식에 대한 규칙
- 접근성 랜드마크: 시맨틱 태그(
<footer>,<nav>) 및 레이블
워크플로
1. 바닥글 콘텐츠 분류
콘텐츠를 논리적 영역으로 나눕니다:
- 아이덴티티 영역: 로고, 설명, 소셜 아이콘
- 내비게이션 영역: 주제별로 그룹화된 링크 클러스터(제품, 회사, 리소스)
- 액션 영역: 뉴스레터 가입 또는 주요 연락처 정보
- 유틸리티 영역: 저작권, 법적 링크, 언어 선택기
2. 구조 패턴 선택
사이트 복잡성에 따라 패턴을 선택합니다:
- 슬림 바닥글: 최소 사이트를 위한 단일 행
- 팻 바닥글(사이트맵): 엔터프라이즈/이커머스를 위한 다중 열 레이아웃
- 액션 중심 바닥글: 링크 목록 전에 큰 CTA에 초점
3. 시각적 계층 설정
바닥글에 visual-hierarchy-system을 적용합니다:
- 링크 클러스터에 굵은 헤더 사용
- 텍스트 크기는 읽을 수 있지만 본문 텍스트보다 약간 작게 유지(예: 14px)
- 바닥글 배경과 링크 색상 사이에 높은 대비 생성
4. 모바일 적응 정의
데스크톱에서 모바일로의 전환을 매핑합니다:
- 쌓기: 다중 열 레이아웃은 단일 열로 쌓여야 함
- 아코디언 패턴: 매우 "두꺼운" 바닥글의 경우 모바일에서 링크 그룹을 아코디언으로 축소하여 페이지 길이를 줄이는 것을 고려
- 터치 대상: 모든 링크가 쉽게 탭될 수 있도록 함. WCAG 2.2 SC 2.5.8(대상 크기 최소) 충족 — 대화형 대상은 최소 24x24px 이상, 인접 링크 간 적절한 간격 확보; 기본 터치 대상에는 44px+ 선호
5. 의미론 및 접근성 계층 추가
- 섹션을
<footer>태그로 감쌈 - 고유한
aria-labels(예: "바닥글 리소스")로 링크 클러스터에<nav>요소 사용 - 대비율이 WCAG AA(4.5:1)를 충족하는지 확인
의사 결정 규칙
- 사이트맵 규칙: 사이트에 15페이지 이상이면 다중 열 "팻 바닥글"을 사용하여 검색성을 높임
- 외부 링크: 소셜 미디어 및 외부 리소스는 새 탭에서 열리도록(
target="_blank") 하여 사용자를 사이트에 머물게 함 - 저작권 배치: 저작권 및 법적 링크는 항상 최하단("서브 바닥글")에 배치
- CTA 우선순위: 바닥글에 뉴스레터 가입이 포함된 경우 바닥글에서 가장 시각적으로 구별되는 요소여야 함
제약 조건
- 접근성: 키보드 Tab 순서로 도달 가능해야 함. 모든 링크에는 고정 헤더나 쿠키 배너에 의해 가려지지 않는 가시적인 포커스 상태가 있어야 함(WCAG 2.2 SC 2.4.11 포커스 가려짐 없음)
- 반응성: 열이 넘치거나 너무 좁아지면 안 됨(min-width)
- 법적 준수: 지역 규정(GDPR, CCPA 등)에서 요구하는 필수 링크를 포함해야 함
일반적인 실패 패턴
- 링크 과부하: 사이트의 모든 페이지를 포함하여 사용자가 무시하는 텍스트 벽을 만듦
- 낮은 대비: 어두운 배경에 밝은 회색 텍스트를 사용하여 접근성 기준을 충족하지 못함
- "데드 엔드": 너무 작거나 누락된 바닥글로 인해 하단까지 스크롤한 사용자가 갈 곳을 잃음
- 비표준 그룹화: 관련 없는 링크 혼합(예: "제품" 아래 "채용")
검증 기준
- 바닥글에 시맨틱
<footer>및<nav>태그 사용 - 링크 클러스터에 명확하고 설명적인 헤더가 있음
- 모바일 보기에서 열이 올바르게 쌓이고 터치 대상 유지
- 모든 바닥글 텍스트의 대비율이 WCAG AA(4.5:1) 충족
- 법적 링크와 저작권이 존재하고 올바르게 배치됨
- 소셜 링크에 접근 가능한 텍스트 레이블이 있는 인식 가능한 아이콘 사용