펼침 아이콘은 늘 같은 자리에

KRDS CP-194 — 아코디언의 확장 상태를 나타내는 아이콘은 항상 일관된 위치에 제공하고 있다.

0. 들어가며 — 화살표가 헤더마다 다른 곳에 있으면

이번 314편은 아코디언의 확장 상태 아이콘을 항상 일관된 위치에 제공하라는 규칙입니다.

아코디언 헤더에는 펼침/접힘 상태를 나타내는 아이콘(▶/▼, +/− 등)이 있습니다. 그런데 이 아이콘이 어떤 헤더는 왼쪽, 어떤 헤더는 오른쪽처럼 제각각이면 — 사용자는 펼침 표시를 찾느라 헤매죠. CP-194는 아이콘 위치를 모든 헤더에서 일관되게 고정하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 아이콘 일관 위치

CP-194 (컴포넌트 > 아코디언) “아코디언의 확장 상태를 나타내는 아이콘은 항상 일관된 위치에 제공하고 있다.”

아코디언 헤더의 펼침/접힘 상태 아이콘을 모든 헤더에서 동일한 위치(왼쪽 또는 오른쪽 끝 등)에 일관되게 배치 하라는 뜻입니다.

정리: 확장 상태 아이콘을 모든 헤더에서 같은 위치에 두라. 이게 CP-194입니다.

2. 왜 아이콘 위치가 일관돼야 하나

아코디언 헤더의 상태 아이콘(▶/▼, +/−, ∨ 등)은 — ’이 헤더는 펼칠 수 있고, 지금 펼쳤는지/접혔는지’를 알리는 시각 신호입니다. 사용자가 이 신호를 빠르게 활용하려면, 아이콘이 예측 가능한 위치에 있어야 하죠.

① 찾지 않아도 된다. 사용자가 아코디언을 훑을 때, 각 헤더의 펼침 아이콘을 보고 ‘여긴 펼칠 수 있구나’, ’이건 지금 펼쳐져 있구나’를 파악합니다. 아이콘 위치가 모든 헤더에서 같으면 — 사용자의 시선이 그 위치를 자동 으로 훑어 상태를 빠르게 읽죠. 그런데 아이콘이 헤더마다 다른 위치(어떤 건 제목 앞, 어떤 건 제목 뒤, 어떤 건 오른쪽 끝)에 있으면 — 매번 아이콘을 찾아 시선을 헤매야 합니다. 일관된 위치가 ’예측 가능한 내비게이션’을 만들죠 (탭 바 아이콘, 페이지네이션 순서 CP-132 등에서 본 일관성 원리).

② 시각적 정돈. 아이콘이 모든 헤더에서 같은 위치(예: 오른쪽 끝)에 정렬되면 — 아코디언 전체가 가지런해 보입니다. 아이콘들이 세로로 한 줄에 정렬되어 깔끔하죠. 위치가 제각각이면 어수선하고, 어느 게 펼침 아이콘인지 구별도 어렵습니다.

③ 스캔 효율. 사용자는 여러 헤더를 빠르게 훑으며 ‘어느 게 펼쳐져 있나(▼)’, ’어느 게 접혀 있나(▶)’를 한눈에 봅니다. 아이콘이 같은 위치에 정렬돼 있으면 — 그 열만 따라 시선을 내리며 펼침/접힘 상태를 스캔하죠. 위치가 흩어져 있으면 이 스캔이 불가능합니다.

일반적 위치 관습. 아코디언 상태 아이콘은 보통 두 위치 중 하나입니다:

헤더 오른쪽 끝 — 가장 흔합니다. 제목은 왼쪽, 펼침 아이콘은 오른쪽 끝에 정렬. 제목 길이가 달라도 아이콘이 오른쪽 끝에 고정돼 정렬이 유지되죠.

제목 왼쪽(앞) — 제목 바로 앞에 아이콘. 트리(폴더 구조) 느낌을 줍니다.

어느 쪽을 택하든 — 모든 헤더에서 동일해야 합니다. 그리고 그 위치는 헤더 전체가 클릭 가능한 영역(CP-196) 안에 있어, 아이콘이든 제목이든 헤더 어디를 눌러도 펼쳐지죠.

이 규칙은 다음 편 CP-195(아이콘이 방향을 정확히 반영)와 짝을 이룹니다 — CP-194가 ‘아이콘이 늘 같은 위치에’, CP-195가 ’아이콘이 펼침/접힘 방향을 정확히 표현’으로, 함께 펼침 상태를 시각적으로 명확히 전하죠. 위치가 일관 되고(194) 방향이 정확하면(195), 사용자는 아이콘만으로 상태를 즉시 읽습니다. 그리고 이 시각 상태는 스크린 리더에도 전달돼야(CP-200 aria-expanded) 완전하죠.

정리하면 — 아코디언 상태 아이콘은 모든 헤더에서 일관된 위치에 두어, 사용자가 찾지 않고도 펼침 상태를 빠르게 스캔·파악하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

위치 일관성 — 모든 헤더에서 상태 아이콘이 같은 위치(오른쪽 끝 등)에 있는가.

정렬 — 아이콘들이 세로로 가지런히 정렬되는가.

스캔 가능 — 아이콘 열을 따라 펼침/접힘 상태를 한눈에 스캔할 수 있는가.

개선 방향

상태 아이콘을 모든 헤더 동일 위치(주로 오른쪽 끝)로 고정.

제목 길이와 무관하게 아이콘 정렬 유지(오른쪽 끝 정렬 등).

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

역할	책임
디자이너	상태 아이콘 일관 위치 정의
퍼블리셔/개발	모든 헤더 동일 위치·정렬 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모든 헤더에서 상태 아이콘이 같은 위치(오른쪽 끝 등)에 있나요?

□ 아이콘들이 세로로 가지런히 정렬되나요?

□ 아이콘 열을 따라 펼침/접힘 상태를 한눈에 스캔할 수 있나요?

❓ FAQ

Q1. 아이콘 위치는 왼쪽인가 오른쪽인가요? 둘 다 가능합니다. 오른쪽 끝이 가장 흔하죠. 핵심은 모든 헤더에서 동일해야 한다는 것입니다. Q2. 제목 길이가 다르면 아이콘 정렬이 깨지지 않나요? 아이콘을 오른쪽 끝에 고정하면 제목 길이와 무관하게 정렬이 유지됩니다. Q3. CP-195와 뭐가 다른가요? CP-194는 ‘아이콘 위치 일관’, CP-195는 ‘아이콘이 펼침/접힘 방향을 정확히 반영’ 입니다. 함께 상태를 명확히 전하죠.

6. 마무리

CP-194의 메시지:

펼침 아이콘은 늘 같은 자리에 — 확장 상태 아이콘을 모든 헤더에서 일관 위치에 두라.

아코디언 상태 아이콘이 헤더마다 다른 위치에 있으면 사용자가 찾느라 헤맵니다. 모든 헤더에서 같은 위치(주로 오른쪽 끝)에 정렬하면, 그 열을 따라 펼침/접힘 상태를 한눈에 스캔하죠. 다음 편은 아이콘이 펼침/접힘 방향을 정확히 반영하는 규칙입니다.

다음 편 예고 ▶ 「315. (CP-195) 아코디언의 확장 상태를 나타내는 아이콘은 패널이 펼쳐지거나 접히는 방향을 정확하게 반영하여 제공하고 있다.」

ViewCheck는 아코디언 상태 아이콘이 일관된 위치에 제공되는지를 진단합니다.

📚 참고 출처

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

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

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