콘텐츠로 바로가기

Universal Design & Assistive Technology

마우스나 터치 같은 일반적인 물리 입력 수단을 넘어, 모든 사용자가 보조 공학 장치(Assistive Technology)를 통해 시스템의 수리적 기능을 통제할 수 있게 만드는 범용적 구조를 다룹니다.

sys.entry
M

Me

hyunyoun's Blog

posts7 min read

1. Overview

보편적 설계 및 보조 공학(Universal Design & Assistive Technology, UAT)은 인터페이스의 수리적 소유권을 신체적 능력이 서로 다른 모든 사용자에게 물리적으로 양도하는 '데이터 민주주의 물리학'입니다.

학습자는 화면을 볼 수 없는 사용자의 하드웨어를 위해 정보를 음성 수치로 변환하는 스크린 리더 최적화와, 시각적 개체를 수리적으로 명세하는 **ARIA (Accessible Rich Internet Applications)**의 역학을 배웁니다. 특히, 마우스 동작의 수치 궤적을 탭(Tab) 키의 수리적 '점프'로 전이시키는 키보드 내비게이션 물리 수순을 익힙니다. 이를 통해 소프트웨어가 소수의 특권이 아닌 모든 인류의 물리적 도구가 되게 만드는 하이엔드 접근성 거버넌스 역량을 확보합니다.

2. Scope & Boundaries

In-Scope

  • Semantic HTML for AT: 구조적 태그 수치가 보조 기기의 물리적 해석 엔진에 미치는 영향
  • ARIA Attributes Logic: 복합적인 UI 개체의 수리적 역할(Role)과 상태(State) 명세
  • Focus Management Physics: 포커스 수치가 물리적 시퀀스에 따라 유실 없이 이동하는 기제
  • Screen Reader Interaction: 보이스오버(VoiceOver) 등 음성 수리 출력 엔진의 제어 및 최적화
  • Switch & Braille Sync: 물리적 스위치 제어나 점자 수치 출력 기기와의 데이터 동기화

Out-of-Scope

  • 장벽 없는 물리적 건축 설계 (Universal Design in Architecture)
  • 보조 공학 하드웨어의 임베디드 펌웨어 수리 구현 (03-XX-XX 영역에서 분담)

Boundaries

  • UAT vs. UI Implementation: 일반 구현이 '기능 작동'에 집중한다면, UAT는 '정보가 시각 이외의 다른 물리적 채널(청각, 촉각)로 수리적으로 완벽히 변환되는가'에 집중하여 구분합니다.

3. Counterexample

  • 단순히 "대체 텍스트(AltAlt texttext) 넣기"라 설명하는 것은 UAT 학습이 아닙니다. 왜 메뉴 항목의 수리적 순서(SourceSource OrderOrder)가 시각적 물리 배치와 다를 때 보조 기기 사용자가 상황 파악에 2배 이상의 수리적 연산 시간을 소모하는지 증명할 수 있어야 하며, 포커스 가두기(Focus Trapping) 수순이 누락된 모달 창이 왜 물리적으로 '빠져나올 수 없는 감옥'이 되는지 논증하지 못한다면 보편적 설계의 본질을 이해하지 못한 것입니다.

4. Prerequisites

  • Visual Grammar & Design Systems (Basic): 12-02-XX의 시맨틱 레이아웃 수치 이해가 필수입니다.
  • Event-Driven UX & Micro-interactions (Recommended): 12-03-01의 사용자 입력 트리거 이해가 권장됩니다.

5. Learning Map

  1. Information Beyond Sight: 화면이라는 수성 정보를 텍스트와 음성 수치로 투명하게 분리합니다.
  2. Structural Integrity: 보조 기기가 물리적으로 길을 찾을 수 있는 수리적 이정표(Landmark)를 세웁니다.
  3. The Tab Sequence: 마우스의 자유로운 궤적을 키보드의 수리적 직렬화 수순으로 고정합니다.
  4. Hardware Inclusivity: 세상의 모든 물리적 입력 장치와 수치적으로 대화하는 하이엔드 호환성을 완성합니다.

6. Learning Topics

Basic

Core: 시맨틱 마크업과 정보의 수리 명세 (Semantic Physics)

  • Why to Learn: 의미 없는 수치(divdiv)가 아닌 의미 있는 수치(button,navbutton, nav)를 사용해야 보조 기기 성능이 물리적으로 발휘되기 때문입니다.
  • What to Learn:
    • Semantic vs Generic Elements: 기계가 읽는 정보의 수리적 '가치' 차이
    • Heading Structure Law: 정보의 물리적 뎁스(Depth)를 수리적으로 유지하는 법
    • Alternative Text Dynamics: 물리적 이미지를 수리적 언어로 치환하는 보정 수순
  • How to Learn:
    • 웹페이지에서 CSS를 제거하고, 텍스트 수치만으로 정보의 물리적 계층 구조가 완벽히 파악되는지 실습
    • 스크린 리더를 켜고 화면을 보지 않은 채 특정 수치 데이터를 찾아가는 물리적 소요 시간 측정
  • Implement: 이미지 수치 데이터에 최적의 수리적 대체 텍스트를 제안하는 기초 Alt_Gen_Bot

Core: ARIA 모델과 상태 거버넌스 (ARIA Dynamics)

  • Why to Learn: 표준 HTML 수치만으로 표현하기 힘든 복잡한 UI의 수리적 정체성을 보조 기기에 물리 전달하기 위함입니다.
  • What to Learn:
    • ARIA Roles: alert, menu, tablist 등 개체의 물리적 역할 수치화
    • ARIA States & Properties: aria-expanded, aria-hidden 등 현재의 수리적 상태 보고
    • Live Regions Physics: 화면의 특정 수치가 실시간으로 변할 때(aria-live)의 물리적 알림 강도
  • How to Learn:
    • 커스텀 콤보박스의 수리적 확장 상태를 aria-expanded 수치로 제어하며, 보조 기기가 물리적으로 '열림'으로 읽는지 실습
    • ARIA 위반 사례가 보조 기기 하드웨어의 수리적 연산 로직을 어떻게 파괴하는지 분석 훈련
  • Implement: 컴포넌트의 수리적 상태에 따라 ARIA 속성 수치를 자동 갱신하는 A11y_Sync_Engine

Practical

Core: 키보드 인터랙션과 포커스 물리 (Focus Mechanics)

  • Why to Learn: 마우스를 물리적으로 조작할 수 없는 사용자가 키보드의 수치 명령만으로 모든 과업을 수리적으로 완보하게 하기 위해서입니다.
  • What to Learn:
    • Logical Tab Order: 시선 흐름과 일치하는 수리적 'Tab' 이동 수순
    • Visual Focus Indicators: 현재 수치 제어 위치를 알려주는 물리적 'Outline'의 가시성
    • Keyboard Shortcuts Strategy: 특정 수리적 기능을 즉각 물리 실행하는 단축키 설계 법칙
  • How to Learn:
    • 모달 창이 떴을 때 Focus Trap 수순을 적용하여, 'Tab' 키의 수리적 범위가 모달 내부로 물리 격리되는지 실습
    • Skip to Content 수치 링크가 사용자의 물리적 반복 이동 수고를 얼마나 수리적으로 덜어주는지 데이터 측정
  • Implement: 웹페이지의 모든 대화형 개체에 대한 수리적 탭 순서를 분석하여 시각화하는 Focus_Flow_Analyzer

Advanced

Core: 적응형 보조 공학 및 하이엔드 포용 (Advanced Governance)

  • Why to Learn: 시선 추적 하드웨어나 뇌-컴퓨터 인터페이스(BCI) 같은 미래의 물리적 입력 수단과 수리적으로 공명하기 위함입니다.
  • What to Learn:
    • Switch Control Optimization: 단순 물리 버튼 하나로 복잡한 수리 선택지를 지배하는 법
    • Eye-tracking Input Mapping: 시선 수치의 고착 시간을 클릭 수치로 물리 전이하는 기제
    • Modular Accessibility Patterns: 어떤 수리적 환경에서도 접근성 수치가 물리적으로 부서지지 않는 '견고한(RobustRobust)' 패턴
  • How to Learn:
    • 스마트폰의 스위치 제어 기능을 켜고, 수리적 스캔 바가 물리적 버튼에 안착하는 수환 분석 실습
    • Web Speech API를 활용하여 목소리의 물리적 파동을 시스템의 수리적 명령어로 물리 치환하는 프로젝트
  • Implement: 다양한 보조 기기 하드웨어로부터 들어오는 수리적 커맨드를 시스템 표준 신호로 매핑하는 Universal_Adapter

7. Terminology

Term (EN / ko, abbr) 1문장 정의 단계(기본/권장/실무/심화) 역할/맥락 관련 개념 유사/대비/함께 사용 오해 포인트 Evidence(Primary/Secondary/Industry) Flags(core)
Screen Reader 화면의 수리적 텍스트와 구조를 청각적 물리 소리로 변환하여 출력하는 보조 공학 소프트웨어입니다. 기본 출력 수단 VoiceOver / TTS Narrator 단순 읽기가 아님 Industry core
ARIA HTML의 수리적 표현력을 확장하여 보조 기기에 개체의 물리적 정체성을 수치적으로 보고하는 기술 표준입니다. 추천 명세 확장 Role / State Semantic HTML 보조적 수단임 Industry core
Tab Order 키보드의 'Tab' 키를 물리적으로 누를 때 포커스 수치가 이동하는 수리적 시퀀스의 경로입니다. 기본 제어 흐름 Focus / Logic Sequence 순서가 핵심임 P1:CS2023 core
Assistive Tech 장애를 가진 사용자의 물리적 기능을 수리적으로 보완하거나 대체하는 모든 하드웨어 및 소프트웨어의 총칭입니다. 추천 기초 정의 AT / Inclusive Accessibility 범주가 넓음 P1:CS2023 core

8. References

Primary

Secondary

  • [Don't Make Me Think: Revisited] Steve Krug — Including a section on accessibility.
  • [A Web for Everyone] Sarah Horton — Practical inclusive design strategy for the web.

Industry

  • [W3C: WAI-ARIA Authoring Practices] — The technical implementation bible for ARIA.
  • [Web Accessibility Initiative (WAI)] — Global standards and resources for physics of AT.

9. Final Checklist

Primary

  • '시맨틱 마크업'이 보조 기기 하드웨어의 '탐색 수리 속도'에 미치는 긍정적 물리 영향을 설명 가능한가? (P1)
  • 'ARIA' 속성이 없을 때 복합적인 수리적 UI(Tab, Accordion)가 물리적으로 '해석 불능'이 되는 현상을 논증할 수 있는 가? (P1)

Secondary

  • '수리적 순서'와 '물리적 순서'의 불일치가 사용자의 뇌 하드웨어에 일으키는 인지적 수수료를 수치적으로 소통 가능한가?
  • Tab Stop 수치를 고정하여 긴 리스트 속에서도 핵심 물리 경로로 즉각적인 수리 도약이 가능케 할 수 있는 가?

Industry

  • 실무 서비스의 접근성 검수 시, 키보드만으로 페이지 내 모든 수리적 과업의 '완수 수치'를 물리 검증할 수 있는 가? (SFIA)
  • Accessibility Tree 수치 분석을 통해 브라우저가 보조 기기에 어떤 물리적 정보 조각들을 수리적으로 전달하는지 진단할 수 있는 가?