방향 설정 - by. UXKM

  • A11Y
  • A11y Creation Tech
  • 모바일 접근성 제작 기법
  • 방향 설정
요약 설명

관련 지침(적응성) : 콘텐츠를 특정 화면 방향으로만 고정하지 않고 가로/세로 모두에서 이용 가능한가?
기기 거치대·손목 제한·분할 화면 사용자는 회전이 불편할 수 있습니다. 한 방향만 허용할 때는 예외 사유와 동등한 대체 경로가 필요합니다.

모바일 앱 접근성 체크리스트(MACAG) 전체 보기
WCAG 2.2 — Orientation

필요성

강제 세로·가로는 물리적 제약뿐 아니라 태블릿·폴더블·외부 디스플레이 등 다양한 폼 팩터에서도 문제가 됩니다. 핵심 기능이 한 방향에서만 가능하면 사용자는 앱을 포기할 수 있습니다.

대상

  • 거치대·휠체어 사용자

    기기를 회전하기 어려운 각도로 고정하는 사용자.

  • 한 손 사용

    세로 고정이 편한 경우에도 가로 콘텐츠를 봐야 할 때가 있는 사용자.

  • 태블릿·멀티윈도우

    가로 폭이 줄어든 상태에서도 레이아웃이 깨지지 않아야 하는 사용자.

  • 개발자·QA

    회전 각도·크기 클래스별 회귀 테스트가 필요합니다.

체크리스트

  • 양방향 레이아웃

    주요 화면이 가로·세로 모두에서 스크롤·버튼·입력이 가능한가?

  • 예외 정당성

    한 방향 고정이 법·규격·본질적 특성(예: 카메라 뷰파인더) 때문인지 문서화했는가?

  • 전환 시 상태

    회전 후 입력값·스크롤 위치·포커스가 유지되는가?

  • 전체 화면 모드

    비디오·게임 전용 모드에서도 나가기·설정 경로가 있는가?

구현 시 참고

  • Android: screenOrientation 값을 가능한 한 제한하지 않고, 필요 시 사용자에게 이유를 안내합니다.
  • iOS: 지원 방향과 Info.plist 설정, Adaptive Layout 제약을 양방향에서 검증합니다.
  • WebView는 viewport·safe area를 회전별로 테스트합니다.

점검 방법

  • 실기기에서 회전 잠금 on/off 각각으로 주요 시나리오를 수행합니다.
  • 분할 화면·멀티태스킹으로 앱 가로폭이 줄었을 때를 시뮬레이션합니다.

개발방법

아래 코드는 방향 설정 검사항목을 구현할 때 바로 참고할 수 있는 기본 예시입니다. 가로/세로 전환 시 기능 손실 없이 동일 과업을 수행할 수 있도록 레이아웃을 구성합니다.

네이티브

iOS (Swift)

Android

하이브리드

html

Vue

React

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

결론

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

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

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