망할 놈의 접근성, 드디어 정복했다! (디자이너, PM 관점 A11y 정복기)
망할 놈의 접근성, 드디어 정복했다! (디자이너, PM 관점 A11y 정복기)
솔직히 말해서, '접근성(Accessibility)'이라는 단어를 처음 들었을 때, 제 머릿속은 물음표로 가득 찼습니다. '그거 개발자들이나 하는 거 아니야?', '시간도 없는데 언제 저걸 다 신경 써?'라는 생각들이 꼬리에 꼬리를 물었죠. 하지만 프로젝트를 진행하면서, 그리고 점점 더 다양한 사람들과 소통하면서 생각이 바뀌었습니다. '모두를 위한 디자인'이라는 거창한 말 말고, 진짜 '모두'를 위한 디자인을 해야 한다는 걸 깨달았죠. 특히, 법적인 문제도 무시할 수 없었습니다. 망할 놈의 WCAG... 하지만 결국, 저는 해냈습니다. 디자이너 출신 PM으로서, 제가 깨달은 접근성 디자인의 핵심과 WCAG 준수 노하우를 공유합니다. 개발자 코스프레는 절대 없습니다. 오직 PM/디자이너의 시각으로 뼈 때리는 경험과 인사이트만 담았습니다.
A11y, 왜 디자인해야 하는가? (법적 문제 말고 진짜 이유)
접근성은 단순한 '착한 일'이 아닙니다. 비즈니스적으로도 매우 중요한 문제입니다. 시각 장애인, 청각 장애인, 인지 장애인 등 다양한 사용자들이 웹사이트나 앱을 이용하는 데 불편함이 없도록 하는 것은 사용자 경험을 향상시키는 것은 물론이고, 기업의 이미지 제고에도 큰 영향을 미칩니다. 특히, 최근에는 접근성 관련 법규가 강화되면서, 이를 준수하지 않을 경우 법적인 제재를 받을 수도 있습니다. 미국의 ADA(Americans with Disabilities Act)와 같은 법은 웹사이트 접근성을 차별 금지 조항의 일부로 간주하고 있으며, 유럽의 EN 301 549 표준은 공공 부문 웹사이트 및 모바일 앱의 접근성을 의무화하고 있습니다. 한국 역시 '장애인차별금지법'에 따라 웹 접근성을 보장해야 합니다.
하지만 법적인 문제보다 더 중요한 것은 '사용자'입니다. 저는 디자인 팀에게 항상 강조합니다. "우리가 만드는 디자인은 단순히 예쁜 그림이 아니라, 사용자들의 삶에 직접적인 영향을 미치는 도구"라고요. 접근성을 고려하지 않은 디자인은 누군가를 소외시키는 행위와 같습니다. 예를 들어, 색맹인 사용자를 고려하지 않고 색상만으로 정보를 전달하는 디자인은 일부 사용자에게는 아무 의미가 없을 수 있습니다. 폰트 크기가 너무 작아서 읽기 어렵거나, 키보드만으로 웹사이트를 탐색할 수 없는 경우도 마찬가지입니다.
[이미지: 휠체어를 탄 사용자가 웹사이트를 이용하는 모습. '모두를 위한 디자인'이라는 문구 삽입]
WCAG, 악마는 디테일에 있다
WCAG(Web Content Accessibility Guidelines)는 웹 콘텐츠 접근성을 위한 국제 표준입니다. WCAG 2.1은 현재 가장 널리 사용되는 버전이며, 4가지 주요 원칙(Perceivable, Operable, Understandable, Robust)을 기반으로 다양한 지침을 제공합니다.
- Perceivable (인식 가능성): 사용자가 콘텐츠를 인식할 수 있어야 합니다. 텍스트 대체 제공, 캡션 제공, 색상 대비 확보 등이 이에 해당합니다.
- Operable (운영 가능성): 사용자가 콘텐츠를 조작할 수 있어야 합니다. 키보드 접근성 제공, 충분한 시간 제공, 발작 유발 방지 등이 이에 해당합니다.
- Understandable (이해 가능성): 사용자가 콘텐츠를 이해할 수 있어야 합니다. 가독성 확보, 예측 가능한 동작 제공, 입력 오류 방지 등이 이에 해당합니다.
- Robust (견고성): 다양한 환경에서 콘텐츠가 안정적으로 작동해야 합니다. 웹 표준 준수, 접근성 지원 기술 호환성 확보 등이 이에 해당합니다.
저는 WCAG를 처음 접했을 때, 마치 외계어처럼 느껴졌습니다. 수많은 지침과 성공 기준들을 보면서 '이걸 언제 다 지켜야 하나'라는 생각밖에 들지 않았죠. 하지만 핵심은 '디테일'에 있습니다. WCAG는 단순히 코드를 수정하는 문제가 아니라, 디자인 단계부터 접근성을 고려해야 하는 문제입니다. 예를 들어, 버튼의 색상 대비를 높이는 것은 간단한 작업이지만, 이를 통해 시각 장애인 사용자가 버튼을 쉽게 인식할 수 있도록 하는 것은 큰 의미가 있습니다.
[이미지: 텍스트와 배경색의 대비를 보여주는 이미지. 대비가 낮은 경우와 높은 경우를 비교]
실제 사례: 색상 대비 때문에 겪었던 끔찍한 경험
한번은 프로젝트에서 메인 컬러로 파스텔톤의 연한 색상을 사용하자는 의견이 나왔습니다. 보기에는 예뻤지만, WCAG 기준에 따르면 색상 대비가 너무 낮아서 접근성 문제가 심각했습니다. 특히, 텍스트와 배경색의 대비가 낮아서 시각 장애인 사용자뿐만 아니라 일반 사용자도 콘텐츠를 읽기 어려울 수 있었습니다.
저는 디자인 팀에게 강력하게 반대했습니다. "예쁜 쓰레기를 만들지 말자"라고 말이죠. 결국, 디자인 팀은 색상 대비를 높이고, 텍스트 크기를 키우는 방향으로 디자인을 수정했습니다. 처음에는 디자인 팀이 불만을 표했지만, 수정된 디자인이 사용자 경험을 향상시킨다는 것을 확인하고는 만족했습니다.
[이미지: 색상 대비를 조정하기 전과 후의 디자인 비교. WCAG 기준을 충족하는 색상 대비를 강조]
디자인 시스템, A11y를 위한 최고의 무기
디자인 시스템은 디자인 요소와 컴포넌트를 재사용 가능하도록 체계화한 것입니다. 디자인 시스템을 구축하면 디자인의 일관성을 유지하고, 개발 효율성을 높일 수 있습니다. 또한, 접근성을 고려한 디자인 시스템을 구축하면, 모든 프로젝트에서 일관된 접근성을 보장할 수 있습니다.
저는 디자인 시스템을 구축할 때, 접근성을 가장 중요한 요소 중 하나로 고려합니다. 예를 들어, 모든 컴포넌트에 대해 키보드 접근성을 제공하고, 스크린 리더 사용자를 위한 대체 텍스트를 제공합니다. 또한, 색상 대비를 높이고, 폰트 크기를 조정하는 등 다양한 접근성 관련 설정을 디자인 시스템에 포함시킵니다.
[링크: 디자인 시스템 구축 가이드]
디자인 시스템을 활용하면, 디자이너와 개발자가 접근성에 대해 더 이상 고민할 필요가 없습니다. 디자인 시스템에 정의된 접근성 규칙을 따르면, 모든 프로젝트에서 일관된 접근성을 유지할 수 있습니다. 이는 시간과 노력을 절약하는 것은 물론이고, 사용자 경험을 향상시키는 데에도 큰 도움이 됩니다.
AI 도구, A11y 전문가가 되어보자
최근에는 AI 도구를 활용하여 접근성을 쉽게 검사하고 개선할 수 있습니다. 예를 들어, Google Lighthouse, WAVE, axe DevTools와 같은 도구를 사용하면 웹사이트의 접근성 문제를 자동으로 진단하고, 개선 방안을 제시해줍니다.
저는 이러한 AI 도구를 적극적으로 활용하여 프로젝트의 접근성을 개선합니다. 예를 들어, 디자인 단계에서 Figma 플러그인을 사용하여 색상 대비를 검사하고, 개발 단계에서 웹사이트의 접근성 문제를 진단합니다. AI 도구는 접근성 전문가가 아니더라도 쉽게 접근성 문제를 해결할 수 있도록 도와줍니다.
물론, AI 도구가 모든 문제를 해결해주는 것은 아닙니다. AI 도구는 단순히 기술적인 문제를 진단하고 개선하는 데 도움을 줄 뿐이며, 인간의 판단과 경험이 여전히 중요합니다. 저는 AI 도구를 활용하는 것과 동시에, 접근성 관련 교육을 이수하고, 사용자 테스트를 통해 실제 사용자들의 의견을 수렴합니다.
[링크: Google Lighthouse 사용법]
A11y, 결국은 공감 능력이다
접근성은 단순히 WCAG 기준을 준수하는 것이 아닙니다. 그것은 다양한 사용자의 요구를 이해하고, 그들의 입장에서 생각하는 공감 능력입니다. 접근성을 고려한 디자인은 단순히 '착한 디자인'이 아니라, '모두를 위한 디자인'입니다.
저는 앞으로도 접근성을 디자인의 최우선 순위로 두고, 모든 사용자가 만족할 수 있는 제품을 만들기 위해 노력할 것입니다. 그리고 여러분도 저와 함께, '모두를 위한 디자인'을 만들어나가는 데 동참해주시길 바랍니다.
결론: 접근성은 법적인 의무를 넘어, 모두를 위한 디자인의 핵심입니다. WCAG 기준을 준수하고, 디자인 시스템을 활용하며, AI 도구를 적극적으로 활용하여 접근성을 향상시킬 수 있습니다. 하지만 가장 중요한 것은 사용자에 대한 공감 능력입니다. 지금 바로 여러분의 디자인에서 접근성 문제를 찾아보고, 개선하는 노력을 시작하십시오. 망설이지 마세요!
행동 촉구: 지금 바로 여러분의 웹사이트나 앱의 접근성 문제를 진단해보세요. Google Lighthouse, WAVE, axe DevTools와 같은 도구를 사용하여 쉽게 접근성 문제를 진단할 수 있습니다. 그리고 지금 바로 개선을 시작하세요!
[링크: WAVE 도구 사용법]
[링크: axe DevTools 사용법]