R&E 연구노트 ⑲ 표준으로 만든 접근성, WCAG와 적응형 UI

연구노트 시리즈.

UI를 "크게 키웠다" 정도로 끝내지 않으려면 기준이 필요하다. 출품작에서는 국제·국내 접근성 표준을 근거로 삼았다.

WCAG 2.1과 POUR

W3C의 웹 콘텐츠 접근성 지침(WCAG) 2.1은 네 가지 원칙으로 이뤄진다. 머리글자를 따 POUR라 부른다.

• 인지 가능성(Perceivable): 텍스트 대안, 자막, 색상 대비 등.
• 운용 가능성(Operable): 키보드 접근, 시간 조절, 포커스 가시성 등.
• 이해 가능성(Understandable): 언어 식별, 일관된 내비게이션, 오류 식별 등.
• 견고성(Robust): 스크린 리더 등 보조 기술에서 안정적으로 해석.

각 기준은 A·AA·AAA로 나뉘며, 공공기관은 보통 AA 준수가 의무다.

색상 대비

WCAG는 일반 텍스트 명도 대비를 AA에서 4.5:1, AAA에서 7:1로 요구한다(큰 텍스트는 각각 3:1, 4.5:1). 고령층은 수정체 노화로 청색 계열 시인성이 떨어지므로, 노인 모드에서는 청색을 최소화하고 7:1 이상의 고대비 무채색 조합을 썼다.

고령층 UI 가이드라인

노화에 따른 시각·운동·인지 변화를 반영한 기준들이다.

• 본문 글자 16px 이상(권장 18px 이상), 줄 간격 1.5배 이상.
• 터치 영역 최소 44×44px(모바일 권장 48dp), 인접 버튼 간격 8px 이상.
• 색만으로 정보를 전달하지 않기, 산세리프 글꼴(한국어는 Pretendard, 노토 산스 KR).
• 고령층 반응시간은 청년층의 약 1.5배이므로 시간 제한 작업은 피하거나 조정 가능하게.

국내에서는 한국산업표준 무인정보단말기 접근성 지침(KS X 9211:2022)과 과학기술정보통신부 고시가 함께 적용된다.

연령대별 UI

추정된 연령은 네 그룹으로 나뉘고, 각 그룹에 맞는 스타일을 적용했다.

노인 모드는 폰트와 터치 영역을 키우고 대비를 높이며, 메뉴 카테고리와 한 화면의 항목 수를 줄여 인지 부담을 낮추고 음성 안내를 기본 켠다.

CSS 변수로 한 번에 바꾸기

이 전환을 깔끔하게 구현한 도구가 CSS 변수다. 디자인 토큰을 변수로 선언해 두고, 모드별로 값만 덮어쓴다.

:root {
  --font-size-base: 16px;
  --color-text: #1a1a1a;
  --color-bg: #ffffff;
  --touch-target: 48px;
}
.senior-mode {
  --font-size-base: 24px;
  --color-text: #000000;
  --color-bg: #ffff00;
  --touch-target: 64px;
}

연령 추정 결과에 따라 루트 요소의 클래스를 토글하기만 하면, 그 변수를 참조하는 모든 UI 요소가 한꺼번에 바뀐다. 새 연령대 프로필을 추가할 때도 스타일 정의만 더하면 되니 확장성과 유지보수성이 좋다. 설계 시점에 기본 가이드라인을 세우는 정적 접근과, 런타임에 얼굴 연령으로 모드를 바꾸는 동적 접근을 결합한 셈이다.