식별자 section마지막구획

KRDS CP-013 — 식별자 영역은

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

KRDS 체크리스트 항목 CP-013 · 컴포넌트 > 운영기관 식별자(Identifier) 〈846 규칙 완전 분해 시리즈 (133)〉 — “푸터의 가장 마지막 구획”: 식별자의 시맨틱 구조

0. 들어가며 — 구조를 더 정밀하게

이번 133편은 식별자를 <section>이나 <article>로 제공하고, 푸터의 가장 마지막 구획으로 넣는 규칙 입니다.

132편(푸터 내부 포함)이 ’식별자는 footer 안에’였다면, CP-013은 그 안에서 어떤 요소로, 어느 위치에 넣을지를 정밀하게 규정합니다 — 시맨틱 요소(<section>/<article>)로 감싸고, 푸터의 맨 마지막 구획으로. 이번 편을 풀어냅니다.

1. 규칙 원문 — section/article, 마지막 구획

CP-013 (컴포넌트 > 운영기관 식별자) “식별자 영역은 <section>이나 <article>로 제공하고 푸터 내부의 가장 마지막 구획으로 포함시키고 있다.”

식별자를 의미 있는 시맨틱 요소(<section>/<article>)로 감싸고, 푸터 안에서 맨 마지막 구획에 배치하라는 뜻입니다.

정리: 식별자는 <section>/<article>로 제공하고 푸터의 가장 마지막 구획으로 포함하라. 이게 CP-013입니다.

2. 두 가지 요구 — 시맨틱 요소와 마지막 위치

① <section>/<article>로 제공

식별자를 단순한 <div>가 아니라 <section>이나 <article> 같은 시맨틱 요소로 감싸라는 것입니다. <div>는 ‘의미 없는 묶음’이지만, <section>은 ’주제를 가진 독립 구역’, <article>은 ’독립적으로 완결된 콘텐츠’를 의미하죠. 식별자는 ’운영 기관 정보’라는 독립된 주제를 가진 구역이므로, 시맨틱 요소로 표시해야 스크린리더가 “여기는 별도의 정보 구역”으로 인식하고 사용자에게 적절히 안내합니다. 시맨틱 마크업의 원리(132편)가 더 구체화 된 것이죠. 보통 제목과 함께 쓰면 <section>이 적합합니다.

② 푸터 내부의 가장 마지막 구획

푸터 안에는 여러 정보가 있습니다 — 관련 링크, 연락처, 약관·정책 링크, SNS 등. 식별자는 그중에서도 맨 마지막 구획에 와야 합니다. 운영 기관 식별 정보는 페이지 전체의 ‘마무리 도장’ 같은 성격이라, 모든 정보를 다 보고 난 뒤 마지막에 ’이 사이트는 ○○가 운영합니다’로 끝맺는 위치가 자연스럽기 때문이죠. 또한 표준 위치를 ’푸터 맨 마지막’으로 통일하면, 사용자가 어느 정부 사이트에서든 같은 위치에서 운영 주체를 찾을 수 있습니다 (CP-002·010의 일관성과 연결).

이 두 요구를 합치면 — 식별자는 <footer> 안의, <section>/<article>로 감싼, 가장 마지막 구획이 됩니다. 구조와 위치가 모두 표준화되어, 사람·기계 모두 일관되게 식별자를 찾고 해석할 수 있죠.

3. 점검 / 개선

무엇을 점검하나

시맨틱 요소 — 식별자가 <section>/<article>로 감싸였는가(<div> 아님).

마지막 구획 — 푸터 내부에서 가장 마지막에 있는가.

footer 내부 — CP-012 충족(푸터 내부 포함) 전제.

Before / After

<!-- ✅ footer 마지막 구획에 section으로 식별자 --> <footer> <nav class="footer-links">...</nav> <div class="footer-contact">...</div> <section class="krds-identifier" aria-label="운영기관 정보"> <!-- 마지막 구획 --> 이 누리집은 ○○가 운영합니다. <img src="logo.svg" alt="○○ 로고"> </section> </footer>

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

역할	책임
퍼블리셔/개발	식별자를 section/article로, 푸터 마지막 구획에 마크업
접근성 담당	시맨틱 구조·위치 검수

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 식별자가 <section>/<article>로 감싸였나요(div 아님)?

□ 푸터 내부 가장 마지막 구획에 있나요?

□ footer 내부에 포함됐나요(CP-012)?

❓ FAQ

Q1. section과 article 중 뭘 쓰나요? 제목이 있는 주제 구역이면 <section>, 독립 완결 콘텐츠면 <article> 입니다. 식별자는 보통 <section>이 적합합니다. Q2. 왜 마지막 구획인가요? 운영 주체 정보는 페이지의 마무리 성격이고, 모든 정부 사이트가 같은 위치(푸터 끝)에 두면 사용자가 일관되게 찾을 수 있습니다. Q3. KRDS를 채택하면 자동인가요? 표준 푸터·식별자 컴포넌트가 시맨틱 구조·마지막 위치로 제공됩니다.

6. 마무리

CP-013의 메시지:

푸터의 가장 마지막 구획 — 시맨틱 요소로 감싸고, 마무리 도장처럼 페이지를 끝맺는다.

식별자는 <section>/<article> 같은 시맨틱 요소로 감싸 ’독립 정보 구역’임을 표시하고, 푸터의 맨 마지막 구획에 배치해 일관된 위치에서 운영 주체를 찾게 합니다. 구조와 위치 모두 표준화하는 것이 CP-013이죠.

다음 편은 로고 이미지의 대체 텍스트를 다룹니다. 식별자 그룹의 마지막입니다. CP-014 — “로고 이미지에 대체 텍스트를 제공한다.”

다음 편 예고 ▶ 「134. (CP-014) 로고 이미지에 대체 텍스트를 제공하고 있다.」 — 운영기관 식별자 그룹 마지막

ViewCheck는 식별자가 시맨틱 요소로, 푸터 마지막 구획에 제공되는지를 진단합니다.

📚 참고 출처

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

HTML Living Standard — <section>, <article> elements

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

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