접근성(a11y)을 포트폴리오에 적용하기
접근성(a11y)은 모든 사용자를 위한 디자인이다
디자인 시스템이나 제품 설계에서 종종 간과되기 쉬운 요소 중 하나가 접근성, 즉 a11y(accessibility)이다. a11y는 "accessibility"라는 단어에서 가운데 11개의 알파벳을 생략해 만든 줄임말로, 다양한 제약을 가진 사용자도 제품을 동등하게 사용할 수 있도록 설계하는 것을 의미한다. 이는 시각, 청각, 인지, 운동 능력 등 각기 다른 조건의 사용자들이 서비스를 불편함 없이 사용할 수 있도록 배려하는 디자인을 포함한다. 디자이너가 제품을 누구나 사용할 수 있는 형태로 설계한다는 것은 단순히 도의적인것을 위한 일뿐만 아니라, 비즈니스적으로 반드시 고려해야 할 기본 요소다.
디자인에서 a11y를 고려하지 않으면 벌어지는 일들
전 세계 인구의 약 15%가 어떤 형태로든 장애를 가지고 있다고 한다. 이는 단순히 소수 집단을 위한 디자인이 아니라, 전체 사용자 경험을 확장하는 전략적인 결정이라는 뜻이다. 실제로 접근성을 고려하지 않으면 다음과 같은 문제가 발생할 수 있다.
제품을 사용할 수 없는 사용자층이 생기고, 이는 곧 사용자 이탈로 이어진다.
특히 미국의 특정 주에서는 법적 기준을 충족하지 못할 경우 벌금이나 서비스 중단 등의 문제가 발생할 수 있다.
A11y의 부재는 사용자경험의 일관성이 무너지며, 시스템 측면에서 전체 제품의 확장성이 약화될 수 있다.
특히 포트폴리오에서는 케이스 스터디의 문제 해결 범위가 좁아 보이며, 디자이너의 깊이 있는 사고력을 증명하기 어려워진다.
케이스 스터디에 자연스럽게 a11y를 녹이는 7가지 방법
접근성 고려는 거창할 필요 없다. 케이스 스터디에 다음과 같은 요소들을 자연스럽게 포함시키는 것만으로도 충분히 전문성을 드러낼 수 있다.
시각적 대비 & 컬러 사용
버튼 텍스트와 배경 간의 명도 대비를 4.5:1 이상으로 설정해 시각 장애 사용자도 쉽게 읽을 수 있도록 한다.
키보드 네비게이션과 포커스 처리
컴퍼넌트 내 모든 엘리먼트는 Tab과 arrow 키로 접근 가능해야 하며, 현재 위치를 시각적으로 알 수 있도록 포커스 링을 명확하게 디자인한다.
스크린 리더와의 호환 고려
UI에는 aria-label 을 사용하거나 시각적 텍스트 레이블을 함께 제공해 스크린 리더 사용자가 기능을 정확히 인지할 수 있도록 한다.
폰트 크기와 행간의 유연성
최소 12pt 이상의 가독성 있는 폰트를 사용하며, 사용자가 시스템 설정을 통해 스크린 크기를 줄이거나 키웠을 때도 레이아웃이 깨지지 않도록 반응형 디자인으로 설계한다.
접근성 테스트 툴 활용
Figma의 Contrast plugin이나 macOS의 VoiceOver 등 실제 사용자 시나리오를 테스트할 수 있는 툴을 활용해 설계의 완성도를 높인다.
버튼 사이즈 최소 기준 준수
모바일에서는 버튼 크기를 최소 40~48px 이상으로 설정해 누구나 손쉽게 탭할 수 있도록 한다.
UX Writing을 통한 정보 전달 최적화
메시지를 간결하고 명확하게 작성함으로써, 스크린 리더 사용자도 내용을 쉽게 듣고 이해할 수 있도록 한다.
좋은 디자인은 누구나 사용할 수 있어야 한다
요즘 디자인에서 접근성은 선택이 아니라 기본이다. 단지 법을 지키기 위한 수단이 아니라, 모든 사용자가 제품의 가치를 동등하게 경험할 수 있게 하는 디자인 철학이다. 그리고 그 철학은, 케이스 스터디 안에 자연스럽게 녹아 있을 때 더욱 채용매니저에게 본인의 전문성을 어필할 수 있는 설득력을 가진다. 포트폴리오 속 당신의 디자인이 진짜 사용자 중심적이었다면, a11y는 반드시 함께 다뤄져야 한다. https://litt.ly/teamours_design
