직접 살펴보는 예제

푸터 링크를 주제·책임·연락 세 경로로 나누기

링크의 이름과 도착 문서의 제목을 한 쌍으로 확인하세요.

아래 내용은 구조를 설명하기 위해 만든 예제입니다. 실제 상품·고객 성과 자료가 아닙니다.

푸터의 책임 경로 예제에서 나눈 판단

아래 예제의 링크는 detailry의 실제 공개 문서로 이어집니다. 주제 탐색, 운영 책임, 연락 경로를 분리했으며 ‘문의’는 문의 페이지, ‘작성 원칙’은 편집 기준 문서로 이동합니다. 정책 내용의 적정성과 실제 회신은 링크 존재와 별도로 확인해야 합니다.

링크를 배치하기 전에 운영자가 실제로 답할 수 있는 책임 항목부터 적습니다

자체 예제에서는 푸터에 들어갈 후보를 다섯 묶음으로 작성합니다. 첫째는 사이트 이름과 운영 범위, 둘째는 일반 문의와 오류 정정, 셋째는 작성 원칙과 수정 기준, 넷째는 개인정보처리방침과 이용약관, 다섯째는 광고·협찬 고지입니다. 각 묶음에는 담당 페이지, 공개 가능한 연락 수단, 최근 확인일을 붙입니다. 페이지가 아직 없다면 링크 제목만 먼저 만들지 않고 ‘준비 중’으로 내부 목록에 남깁니다. 존재하지 않는 고객센터, 응답 시간을 검증하지 않은 ‘24시간 문의’, 실제로 시행하지 않는 검수 절차를 추가하지 않습니다.

책임 묶음푸터에 보일 정보도착 페이지에서 확인할 내용보류 조건
운영 주체사이트명과 운영 범위운영 목적, 다루는 주제, 연락 경로공개할 수 있는 운영 정보가 없음
문의·정정문의, 오류 정정수신 방법, 필요한 정보, 처리 범위양식과 이메일이 모두 작동하지 않음
편집 책임작성 원칙, 수정 기준출처, 광고 표시, 수정 기록 방식실제로 지키지 않는 절차
정책개인정보, 이용약관수집 항목, 사용 목적, 이용 조건현재 기능과 문서 내용이 불일치
광고·협찬광고·제휴 고지표시 위치와 편집 독립성 기준광고 관계를 숨기거나 단정할 수 없음

이 표는 많은 항목을 채우는 점수표가 아닙니다. 예를 들어 댓글, 회원가입, 결제가 없는 사이트라면 관련 정책 문구를 관성적으로 복사하기보다 현재 수집과 기능을 정확히 설명해야 합니다. 연락처도 개인 정보 노출을 늘리는 방향이 아니라 운영자가 실제로 관리하는 대표 이메일이나 문의 양식처럼 지속 가능한 수단을 선택합니다. USWDS가 일반 연락 정보를 이메일과 전화처럼 제한된 수단으로 정리하라고 안내하는 이유도 푸터를 주소록으로 과밀하게 만들지 않기 위해서입니다.참고: U.S. Web Design System · Footer

주제 탐색, 책임 확인, 연락 행동을 서로 다른 길로 나눕니다

푸터 링크를 한 줄에 나열하면 ‘소개’, ‘원칙’, ‘개인정보’, ‘문의’가 모두 같은 성격처럼 보입니다. 자체 재구성 예제에서는 링크를 세 경로로 나눕니다. 주제 탐색 경로에는 상세페이지·웹디자인·마케팅처럼 글을 더 읽기 위한 링크를 둡니다. 책임 확인 경로에는 소개·작성 원칙·광고 고지·개인정보·이용약관을 둡니다. 연락 행동 경로에는 일반 문의·정정·협찬 제안을 둡니다. 그룹 제목은 ‘빠른 링크’처럼 포괄적인 말보다 사용자가 찾는 목적을 드러내는 단어로 씁니다.참고: W3C Web Accessibility Initiative · Navigation Landmark Example

주제·책임·연락 목적에 맞는 문서 도착을 확인하는 푸터 경로 도식
링크 목적과 도착 문서·현재 기능을 함께 점검하는 설명용 생성 도식입니다. 실제 링크 검수·운영 신뢰·경험 개선 또는 정책 적합성 자료가 아닙니다.

W3C의 내비게이션 랜드마크 예시는 페이지에 여러 navigation 영역이 있을 때 서로 다른 링크 집합에는 구분 가능한 레이블을 제공하고, 같은 링크 집합이면 같은 레이블을 사용하라고 설명합니다. 헤더와 푸터에 모두 nav가 있다면 ‘주요 메뉴’와 ‘푸터 메뉴’처럼 위치만 말하는 레이블이 충분한지, 실제 목적을 더 잘 드러내는 ‘주제 탐색’과 ‘정책 및 문의’가 필요한지 링크 집합을 보고 정합니다. 화면에 보이는 그룹 제목과 접근성 이름이 서로 모순되지 않는지도 확인합니다.참고: W3C Web Accessibility Initiative · Navigation Landmark Example

  • 같은 링크가 세 그룹에 반복되어 어느 쪽을 눌러야 할지 흐리지 않는가
  • 그룹 제목만 읽어도 포함된 링크의 목적을 예상할 수 있는가
  • 헤더에 없는 정책 링크를 푸터에서 찾을 수 있는가
  • 모바일에서 접힌 그룹을 펼치지 않아도 운영자와 연락 수단의 존재를 알 수 있는가
  • 외부 채널 링크가 현재도 운영되는 계정으로 연결되는가

모바일 접힘과 키보드 이동은 링크를 숨기는 방식까지 검수합니다

큰 푸터를 모바일에서 아코디언으로 접을 수 있지만, 접힌 상태가 곧 접근 가능한 상태를 뜻하지는 않습니다. USWDS는 모바일에서 아코디언으로 구성한 푸터에도 키보드 탐색과 접근 가능한 아코디언 동작이 필요하다고 안내합니다. 그룹 버튼을 키보드로 펼친 다음 표시된 링크를 Tab으로 탐색하며, 닫아 숨긴 패널의 링크까지 초점을 받게 만드는 뜻은 아닙니다. 실제 검수에서는 320픽셀과 390픽셀에서 각 그룹 버튼의 이름, 펼침 상태, aria-expanded, 연결된 패널 id, 초점 순서를 기록합니다. 접힌 패널의 링크가 보이지 않는데도 키보드 초점을 받거나, 펼친 뒤 초점 표시가 배경에 묻히면 수정 대상으로 남깁니다.참고: U.S. Web Design System · Footer

데스크톱 1440픽셀에서는 열의 시각적 순서와 DOM 순서를 비교합니다. CSS grid의 배치만 바꾸어 화면에서는 정책이 왼쪽인데 읽기 순서에서는 연락이 먼저 나오는 상황이 생기지 않는지 확인합니다. 로고는 사이트 식별을 돕지만 푸터 전체의 제목처럼 H1으로 만들지 않습니다. 장식 아이콘에는 빈 대체텍스트 또는 적절한 숨김 처리를 사용하고, 이메일 주소나 정책 이름처럼 의미가 있는 텍스트를 아이콘만으로 대체하지 않습니다. 이 검사는 특정 디자인을 강제하는 것이 아니라 링크를 볼 수 없는 환경에서도 목적과 순서가 유지되는지 보는 절차입니다.참고: W3C Web Accessibility Initiative · Navigation Landmark Example · W3C Web Accessibility Initiative · Writing for Web Accessibility – Tips for Getting Started

환경조작기록 항목통과 기준
320px터치와 Tab접힘 버튼, 줄바꿈, 가로 넘침모든 그룹과 링크에 접근 가능
390pxTab·Enter·Shift+Tab초점 순서와 펼침 상태시각 순서와 의미 순서가 일치
1440px키보드만 사용열 순서, 초점 표시, 최종 링크건너뛰거나 갇히는 초점 없음
텍스트 200%브라우저 확대겹침, 잘림, 링크 구분정보 손실 없이 재배치
스타일 일부 제거CSS 비활성 점검제목·목록·연락 정보문서 구조만으로 목적 파악 가능

푸터의 오래된 정보는 링크 수보다 먼저 운영 기록에서 드러납니다

푸터는 모든 페이지에 반복되므로 한 번의 오류가 사이트 전체에 복제됩니다. 운영자가 바뀌었는데 이름이 그대로이거나, 사용하지 않는 소셜 계정과 폐기된 문의 주소가 남아 있거나, 정책 문서의 최근 수정일만 바뀌고 실제 기능 설명은 예전 상태인 경우가 대표적입니다. 이를 막기 위해 링크마다 소유자, 확인일, 변경 사유를 기록합니다. 확인일은 자동으로 오늘 날짜를 찍는 값이 아니라 담당자가 링크와 내용을 실제로 대조한 날이어야 합니다. 검수하지 않은 상태를 ‘최신’이라고 표시하지 않습니다.

관리 필드기록 방법변경 신호조치
링크 소유자운영 또는 편집 담당 역할담당 범위 변경새 담당자와 연락 수단 확인
최근 검수일실제 클릭·본문 대조 날짜90일 이상 미확인상태를 미확인으로 표시 후 재검수
기능 의존성문의, 쿠키, 광고, 회원 기능플러그인 또는 정책 변경문서와 화면을 함께 수정
외부 채널계정 URL과 최근 운영 여부계정 폐쇄 또는 방치링크 제거 또는 대체
변경 사유오류 정정, 담당 변경, 정책 개정수정일만 변경실제 변경 내용 기록

정기 검수 간격은 사이트 규모와 변경 빈도에 따라 정합니다. 이 글은 30일이나 90일을 보편적인 정답으로 제시하지 않습니다. 대신 문의 주소 변경, 광고 도구 추가, 개인정보 수집 항목 변경, 운영 주체 변경처럼 즉시 재검수가 필요한 사건을 목록으로 관리합니다. 자동 링크 검사기는 응답 코드와 리디렉션을 찾는 데 유용하지만, 도착 문서가 실제 운영과 맞는지는 사람이 읽어야 합니다. 자동 검사 통과를 정책 내용의 정확성까지 확인한 결과로 확대 해석하지 않습니다.

푸터의 책임 경로을 확인한 순서

  1. 주제·책임·연락에서 링크를 골라 도착 문서의 제목과 이름을 대조합니다.
  2. 소개·원칙·광고·개인정보 문서가 현재 기능과 같은 운영 주체를 설명하는지 읽습니다. 없는 회원·결제 정책을 복사하지 않습니다.
  3. 모바일 그룹을 펼쳐 표시된 링크를 키보드로 탐색합니다. 닫힌 패널은 초점에서 제외하고 실제 수신·회신은 따로 확인합니다.

푸터의 책임 경로 판단에서 제외한 범위

  • 자체 재구성 예제는 실제 고객 사이트, 사용자 반응, 광고 승인 또는 사업 성과를 나타내지 않습니다.
  • USWDS는 미국 연방정부 사이트용 디자인 시스템이므로 해당 구성 예시가 모든 민간 사이트의 정답은 아닙니다.
  • W3C 지침을 참고한 구조 검수만으로 전체 접근성 적합성을 보장할 수 없으며 실제 코드와 보조기술 검사가 추가로 필요합니다.
  • 업종별 사업자 표시, 전자상거래, 개인정보 관련 의무는 관할과 기능에 따라 달라지므로 법률 자문을 대신하지 않습니다.
  • 링크 응답과 문서 일치는 확인할 수 있지만 방문자가 운영자를 실제로 신뢰하는지는 별도 사용자 연구 없이는 판단할 수 없습니다.

푸터의 책임 경로에 사용한 원문

원문별 확인일과 참고 범위를 아래에 표시했습니다. 예제 입력값은 설명을 위한 설정이며 원문 기관의 제품 평가를 뜻하지 않습니다.

  1. Navigation Landmark ExampleW3C Web Accessibility Initiative · 확인 2026-08-20

    여러 navigation 랜드마크의 레이블과 링크 그룹 구분 기준을 참고했습니다.

  2. Writing for Web Accessibility – Tips for Getting StartedW3C Web Accessibility Initiative · 확인 2026-08-20

    의미 있는 링크 텍스트와 내용을 설명하는 제목·소제목 사용 지침을 참고했습니다.

광고·협찬 고지
  • 광고·협찬 없이 작성
  • 예시는 detailry 자체 제작이며 실제 고객·매출 자료가 아닙니다.
  • 정정: 문의 페이지
  • 작성 기준: 작성 원칙
웹디자인 카테고리정정·문의