컴포넌트 '역할' 한 단어로 접근성까지 챙기기

디자이너 네이선 커티스가 디자인 시스템에서 ‘역할(role)’이라는 개념을 새롭게 제안했다. 비주얼은 완벽한데 인터랙션·포커스 관리·스크린리더 안내가 빠진 토글 버튼 사례에서 출발해, 피그마가 비헤이비어를 표현하지 못하는 구조적 한계를 지적한다. 그는 togglebutton 같은 역할 주석 하나가 시맨틱 요소 선택부터 키보드 조작, ARIA 속성, 레이블링까지 여덟 가지 개념을 한 번에 묶어준다고 설명한다.

"한 단어, 수많은 책무. 모든 플랫폼이 각자의 번역을 빚지고 있다."Nathan Curtis

왜 중요한가

디자인 토큰이 색상·간격 같은 시각 속성을 번들링했듯, ‘역할’은 비헤이비어와 접근성 요구사항을 번들링하는 새로운 단위다. 지금까지 디자이너와 개발자는 토글 버튼 하나를 만들 때마다 포커스 처리, 상태 관리, 스크린리더 레이블을 플랫폼별로 따로 정의해왔는데, 이 중복 작업이 접근성 누락의 주된 원인이었다. 역할 어휘를 표준화하면 디자인 산출물 자체가 접근성 계약서 역할을 하게 된다.

실무 적용

피그마 Dev Mode에서 컴포넌트 레이어에 role:togglebutton, role:indicator 같은 라벨을 붙이면, 코드 생성기가 리액트에서는 aria-pressed가 달린 button을, iOS에서는 SwiftUI 토글을, 안드로이드에서는 Compose 토글러블을 자동으로 뽑아낼 수 있다. 디자인 시스템팀이라면 역할 어휘집(대략 100~150개 수준)부터 정의하고, 이를 코드 생성 파이프라인과 연결하는 로드맵을 검토할 만하다.

교차 참고

• NN/g: Web UX: Study Guide — 웹 UX 리서치 아티클·영상을 13개 주제로 정리한 참고 가이드.

Wemeet의 관점

Wemeet이 디자인 시스템을 구축할 때도 비주얼 스펙은 꼼꼼히 챙기지만 접근성 요구사항은 QA 단계에서야 확인하는 경우가 많았다. 역할 기반 주석 체계는 디자인 단계에서부터 접근성을 강제하는 구조라, 다음 프로젝트부터는 컴포넌트 명명 규칙에 역할 어휘를 섞어보는 실험을 해볼 가치가 있다.