kyu-log
개요
최근 함수랑 산악회 라는 FE 동아리에서 오픈 소스 기여하는 활동을 운영중에 있습니다. 제가 정말 애정하고, 좋아하는 분들만 모여있는 커뮤니티입니다.
이번엔 운 좋게도 활동장으로 선정되어서, ‘함수랑 기여해’ 라는 활동을 직접 운영중에 있습니다. 활동 내용은 전부 공개되어있습니다! 이번엔 우연히 세 분 다 디자인 시스템에 관심이 많아. Astryx 라는 오픈소스에 기여하기로 했습니다.
Astryx란 Meta에서 만든 React 기반 component 라이브러리를 말합니다. 이 라이브러리에 기여하기로 하면서 이슈 목록을 훑어보고 있던 도충 다음과 같은 흥미로운 이슈를 발견했습니다.
흥미로운 이슈 발견!
SegmentedControl is 32px at size="lg", below the 44px touch-target floor at every size · Issue #6013
글을 놓고 요약을 하면 이렇습니다.
이슈 제보자: “너 WCAG 안 지켰어, 우리 팀이 그래서 너 거 쓰다가 문제 생겼잖아.” 메인테이너: “아냐 나 잘 지켰어, 우린 WCAG 에서 AA 등급을 지키고자 하고, 너가 말하는 건 AAA야. 우린 최소치를 지킬 의무가 있지, 최대치를 지킬 의무는 없어” WCAG는 무엇이고 어떻게 강제력을 갖는가
WCAG는 Web Content Accessibility Guidelines의 약자입니다. 글자 단위로 보면 Web Content(웹 콘텐츠)에 대한 Accessibility(접근성) Guidelines(지침)이고, 발행 주체는 W3C입니다. 여기서 W3C란 World Wide Web Consortium, 즉 HTML과 CSS 표준을 관리하는 그 단체를 말합니다.
저도 몰랐던 사실인데, 접근성에도 버전이 있습니다!
2.0(2008), 2.1(2018), 2.2(2023) 순으로 이어져 왔고, 각 버전은 이전 버전을 대체하지 않고, 얹어서 쌓아가는 형식입니다. 즉, 2.1은 2.0의 모든 기준을 그대로 품은 채 새 기준을 추가했고, 2.2도 마찬가지입니다. 그래서 2.2를 만족하면 2.0은 자동으로 만족하지만, 반대는 성립하지 않습니다.
이름 그대로 법이 아니라 지침입니다. 그런데 실무에서는 법처럼 작동하는데, 각국 법령에서 보통 WCAG를 참조하는 방식으로 강제력을 갖기 때문입니다. 한국은 이를 번안한 KWCAG를 또 따로 씁니다.
여기서 KWCAG란 Korean Web Content Accessibility Guidelines, 즉 앞에 Korean이 붙은 것 외에는 같은 이름의 한국형 지침을 말합니다.
즉 접근성의 법령과도 같은 느낌이죠. 그래서 제품 팀에서 "WCAG 지켰냐"는 질문은 취향이 아니라 규범을 묻는 질문이 됩니다.
항상 따라오는 문자 A / AA / AAA는 뭘까?
WCAG의 개별 항목은 Success Criterion이라고 부르며, 줄여서 SC라고 씁니다. 여기서 Success Criterion이란 "이 조건을 만족하면 통과"라는 식으로 검증 가능하게 적힌 개별 기준을 말합니다. 그리고 모든 SC에는 A, AA, AAA 중 하나의 등급이 붙어 있습니다.
A는 최소한입니다. 이것도 안 지키면 아예 못 쓰는 사용자가 생기는 수준입니다. AA는 사실상의 업계 기준선으로, 대부분의 법령과 기업 정책이 요구하는 지점입니다. AAA는 이상적 목표인데, W3C 스스로 사이트 전체에 AAA를 만족시키는 것은 일반적으로 가능하지 않다고 명시해 두었습니다.
It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.(WCAG 2.2, Understanding Conformance)
사이트 전체에 AAA를 요구하는 정책은 권장하지 않는다는 뜻입니다. 일부 콘텐츠는 AAA를 만족시킬 방법 자체가 없기 때문입니다.
그래서 "우리는 AA를 목표로 한다"는 말은 기준을 낮추는 게 아니라 정상적인 선택입니다.
이슈 #6013에 maintainer인 cixzhang이 "Astryx targets WCAG 2.2 AA"라고 답한 것도 그런 맥락이죠. 그리고 AA를 목표로 한다는 말에는 AAA 항목은 의무가 아니라는 뜻이 함께 들어 있습니다.
버전과 등급은 따로 논다
여기가 헷갈리기 쉬운 부분입니다. 버전(2.0 / 2.1 / 2.2)과 등급(A / AA / AAA)은 서로 독립된 기준이라서, 어떤 팀의 목표는 항상 둘을 붙인 조합으로 표현됩니다.
- 2.1 + AA
- 2.1 + AAA
자격증 시험에 비유하면 이해가 빠릅니다. 시험 요강이 2023년판으로 개정되는 것이 버전이고, 내가 1급을 딸지 2급을 딸지 정하는 것이 등급입니다. 요강이 개정되었다고 내 목표 급수가 바뀌지는 않고, 반대로 급수를 올리기로 했다고 요강이 바뀌지도 않습니다.
버전은 보통 시점에 따라 정해집니다. 새 버전이 나오면 그걸 따라갈지 결정하는 문제이고, 등급은 팀이 어디까지 책임질지 정하는 문제입니다. 그래서 같은 버전 업데이트를 겪어도 등급에 따라 팀이 할 일이 다릅니다. 2.1을 따르던 AA 팀과 AAA 팀이 있다고 하면, 2.2가 나왔을 때 AA 팀은 2.2에서 새로 추가된 SC 중 A와 AA 등급만 확인하면 됩니다. 2.2에 새로 들어온 AAA 항목은 애초에 목표 밖이거든요. 반면 AAA 팀은 새로 추가된 것을 전부 봐야 합니다.
- 2.1 + AA ← 기존에 쓰던 조합
- 2.2 + AA ← 우리 팀은 이걸 따르기로 했으니, 2.1에서 달라진 AA 항목이 없나 확인
정리하면 버전은 "언제의 문서를 보는가", 등급은 "그 문서 중 어디까지 지키는가"입니다. 이 한 줄만 잡고 있으면 이슈로 돌아갈 준비가 됩니다.
SC 번호 읽는 법
이슈에서 다루는 기준은
2.5.8입니다. 이 숫자에는 WCAG 문서의 계층이 그대로 들어 있습니다.2.5.8의 앞 2는 4대 원칙 중 두 번째인 Operable(운용 가능)입니다. 4대 원칙은 Perceivable, Operable, Understandable, Robust이고 앞 글자를 따서 POUR라고 부릅니다.
- 2.
5.8의 가운데 5는 Operable 아래 다섯 번째 지침인 Input Modalities, 즉 마우스나 터치 같은 입력 방식에 관한 지침입니다.
- 2.5.
8의 마지막 8은 그 지침 아래 여덟 번째 개별 기준입니다.
번호 체계에서 한 가지 눈여겨볼 점이 있습니다. 새 버전에서 기준이 추가되면 기존 번호를 밀어내지 않고 뒤에 붙습니다.
그래서 끝 번호가 큰 기준은 대체로 최근에 추가된 기준입니다. 실제로
2.5.5는 2.1에서, 2.5.8은 2.2에서 추가되었습니다. 번호만 보고도 "이건 최근에 생긴 기준이겠구나" 하고 짐작할 수 있는 셈입니다.위 이슈에 적용해 보기
터치 타깃 크기에 관한 SC는 두 개이고, 둘은 등급이 다릅니다. 아래 표는 두 기준을 나란히 놓은 것입니다. 이름 옆 괄호가 그 기준의 성격이고, 뒤의 두 열이 등급과 추가된 버전입니다.
SC | 최소 크기 | 등급 | 추가된 버전 |
2.5.5 Target Size (Enhanced) | 44×44 CSS px | AAA | 2.1 |
2.5.8 Target Size (Minimum) | 24×24 CSS px | AA | 2.2 |
표에서 볼 것은 두 가지입니다. 44px는 2.1에서 AAA로 먼저 들어왔고, 2.2가 AA 등급에도 터치 타깃 기준이 필요하다고 보고 새 SC를 추가하면서 그 값을 24px로 잡았다는 점입니다. 이름의 Enhanced(강화)와 Minimum(최소)이 이 관계를 그대로 말해 줍니다.
제보자는 "WCAG 2.2 AA Target Size (Minimum)"을 근거로 44px를 요구했습니다. 이름은 2.5.8에서, 숫자는 2.5.5에서 가져온 셈이죠. 44라는 숫자가 유독 익숙한 데는 이유가 있습니다. Apple HIG가 44pt를, Material Design이 48dp를 권장하기 때문인데, 여기서 HIG란 Human Interface Guidelines, 즉 Apple이 발행하는 플랫폼별 UI 디자인 지침을 말합니다. 44라는 값은 성인 손가락 끝이 화면에 닿는 면적에서 나온 숫자입니다. 그러니 "터치 타깃은 44"라는 감각 자체는 틀리지 않았는데, 그것을 WCAG 2.2 AA의 이름표에 붙인 것이 문제였습니다.
이 기준으로 보면
SegmentedControl의 32px는 AA 기준 24px는 넘고 AAA 기준 44px에는 못 미칩니다. Astryx가 2.2 AA를 목표로 한다면 이 component는 기준 위에 있습니다. 조금 과장하자면, 제보자의 팀은 AAA를 따르고 있을 것이라고 유추해 볼 수 있답니다.한 가지 더 있습니다. 2.5.8은 픽셀만 재는 기준이 아닙니다. 타깃이 24px보다 작아도 타깃 중심에 지름 24px 원을 그렸을 때 이웃 타깃의 원과 겹치지 않으면 통과하는 간격 예외가 있고, 문장 안에 들어간 링크는 제외되며, 같은 기능을 하는 다른 컨트롤이 페이지에 있으면 제외되는 예외 조항도 있습니다.
SegmentedControl처럼 항목이 붙어 있는 component라면 높이보다 항목 사이 간격이 오히려 더 먼저 봐야 할 지점이었습니다.정리
WCAG를 읽을 때 버전은 "어느 시점의 문서를 보는가", 등급은 "그 문서 중 어디까지 지키는가"이며 둘은 따로 정해집니다.
44px는 2.1에서 추가된 AAA 기준이고, 2.2 AA의 최소 터치 타깃은 24px입니다. 이슈 하나를 제대로 읽으려다 문서 구조까지 정리하게 되었는데, 앞으로 Astryx에서 접근성 관련 이슈를 고를 때 SC 번호와 등급부터 확인하는 습관이 생길 것 같습니다.