figma

디자인 시스템의 미래는 접근 (새 탭에서 열림)

디자인 시스템은 접근성을 제품 전반에 일관되게 적용할 수 있는 가장 강력한 기반이다. 공통 컴포넌트와 가이드에 접근성 기준을 내장하면 색상, 구조, 상호작용 등의 품질을 규모 있게 관리하고 변경 사항도 전체 제품에 전파할 수 있다. 앞으로는 WCAG 같은 표준과 AI 도구를 활용하되, 접근성을 사후 점검이 아닌 제품 개발 초기부터 우선순위로 삼아야 한다.

디자인 시스템과 접근성의 결합

  • 전 세계 약 10억 명이 장애를 가지고 있으며, 이들의 연간 가처분소득은 약 1조 2천억 달러로 추정된다.
  • 접근성은 법적 의무나 체크리스트를 넘어 사용자 신뢰, 기업의 신뢰도, 성장 기회를 만드는 요소다.
  • 디자인 시스템에는 다음과 같은 접근성 기준을 포함할 수 있다.
    • 충분한 전경색·배경색 대비
    • 접근성을 고려해 설계하고 테스트한 UI 컴포넌트
    • 일관된 상호작용 규칙
    • 구현자와 디자이너를 위한 구체적인 문서
  • 공통 컴포넌트를 사용하면 한 번 수정한 접근성 개선 사항을 제품 전체의 컴포넌트 인스턴스에 확산할 수 있다.
  • 일관성, 문서화, 지속적인 피드백 구조가 접근성 실천을 조직 전체로 확장하는 기반이 된다.

접근성 확산을 돕는 디자인 시스템의 성장

  • 2020년 Material Design 조사에서 기업 내부 디자인 시스템 구축은 전년 대비 22% 증가했다.
  • 응답자의 47%는 자신의 디자인 시스템에 접근성 가이드라인이 포함되어 있다고 답했다.
  • 디자인 시스템에 포함되는 대표 산출물은 다음과 같다.
    • 아이콘 라이브러리: 84%
    • UI 키트: 83%
    • 스타일 가이드: 75%
    • 컴포넌트 코드 라이브러리: 74%
  • WCAG 같은 표준, 접근성 도구의 발전, 법적·상업적 요구가 접근성 적용을 촉진하고 있다.
  • 그럼에도 2022년 기준 웹의 접근성 수준은 약 3%에 불과해, 실제 적용에는 여전히 큰 격차가 남아 있다.

접근성 분야의 책임 있는 AI 활용

  • 디자인 시스템 팀은 AI를 활용해 접근성 문제를 더 빠르게 발견하고 개선하려 하고 있다.
  • 기사에서 언급하는 AI 기반 도구는 다음과 같은 작업을 자동화하는 것을 목표로 한다.
    • 이미지에 대체 설명 자동 생성
    • 레이블이 없는 버튼에 적절한 레이블 추가
    • 시맨틱 구조 도입
    • 웹 접근성 문제 탐지 및 수정
  • AI 도구는 접근성 검수와 반복 작업을 보조할 수 있지만, 자동화만으로 포괄적인 접근성을 보장할 수는 없다.
  • 생성된 설명이나 수정 결과가 실제 맥락에 적합한지 사람이 검토하고, 장애 당사자의 피드백과 표준 검사를 함께 활용해야 한다.

처음부터 접근 가능한 제품 만들기

  • 접근성은 개발 완료 후 결함을 수정하는 단계가 아니라 디자인 시스템과 제품 설계 초기부터 포함해야 한다.
  • 공통 컴포넌트에 접근성 요구사항을 내장하면 개별 팀이 매번 같은 문제를 다시 해결하지 않아도 된다.
  • 색상, 컴포넌트 동작, 의미 구조, 문서화 등 모든 시스템 구성 요소에서 접근성을 점검해야 한다.
  • 접근성을 기본값으로 만들수록 제품 팀의 부담은 줄고, 전체 제품 생태계의 품질은 높아진다.

실용적인 적용 방향

  • 디자인 토큰과 컴포넌트에 색상 대비, 키보드 탐색, 포커스 상태, 시맨틱 구조를 기본 규칙으로 포함한다.
  • WCAG 기준에 따라 자동 검사와 수동 테스트를 함께 운영한다.
  • AI는 반복적인 탐지·생성 작업에 활용하되 최종 판단은 전문가와 실제 사용자 검증을 거친다.
  • 접근성을 디자인 시스템의 부가 기능이 아니라 모든 컴포넌트의 필수 품질 기준으로 관리해야 한다.