이해의 용이성 | 접근성 체크리스트(모바일 앱 접근성)

기본 언어 표시 [신규]

요약 설명
주로 사용하는 언어를 명시해야 합니다.
기본 언어가 지정되어야 스크린 리더가 문장을 올바른 발음과 규칙으로 처리할 수 있습니다.

WCAG 2.2 Guidelines : 3.1.1 Language of Page

예시

하이브리드 앱 예시 (HTML)

									<html lang="ko">
									<body>...</body>
									</html>

Vue 예시

									<template>
										<div lang="ko">...</div>
									</template>

React 예시

									<div lang="ko">...</div>

검수 방법

문서/화면 기본 언어가 코드 수준에서 명시되어 있는가?
주요 화면(로그인, 입력, 결과)에서 언어 설정 누락이 없는가?

부분 언어 표시 [신규]

요약 설명
기본 언어와 다른 언어 구간은 해당 언어를 별도로 명시해야 합니다.
외국어 단어, 인용문, 혼합 언어 구간은 언어 속성으로 구분해야 오독을 줄일 수 있습니다.

WCAG 2.2 Guidelines : 3.1.2 Language of Parts

예시

하이브리드 앱 예시 (HTML)

									<p>제품명은 <span lang="en">Smart Home Hub</span> 입니다.</p>

Vue 예시

									<template>
										<p>제품명은 <span lang="en">Smart Home Hub</span> 입니다.</p>
									</template>

React 예시

									<p>제품명은 <span lang="en">Smart Home Hub</span> 입니다.</p>

검수 방법

외국어 문장/용어에 언어 속성(lang 등)을 적용했는가?
다국어 전환 시 보조기술이 언어 변화를 정확히 인식하는가?

사용자 요구에 따른 실행 [유지]

요약 설명
사용자가 의도하지 않은 기능은 자동적으로 실행되지 않아야 합니다.
화면 전환·팝업·외부 앱 연결 등 맥락 변화가 있을 때는 사전 안내 또는 확인 절차를 제공해야 합니다.

WCAG 2.2 Guidelines : 3.2.1 On Focus
WCAG 2.2 Guidelines : 3.2.2 On Input

예시

하이브리드 앱 예시 (JavaScript)

									select.addEventListener('change', () => {
										showNotice('국가를 변경하면 배송비가 다시 계산됩니다.');
									});

Vue 예시

									<select @change="notifyChange"></select>
									<script>
									export default {
										methods: { notifyChange() { this.notice = '국가를 변경하면 배송비가 다시 계산됩니다.'; } }
									}
									</script>

React 예시

									<select onChange={() => setNotice('국가를 변경하면 배송비가 다시 계산됩니다.')}></select>

검수 방법

선택/입력 즉시 페이지 이동, 제출, 외부 앱 실행이 자동 발생하지 않는가?
맥락 변화가 필요한 경우 사전 안내 또는 확인 절차를 제공하는가?

사용자 인터페이스 컴포넌트의 일관성 [강화]

요약 설명
사용자 인터페이스 컴포넌트는 일관성 있게 제공해야 합니다.
사용자 인터페이스(UI) 컴포넌트들이 일관성 있게 배치되면 사용자는 앱을 보다 쉽게 탐색하고 이해할 수 있습니다.
일관성 있는 UI는 사용자가 각 요소의 위치와 동작을 예측할 수 있게 해주며, 특히 장애를 가진 사용자들에게 더욱 중요한 역할을 합니다.

WCAG 2.2 Guidelines : 3.2.3 Consistent Navigation
WCAG 2.2 Guidelines : 3.2.4 Consistent Identification

필요성

사용자 경험 향상
일관성 있는 UI는 사용자가 앱을 더 쉽게 배우고 사용할 수 있도록 합니다. 반복적인 패턴은 사용자에게 익숙함을 주어 학습 곡선을 줄입니다.
오류 감소
일관성 있는 배치는 사용자가 인터페이스의 작동 방식을 이해하기 쉽게 하여, 실수로 잘못된 요소를 누르거나 잘못된 동작을 수행하는 것을 줄입니다.
접근성 보장
특히 인지 장애나 시각 장애를 가진 사용자들이 앱을 사용할 때, 일관된 레이아웃과 컴포넌트 배치는 중요한 접근성 요소가 됩니다.

제공 방법

컴포넌트의 위치 일관성 유지
주요 UI 컴포넌트(예: 내비게이션 메뉴, 버튼, 입력 필드 등)는 앱 내 모든 화면에서 일관된 위치에 배치되어야 합니다.
예를 들어, “뒤로 가기” 버튼은 항상 화면의 왼쪽 상단에 위치해야 합니다.
시각적 디자인 일관성 유지
- 버튼, 텍스트, 아이콘 등의 시각적 스타일(예: 색상, 폰트, 크기)을 일관되게 사용하여 사용자에게 일관된 시각적 경험을 제공합니다.
- 텍스트 필드는 모든 화면에서 동일한 크기와 스타일을 사용하여 일관된 시각적 힌트를 제공합니다.
동작 패턴 일관성 유지
특정 동작(예: 스와이프, 탭 등)에 대한 응답은 모든 화면에서 동일하게 처리되어야 합니다.
예를 들어, 스와이프 제스처로 메뉴를 열거나 닫는 경우, 모든 화면에서 동일하게 작동하도록 해야 합니다.
내비게이션 구조의 일관성 유지
앱 내 모든 페이지와 기능은 일관된 내비게이션 구조를 따라야 합니다. 사용자는 언제든지 동일한 방식으로 원하는 페이지로 이동할 수 있어야 합니다.

예시

네이티브 앱 예시(Android)

일관된 버튼 배치

									<LinearLayout
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:orientation="vertical"
										android:padding="16dp">

										<!-- 뒤로 가기 버튼: 모든 화면에서 왼쪽 상단에 일관되게 배치 -->
										<Button
											android:id="@+id/backButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="뒤로 가기"
											android:layout_gravity="start" />

										<!-- 주요 작업 버튼: 항상 동일한 스타일과 위치 유지 -->
										<Button
											android:id="@+id/mainActionButton"
											android:layout_width="match_parent"
											android:layout_height="wrap_content"
											android:text="저장"
											android:layout_marginTop="16dp" />
									</LinearLayout>

네이티브(잘못된 / 올바른 예시)

아래는 서로 다른 화면에서 같은 역할의 버튼이 어떻게 달라지는지 비교한 예시입니다. 한 화면의 레이아웃만 보면 문제가 없어 보일 수 있으나, 화면이 바뀔 때마다 위치·스타일이 달라지면 사용자가 혼란을 겪습니다.

잘못된 예 1 — 화면마다 버튼 위치가 다름

									/* [화면 A - 설정] 뒤로 가기=오른쪽(end), 저장=가운데(center) */
									<LinearLayout
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:orientation="vertical"
										android:padding="16dp">

										<Button
											android:id="@+id/backButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="뒤로 가기"
											android:layout_gravity="end" />

										<Button
											android:id="@+id/saveButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="저장"
											android:layout_gravity="center" />
									</LinearLayout>

									/* [화면 B - 편집] 뒤로 가기=왼쪽(start), 저장=오른쪽(end) */
									<LinearLayout
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:orientation="vertical"
										android:padding="16dp">

										<Button
											android:id="@+id/backButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="뒤로 가기"
											android:layout_gravity="start" />

										<Button
											android:id="@+id/saveButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="저장"
											android:layout_gravity="end" />
									</LinearLayout>

잘못된 예 2 — 동일 기능(저장)인데 화면마다 스타일이 다름

									/* [화면 A] 초록색·작은 패딩 */
									<Button
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="저장"
										android:backgroundTint="#4CAF50"
										android:padding="12dp" />

									/* [화면 B] 빨간색·큰 패딩·큰 글자 */
									<Button
										android:layout_width="wrap_content"
										android:layout_height="wrap_content"
										android:text="저장"
										android:backgroundTint="#F44336"
										android:padding="20dp"
										android:textSize="18sp" />

올바른 예 — 모든 화면에서 동일한 위치·스타일 패턴

									/* [모든 화면 공통] 뒤로 가기=왼쪽(start), 저장=아래 전체 너비(match_parent) */
									<LinearLayout
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:orientation="vertical"
										android:padding="16dp">

										<Button
											android:id="@+id/backButton"
											android:layout_width="wrap_content"
											android:layout_height="wrap_content"
											android:text="뒤로 가기"
											android:layout_gravity="start" />

										<Button
											android:id="@+id/saveButton"
											android:layout_width="match_parent"
											android:layout_height="wrap_content"
											android:text="저장"
											android:layout_marginTop="16dp"
											android:backgroundTint="@color/primary" />
									</LinearLayout>

하이브리드 앱 예시 (HTML/JavaScript)

일관된 내비게이션과 버튼 스타일

하이브리드(잘못된 / 올바른 예시)

웹 화면에서도 동일한 「저장」 버튼이 화면마다 인라인 스타일로 다르게 지정되면 식별이 어렵습니다. 공통 클래스를 사용해 일관된 스타일을 유지해야 합니다.

									<!-- 잘못된 예시 (하이브리드) - [화면 A] 초록·작은 패딩 / [화면 B] 빨강·큰 패딩 -->
									<button style="padding: 12px; background-color: green;">저장</button>
									<button style="padding: 20px; background-color: red;">저장</button>

									<!-- 올바른 예시 (하이브리드) - 모든 화면에서 동일한 .btn-primary 클래스 사용 -->
									<button class="btn btn-primary">저장</button>

검수 방법

모든 화면에서 주요 UI 컴포넌트(예: 내비게이션 바, 버튼 등)가 일관된 위치와 스타일로 배치되었는지 확인하였는가?
다양한 사용자가 앱을 사용하면서 일관성 있는 인터페이스로 인해 앱 사용이 쉬운지, 예상 가능한지 평가하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 UI 컴포넌트의 일관성이 접근성 기준을 충족하는지 점검하였는가?

도움 정보 [신규]

요약 설명
도움 정보가 있다면 화면마다 동일한 순서로 접근할 수 있어야 합니다.
FAQ, 고객센터, 문의 등 반복 제공되는 도움 경로는 일관된 위치와 명칭을 유지해야 합니다.

WCAG 2.2 Guidelines : 3.2.6 Consistent Help

예시

하이브리드 앱 예시 (HTML)

									<nav aria-label="도움 정보">
										<a href="/help">도움말</a>
										<a href="/faq">FAQ</a>
										<a href="/contact">문의하기</a>
									</nav>

Vue 예시

									<nav aria-label="도움 정보">
										<RouterLink to="/help">도움말</RouterLink>
										<RouterLink to="/faq">FAQ</RouterLink>
										<RouterLink to="/contact">문의하기</RouterLink>
									</nav>

React 예시

									<nav aria-label="도움 정보">
										<Link to="/help">도움말</Link>
										<Link to="/faq">FAQ</Link>
										<Link to="/contact">문의하기</Link>
									</nav>

검수 방법

고객센터/FAQ/문의하기가 화면마다 같은 위치와 같은 명칭으로 제공되는가?
키보드/보조기술 사용 시에도 도움 정보에 일관되게 도달 가능한가?

오류 정정 [분리]

요약 설명
입력 오류를 정정할 수 있는 방법을 제공해야 합니다.
입력 서식을 이용할 때 사용자가 잘못된 정보를 입력하지 않도록 도와주는 방법을 제공하거나, 오류 발생 시 이를 쉽게 정정할 수 있도록 안내해야 합니다. 이러한 기능은 사용자들이 올바른 데이터를 입력하도록 유도하며, 특히 인지 장애가 있는 사용자들에게 매우 중요합니다.

WCAG 2.2 Guidelines : 3.3.1 Error Identification
WCAG 2.2 Guidelines : 3.3.3 Error Suggestion

필요성

사용자 편의성
입력 과정에서 발생할 수 있는 오류를 최소화하여 사용자의 부담을 줄입니다.
오류 방지
사용자가 입력해야 하는 형식에 대한 명확한 지침을 제공함으로써 오류 발생을 줄일 수 있습니다.
오류 정정 지원
오류가 발생했을 때 사용자가 쉽게 수정할 수 있도록 피드백과 도움을 제공합니다.
접근성 보장
특히 인지 장애나 시각 장애가 있는 사용자들이 입력 오류를 쉽게 식별하고 수정할 수 있도록 돕습니다.

제공 방법

명확한 입력 지침 제공
- 입력 서식의 각 필드에 대해 사용자가 기대되는 입력 형식을 명확히 안내합니다(예: 전화번호 형식, 이메일 형식).
- 입력 필드에 힌트(placeholder)나 레이블(label)을 사용하여 입력 형식을 설명합니다.
실시간 입력 검증
사용자가 입력하는 동안 실시간으로 오류를 검증하고, 문제가 있을 경우 즉시 피드백을 제공합니다(예: 이메일 주소 형식 오류).
오류 발생 시 시각적 피드백 제공
오류가 발생한 필드를 시각적으로 강조(예: 빨간색 테두리)하고, 오류 메시지를 명확하게 표시하여 무엇이 잘못되었는지 설명합니다.
오류 수정 가이드 제공
오류 메시지에 오류 수정 방법을 포함시켜 사용자가 쉽게 문제를 해결할 수 있도록 제공합니다.

예시

네이티브 앱 예시(Android)

실시간 입력 검증과 오류 피드백

									// xml code
									<EditText
										android:id="@+id/emailInput"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:hint="이메일 입력"
										android:inputType="textEmailAddress" />

									<TextView
										android:id="@+id/emailError"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:text="올바른 이메일 주소를 입력하세요."
										android:textColor="#FF0000"
										android:visibility="gone" />

									// java code
									EditText emailInput = findViewById(R.id.emailInput);
									TextView emailError = findViewById(R.id.emailError);

									emailInput.addTextChangedListener(new TextWatcher() {
										@Override
										public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

										@Override
										public void onTextChanged(CharSequence s, int start, int before, int count) {
											if (!Patterns.EMAIL_ADDRESS.matcher(s).matches()) {
												emailError.setVisibility(View.VISIBLE);
											} else {
												emailError.setVisibility(View.GONE);
											}
										}

										@Override
										public void afterTextChanged(Editable s) {}
									});

네이티브(잘못된 / 올바른 예시)

									<!-- 잘못된 예시 (네이티브) - 이메일 형식이 잘못되었을 때 아무런 피드백을 제공하지 않음 -->
									<EditText
										android:id="@+id/emailInput"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:hint="이메일 입력" />

									<!-- 잘못된 예시 (네이티브) - 사용자가 입력한 내용이 잘못되었을 때에도 명확한 오류 메시지를 제공하지 않음 -->
									<input type="email" id="emailInput" placeholder="example@domain.com">

									<!-- 올바른 예시 (네이티브) - 실시간으로 이메일 형식을 검증하고, 오류 시 사용자에게 명확한 피드백을 제공 -->
									<EditText
										android:id="@+id/emailInput"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:hint="이메일 입력"
										android:inputType="textEmailAddress" />

									<TextView
										android:id="@+id/emailError"
										android:layout_width="match_parent"
										android:layout_height="wrap_content"
										android:text="올바른 이메일 주소를 입력하세요."
										android:textColor="#FF0000"
										android:visibility="gone" />

하이브리드 앱 예시 (HTML/JavaScript)

실시간 입력 검증과 오류 피드백

검수 방법

모든 입력 필드에 대해 실시간 검증과 오류 피드백이 제대로 작동하는지 확인하였는가?
오류 메시지가 명확하고 사용자가 쉽게 이해할 수 있는지 검토하였는가?
실제 사용자들이 입력 과정에서 발생한 오류를 쉽게 식별하고 수정할 수 있는지 테스트하였는가?
Google Accessibility Scanner와 같은 도구를 사용하여 입력 필드와 오류 메시지가 접근성 기준을 충족하는지 점검하였는가?

레이블 [분리]

요약 설명
사용자 입력 항목에는 대응하는 레이블을 제공해야 합니다.
레이블은 입력 항목의 목적을 명확히 알려 주며, 보조기술이 항목 정보를 정확히 읽을 수 있도록 연결되어야 합니다.

WCAG 2.2 Guidelines : 3.3.2 Labels or Instructions

예시

하이브리드 앱 예시 (HTML)

									<label for="email">이메일</label>
									<input id="email" type="email" autocomplete="email" />

Vue 예시

									<template>
										<label for="email">이메일</label>
										<input id="email" v-model="email" type="email" autocomplete="email" />
									</template>

React 예시

									<label htmlFor="email">이메일</label>
									<input id="email" type="email" autoComplete="email" />

검수 방법

모든 입력 필드에 시각적 레이블이 제공되고, 플레이스홀더만으로 대체하지 않았는가?
label for, aria-label, 네이티브 접근성 라벨 등으로 보조기술 연결을 제공했는가?

오류 방지 [신규]

요약 설명
중요한 제출은 실수로 완료되지 않도록 확인·취소·수정 수단을 제공해야 합니다.
법률, 금융, 개인정보 등 영향이 큰 작업은 사전 확인 또는 제출 후 되돌리기 기능이 필요합니다.

WCAG 2.2 Guidelines : 3.3.4 Error Prevention (Legal, Financial, Data)

예시

하이브리드 앱 예시 (HTML/JavaScript)

									<button id="submit">전송</button>
									<script>
										document.getElementById('submit').addEventListener('click', () => {
											if (confirm('제출하시겠습니까?')) submitForm();
										});
									</script>

Vue 예시

									<button @click="confirmSubmit">전송</button>
									<script>
									export default {
										methods: {
											confirmSubmit() { if (confirm('제출하시겠습니까?')) this.submitForm(); }
										}
									}
									</script>

React 예시

									<button onClick={() => window.confirm('제출하시겠습니까?') && submitForm()}>
										전송
									</button>

검수 방법

결제·삭제·전송 등 중요 작업에 확인 단계가 제공되는가?
사용자가 취소, 수정, 되돌리기 중 하나 이상을 수행할 수 있는가?

반복 입력 정보 [신규]

요약 설명
같은 정보를 불필요하게 반복 입력하지 않도록 해야 합니다.
자동완성, 이전 값 불러오기, 복사 기능 등으로 입력 부담을 줄여야 합니다.

WCAG 2.2 Guidelines : 3.3.7 Redundant Entry

예시

하이브리드 앱 예시 (HTML)

									<input name="billingAddress" autocomplete="street-address" />
									<label><input type="checkbox" id="sameAsBilling" /> 배송지 동일</label>

Vue 예시

									<input v-model="billingAddress" autocomplete="street-address" />
									<label><input type="checkbox" v-model="sameAsBilling" /> 배송지 동일</label>
									<input :value="sameAsBilling ? billingAddress : shippingAddress" />

React 예시

									const [sameAsBilling, setSameAsBilling] = useState(false);
									<input autoComplete="street-address" />
									<input value={sameAsBilling ? billingAddress : shippingAddress} readOnly />

검수 방법

동일 사용자 정보(이름, 연락처, 주소 등)를 재입력하지 않아도 되는가?
자동완성/기존 값 선택/복사 등 대체 입력 수단이 제공되는가?

접근 가능한 인증 [신규]

요약 설명
인증 과정은 인지 시험에만 의존하지 않아야 합니다.
패스키, 생체인증, 일회용 링크 등 대체 인증 수단을 제공해 다양한 사용자가 인증할 수 있어야 합니다.

WCAG 2.2 Guidelines : 3.3.8 Accessible Authentication (Minimum)

예시

하이브리드 앱 예시 (HTML)

									<button type="button">패스키로 로그인</button>
									<button type="button">일회용 링크 받기</button>

Vue 예시

									<button @click="signInWithPasskey">패스키로 로그인</button>
									<button @click="sendMagicLink">일회용 링크 받기</button>

React 예시

									<button onClick={signInWithPasskey}>패스키로 로그인</button>
									<button onClick={sendMagicLink}>일회용 링크 받기</button>

검수 방법

기억·암기·퍼즐 해석 등 인지 부담이 큰 방식 외의 인증 수단이 있는가?
보조기술 사용자도 인증을 완료할 수 있도록 포커스/읽기 순서/안내가 적절한가?

기본 언어 표시 [신규]

예시

하이브리드 앱 예시 (HTML)

Vue 예시

React 예시

검수 방법

부분 언어 표시 [신규]

예시

하이브리드 앱 예시 (HTML)

Vue 예시

React 예시

검수 방법

사용자 요구에 따른 실행 [유지]

예시

하이브리드 앱 예시 (JavaScript)

Vue 예시

React 예시

검수 방법

사용자 인터페이스 컴포넌트의 일관성 [강화]

필요성

제공 방법

예시

네이티브 앱 예시(Android)

네이티브(잘못된 / 올바른 예시)

하이브리드 앱 예시 (HTML/JavaScript)

하이브리드(잘못된 / 올바른 예시)

검수 방법

도움 정보 [신규]

예시

하이브리드 앱 예시 (HTML)

Vue 예시

React 예시

검수 방법

오류 정정 [분리]

필요성

제공 방법

예시

네이티브 앱 예시(Android)

네이티브(잘못된 / 올바른 예시)

하이브리드 앱 예시 (HTML/JavaScript)

검수 방법

레이블 [분리]

예시

하이브리드 앱 예시 (HTML)

Vue 예시

React 예시

검수 방법

오류 방지 [신규]

예시

하이브리드 앱 예시 (HTML/JavaScript)

Vue 예시

React 예시

검수 방법

반복 입력 정보 [신규]

예시

하이브리드 앱 예시 (HTML)

Vue 예시

React 예시

검수 방법

접근 가능한 인증 [신규]

예시

하이브리드 앱 예시 (HTML)

Vue 예시

React 예시

검수 방법

모바일 앱 접근성 요약 보고서