디지털 인클루시브 디자인 : 사용자를 중심으로 디자인하기

접근성과 포용성을 고려한 UI/UX 디자인이 어떻게 사용자 경험을 개선할 수 있는지 알아봅니다.
전솔이's avatar
Sep 08, 2024
디지털 인클루시브 디자인 
: 사용자를 중심으로 디자인하기

디지털 정부서비스 UI/UX 가이드라인 배포

전자정부 시스템인 정부24가 도입된 이후 대한민국의 행정서비스는 점차 대면에서 온라인으로 변화하였습니다. 기존 온라인 사용자들은 더 이상 Active X 등의 보안프로그램을 설치하지 않아도 되며, 공인인증서는 간편인증으로 대체되었죠.
이처럼 많은 부분이 개선되었지만, 기관과 부서별로 각각 일관성 없이 만들어진 웹·앱은 사용자들을 불편하고 혼란스럽게 만들었습니다. 이러한 문제를 해결하기 위해, 정부는 최근 ‘디지털 정부서비스 UI/UX 가이드라인’ 을 배포하여 효율적인 UI/UX 개발 체계를 구축하기 위한 기준을 만들었습니다.
디지털 정부서비스 UI/UX 가이드라인. ©KRDS
디지털 정부서비스 UI/UX 가이드라인. ©KRDS
디자이너로서 정부 차원에서 UI/UX 가이드라인을 제작하여 배포하는 것은 여간 반가운 일이 아닐 수 없습니다. 디지털 인클루시브 디자인 원칙이 잘 반영되어 있는 가이드라인은 나이, 장애 여부, 기술적 배경에 상관 없이 모든 사용자가 디지털 서비스를 원활하게 이용할 수 있도록 합니다. 오늘은 가이드라인에 적용된 디지털 인클루시브 디자인의 개념을 알아보고, 사례를 통해 어떻게 적용되고 활용할 수 있는지 알아보겠습니다.
 

디지털 인클루시브 디자인의 핵심 키워드

장애 여부와 상관 없이, 접근성 높은 디자인

디지털 인클루시브 디자인의 핵심 키워드 중 하나인 접근성은, 모든 사용자가 장애 여부와 상관 없이 디지털 콘텐츠와 서비스를 사용할 수 있도록 하는 것입니다. 접근성 높은 디자인은 시각, 청각, 운동, 인지 능력 등에 제약이 있는 사람들을 포함하여, 다양한 사용자에게 보다 개선된 디지털 경험을 제공합니다. 이는 단순히 장애인만을 위한 것이 아닌, 모든 환경의 사용자들을 배려하는 요소입니다.

대체 텍스트 : 이미지를 텍스트로 변환하여 검색 결과를 개선

‘르탄이’ 캐릭터 이미지를 대체 텍스트로 변환해 보았습니다. ©ahrefs
‘르탄이’ 캐릭터 이미지를 대체 텍스트로 변환해 보았습니다. ©ahrefs
시각 장애인의 경우, 웹·앱 서비스를 이용할 때 스크린 리더를 활용하여 음성 정보를 제공 받습니다. 이 때 꼭 필요한 것이 이미지를 텍스트로 변환해 주는 대체 텍스트입니다. 또한 이미지에 대체 텍스트를 적용하게 되면 검색 엔진이 이미지를 분류하고 트래픽을 유도시켜, 검색 결과를 상위에 노출시킬 수 있습니다. 내 콘텐츠와 서비스를 보다 많은 사람들에게 알리고, SEO(검색엔진 최적화)를 위해서라도 대체 텍스트를 적용하는 것이 좋겠죠?

색맹 / 색약 모드 : 색깔에 의존하지 않는 게임 인터페이스 디자인

일반 모드 / 색맹 모드를 적용한 게임 화면. ©Twodots
일반 모드 / 색맹 모드를 적용한 게임 화면. ©Twodots
색맹이나 색약이라는 이유로 게임을 즐기지 못해서는 안 되겠죠. 여러 게임사에서는 이러한 사용자들을 위해 색맹 모드, 또는 색약 모드를 게임 내에서 설정할 수 있게 배려합니다. 게임 내의 요소를 단순히 색깔로만 구분하는 것이 아닌, 도형과 확실한 색 대비를 통해 게임을 보다 원활하게 플레이할 수 있게 됩니다.

다양한 배경과 문화, 연령을 고려한 포용적인 디자인

포용적인 디자인은 다양한 배경, 문화, 연령, 성별, 언어 등을 가진 사용자를 모두 고려합니다. 평균 수명이 점차 증가하고, 사회와 기술이 발전함에 따라 소수의 사용자만이 겪었던 어려움을 누구나 경험할 수 있는 상황에서, 포용적인 디자인을 통해 이러한 문제를 해결할 수 있습니다.

시니어 ATM : 플로우와 용어를 보다 쉽게 개선한 ATM

신한은행의 시니어 맞춤 ATM은 최소한의 UI로만 구성되어 있습니다. ©신한은행
신한은행의 시니어 맞춤 ATM은 최소한의 UI로만 구성되어 있습니다. ©신한은행
시니어들을 위한 웹·앱 접근성을 고려한 서비스들이 점차 늘고 있지만, 아직 그들에게는 오프라인 경험이 익숙할 것입니다. 신한은행에서는 이런 사용자들을 배려하여 ATM UI를 개선했는데요, 일부 영업점에 한하여, ATM 첫 화면부터 크게 4가지의 주요한 기능만 보여주어 직관적으로 서비스를 이용할 수 있게 했습니다.(’다른 업무 보기’ 를 누르면 기존 ATM 화면으로 연결되어, 일반 사용자도 고려했습니다.) 과도하게 쉬운 용어 사용에 대해서는 개선의 여지가 있지만, 첫 화면의 순서를 바꾸는 것만으로도 유의미하고 긍정적인 시도라고 느껴지는 사례입니다.

쉬운 사용 모드 : 최소 기능과 시인성을 확보한 시니어 맞춤 스마트폰

‘쉬운 사용 모드’를 적용한 스마트폰 화면. 주요 기능들만 홈 화면에 배치됩니다. ©Samsung
‘쉬운 사용 모드’를 적용한 스마트폰 화면. 주요 기능들만 홈 화면에 배치됩니다. ©Samsung
삼성의 스마트폰은 ‘쉬운 사용 모드’를 지원하여 스마트폰 사용이 익숙하지 않은 사용자를 배려합니다. 단순히 글자 크기를 과도하게 키우게 되면, 텍스트가 잘리거나 레이아웃이 틀어지게 되어 오히려 시인성과 사용성이 떨어지게 됩니다. 쉬운 사용 모드를 적용하면, 아이콘과 텍스트의 크기, 레이아웃, 키보드의 색상 등이 한 번에 설정되어 보다 원활한 사용이 가능합니다.
 

가이드라인 배포 이후, 앞으로 해야 할 일

토스는 3,600개에 달하는 이모지를 새롭게 제작하여 일관된 시각 경험을 만들었습니다. ©Tossface
토스는 3,600개에 달하는 이모지를 새롭게 제작하여 일관된 시각 경험을 만들었습니다. ©Tossface
그 밖에도, 구글과 애플 등 세계적인 기업들은 인클루시브 디자인을 위해 다양한 노력을 기울이고 있습니다. 국내의 기업 또한 핵심 가치를 반영한 디자인 시스템을 외부에 공개하여 일관된 사용자 경험을 제공하고, 기업 정체성을 확고히 해 나갑니다.
하지만, 정부에서 배포한 것 뿐만 아니라, 일반 회사에서 제작한 디자인 시스템 또한 만들어 놓기만 하면 끝나는 단순 일회성 프로젝트가 아닙니다. 사용자들이 접근성과 포용성이 적용된 디자인을 직접 체험하며 검토하고, 지속적인 피드백과 관심을 통해 꾸준히 개선되어야 비로소 디자인 시스템이 가이드라인으로서의 역할을 다 할 수 있을 것입니다. 인클루시브 디자인에서 중요한 것은 결과가 아니라 실천하는 과정입니다. 지금, 여러분의 디자인을 한 번쯤은 다른 시각으로 살펴보는 것은 어떨까요?
 
 
Share article
Subscribe to our newsletter
RSSPowered by inblog