동작기반 작동 - by. UXKM

A11Y
A11y Creation Tech
웹 접근성 제작 기법
동작기반 작동

요약 설명
관련 지침 : 동작기반으로 작동하는 기능은 사용자 인터페이스 구성요소로 조작할 수 있고, 동작기반 기능을 비활성화할 수 있어야 한다.
기기를 기울이거나 흔들고, 카메라를 통한 제스처 인식 등을 입력 수단으로 활용할 때, 모든 사용자가 의도치 않은 실행을 방지하고 대체 조작 수단(버튼 등)으로 동일한 기능을 실행할 수 있도록 해야 합니다. 이는 손떨림, 휠체어 사용자, 음성 명령 사용자 등 동작 기반 입력이 곤란한 환경에서도 서비스 사용이 가능하도록 보장하는 데 목적이 있습니다.
사용자가 장치를 움직이거나 사용자의 움직임을 통하여 작동하는 기능(예: 흔들어서 실행 취소, 손동작을 이용한 사진 촬영 등)은 사용자 인터페이스 구성요소로 조작할 수 있어야 하며, 의도하지 않는 동작으로 기능이 작동하는 것을 예방하기 위해 해당 기능을 비활성화할 수 있어야 합니다.

동작기반 작동 예외 상황

접근성 지원 인터페이스
동작이 접근성 지원 인터페이스를 통해 기능을 조작하는 데 사용되는 경우(예: 안구마우스)
필수적인 경우
동작이 기능의 실행에 반드시 필요하고, 동작의 실행에 대한 비활성화가 기능 자체를 무효화할 수 있는 경우(예: 만보기)

기대효과

장치가 고정되어 있거나 특정 동작을 행할 수 없는 사용자도 기능을 사용할 수 있어야 합니다.
정확한 동작을 할 수 없거나, 의도하지 않은 동작으로 기능이 실행되는 것을 방지할 수 있어야 합니다.

필요성

스마트폰, 태블릿 등에서 가속도계, 자이로스코프, 카메라 센서를 이용해 흔들기, 기울이기, 제스처 명령 등 동작 기반 기능을 활용하여 기능을 작동시킬 수 있습니다. 예를 들어, 장치를 흔들어 정보를 최신화하거나 특정 기능을 실행할 수 있고, 전면 카메라 위에서 손을 움직여 이전/다음 콘텐츠로 이동시킬 수도 있습니다.
그러나 이러한 기능을 사용하면서 일부 사용자는 다음과 같은 어려움을 겪을 수 있습니다. 파킨슨 병처럼 심한 손떨림을 가진 사용자는 의도치 않게 기능이 실행될 수 있으며, 휠체어에 기기를 고정한 채 사용하는 경우 기기를 움직이는 동작을 할 수 없습니다. 또한, 음성 명령과 같은 대체 수단을 사용하는 사용자는 기기를 움직이거나 제스처를 취할 수 없습니다.

모바일 기기에서 흔들기, 회전 등의 동작은 사용자가 원치 않는 상황에서 기능이 실행될 수 있습니다.
특정 장애 사용자나 고정된 환경(휠체어나 테이블)에 있는 경우, 디바이스를 움직이는 것이 불가능합니다.
이러한 기능은 반드시 UI 요소로 대체 가능하며, 비활성화 옵션도 제공해야 접근성이 확보됩니다.

대상

사용자 유형
이유

지체 장애 사용자

기기를 물리적으로 움직이기 어렵거나 불가능한 경우
고정된 환경 사용자

흔들기, 회전 등이 불가한 환경 (휠체어 장착, 고정 거치대 등)
저시력·인지장애 사용자

의도치 않은 동작 인식으로 인한 오류 가능성 있음

체크리스트

흔들기, 기울이기 등 동작 기반 기능이 존재하는가?
동작을 대체하는 UI 버튼이 제공되는가?
설정에서 해당 동작 기반 기능을 끌 수 있는가?

테스트 방법

모바일 기기에서 흔들기, 회전 등의 제스처로 기능이 실행되는지 확인합니다.
동일한 기능을 수행할 수 있는 UI 버튼 또는 입력 수단이 존재하는지 확인합니다.
설정 또는 스위치를 통해 해당 기능을 끌 수 있는지 점검합니다.

QA 지표

동작 기반 기능의 UI 대체 제공률
비활성화 가능한 기능 여부
제스처 입력 실패 시 대응 성공률

개발방법

html + JavaScript 예시 – 기기 흔들기 감지 및 대체 버튼 제공

위 코드에서는 resetForm()이라는 기능을 흔들기 동작과 버튼 클릭으로 모두 수행할 수 있게 설정하였습니다. 또한, 사용자가 필요에 따라 동작 기반 기능을 끌 수 있도록, 설정에서 motion 기능 끄기 옵션을 제공하는 것이 좋습니다.
예를 들어, toggle 스위치를 사용하여 흔들기 동작을 비활성화할 수 있도록 하는 방법을 고려할 수 있습니다.

								<button onclick="resetForm()">초기화</button>

								<script>
									function resetForm() {
										alert('초기화 되었습니다.');
									}

									if (window.DeviceMotionEvent) {
										window.addEventListener("devicemotion", function(event) {
											const acceleration = event.accelerationIncludingGravity;
											if (acceleration.x > 15 || acceleration.y > 15 || acceleration.z > 15) {
												resetForm(); // 기기 흔들림 감지
											}
										});
									}
								</script>

Vue 예시 (흔들기와 버튼으로 초기화 기능)

								<template>
									<div>
										<button @click="resetForm">초기화</button>
										<label>
											<input type="checkbox" v-model="motionEnabled" />
											동작 기반 기능 사용
										</label>
									</div>
								</template>

								<script setup>
									import { ref, onMounted, onUnmounted } from 'vue';

									const motionEnabled = ref(true);

									function resetForm() {
										alert('초기화 되었습니다.');
									}

									function handleMotion(event) {
										const acc = event.accelerationIncludingGravity;
										if (motionEnabled.value && (acc.x > 15 || acc.y > 15 || acc.z > 15)) {
											resetForm();
										}
									}

									onMounted(() => {
										window.addEventListener('devicemotion', handleMotion);
									});

									onUnmounted(() => {
										window.removeEventListener('devicemotion', handleMotion);
									});
								</script>

React 예시

								import React, { useEffect, useState } from "react";

								function MotionComponent() {
									const [motionEnabled, setMotionEnabled] = useState(true);

									const resetForm = () => {
										alert("초기화 되었습니다.");
									};

									useEffect(() => {
										const handleMotion = (event) => {
											const acc = event.accelerationIncludingGravity;
											if (motionEnabled && (acc.x > 15 || acc.y > 15 || acc.z > 15)) {
												resetForm();
											}
										};

										window.addEventListener("devicemotion", handleMotion);
										return () => {
											window.removeEventListener("devicemotion", handleMotion);
										};
									}, [motionEnabled]);

									return (
										<>
											<button onClick={resetForm}>초기화</button>
											<label>
												<input
													type="checkbox"
													checked={motionEnabled}
													onChange={(e) => setMotionEnabled(e.target.checked)}
												/>
												동작 기반 기능 사용
											</label>
										</>
									);
								}

								export default MotionComponent;

점검 기준

동작 기반 기능을 수행할 수 있는 대체 UI가 존재하는가?
사용자가 해당 기능을 비활성화할 수 있는가?
기능이 의도하지 않게 실행되지 않도록 설계되었는가?

점검 방법

실제 디바이스 테스트를 통한 동작 감지합니다.
UI 버튼 조작 가능 여부 확인합니다.
비활성화 스위치 존재 여부 점검합니다.

준수/미준수 사례

미준수 사례

동작기반 작동 비활성화 기능 미제공

모바일 기기를 흔들면 결제 바코드가 화면에 노출되는 모바일 애플리케이션 사례입니다.
기본적으로 ‘흔들기’ 기능이 활성화되어 있어, 손떨림이 심한 사용자는 의도치 않게 결제 바코드가 계속 노출됩니다.
이 기능을 끌 수 있는 설정을 제공하지 않아, 손떨림 또는 의도치 않게 기기가 흔들리는 상황에서 바코드가 실행되는 오작동이 발생할 수 있으며, 사용자가 불편을 겪을 수 있습니다.

개선 방법: 흔들어 결제 바코드를 보여주는 기능을 켜고 끌 수 있는 설정 기능을 제공합니다.
문제를 사전에 예방하기 위해 끔 상태를 기본으로 제공하고, 사용자가 원할 때 켤 수 있도록 제공하는 것을 고려할 수 있습니다.

접근 가능한 대체 인터페이스 미제공

건물 내부를 VR을 통해 둘러볼 수 있도록 제공한 관광지를 소개하는 웹 페이지 예시입니다.
기기를 기울이거나 몸을 돌려서 360도 화면을 둘러볼 수 있고, 터치 스와이프 제스처로도 시점을 이동할 수 있습니다. 하지만 상하좌우 버튼과 같은 추가 조작 인터페이스가 없어, 휠체어에 고정된 기기를 사용하거나 음성 명령만 이용하는 사용자에게는 사실상 VR 시점 이동이 어렵습니다.

개선 방법: “상하좌우” 이동 버튼을 제공하여, 마우스 클릭이나 키보드·음성 입력만으로도 VR 시점을 조정할 수 있도록 합니다.
버튼을 길게 누르면 화면이 계속 회전되는 등 세밀한 이동 방식을 마련해, 동작 없이도 원활히 VR 체험이 가능하도록 합니다. 또한 기기를 기울이거나 회전하는 입력을 아예 끌 수 있는 설정을 두어, 의도치 않게 화면이 움직이지 않도록 합니다.

준수 사례

동작 기반 기능 비활성화 설정과 접근 가능한 사용자 인터페이스 제공

기기를 흔들어 결제를 위한 바코드를 노출시키는 기능이 제공되는 모바일 애플리케이션의 사례입니다.

손떨림이 심한 사용자의 경우, 손떨림으로 인한 기기의 흔들림이 의도하지 않은 결제 바코드 노출을 실행하지 않도록 기능을 꺼둘 수 있는 설정이 제공됩니다.
동시에 이 기능을 꺼두더라도, 버튼을 누르는 것만으로 결제 바코드를 노출시킬 수 있는 대체 버튼이 제공됩니다.
모바일 애플리케이션의 사례이지만, 웹 페이지에서 이러한 동작 기반 기능을 제공할 경우에도 이와 동등한 수준으로 제공할 필요가 있습니다.

접근성 테스트 도구 활용 점검방법

Lighthouse

Lighthouse는 구글에서 제공하는 웹 페이지 품질 개선을 위한 오픈 소스로 자동화 도구입니다. Lighthouse는 사이트의 성능, 접근성, SEO 등에 대한 전반적인 진단을 해줍니다.
상세 설명 : Lighthouse Overview 공식 문서 참조

참고

Lighthouse 모바일의 경우 네트워크 속도를 최대 4배정도 느리게 측정하기 때문에 모바일 Performance가 비교적 낮게 나옵니다.
Metric 별로 어떤 성능 점수가 나는지 Lighthouse 계산기를 통해서 자세히 확인할 수 있습니다.

카테고리가 측정하는 내용

Performance
웹 페이지의 로딩 속도 등 실제 성능을 측정. 성능의 측정항목은 6가지 Metric으로 정의되며, 각 Metric들은 페이지가 로드되는 속도를 다양한 측면에서 측정합니다.
상세 설명 : Lighthouse Performance Audits.
Best practices
Best practices를 따라 개발되었는지 확인
Accessibility
접근성 확인. 폰트 사이즈, 메뉴간 간격 등을 측정
Progressive Web App (PWA)
웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크
SEO
Search Engine Optimization의 약자로 검색 엔진 수집 최적화 측정

사용법

Google Chrome에서 웹 페이지를 엽니다.
DevTools (F12)를 열고 ‘Lighthouse’ 탭을 선택합니다. (단축키 맥:Cmd⌘+Option⌥+I / 윈도우:Ctrl+Shift+I)
‘Accessibility’ 항목을 선택하고 우측 상단의 ‘Analyze page load’를 클릭하여 보고서를 생성합니다.

[Lighthouse를 활용한 검사]
Lighthouse는 접근성 점수와 함께 개선이 필요한 부분을 제시합니다.

[Lighthouse를 활용한 검사]

iOS : Accessibility Inspector

iOS 앱 개발도구인 xcode에는 Accessibility Inspector 툴을 통해 접근성을 수동 검사할 수 있습니다.

사용법

Xcode에서 Accessibility Inspector 툴을 실행합니다. (Xcode > Open Developer Tool > Accessibility Inspector)

[출처 : NULI]
테스트할 장치를 선택합니다. 개발 중인 앱을 Simulator로 빌드 하셨다면 Simulator를 선택하여 진단하실 수 있습니다.

[출처 : NULI]
Accessibility Inspector 툴 오른쪽 상단에서 audit 버튼을 선택합니다. Run Audit 버튼을 선택합니다.

[출처 : NULI]
결과 이슈 목록을 선택하거나 눈 버튼을 선택하시면 해당 항목을 보여줍니다. 장치를 보면 노란색으로 표시되고, 물음표 버튼를 선택하면 해당 이슈를 해결할 수 있는 방법을 알려줍니다.

[출처 : NULI]
물음표 버튼를 선택하면 해당 이슈를 해결할 수 있는 방법을 알려줍니다.

[출처 : NULI]
목록에서 주의 깊게 봐야 할 이슈는 description에 대한 이슈입니다. 대체 텍스트 이슈는 접근성 사용자에게 매우 크리티컬한 이슈이면서 해결 방법이 매우 수월한 이슈입니다.

[출처 : NULI]
Xcode의 Identity Inspector 탭의 Accessibility 패널에 대체 텍스트를 넣어주세요.
대체 텍스트 외에도 명도대비, 작은 터치영역등 다양한 접근성 이슈를 체크해주고 있습니다.

[출처 : NULI]
각 요소별 접근성 항목을 확인할 수 있고, iOS 스크린리더인 VoiceOver 음성으로 들어볼 수 있습니다.
1. 스피커
  현재 초점이 위치한 요소의 정보를 VoiceOver 음성으로 들려줍니다.
2. 이전 요소 탐색
  현재 초점이 위치한 곳에서 이전 요소의 정보를 VoiceOver 음성으로 들려줍니다.
3. 자동 탐색
  현재 초점이 위치한 곳에서 모든 요소를 자동으로 탐색하며 요소의 정보를 VoiceOver 음성으로 들려줍니다.
4. 다음 요소 탐색
  현재 초점이 위치한 곳에서 다음 요소의 정보를 VoiceOver 음성으로 들려줍니다.
5. 직접 탐색
  마우스로 요소를 직접 선택하여 탐색합니다.
6. 현재 초점이 위치한 요소의 접근성 항목을 나타냅니다.
  항목은 Label(대체 텍스트), Value(값), Traits(유형 정보), Identifier(식별자), Hint(힌트 정보), User Input Labels(사용자 입력 텍스트 정보)입니다.
[출처 : NULI]

Android : Lint

Android 앱 개발도구인 Android Studio 의 Lint를 통해 개발과정에서 접근성을 수동 검사할 수 있습니다.

사용법

Analyze > Inspect Code를 실행합니다.

[출처 : NULI]
Android Studio 4.1.1. 버전을 사용합니다. Android Studio Electric Eel 2022.1.1 Patch 2버전이면 Code 메뉴에 inspect Code가 보입니다.

[출처 : NULI]
Inspection profile에서 더보기 버튼을 실행합니다.

[출처 : NULI]
Inspections 창에서 Lint > Accessibility 항목 중 “Image without contentDescription” 항목과 “Missing accessibility label”을 체크합니다.
Android에서 Accessibility 항목 중 주의 깊게 봐야 할 이슈는 바로 이미지 대체 텍스트와 입력 서식 라벨에 대한 이슈입니다.
Severity를 Error로 체크해 주세요. Error 이슈를 해결하기 전까지는 빌드 성공을 할 수 없습니다.

[출처 : NULI]
진단 범위도 설정해야 합니다. 모든 범위 [In All Sccopes]

[출처 : NULI]
OK를 누르고 코드를 확인합니다. contentDescription 이 없는 ImageView 또는 ImageButton에 빨간색으로 표시된 것을 확인할 수가 있습니다. labelFor 또는 hint가 없는 EditText 역시 빨간색으로 표시된 것을 볼 수 있습니다.

[출처 : NULI]
이슈 해결 : ImageView 클래스에 contentDescription을 코드에서 추가합니다. 빨간색으로 표시되었던 코드가 노란색 코드로 변경됩니다.

[출처 : NULI]
이슈 해결 : EditText 역시 hint 코드를 추가합니다. 빨간색으로 표시되었던 코드가 노란색 코드로 변경됩니다.

[출처 : NULI]

결론

접근성은 시작은 있지만 끝이 없는 작업입니다.
오류 항목을 정기적으로 점검하여 접근성 개선을 한다면 점차 검사를 할 항목이 줄어들게 될 것입니다. 모두가 차별 없이 서비스를 이용할 수 있도록 접근성 유지를 위한 모두의 노력이 필요합니다. 무엇보다 접근성 작업은 서비스를 제공한다면 선택이 아닌 필수로 지켜야하는 항목임을 잊지 말아야 합니다.

접근성 작업 시 점검 필수사항

접근성 가이드(WCAG, KWCAG, WAI-ARIA) 내용 숙지
접근성 체크리스트 작성
접근성 자동 및 수동 검사(스크린리더) 진행
접근성 검사 툴(Lighthouse Accessibility 등) 활용 오류 항목 개선 및 내용 정리
접근성 사용자 테스트
접근성 정기적인 모니터링

관련 용어 설명

관련 WCAG 2.2 성공 기준