묶어서 보여주기

KRDS CP-035 — 푸터 섹션의 서비스 로고, 연락처, 유틸리티 링크는 하나의 그룹으로 인지될 수 있도록 표현하고 있다.

0. 들어가며 — 따로 노는 정보를 묶기

이번 155편은 푸터의 서비스 로고·연락처·유틸리티 링크를 하나의 그룹으로 표현하는 규칙입니다.

154편에서 푸터 정보의 순서를 봤습니다. CP-035는 그중 앞부분 세 가지(로고·연락처·유틸리티)를 시각적으로 하나의 묶음으로 인지되게 표현하라고 규정하죠. 흩어진 정보가 아니라 ’관련된 한 그룹’으로 보이게 하는 것 입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 하나의 그룹으로 인지

CP-035 (컴포넌트 > 푸터) “푸터 섹션의 서비스 로고, 연락처, 유틸리티 링크는 하나의 그룹으로 인지될 수 있도록 표현하고 있다.”

푸터 앞부분의 로고·연락처·유틸리티 링크를 시각적으로 한 묶음으로 보이게 표현하라는 뜻입니다.

정리: 서비스 로고·연락처·유틸리티 링크를 하나의 그룹으로 인지되게 표현하라. 이게 CP-035입니다.

2. 왜 그룹으로 묶나

푸터에는 여러 정보가 있는데(154편), 그중 서비스 로고·연락처·유틸리티 링크는 ’이 사이트(기관)에 대한 기본 정보·소통 창구’라는 공통 성격을 가집니다. 반면 뒤쪽의 정책 링크·저작권은 ’법적·권리 정보’로 성격이 다르죠.

성격이 비슷한 정보를 시각적으로 묶으면, 사용자는 그것들이 ’관련된 한 덩어리’임을 직관적으로 인지합니다. 이는 게슈탈트 원리의 그룹화(근접성·유사성) 입니다 — 가까이 모여 있거나 비슷하게 보이는 요소는 한 그룹으로 지각되죠. 로고·연락처·유틸리티를 한 영역에 모아 묶으면, 사용자는 ’여기가 사이트 기본 정보 구역’으로 이해 하고, 그 안에서 원하는 정보를 빠르게 찾습니다.

반대로 이 셋이 푸터 안에서 따로따로 흩어져 있으면 — 로고 따로, 연락처 따로, 유틸리티 따로 떨어져 있으면 — 사용자는 이들이 관련 정보인지 인지하기 어렵고, 푸터 전체가 산만해 보입니다. 묶음이 없으면 정보 구조가 불명확 해지죠.

그룹화 방법은 여러 가지입니다 — 같은 영역(박스)에 모으기, 배경색·구분선으로 영역 표시, 적절한 여백으로 다른 그룹(정책·저작권)과 분리하기 등이죠. 핵심은 ’이 셋이 한 묶음’이라는 시각적 신호를 주는 것입니다. 정책 링크· 저작권과는 여백·구분으로 경계를 두어, 푸터가 ’기본 정보 그룹’과 ’법적 정보 그룹’으로 구조화되게 합니다.

이는 레이아웃 편의 ‘관련 정보는 가깝게, 무관한 정보는 멀게’(근접성 원리)가 푸터에 적용된 것입니다. 단순히 순서대로 나열(154편)하는 데서 나아가, 의미 단위로 묶어 구조를 명확히 하는 것이죠.

3. 점검 / 개선

무엇을 점검하나

그룹 인지 — 로고·연락처·유틸리티가 한 묶음으로 보이는가.

시각적 묶음 — 영역·배경·여백으로 그룹이 표현됐는가.

다른 그룹과 분리 — 정책·저작권 그룹과 경계가 있는가.

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

역할	책임
디자이너	푸터 정보의 그룹화(영역·여백·구분) 설계
퍼블리셔/개발	그룹 구조 마크업·스타일 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 로고·연락처·유틸리티가 한 묶음으로 보이나요?

□ 영역·배경·여백으로 그룹이 표현됐나요?

□ 정책·저작권 그룹과 시각적 경계가 있나요?

❓ FAQ

Q1. 어떻게 그룹으로 묶나요? 같은 영역에 모으거나, 배경·구분선·여백으로 묶음을 표현합니다. 게슈탈트 근접성· 유사성을 활용합니다. Q2. 순서(CP-034)만 맞으면 되는 거 아닌가요? 순서에 더해, 의미가 비슷한 정보를 시각적으로 묶어 구조를 명확히 하는 것이 CP-035입니다. Q3. KRDS를 채택하면 자동인가요? 표준 푸터는 정보를 의미 그룹으로 구조화해 제공합니다.

6. 마무리

CP-035의 메시지:

묶어서 보여주기 — 비슷한 정보는 한 그룹으로, 게슈탈트 원리로 구조를 명확히.

로고·연락처·유틸리티는 ’사이트 기본 정보’라는 공통 성격이라, 시각적으로 한 그룹으로 묶어 인지되게 합니다. 게슈탈트 그룹화(근접성·유사성)로 구조를 명확히 하고, 정책·저작권 그룹과는 경계를 두죠. 순서를 넘어 의미 단위로 구조화하는 것입니다.

다음 편은 개인정보처리방침 공개를 다룹니다. CP-036 — “개인정보처리방침을 웹사이트에 공개하고, 변경되면 반영한다.”

다음 편 예고 ▶ 「156. (CP-036) 개인정보처리의 투명성 등을 알리기 위한 개인정보처리방침을 웹사이트에 공개하고 있고, 변경되면 그 사항을 반영하고 있다.」

ViewCheck는 푸터의 로고·연락처·유틸리티가 하나의 그룹으로 표현되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 푸터(Footer) 가이드 — https://www.krds.go.kr/html/site/component/component_04.html

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

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