누르는 태그와 보는 태그를 섞지 마라

KRDS CP-307 — 대화형 태그와 비대화형 태그를 같은 그룹에 포함하지 않는다.

0. 들어가며 — 눌러지는 태그와 안 눌러지는 태그

이번 427편은 대화형 태그와 비대화형 태그를 같은 그룹에 포함하지 않게 하라는 규칙입니다.

태그에는 두 종류가 있습니다 — ①누르면 동작하는 대화형 태그(필터·선택·삭제)와 ②그냥 정보를 보여주는 비대화형 태그(분류·상태 표시). 이 둘이 — 같은 그룹에 섞여 있으면, 사용자는 ‘어느 태그가 눌러지는지’ 헷갈리죠. 누를 수 있는 줄 알고 눌렀는데 반응이 없거나, 정보인 줄 알았는데 눌러지거나. CP-307은 둘을 분리하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 대화형/비대화형 분리

CP-307 (컴포넌트 > 태그) “대화형 태그와 비대화형 태그를 같은 그룹에 포함하지 않는다.”

누르면 동작하는 대화형 태그와, 정보만 표시하는 비대화형 태그를 같은 그룹에 섞지 말고 분리하라는 뜻입니다.

정리: 대화형 태그와 비대화형 태그를 같은 그룹에 섞지 마라. 이게 CP-307입니다.

2. 왜 둘을 분리하나

태그는 — 용도에 따라 두 종류로 나뉩니다:

비대화형 태그(non-interactive) — 그냥 정보만 표시합니다. 게시글의 ‘공지’, 콘텐츠의 ‘복지’ 분류, 상태 ‘진행중’ 등. 누를 수 없고(클릭해도 아무 일 없음), 읽는 용도죠.

대화형 태그(interactive) — 누르면 동작이 일어납니다. 필터 태그(누르면 그 분류로 필터링), 선택 칩(누르면 선택/해제), 삭제 가능 태그(X를 누르면 제거) 등. 버튼·링크처럼 행동을 유발하죠.

이 둘이 — 같은 그룹에 섞여 있으면 문제가 생깁니다:

조작 가능성 혼란 사용자는 같은 모양의 태그들이 나란히 있으면, 다 같은 종류(다 눌러지거나 다 안 눌러지거나)로 기대합니다. 그런데 일부는 눌러지고 일부는 안 눌러지면 어느 게 눌러지는지 몰라 혼란스럽죠. 정보 태그를 눌러보고 반응이 없어 ‘고장났나?’ 하거나, 필터 태그를 정보로 착각해 안 눌러보고 놓칩니다.

시각적 구분 부재 대화형 태그는 마우스 호버 시 커서가 손가락(pointer)으로 바뀌고, 호버·포커스 스타일이 있죠(누를 수 있다는 신호). 비대화형은 그런 신호가 없습니다(기본 커서). 둘이 섞이면 이 신호의 일관성이 깨지죠.

접근성 혼란 스크린 리더·키보드 사용자에게도 대화형 태그는 버튼/링크로 인식돼 Tab으로 도달·실행되고, 비대화형은 단순 텍스트로 읽힙니다. 섞이면 어느 게 조작 가능한지 보조기술 사용자가 파악하기 어렵죠.

그래서 CP-307은 — 둘을 별도 그룹으로 분리하라고 합니다:

그룹 분리 — 필터용 대화형 태그들은 한 그룹(예: 검색 필터 영역), 분류 표시용 비대화형 태그들은 다른 그룹 (예: 게시글 옆 분류)에 둡니다. 한 영역 안에서 — 모든 태그가 같은 종류이게요.

시각 구분 부득이 한 화면에 둘 다 있으면 대화형은 호버·포커스 스타일과 pointer 커서로, 비대화형은 그게 없게 시각적으로 구별합니다. 다만 같은 ’그룹’으로 묶지는 않죠.

올바른 마크업 — 대화형 태그는 <button>/<a>로(키보드·스크린 리더 조작 가능, CP-309·310), 비대화형은 <span> 등 비상호작용 요소로. 의미에 맞는 요소를 씁니다.

대화형 태그의 후속 규칙. 대화형 태그는 — 초점 표시(CP-309), 접근가능한 이름·상태(CP-310)가 추가로 필요하죠. 비대화형 태그는 — 정보 전달이라 그런 조작 규칙이 없고요. 즉 CP-307에서 둘을 가른 뒤, 대화형 태그에 별도의 접근성 규칙이 적용됩니다.

이 규칙은 태그의 ’조작 명료성’을 담당합니다 — 누르는 태그와 보는 태그를 분리해, 사용자가 ’무엇이 눌러지는지’를 명확히 알게 하죠. 조작 가능 여부의 혼란을 없애는 것입니다.

정리하면 — 대화형 태그와 비대화형 태그가 섞이면 사용자가 무엇이 눌러지는지 혼란스러우므로, 둘을 별도 그룹으로 분리하고 시각·마크업으로 구별해야 합니다.

3. 점검 / 개선

무엇을 점검하나

그룹 분리 — 대화형 태그와 비대화형 태그가 별도 그룹으로 분리됐는가.

시각 구분 — 대화형은 호버·포커스·pointer 커서, 비대화형은 없음으로 구별되는가.

마크업 — 대화형은 <button>/<a>, 비대화형은 <span> 등 의미에 맞는가.

개선 방향

필터용 대화형 태그와 표시용 비대화형 태그를 별도 영역에 배치.

대화형은 호버·포커스 스타일 + 적절한 마크업, 비대화형은 정보 요소로.

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

역할	책임
기획/UX	대화형/비대화형 태그 구분·그룹 설계
퍼블리셔/개발	시각 구분·마크업 분리 구현

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

필터 태그와 분류 태그를 함께 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 대화형 태그와 비대화형 태그가 별도 그룹으로 분리됐나요?

□ 대화형은 호버·포커스·pointer 커서, 비대화형은 없음으로 구별되나요?

□ 대화형은 <button>/<a>, 비대화형은 <span> 등인가요?

❓ FAQ

Q1. 대화형/비대화형 태그가 뭔가요? 대화형은 누르면 동작(필터·선택·삭제), 비대화형은 정보만 표시(분류·상태) 입니다. Q2. 왜 섞으면 안 되나요? 같은 모양인데 일부만 눌러지면 사용자가 어느 게 조작 가능한지 몰라 혼란스럽습니다. 정보 태그를 눌러보거나 필터 태그를 놓치죠. Q3. 한 화면에 둘 다 필요하면? 별도 영역으로 묶고, 시각(호버·커서)·마크업으로 구별합니다. 같은 그룹으로만 묶지 않으면 되죠.

6. 마무리

CP-307의 메시지:

누르는 태그와 보는 태그를 섞지 마라 — 대화형/비대화형 태그를 별도 그룹으로.

대화형 태그(필터·선택)와 비대화형 태그(분류·상태)가 섞이면 사용자가 무엇이 눌러지는지 혼란스럽습니다. 둘을 별도 그룹으로 분리하고 시각·마크업으로 구별하는 게 핵심이죠. 다음 편은 태그 색상 절제입니다.

다음 편 예고 ▶ 「428. (CP-308) 태그의 표현에 지나치게 많은 색상을 사용하지 않고 있다.」

ViewCheck는 대화형·비대화형 태그가 분리됐는지를 진단합니다.

📚 참고 출처

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

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

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