피그마의 장점이라면 무엇보다도 다양한 플러그인을 제공한다는 점이다. 그 중에서도 유용한 플러그인을 발견해서 블로그에 소개하고자 한다.
ABLE - friction free accessibility
해당 플러그인을 chatGPT에 물어보니, 이런 답변을 얻을 수 있었다.
ABLE - friction free accessibility는 웹사이트나 앱 등 디지털 콘텐츠의 접근성을 높이기 위한 디자인 철학입니다. 이 디자인 철학은 모든 사용자가 쉽게 접근할 수 있는 사용자 경험을 제공하고, 장애를 가진 사람들이 제한 없이 정보와 기능을 이용할 수 있도록 합니다.
Accessible: 모든 사용자가 쉽게 접근할 수 있는 디자인
Beautiful: 아름다운 디자인
Logical: 직관적이고 논리적인 디자인
Efficient: 효율적인 디자인
해당 플러그인을 사용해서 얻을 수 있는 이점이 뭐야?라는 질문에 chatGPT는 다음과 같은 답변을 주었다.
이 디자인 철학을 따르면서 웹사이트나 앱 등의 디지털 콘텐츠를 제작하면, 다음과 같은 이점을 얻을 수 있습니다.
1. 장애인과 비장애인 모두에게 적합한 디자인을 제공하여 모든 사용자가 정보와 기능을 쉽게 이용할 수 있습니다.
2. 웹사이트나 앱 등의 접근성이 높아지면 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.
3. 장애인들이 웹사이트나 앱 등의 디지털 콘텐츠를 이용할 수 있게 되면, 다양한 산업과 서비스를 이용할 수 있는 기회가 늘어납니다.
4. ABLE 디자인 철학을 적용한 디자인은 직관적이고 논리적이며, 사용자의 경험을 개선할 수 있습니다.
따라서, 모든 사용자를 대상으로 하는 디지털 콘텐츠를 제작하는 경우, ABLE - friction free accessibility를 추천합니다. 이를 통해 모든 사용자가 정보와 기능을 쉽게 이용할 수 있는 환경을 제공하고, 사용자 경험을 개선할 수 있습니다.
여기서 핵심은, 장애인과 비장애인 모두에게 적합한 디자인을 제공하여, 모든 사용자가 기능을 쉽게 이용할 수 있는 환경을 제공할 수 있다는 점이다.
나의 경우 접근성/배리어프리 디자인을 고려하지 못하고 프로젝트를 진행한 적이 있었다. 해당 프로젝트의 로고를 보면서 왜 기획에서도 '접근성'이 중요한지 알아보겠다.
ABLE 사용법
내 과거 프로젝트 로고!
파스텔 컬러의 파란색과 노란색이 어우러져 있어서 개인적인 취향에 맞았던 컬러 조합이다 ㅎㅎ
이렇게 피그마로 사각형을 만들어주고, 스포이드 기능으로 두 색상을 찍어주었다.
그다음 플러그인에서 ABLE을 실행시킨다.
그러면 이렇게 Contrast radio와 함께 접근성을 확인할 수 있다. 나의 경우 Large text, Small text 모두 FAIL이라고 쓰여진 것을 확인할 수 있다.
물음표 위를 호버하면 contrast ratio에 대한 설명을 알 수 있다.
검정-하얀색이 21:1로 가장 높은 대조를 보이고, 최고 등급인 AAA와 다음 등급인 AA의 조건을 알 수 있다.
AAA의 경우 작은 텍스트에는 7:1, UI와 큰 텍스트에는 4.5:1.
AA의 경우 작은 텍스트에는 4.5:1, UI와 큰 텍스트에는 3:1의 비율을 충족해야 한다.
검정과 하얀색의 경우 contrast ratio는 21:1인 것을 확인할 수 있다.
라지 텍스트, 스몰 텍스트 모두 AAA로 최고등급이 나온다.
또 Preview 기능도 다양한 color blind(적록색맹 등)들에 맞춰서 확인할 수 있다.
No blue인 사람은 해당 색상을 이렇게 본다는 것!
로고나 서비스의 핵심 컬러를 정하기 전에, 미리미리 ABLE을 돌려보면 더 완성도 높은 서비스를 만들 수 있다. 이 글을 보시는 분들은 꼭 한 번씩 ABLE 돌려보는 것을 추천드린다.
회고
디자이너가 없는 프로젝트라고, '내' 눈에 이쁜 색상만 고르지 말자.
내가 기획하는 서비스에 맞는 상징 컬러를 아는 것, 그리고 @로 이런 '접근성'까지 고려할 줄 아는 서비스 기획자가 되어야 한다.
'기획 > 피그마' 카테고리의 다른 글
| 피그마 프로토타이핑 가로 스크롤 안 될 때 해결법(For scrolling to work on this frame, the content needs to be bigger than the frame.) (0) | 2023.04.23 |
|---|---|
| 피그마 마스크 기능으로 도형에 맞춰 그림 자르기 (0) | 2023.04.10 |
| 피그마 팀 멤버 추가하기 (0) | 2023.04.02 |
| 피그마에서 마스터 컴포넌트 위치 옮기는 법 (1) | 2023.04.02 |
| 피그마 기본 툴 정리 #2. 프레임과 도형의 차이점 (0) | 2023.01.08 |
