UI/UX

“인클루시브 디자인, 너 도대체 뭐야?” 모두를 위한 디자인의 기본 개념부터 사례까지

긍정적인 사회적 영향은 물론 타깃 확대의 열쇠 인클루시브 디자인

2025.04.08

---

오늘날 웹사이트나 애플리케이션을 사용하는 것은 일상화됐습니다. 하지만 저마다 제각각인 상황과 조건에서 웹에 접근하기 때문에 특정 대상을 기준으로 만들어진 웹사이트는 결국 다른 많은 사용자를 소외시키고 맙니다.

접근성 있는 웹사이트는 난독증과 같은 읽기 장애가 있는 사람이나 기술 지식이 부족한 사람들도 쉽게 이용할 수 있어야 하며, 네트워크 속도가 느린 환경에서도 콘텐츠에 빠르게 접근할 수 있어야 합니다. 웹사이트 제작자는 이런 다양성을 인정하고 가능한 모든 사용자에게 접근성 있는 웹사이트를 제공해야 합니다.

이런 문제점은 인클루시브 디자인(포괄적 디자인, Inclusive Design)을 도입함으로써 모든 사용자를 고려할 수 있습니다. 인클루시브 디자인의 핵심은 특정 집단을 대상으로 하는 것이 아니라 어떤 집단이든 배제하지 않는 것입니다. 인클루시브 디자인을 적용함으로 다양한 사용자를 포용하고 존중받는 디지털 공간을 조성할 수 있으며 더 나은 사회를 만들 수 있을 뿐만 아니라 더 넓은 시장을 확보할 수 있습니다.

이번 글에선 디자인 전문 기업 이모션글로벌이 더 넓은 시장과 사회를 타깃으로 삼게 해주는 떠오르는 새로운 디자인, 인클루시브 디자인의 기본적인 정의부터 실제 사례 분석까지 다뤄봅니다.

인클루시브 디자인의 정의

‘Inclusive’는 ‘포용하는’ 또는 ‘포함하기’라는 뜻 그대로 모든 사회 구성원이 소외감을 느끼지 않고 사용할 수 있는 디지털 기반의 포용적인 디자인을 의미합니다. 이는 신체적 특성, 성별, 나이 등과 관계 없이 사회적 소외계층과 약자를 포함한 모든 사람을 포함합니다.

물리적인 환경을 개선하는 ‘배리어 프리 디자인’과 ‘유니버설 디자인’과 같은 유사 디자인 개념들과는 조금 다르게, 인클루시브 디자인은 결과물이 아닌 과정에 중점을 둡니다. 때문에 다양한 사람들의 경험을 이해하고 존중함으로써 사용자를 차별하지 않는 디자인의 평등함을 추구합니다.

인클루시브 웹사이트의 중요성

인클루시브 디자인에 대해 이야기 위해서는 먼저 ‘정보 접근성’의 개념을 먼저 이해하는 것이 좋습니다. 정보 접근성은 웹사이트의 콘텐츠를 다양한 형식으로 제공해 모든 사용자가 쉽게 찾고 이해할 수 있도록 하는 건데요.

이는 시각 장애인을 위한 화면 낭독기 지원이나, 청각 장애인을 위한 자막 및 수화 지원 등 다양한 방법으로 이루어집니다. 정보 접근에 취약한 사용자들도 공정하게 정보를 활용할 수 있도록, 환경을 개선해 모든 이용자가 서비스를 동등하게 이용할 수 있는 기반을 마련하는 것이 정보 접근성의 개념입니다.

인클루시브 웹디자인과 정보 접근성은 웹사이트나 앱을 모든 사용자가 이용할 수 있도록 보장하기 위한 노력의 일환으로 서로 긴밀하게 연관돼 있습니다. 인클루시브 웹디자인은 다양성을 고려해 디자인하고, 정보 접근성은 웹사이트의 콘텐츠를 모든 사용자에게 동등하게 접근 가능하도록 보장합니다.

요즘 시대에 인클루시브 웹디자인이 중요한 이유는 다양한 사용자들이 디지털 공간을 이용하는 비중이 높아지고 있기 때문입니다. 인터넷을 통해 정보를 찾고 서비스를 이용하는 사람들의 범위는 나이, 성별, 인종, 신체적 및 정신적 능력 등에서 다양합니다. 이런 다양성을 고려하지 않고 웹사이트를 디자인하면 일부 사용자들은 정보에 접근하는 데 어려움을 겪거나, 제대로 된 경험을 할 수 없게 됩니다.

인클루시브 디자인은 모든 사람들이 동등한 기회를 가지고 정보에 접근하고 서비스를 이용할 수 있도록 함으로써 사회적 평등과 인간의 존엄성을 증진하는 데에 기여하며 모든 사용자가 존중받고 포용될 수 있는 디지털 환경을 조성해 더 공정하고 평등한 사회를 구축하는 데에 중요한 역할을 합니다.

인클루시브 웹디자인 설계

인클루시브 웹 디자인의 원칙은 다양한 사용자 그룹이 사용할 수 있는 웹 사이트를 만드는 데 중요한 역할을 합니다. 많은 디자이너들이 이미 이런 원리를 디자인에 적용하고 있지만, 이 원리가 어떻게 통합성을 향상시키는지 이해하면 더욱 더 다양성이 존중된 결과를 낼 수 있습니다.

마이크로소프트의 인클루시브 디자인 원칙은 아래의 3가지로 이뤄져 있습니다. 이는 제품과 서비스를 개발하면서 놓치고 있던 사용자를 배제하지 않겠다는 다짐이 담겨있습니다.

마이크로소프트의 인클루시브 디자인 원칙

배제되고 있던 사람들에 대한 인지(Recognize exclusion)

먼저, ‘배제되고 있던 사람들에 대한 인지’라는 원칙은 모든 사용자의 다양성을 고려해 디자인하는 것을 의미합니다. 웹사이트를 디자인할 때에는 시각적, 청각적, 운동적 등 다양한 장애를 가진 사용자들도 고려해 접근성을 향상시키는 것이 중요합니다. 이를 통해 모든 사용자가 콘텐츠를 이해하고 이용할 수 있도록 돕습니다.

다양한 사용성에서 배움(Learn from diversity)

두 번째로, ‘다양한 사용성에서 배움’이라는 원칙은 사용자의 다양한 경험을 이해하고 배우는 것을 강조합니다. 웹사이트를 개발하면서 사용자 피드백을 수렴하고, 그에 맞게 디자인을 조정해 모든 사용자들이 웹사이트를 쉽게 이용할 수 있도록 합니다. 이를 통해 사용자 경험을 지속적으로 향상시키는 데 중점을 둡니다.

한 사람을 위한 솔루션이 많은 사람들에게 혜택으로(Solve for one, extend to many)

마지막으로, ‘한 사람을 위한 솔루션이 많은 사람들에게 혜택으로’라는 원칙은 한 사용자 그룹을 위한 기능이 다른 사용자들에게도 유용하게 사용될 수 있도록 하는 것을 목표로 합니다. 예를 들어, 고령자를 위한 큰 글꼴 옵션은 시력이 좋은 사용자들에게도 글자를 더 쉽게 읽을 수 있는 기능으로 작용할 수 있습니다.

이렇듯 마이크로소프트의 인클루시브 디자인 원칙을 웹 디자인에 적용하면, 모든 사용자들이 동등한 액세스와 사용 경험을 얻을 수 있으며, 비즈니스에도 긍정적인 영향을 줄 수 있습니다.

인클루시브 웹 디자인 vs 액세서블 웹 디자인

인클루시브 웹 디자인과 액세스 가능한 웹 디자인은 모두 웹사이트를 가능한 모든 사용자에게 접근 가능하도록 만드는 것을 목표로 합니다. 그러나 이 두 가지 접근 방식은 목표를 달성하기 위한 방법과 의도에서 약간의 차이가 있습니다.

인클루시브 웹 디자인은 사용자의 다양성을 고려해 웹사이트를 디자인하는 개념입니다. 이는 신체적, 정신적, 문화적, 경제적 등 모든 면에서의 다양성을 고려해 웹사이트를 구성하는 것을 의미합니다. 인클루시브 웹 디자인은 모든 사용자들이 동등한 액세스와 사용 경험을 얻을 수 있도록 합니다. 이는 다양한 디자인, 콘텐츠, 기능, 상호 작용 방법 등을 통해 구현됩니다.

반면 액세스 가능한 웹 디자인은 주로 장애를 가진 사용자들을 고려해 접근성을 향상시키는 것에 중점을 둡니다. 이는 시각 장애, 청각 장애, 운동 장애 등 특정 장애를 가진 사용자들이 웹사이트를 쉽게 이용할 수 있도록 보장하는 것을 의미합니다. 대체 텍스트, 키보드 조작, 화면 낭독기와의 호환성 등 웹사이트의 기술적인 측면에 중점을 두고 웹사이트를 접근 가능하도록 만드는 방법을 고려해 웹사이트를 제작합니다.

두 접근 방식의 유사점은 사용자 중심의 접근 방식을 공유한다는 것입니다. 즉, 두 접근 방식 모두 사용자들의 다양성을 고려해 웹사이트를 디자인하고, 모든 사용자가 쉽게 이용할 수 있도록 하는 것이 목표이며 사용자 피드백을 수렴하고 그에 따라 디자인을 조정해 웹사이트의 접근성을 지속적으로 개선하는 것에 주력한다는 점입니다.

두 접근 방식의 관계성은 서로 보완적인 측면을 갖습니다. 인클루시브 웹 디자인은 모든 사용자의 다양성을 고려해 웹사이트를 디자인함으로써, 액세스 가능한 웹 디자인의 일부로서 장애를 가진 사용자들의 접근성을 개선합니다. 따라서 두 접근 방식은 함께 사용돼 모든 사용자들에게 동등한 액세스와 사용 경험을 제공하는 데 기여합니다.

인클루시브 웹디자인의 실제 사례

인클루시브 디자인이 부족한 사례 : 쿠팡(coupong)

쿠팡의 웹사이트에서는 몇 가지 인클루시브 디자인을 적용하지 않은 예시를 찾을 수 있습니다.

첫째, 쿠팡의 제품 페이지에서는 제품 이미지에 대한 대체 텍스트가 부족하거나 제공되지 않는 경우가 있습니다. 시각적으로 이미지를 인식할 수 없는 사용자들이나 스크린 리더를 사용하는 사용자들은 이런 이미지에 대한 정보를 이해할 수 없습니다.

둘째, 쿠팡의 웹사이트에서는 일부 사용자들이 텍스트 크기를 조절할 수 있는 기능이 부족한 경우가 있습니다. 저시력자나 노안 등의 사용자들은 텍스트를 확대하여 더 쉽게 읽을 수 있는 기능이 필요할 수 있습니다.

마지막으로 쿠팡의 웹사이트에서는 일부 페이지에서 키보드로만 이용할 수 있는 내비게이션 기능이 부족한 경우가 있습니다. 검색 기능에 음성인식 기능이 있지만, 음성검색 이후 마우스 사용이 어려운 사용자들이나 접근성을 고려하는 사용자들에게는 이런 기능이 중요합니다.

인클루시브 디자인이 부족한 사례 : 은행권사이트

은행권 웹사이트들에서 로그인 프로세스는 사용자들에게 여러 번의 단계를 요구합니다. 사용자 아이디와 비밀번호 입력 후에도 보안을 강화하기 위해 추가적인 보안 단계를 거쳐야 할 수 있습니다. 또한, 로그인 시 보안을 강화하기 위해 *캡차(CAPTCHA)를 사용하는 경우가 있는데, 시각적으로 어렵거나 음성으로 제공하는 경우가 있어 시각 장애를 가진 사용자나 저시력자들에게는 이를 해결하기 어려울 수 있습니다.

?캡차란?
캡차(CAPTCHA)는 “Completely Automated Public Turing test to tell Computers and Humans Apart”의 약자로, 컴퓨터와 사람을 구분하기 위한 완전 자동화된 공개 튜링 테스트를 의미합니다. 캡차는 웹사이트나 앱 등에서 로봇이나 자동 프로그램이 아닌 실제 사용자를 위해 설계된 것으로, 주로 로그인, 회원가입, 폼 제출 등의 과정에서 사용됩니다.

인클루시브 디자인 적용 사례 : 마이크로소프트

마이크로소프트는 모든 사용자가 편리하게 이용할 수 있도록 고려해 인클루시브 웹디자인을 잘 적용한 사례 중 하나로 꼽히는데요.

첫째, 이미지에는 대체 텍스트가 제공됩니다. 이는 시각적으로 인식이 어려운 사용자들을 위해 중요한 부분으로 대체 텍스트를 통해 이미지의 내용이나 의도를 설명함으로써 모든 사용자들이 콘텐츠를 이해할 수 있습니다.

둘째, 마이크로소프트의 웹사이트는 키보드만으로도 모든 기능에 접근할 수 있도록 설계돼 있습니다. 마우스 사용에 어려움을 겪는 사용자들도 키보드를 사용하여 웹사이트를 탐색하고 링크를 클릭할 수 있습니다.

셋째, 텍스트 크기 조절, 색상 대비 조절, 화면 낭독기 화환 등 접근성 기능이 제공돼 모든 사용자들이 웹사이트를 쉽게 이용할 수 있도록 합니다.

마지막으로, 웹사이트의 구조와 내비게이션은 사용자들이 원하는 정보를 쉽게 찾을 수 있도록 설계돼 있습니다. 일관된 디자인과 직관적인 메뉴 구조는 모든 사용자들이 콘텐츠에 쉽게 접근할 수 있도록 도와줍니다. 이런 디자인 요소들을 통해 마이크로소프트의 웹사이트는 모든 사용자들이 쉽게 이용할 수 있는 웹사이트 경험을 제공합니다.

인클루시브 디자인 적용 사례 : 넷플릭스 화면 해설

넷플릭스는 화면 해설 기능을 통해 시각 장애인을 포함한 다양한 사용자들에게 접근성을 제공하는데 선도적인 기업 중 하나입니다. 이 기능은 사용자들이 영상 콘텐츠를 시청할 때 배경음, 대사, 액션 등을 화면 해설을 통해 듣고 이해할 수 있도록 도와줍니다.

영화 속에서 발생하는 환경 소리나 음악 등을 화면 해설을 통해 시각적으로 인식이 어려운 사용자들이 영화나 드라마의 배경음을 이해하는 데 도움을 줍니다. 또한, 영상 콘텐츠에서 발생하는 액션을 화면 해설을 통해 시각적으로 액션을 인식할 수 없는 사용자들이 영화나 드라마의 스토리를 이해하는 데 도움을 줍니다.

이런 액션 해설은 주인공들의 행동이나 장면 전환 등을 설명하여 사용자들이 콘텐츠의 흐름을 파악할 수 있도록 합니다. 이런 방식으로 넷플릭스는 화면 해설 기능을 통해 시각 장애인을 포함한 다양한 사용자들이 영상 콘텐츠를 쉽게 이해하고 즐길 수 있도록 하고 있습니다. 이는 인클루시브 디자인의 좋은 예시로, 모든 사용자들이 동등하게 접근할 수 있는 환경을 제공하는데 기여하고 있습니다.

인클루시브 디자인 적용 사례 : 이모션글로벌

이모션글로벌에서는 프로젝트를 진행할 시 모든 사용자들의 편의를 고려합니다. 이를 실현하기 위해 프로젝트를 진행하는 초기 단계에 다양한 사용자 그룹을 고려한 페르소나를 활용하여 사용성을 테스트하고 있는데요. 이는 사용자들이 웹사이트를 사용하는 과정에서 겪을 수 있는 어려움을 사전에 파악하고 개선할 수 있으며 더 많은 사용자들이 접근 가능하고 사용하기 쉬운 환경을 제공하는 데 도움이 됩니다.

또한, 웹 접근성 가이드라인을 엄격히 준수하여 모든 사용자들이 웹사이트를 쉽게 이용할 수 있도록 개발하고 테스트합니다. 웹 접근성은 모든 사용자들이 웹사이트에 쉽게 접근하고 이용할 수 있도록 보장하는 것을 의미하며, 이를 위해 다양한 기술적인 요구사항과 디자인 원칙을 준수합니다. 이는 웹사이트를 설계하고 개발할 때 텍스트 대비, 키보드 내비게이션, 이미지 대체 텍스트 등의 요소를 고려하여 다양한 사용자들의 편의를 충족시킬 수 있습니다.

더불어, 이모션글로벌은 디자인의 이해와 지식을 지속적으로 확장하기 위해 매거진을 운영하고 있습니다. 이를 통해 새로운 트렌드와 기술 정보를 습득하고, 사용자 경험을 향상시키기 위한 노력을 기울이고 있습니다. 이는 계속해서 자신의 역량을 향상시키고 개선할 수 있는 기회를 얻을 수 있습니다.

앞으로 인클루시브 디자인은

디지털 기술의 발전함에 따라 사람들의 온라인 활동이 더욱 증가하고 있습니다. 모바일 기기와 인터넷 접속의 보급이 확대되면서 모든 연령층과 사회적 배경의 사람들이 인터넷을 통해 정보를 얻고 소통하며 일을 처리하는 데에 의존하고 있습니다. 이에 따라 다양한 사용자들의 요구사항을 고려하는 것이 점점 더 중요해지고 있습니다.

1973년 IBM의 “Good design is good business”라는 슬로건은 많은 사랑을 받았습니다. 이후 2017년도 IBM에서 발표한 새로운 슬로건은 “Inclusive design is good business”입니다. IBM은 디자인은 장식이나 꾸밈 요소가 아니며 특정 목적을 달성하기 위해 최선의 방식으로 요소를 배열하는 계획에 더 가깝다고 이야기합니다.

다양성과 포용성의 전도사 조 저스탄트(Joe Gerstandt)는 “의식적으로, 의도적으로 그리고 적극적으로 포용하지 않으면 의도치 않게 배제하는 결과를 불러온다”라고 말했습니다.

세상은 빠르게 변하며 진화하고 있습니다. 더 이상 소비자 혹은 사용자가 모두 같은 방식으로 행동하고 생각하지 않는다는 사실을 알 것입니다. 모든 사람을 포괄할 수 있도록 의식적으로, 의도적으로 그리고 적극적으로 인클루시브한 디자인을 하는 것이 비즈니스의 새로운 성장 기회일 것이며 더 연결되고 공감할 수 있는 디지털 글로벌 커뮤니티를 만들 핵심 차별화 요소로 자리매김할 것입니다.

? 원문 링크: 인클루시브 디자인 : 모두를 위한 디자인에 대해

• UI
• UX
• 디자인
• 이모션글로벌

• 에디터김동욱 (jkkims@ditoday.com)