# 모두를 위한 디자인

## 모두를 고려한 디자인 <a href="#design-for-everyone" id="design-for-everyone"></a>

서비스를 제작하는 이들의 일은 사람들이 사용하기 쉬운 서비스를 만드는 것입니다. 모든 상황과 모든 사람을 고려하여 디자인에서 개발에 이르기까지 서비스에 포괄(inclusive)하여 반영해야 합니다. 가능한 많은 사람들이 우리의 서비스를 이용할 수 있도록 만들어야 합니다.

[Apple's Accessibilty](https://www.apple.com/kr/accessibility/)

{% embed url="<https://www.apple.com/105/media/kr/accessibility/2016/2c27194c_cf72_4f59_bbdb_9b87728c0082/films/feature/accessibility-feature-kr-20161018_1280x720h.mp4>" %}
모두에게 힘이 되어주는 것이야말로 진정한 기술의 힘입니다.
{% endembed %}

서비스 기획자 또는 디자이너가 쉽게 빠지는 공통적인 함정은 스스로를 중심으로 설계한다는 것입니다. 서비스 제작자는 자신의 큰 화면에서 아름다운 디자인 결과를 보거나 마우스로 쉽게 클릭해 움직이는 효과를 볼 수도 있습니다. 하지만 제작자는 사용자가 아니며, 사용자가 서비스를 어떻게 사용하는지 정확하게 알 수 없습니다.

[Microsoft Inclusive Design](https://www.microsoft.com/design/inclusive/)

![](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LTLolQVv2LIrJRLo30d%2F-LTLveKKH4ZBJpqGrAjU%2Fimage.png?alt=media\&token=2c22292f-d222-4ff0-8edf-9c35faea0746)

{% embed url="<https://youtu.be/8eKhTvr58II>" %}
Microsoft의 포괄적인 채용
{% endembed %}

모든 사용자가 우리가 디자인 한 것을 사용할 수 있도록 하기 위해 고민해야 합니다. 모든 상황과 사용자를 포함하도록 설계 함으로써 모든 사람의 경험을 개선할 수 있습니다.

{% hint style="info" %}
우리가 자신의 능력을 기준으로 사용하면 \
일부 사람들은 사용하기 쉽지만 다른 사람들은 \
사용하기가 쉽지 않습니다.

&#x20;\- Microsoft Inclusive Toolkit
{% endhint %}

![접근성을 고려한 설계 - 포스터 디자인](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSwD43LVKpEIjlnfyN5%2Fimage.png?alt=media\&token=1762220c-82b1-494f-be6b-e15f397d6724)

영구적으로 장애가 있는 사용자(장애인) 만이 접근 가능한 별도의 서비스를 만들자는 것이 아닙니다. 실제로 장애가 없는 사람들의 60%는 접근성 기능을 사용합니다. **장애(Disability)는 개개인의 건강 상태에 따라 달라 지는 것이 아니라, 사람과 인터랙션(상호작용) 할 수 없음을 말하는 것입니다.** (아래 이미지 참고)

![Microsoft의 포괄적 인 툴킷의 이미지](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSwDFAlopjjf8zjMTiB%2Fimage.png?alt=media\&token=7ccfa654-32ed-45df-afe8-553e71e355d1)

장애인을 염두에 두고 디자인 하면 모든 사람이 사용할 수 있는 보다 나은 제품을 만들 수 있습니다. 다음은 여러분이 알지 못하는 장애를 염두에 두고 설계된 몇 가지 제품입니다.

1960년 [Copco enamel 주철 조리기구](http://copco.com/history/)를 만든 Sam Farber는 관절염을 가진 아내가 금속 주방 도구와 투쟁하는 것을 보고 아내를 위해 OXO 주방 필러를 개발했습니다. 그는 관절염 환자도 사용할 수 있는 인체 공학 적이고 편안한 그립감의 필러를 만들어 많은 사람들의 고통을 해결했습니다.

![OXO 감자 껍질 제거기](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSwEyICJQIQu9iJay3p%2Fimage.png?alt=media\&token=02bdbfe2-5ae6-46dc-a0ee-62051911af33)

![필러는 예리한 금속으로 만들어 집니다.](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSwJDEhIPRiOq1N9hZo%2Fimage.png?alt=media\&token=e2dad639-1a78-4668-9fc7-94abd8da9be2)

{% embed url="<https://vimeo.com/106963722>" %}
Objectified : 스마트 디자인 OXO Good Grips Story
{% endembed %}

사용자가 입력할 텍스트를 예측 제안해 입력할 수 있도록 도와주는 기능은 입력에 장애가 있는 사용자가 쉽게 메시지를 입력하도록 설계되었습니다. 장애를 가지지 않은 사용자 또한 이러한 기능을 편리하게 사용하고 있습니다.

![사용자가 입력할 내용을 예측해 제안하는 스마트폰 키패드](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSwH1QBTvCMZBDDyHCm%2Fimage.png?alt=media\&token=7f6d4937-482c-426a-b178-51d0b64496c7)

![예측 키 입력은 운동 장애가 있는 사람을 위해 제작되었습니다.](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSwFe4itzm6QGVTPEMj%2Fmoter.gif?alt=media\&token=d049d490-0061-4012-bf7c-81f261c77414)

## **모든 장애가 영구적인 것은 아닙니다.** <a href="#not-all-obstacles-are-permanent" id="not-all-obstacles-are-permanent"></a>

Youtube, Facebook, Twitter와 같은 서비스는 비디오에 자막을 추가하고 있습니다. 왜 그와 같은 수고를 하는 것 일까요? 출퇴근 시간 모바일 사용자는 주변의 소음에서 벗어나기 위해 이어폰을 사용할 수 있지만, 이어폰을 가지고 있지 않을 경우 자막을 볼 수 있도록 하여 사용성을 향상시키기 위함 입니다. 접근성을 향상시키면 사용성은 자연스레 향상됩니다.

또는 우는 아이를 달래며 웹 서핑을 하고 있거나, 손목을 다쳐 정상적으로 사용할 수 없다면 어떨 까요? 이처럼 장애라는 것은 장애인만 겪는 것은 아닙니다. 장애는 누구에게나 일시적일 수도, 상황에 따라 발생할 수 있습니다.&#x20;

[Microsoft의 Inclusive Toolkit](https://www.microsoft.com/en-us/design/inclusive)이 설명하는 그림을 보면 이러한 상황을 잘 표현하고 있습니다.

![영구 / 임시 / 상황 장애의 예](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LT1BRTq3Y18jPWzbNMw%2F-LT1BT1iALFJAySTWI1g%2Fimage.png?alt=media\&token=d2c3b1dd-7ff1-407f-b0a8-51e7f9163836)

장애를 영구적인 것으로 생각한다면, 우리는 작은 숫자에 대해 이야기 하고 있는 겁니다. 미국에서 매년 약 26,000명의 사람들이 팔, 다리를 잃습니다. 그러나 우리가 일시적인 것과 상황적인 장애를 포함한다면 그 숫자는 2천만 명에 가깝습니다. 결국 0.01% 미만의 사용자들에게 혜택을 주는 것에서 약 7%의 사용자들에게 혜택을 제공할 수 있습니다.

## 쉽고 단순한 것이 최고의 디자인 <a href="#the-best-design-is-easy-and-simple" id="the-best-design-is-easy-and-simple"></a>

단순하고 깔끔하게 만드는 것은 보다 유쾌한 디자인으로 이끕니다. 모든 기본을 바로 잡는 것으로 시작하면, 원하는 만큼 창의적일 수 있습니다. 기억해야 할 중요한 것은 웹이 원래 콘텐츠를 전달하기 위해 만들어 졌다는 것입니다. 그리고 대부분의 웹 사이트는 여전히 그러합니다. 사용자에게 좋은 경험을 제공하기 위해 가능한 한 많은 복잡함은 피해야 합니다.

![](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSyKP5ps3O8xx70wHSu%2F-LSyMBXxWS12R6X9JO8o%2Fimage.png?alt=media\&token=7a852b49-7301-4fcf-b285-255c77a62dc1)

### 쉬운 말을 사용해주세요. <a href="#please-use-easy-words" id="please-use-easy-words"></a>

"콘텐츠는 왕이다"라는 속담이 있듯이, 컨텐츠를 쉽게 읽을 수 있도록 해야 합니다.

### 명확한 대비를 사용해주세요. <a href="#please-use-a-clear-contrast" id="please-use-a-clear-contrast"></a>

전경과 배경색의 대비 차 4.5:1을 목표로 하면 많은 사람들이 여러분의 콘텐츠를 읽을 수 있습니다.

### 이미지를 설명해주세요. <a href="#please-explain-the-image" id="please-explain-the-image"></a>

대부분의 웹 서비스는 여러분이 어떤 종류의 미디어를 업로드 할 때 대체 텍스트를 추가할 수 있는 기능을 제공합니다. 웹 사이트를 구성하는 경우 `alt` 속성을 사용하여 이미지를 설명하는 텍스트를 추가해주세요.

### 키보드 사용자를 고려해주세요. <a href="#please-consider-the-keyboard-user" id="please-consider-the-keyboard-user"></a>

HTML로 문서를 구조화 할 때 의미있는 요소를 사용해야 합니다. 예를 들어 버튼일 경우 `<div>`가 아니라, `<button>`을 사용하는 것이 올바릅니다. 의미있는 요소를 올바르게 사용하면 많은 사용자가 키보드를 사용해 서비스를 이용할 수 있습니다.

### 클릭 영역을 크게 만들어주세요. <a href="#make-the-click-area-larger" id="make-the-click-area-larger"></a>

클릭 가능한 영역을 크게 만들면 시각, 신체 장애를 가진 사용자에게 도움이 될 뿐만 아니라, 터치 스크린 기기(스마트 폰, 키오스크 등)을 사용하는 사용자에게도 도움이 됩니다.

### 논리적으로 구성해주세요. <a href="#please-organize-it-logically" id="please-organize-it-logically"></a>

중요한 콘텐츠를 화면 여기 저기에 분산 시키지 말아야 합니다. 중요한 콘텐츠를 집중 시켜 배치하면 화면을 확대해 보는 시력이 안 좋은 사람들에게 중요한 정보를 놓치지 않게 만들 수 있습니다.

### **사용자 테스트를 해주세요.** <a href="#please-test-the-user" id="please-test-the-user"></a>

아마도 가장 중요한 이야기 일 겁니다. 가능한 많은 사용자에게 테스트를 수행해야 합니다.

![이 만화가 시사하는 바는 명확합니다.](https://972937871-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLRpKPGJIIoy21DabpF%2F-LSvkj-PB1qxAP3xLcz6%2F-LSwU39Q7tZ9wD6I9pEe%2Fimage.png?alt=media\&token=843fbd74-102e-4ecb-8a68-4244bdc35593)

## 참고 <a href="#references" id="references"></a>

Henry Charge는 접근 가능한 서비스를 설계한 경험과 장애를 위한 설계가 모든 사람에게 보다 나은 경험을 제공하는 방법에 대해 이야기합니다.

{% embed url="<https://www.youtube.com/watch?v=R72USgUMEA8>" %}
포괄적인 디자인 (Inclusive Design) - Henry Charge 영상
{% endembed %}

{% embed url="<https://medium.com/valtech-design/inclusive-design-dd4e03f82094>" %}

{% embed url="<https://sensible.blog/2018/02/12/inclusive-design-day-11-15-oxo-figured-it-out/>" %}
