붙일 곳에, 적당히만

KRDS CP-306 — 관련 요소 주변에 태그를 배치하고, 지나치게 많은 태그를 사용하지 않고 있다.

0. 들어가며 — 태그가 어디에, 몇 개나

이번 426편은 관련 요소 주변에 태그를 배치하고, 지나치게 많은 태그를 사용하지 않게 하라는 규칙입니다.

태그는 — 그것이 분류·설명하는 대상 가까이 있어야 ‘무엇에 대한 태그인지’ 알 수 있죠. 또 태그가 너무 많으면 — 하나하나가 묻혀 ’강조’라는 본래 효과가 사라집니다. CP-306은 태그의 배치(위치)와 개수(절제)를 함께 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 관련 요소 주변 배치 + 과다 사용 금지

CP-306 (컴포넌트 > 태그) “관련 요소 주변에 태그를 배치하고, 지나치게 많은 태그를 사용하지 않고 있다.”

태그를 그것이 설명하는 대상 요소 가까이에 두고, 한 곳에 너무 많은 태그를 사용하지 않게 하라는 뜻입니다.

정리: 태그는 관련 요소 가까이, 그리고 너무 많지 않게. 이게 CP-306입니다.

2. 왜 배치와 개수인가

태그는 — 특정 요소(게시글·콘텐츠·항목)의 분류·속성·상태를 나타냅니다. 그래서 ①어디에 두느냐(배치)와 ②몇 개나 쓰느냐(개수)가 태그의 효과를 좌우하죠.

① 관련 요소 주변 배치. 태그는 — 그것이 설명하는 대상 가까이 있어야 합니다.

연결 인지 태그가 분류 대상(게시글 제목 등) 바로 옆/위/아래에 있으면, 사용자는 ’이 태그가 이 글의 분류구나’를 즉시 압니다. 멀리 떨어져 있으면 무엇에 대한 태그인지 헷갈리죠(근접성의 원리, Gestalt).

잘못된 배치의 문제 태그가 관련 없는 곳(엉뚱한 위치)에 있으면, 사용자가 어느 요소의 태그인지 몰라 혼란스럽습니다. 여러 항목이 나열된 목록에서 태그가 어느 항목에 속하는지 명확해야 하죠.

일관 위치 — 같은 종류의 태그는 — 항목마다 일관된 위치에 둡니다(제목 앞 또는 뒤로 통일). 들쭉날쭉하면 스캔이 어렵죠.

② 지나치게 많은 태그 금지. 한 곳(한 항목·한 영역)에 태그가 너무 많으면 안 됩니다.

강조 효과 소멸 — 태그의 목적은 ’중요한 분류·상태를 강조’입니다. 그런데 — 한 항목에 태그가 5개, 10개씩 붙으면, 각 태그가 묻혀 어느 것도 눈에 안 들어오죠. ’모두 강조하면 아무것도 강조되지 않는다’는 원리입니다.

시각적 혼잡 — 태그가 많으면 — 화면이 알록달록·복잡해져, 정작 봐야 할 콘텐츠(제목·본문)가 태그에 가려집 니다. 태그는 보조 정보인데 주객이 전도되죠.

인지 부하 — 태그가 많으면 — 사용자가 어느 게 중요한지 판단하느라 인지 부하가 커집니다.

그래서 — 한 항목·영역에는 핵심 태그만 절제해서 씁니다. 정말 중요한 분류·상태 1~3개 정도로요. 모든 속성을 태그로 만들 필요는 없죠. 우선순위를 정해 — 사용자가 알아야 할 핵심만 태그로 강조합니다.

색상 과다와도 연결. 태그가 많으면 — 색상도 덩달아 많아져 혼잡해지죠(다음 편 CP-308의 ’지나치게 많은 색상 금지’와 연결). 태그 개수를 절제하면 색상 절제도 자연스럽습니다.

이 규칙은 태그의 ’맥락·절제’를 담당합니다 — 태그를 관련 요소 가까이 둬 연결을 분명히 하고(배치), 개수를 절제해 강조 효과를 살리죠(개수). 레이블의 간결함(304·305)에 더해, 배치·개수로 태그를 효과적으로 쓰는 것입니다.

정리하면 — 태그는 관련 요소에서 멀면 무엇의 태그인지 헷갈리고 너무 많으면 강조 효과가 사라지므로, 분류 대상 가까이에 일관 배치하고 핵심만 절제해서 사용해야 합니다.

3. 점검 / 개선

무엇을 점검하나

근접 배치 — 태그가 분류 대상 요소 가까이에 있는가.

일관 위치 — 같은 종류 태그가 항목마다 일관된 위치인가.

개수 절제 — 한 항목·영역에 태그가 과도하지 않은가(핵심만).

개선 방향

태그를 관련 요소 바로 옆/위에 배치, 위치 일관화.

한 항목 태그를 핵심 1~3개로 절제. 모든 속성을 태그화하지 않음.

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

역할	책임
기획/UX	태그 우선순위·개수 정책
디자이너/개발	태그 배치·일관 위치 구현

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

태그를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 태그가 분류 대상 요소 가까이에 있나요?

□ 같은 종류 태그가 항목마다 일관된 위치인가요?

□ 한 항목·영역에 태그가 과도하지 않나요(핵심만)?

❓ FAQ

Q1. 태그를 몇 개까지 쓰나요? 절대 숫자보다 ’핵심만’이 원칙입니다. 보통 한 항목에 1~3개로 절제하죠. 많으면 강조 효과가 사라집니다. Q2. 왜 가까이 둬야 하나요? 근접성의 원리상, 태그가 분류 대상 옆에 있어야 ’이 글의 태그’임을 즉시 압니다. 멀면 헷갈리죠. Q3. 모든 속성을 태그로 보여주면 안 되나요? 안 됩니다. 다 강조하면 아무것도 강조 안 됩니다. 우선순위 핵심만 태그로 하죠.

6. 마무리

CP-306의 메시지:

붙일 곳에, 적당히만 — 태그를 관련 요소 가까이, 핵심만 절제해서.

태그는 분류 대상에서 멀면 무엇의 태그인지 헷갈리고, 너무 많으면 강조 효과가 사라집니다. 관련 요소 가까이 일관 배치하고, 핵심 1~3개로 절제하는 게 핵심이죠. 다음 편은 대화형/비대화형 태그 구분입니다.

다음 편 예고 ▶ 「427. (CP-307) 대화형 태그와 비대화형 태그를 같은 그룹에 포함하지 않는다.」

ViewCheck는 태그의 배치와 개수 절제를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 태그(Tag) 가이드 — https://www.krds.go.kr/html/site/component/component_29.html

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

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