화살표가 방향을 말하게

KRDS CP-195 — 아코디언의 확장 상태를 나타내는 아이콘은 패널이 펼쳐지거나 접히는 방향을 정확하게 반영하여 제공하고 있다.

0. 들어가며 — 펼쳤는데 화살표가 그대로면

이번 315편은 아코디언 확장 상태 아이콘이 패널의 펼침/접힘 방향을 정확히 반영하게 하라는 규칙입니다.

아코디언 헤더의 ▶/▼ 같은 화살표 아이콘은 — 방향으로 ’펼칠 수 있다/펼쳐져 있다’를 표현하죠. 접혔을 때 ▶(또는 ∨), 펼쳤을 때 ▼(또는 ∧)처럼 방향이 상태에 맞게 바뀌어야 합니다. 그런데 펼쳤는데 아이콘이 안 바뀌거나 방향이 거꾸로면 — 사용자가 상태를 오해하죠. CP-195는 아이콘 방향과 실제 상태의 일치를 규정합니다. CP-194의 짝이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 아이콘이 펼침/접힘 방향 정확 반영

CP-195 (컴포넌트 > 아코디언) “아코디언의 확장 상태를 나타내는 아이콘은 패널이 펼쳐지거나 접히는 방향을 정확하게 반영하여 제공하고 있다.”

상태 아이콘이 패널의 펼침/접힘에 맞춰 방향을 정확히 바꿔(접힘=닫힘 방향, 펼침=열림 방향), 현재 상태와 일치하게 표현하라는 뜻입니다.

정리: 아이콘 방향이 실제 펼침/접힘 상태를 정확히 반영하게 하라. 이게 CP-195입니다.

2. 왜 아이콘이 방향을 정확히 반영해야 하나

아코디언 상태 아이콘은 대개 방향성 있는 기호입니다 — 화살표(▶/▼, ∨/∧), 또는 +/−(닫힘/열림). 이 아이콘의 핵심 기능은 ’방향(또는 형태)으로 펼침 상태를 표현’하는 것이죠. 이 표현이 실제 상태와 일치해야 사용자가 혼동 없이 읽습니다.

방향의 관습적 의미. 화살표 아이콘에는 학습된 의미가 있습니다:

접힌 상태 — 보통 ▶(오른쪽 화살표) 또는 ∨(아래 향함, ‘여기 더 있다 펼치기’)로, ’닫혀 있고 누르면 펼쳐 진다’를 암시.

펼친 상태 — ▼(아래 화살표) 또는 ∧(위 향함, ‘접기’)로, ’열려 있고 누르면 접힌다’를 표현.

사용자는 이 방향을 보고 직관적으로 상태를 압니다 — ▶를 보면 ‘접혀 있구나, 누르면 펼쳐지겠네’, ▼를 보면 ’펼쳐 졌구나’를요. 보통 펼치면 아이콘이 90도 회전(▶→▼)하거나 형태가 바뀌어(+→−), 시각적으로 상태 변화를 보여 주죠.

방향이 안 맞으면 — 혼란. 문제가 되는 경우:

상태가 바뀌어도 아이콘이 그대로 — 패널을 펼쳤는데 화살표가 여전히 ▶(접힘)이면, 사용자는 ‘안 펼쳐졌나?’ 헷갈리죠. 패널은 열렸는데 아이콘은 닫힘을 가리키는 모순입니다.

방향이 거꾸로 — 접혔을 때 ▼, 펼쳤을 때 ▶처럼 관습과 반대면, 사용자가 상태를 정반대로 읽습니다.

방향이 모호 — 회전·변화가 너무 미세해 펼침/접힘을 구별 못 하면, 아이콘이 상태 신호 역할을 못 하죠.

그래서 CP-195는 — 아이콘이 패널의 실제 펼침/접힘 상태를 정확히, 그리고 관습에 맞게 반영하라고 합니다. 패널을 펼치면 아이콘도 즉시 펼침 방향으로 바뀌고, 접으면 접힘 방향으로 돌아가야 하죠. 상태 변화와 아이콘 변화가 동기화돼야 합니다.

일관 위치 + 정확 방향 = 명확한 상태. CP-194(아이콘 일관 위치)와 CP-195(방향 정확 반영)가 합쳐지면 — 사용자는 늘 같은 위치의 아이콘을 보고, 그 방향으로 펼침/접힘을 정확히 읽습니다. 위치가 일관되고 방향이 정확 해야 아이콘이 제 역할을 하죠.

접근성 — 시각 + ARIA. 이 아이콘 방향은 시각 신호입니다. 스크린 리더 사용자에게는 화살표 방향이 안 보이므로, 같은 상태 정보를 aria-expanded로 전달해야 하죠(CP-200, 디스클로저 CP-175와 같은 메커니즘). 즉 시각 사용자에겐 아이콘 방향(CP-194·195), 비시각 사용자에겐 aria-expanded(CP-200)가 같은 펼침 상태를 전합 니다. 그리고 장식 아이콘 자체는 aria-hidden으로 처리해 스크린 리더가 중복으로 읽지 않게 하죠(배지 CP-159 정신).

정리하면 — 아코디언 상태 아이콘은 방향(형태)으로 펼침 상태를 표현하므로, 패널의 실제 펼침/접힘을 관습에 맞게 정확히 반영하고 상태 변화에 동기화해, 사용자가 아이콘만으로 상태를 정확히 읽게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

방향 일치 — 접힘/펼침에 따라 아이콘 방향(형태)이 정확히 바뀌는가.

관습 부합 — 접힘=닫힘 방향, 펼침=열림 방향으로 관습에 맞는가.

동기화 — 패널 상태 변화에 아이콘이 즉시 따라 바뀌는가.

개선 방향

펼침/접힘 시 아이콘 회전(▶→▼) 또는 형태 변화(+→−)를 상태에 동기화.

관습에 맞는 방향 사용. 장식 아이콘 aria-hidden, 상태는 aria-expanded(CP-200).

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

역할	책임
디자이너	펼침/접힘 아이콘 방향·변화 정의
퍼블리셔/개발	상태-아이콘 동기화 구현

기관 유형	CP-195 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (아코디언 사용 시)

아코디언을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 접힘/펼침에 따라 아이콘 방향(형태)이 정확히 바뀌나요?

□ 접힘=닫힘 방향, 펼침=열림 방향으로 관습에 맞나요?

□ 패널 상태 변화에 아이콘이 즉시 따라 바뀌나요?

❓ FAQ

Q1. 펼쳤는데 화살표가 그대로면 안 되나요? 패널은 열렸는데 아이콘은 닫힘을 가리키는 모순이라 혼란스럽습니다. 상태에 맞게 바뀌어야 합니다. Q2. +/− 도 방향인가요? +(닫힘, 펼치기)/−(열림, 접기)는 형태로 상태를 표현합니다. 화살표 회전과 같은 역할이죠. Q3. 스크린 리더에도 방향이 전달되나요? 화살표 방향은 시각 신호라 안 보입니다. aria-expanded(CP-200)로 상태를 전달합니다.

6. 마무리

CP-195의 메시지:

화살표가 방향을 말하게 — 아이콘이 펼침/접힘 방향을 정확히 반영하게 하라.

상태 아이콘은 방향(형태)으로 펼침 상태를 표현합니다. 펼치면 펼침 방향, 접으면 접힘 방향으로 관습에 맞게 정확히 바뀌고 상태 변화에 동기화돼야 사용자가 혼동 없이 읽죠. CP-194(위치)와 함께 펼침 상태를 명확히 전합니다. 다음 편은 헤더 전체를 클릭 가능하게 하는 규칙입니다.

다음 편 예고 ▶ 「316. (CP-196) 헤더 전체를 클릭 가능하도록 제공하고 있다.」

ViewCheck는 아코디언 아이콘이 펼침/접힘 방향을 정확히 반영하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 아코디언(Accordion) 가이드 — https://www.krds.go.kr/html/site/component/component_18.html

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

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