7.2.2 사용자 인터페이스 컴포넌트의 일관성

요구 사항

• 화면에 표시되는 사용자 인터페이스 컴포넌트는 일관성 있게 배치해야 합니다.
• 동일한 컴포넌트는 동일한 모양과 명칭으로 일관되게 식별되어야 합니다.
• 동일한 기능을 구성하는 컴포넌트는 동일한 사용자 인터페이스로 제공해야 합니다.

개정 내역: 강화 — 2016판 「7.2 사용자 인터페이스의 일관성」

2016판은 일관된 배치를 요구했고, 2025판은 WCAG 3.2.3(일관된 탐색)과 3.2.4(일관된 식별)에 맞춰 모양·명칭·기능의 일관성까지 요구합니다.

왜 필요한가요

화면마다 반복되는 컴포넌트의 위치를 예측할 수 있고, 같은 기능을 같은 모양과 이름(대체 텍스트 포함)으로 쉽게 알아볼 수 있어 모든 사용자가 쉽게 이용할 수 있습니다.

도움받는 사용자

• 인지·학습장애인
• 화면낭독기 사용자
• 저시력인(화면 확대 사용자)
• 고령자

적용 방법

공통 컴포넌트(상단 바, 하단 탭, 뒤로 가기, 검색)를 디자인 시스템으로 관리하고, 접근성 레이블도 문자열 리소스로 공유해 화면마다 같은 이름이 쓰이게 합니다.

<!-- strings.xml: 공통 레이블을 한곳에서 관리 -->
<string name="a11y_back">뒤로 가기</string>
<string name="a11y_search">검색</string>

사례

화면 A 뒤로 아이콘: "뒤로"  화면 B: "이전"  화면 C: "닫기"

모든 화면의 뒤로 아이콘: "뒤로 가기"

자주 하는 실수

• 같은 기능의 아이콘이 화면마다 다른 대체 텍스트로 읽힙니다.
• 하단 탭이나 메뉴의 순서·위치가 화면마다 바뀝니다.
• 같은 기능을 화면마다 다른 모양의 컨트롤로 제공합니다.

검사 방법

• 여러 화면에 반복되는 컴포넌트의 위치와 순서가 같은지 확인합니다.
• TalkBack·VoiceOver로 같은 기능의 컴포넌트가 화면마다 같은 이름으로 낭독되는지 확인합니다.

다른 지침의 대응 항목