식별자의 집은 푸터

KRDS CP-012 — 식별자 영역은 구조적으로 푸터 내부에 포함되도록 제공하고 있다.

0. 들어가며 — 보이는 위치가 아니라 ‘구조적’ 위치

이번 132편은 식별자 영역을 구조적으로 푸터 내부에 포함시키는 규칙입니다.

127편(절제)에서 식별자는 보통 푸터에 위치한다고 했습니다. CP-012는 한발 더 나아가 ‘시각적으로 푸터 근처에 보이기만’ 하는 게 아니라, HTML 구조상으로도 푸터(<footer>) 내부에 들어가야 한다고 규정합니다. 보이는 위치와 코드 구조가 일치해야 한다는 것이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 구조적으로 푸터 내부

CP-012 (컴포넌트 > 운영기관 식별자) “식별자 영역은 구조적으로 푸터 내부에 포함되도록 제공하고 있다.”

식별자를 HTML 구조상 푸터(<footer>) 요소 내부에 넣으라는 뜻입니다.

정리: 식별자 영역은 구조적으로 푸터 내부에 포함되게 제공하라. 이게 CP-012입니다.

2. 왜 ‘구조적으로’ 푸터인가

웹페이지에는 ’보이는 모습’과 ’HTML 구조’라는 두 층위가 있습니다. CSS로 위치를 조정하면, 코드 구조와 무관하게 화면 아무 데나 요소를 배치할 수 있죠. 그래서 식별자를 화면상 맨 아래에 보이게 하면서도, HTML 구조상으로는 엉뚱한 곳(예: <header> 안이나 독립된 <div>)에 둘 수 있습니다.

문제는 이렇게 하면 스크린리더·검색엔진·접근성 도구가 식별자를 제대로 해석하지 못한다는 것입니다. 이들은 ’보이는 위치’가 아니라 ’HTML 구조(시맨틱)’를 기준으로 페이지를 이해하니까요. 식별자가 <footer> 안에 있어야 스크린리더가 “이건 페이지 하단의 운영 기관 정보구나”로 인식하고, 사용자에게 적절히 안내할 수 있습니다.

식별자의 의미는 ’페이지 하단의 운영 주체 정보’입니다. 이 의미는 <footer>(바닥글) 요소의 의미와 정확히 맞아떨어지죠. <footer>는 ’문서나 구역의 바닥글 — 작성자·저작권·관련 문서 정보’를 담는 시맨틱 요소이고, 운영 기관 식별 정보는 바로 그런 성격입니다. 그래서 식별자는 <footer> 내부에 구조적으로 포함돼야 의미와 구조가 일치합니다.

이는 시맨틱 마크업(레이아웃 편에서 다룬 의미 있는 HTML)의 원리입니다 ’보이는 것’과 ’구조’를 일치시켜, 사람·기계 모두가 페이지를 올바로 이해하게 하는 것이죠. CSS로 위치만 맞추는 ’눈속임’이 아니라, HTML 구조부터 제대로 넣어야 합니다. 다음 편(CP-013)에서 이 구조를 더 구체적으로 <section>/<article>로, 푸터의 가장 마지막 구획으로 규정합니다.

3. 점검 / 개선

무엇을 점검하나

footer 내부 — 식별자가 <footer> 요소 내부에 있는가.

구조 일치 — 보이는 위치(하단)와 HTML 구조가 일치하는가.

CSS 눈속임 없음 — CSS로만 위치를 맞추고 구조는 엉뚱한 곳에 두지 않았는가.

Before / After

<!-- ✅ 식별자가 footer 내부에 구조적으로 포함 --> <footer> <div class="footer-links">...</div> <section class="krds-identifier"> 이 누리집은 ○○가 운영합니다. <img alt="○○ 로고"> </section> </footer>

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	식별자를 <footer> 내부에 시맨틱하게 마크업
접근성 담당	구조-시각 일치 검수

기관 유형	CP-012 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 식별자가 <footer> 요소 내부에 있나요?

□ 보이는 위치와 HTML 구조가 일치하나요?

□ CSS로만 위치를 맞추지 않았나요?

❓ FAQ

Q1. 화면 맨 아래 보이면 되는 거 아닌가요? 아닙니다. ‘구조적으로’ 푸터 내부여야 합니다. 스크린리더·검색 엔진은 보이는 위치가 아니라 HTML 구조를 봅니다. Q2. div로 감싸도 되나요? 시맨틱하게는 <footer> 내부의 <section>/<article> 권장입니다(CP-013). 의미 있는 요소를 써야 합니다. Q3. KRDS를 채택하면 자동인가요? 표준 푸터·식별자 컴포넌트는 시맨틱 구조로 제공됩니다.

6. 마무리

CP-012의 메시지:

식별자의 집은 푸터 — 보이는 위치가 아니라 HTML 구조부터 푸터 내부여야 한다.

식별자는 ’페이지 하단 운영 주체 정보’라는 의미를 가지므로, <footer> 요소 내부에 구조적으로 포함돼야 스크린리더·검색엔진이 올바로 해석합니다. CSS 눈속임이 아니라 시맨틱 구조로 — 보이는 것과 구조의 일치가 핵심이죠.

다음 편은 식별자의 더 구체적인 구조를 다룹니다. CP-013 — “식별자 영역은 <section>/<article>로 제공하고 푸터의 가장 마지막 구획으로 포함시킨다.”

**다음 편 예고 ▶ 「133. (CP-013) 식별자 영역은

이나

로 제공하고 푸터 내부의 가장 마지막 구획으로 포함시키고 있다.」**

ViewCheck는 식별자가 구조적으로 푸터 내부에 포함됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 운영기관 식별자(Identifier) 가이드 — https://www.krds.go.kr/html/site/component/component_02.html

HTML Living Standard — <footer> element

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준