사람을 위한 정보 그래픽 디자인
"그 어떤 누구도 장애를 이유로 차별 할 수 있는 권리는 없습니다."
Last updated
"그 어떤 누구도 장애를 이유로 차별 할 수 있는 권리는 없습니다."
Last updated
은 정보를 구성하여 효율적으로 사용할 수 있게 하는 디자인 기술 및 업무를 말합니다. 복잡하거나 구조화 되지 않은 데이터를 시각적으로 표현하여 그 뜻을 명확하고 분명하게 보이게 하는데 목적을 둡니다.
정보 디자인은 시각 디자인의 일부에 속합니다. 이 용어를 처음 사용한 것은 시각 디자인 컨설턴트 입니다. 1970년대 제품이나 다른 영역의 디자인과 그들의 시각 디자인을 구분하는 의미적 용어로 사용 되었습니다. 이후 이 용어는 예술적 표현만이 아니라, 정보를 효과적으로 전달하기 위한 수단으로서의 그래픽 디자인을 뜻하는 용어로 확장 되었습니다.
인포메이션 그래픽스(Information graphics)라는 용어는 주로 다이어그램, 차트, 그래프 등 정보의 시각화를 말합니다. 정보를 그래픽으로 처리하는 디자이너는 매우 광범위한 사용자(예: 공항의 공공 표지판)를 만족 시키거나, 아주 구체적인 사용자를 만족시킬 수 있어야 합니다.
정보를 토대로 그래픽을 구현하는 디자이너는 때때로 사용자를 위한 변호사가 되어야 합니다.
항상 보기 좋은 디자인 ≠ 좋은 디자인은 아닙니다. 보이는 것만으로 모든 사용자에게 정보를 제공할 수 없습니다. 정보를 그래픽 디자인할 때 고려하지 않아 발생된 문제점과 이를 해결한 그래픽 결과 물을 살펴보겠습니다.
보기 좋은 그래프는 읽기도 쉽습니다. 데이터 시각화의 목표는 정보를 명확하고 간결하게 전달하는 것입니다. 대부분 데이터 시각화에서 가장 두드러진 기능 중 하나가 색상 이지만, 색상을 구분하는데 어려움을 겪고 있는 사람의 경우 그래프를 온전히 파악하기 쉽지 않습니다.
예를 들어 정보 그래픽에 주황색과 초록색을 사용했을 때, 색을 구분하기 어려운 사용자가 있을 수 있습니다. 보다 많은 사람이 정보에 접근하고, 주어진 정보를 이해할 수 있도록 그래픽을 다루는 디자이너는 데이터 시각화 접근성 가이드가 필요합니다. 하지만 국내 디자인 업계의 현실은 이에 대한 인식과 학습 부족으로 실무에 잘 반영되고 있지 않습니다.
남과 북이 분단된 70년 이래 발생한 318개의 사건을 보기 좋고 이해하기 쉽게 구현한 멋진 그래픽 이지만, 안타깝게도 겉과 달리 속은 멋지지 않습니다. 정보에 접근할 수 있는 유일한 창구인 "한반도 Click (링크)"에 마우스와 같은 장치 사용이 어려운 이들에게 접근할 수 있는 길을 제시하지 못하기 때문입니다.
HTML 마크업 코드를 살펴보면 "한반도 Click" 그래픽은 링크 또는 버튼 이어야 함에도 불구하고, <img> 요소를 사용해 구조화되어 키보드를 통한 초점(Focus) 접근이 불가능합니다. 게다가 대체 텍스트로 제공된 내용이 "한반도"에 불과해 스크린리더 사용자는 "한반도 이미지" 정보만 듣게 되어 그래픽에서 일반 사용자가 인식할 수 있는 것을 온전히 인식할 수 없는 문제를 야기 합니다.
코드를 살펴보면 SVG로 마크업 되어 있고 <text> 요소를 사용해 콘텐츠를 제공합니다. 문제는 키보드 포커싱을 적용할 수 있는 방법을 제공하고 있지 않습니다. 해당 키워드는 사용자와 인터랙션 할 수 있도록 조치해야 합니다. (예: 링크 제공)
구조는 SVG 요소를 HTML에 포함하는 인라인 유형으로 작성되어 있고, 스크린리더 사용자, 마우스를 사용할 수 없는 사용자 모두를 위한 디자인이 반영되어 있습니다.
데이터 시각화 / 인포그래픽과 관련된 참고 자료 링크입니다.
Pentagram에 대해 궁금하다면? 기사 글을 읽어보세요.
는 SK 텔레콤 빅 데이터 허브를 통해 공개된 2017년 서울 지역 배달음식 업종(치킨, 족발/보쌈 전문, 중국음식, 피자전문점) 이용 현황 데이터를 뉴스젤리에서 분석해 만든 인포그래픽 입니다.
은 통계청이 매달 발표하는 공식 실업률 통계에 포함되지 않은 '실질적 실업자'를 포함한 정보를 토대로 제작된 정보 그래픽 디자인입니다. 30세 미만 청년층의 년간 취업자 수 감소 추세(2010-2014)를 그래픽으로 구현한 결과물 입니다.
인포그래픽은 서울 지역 택배기사들을 대상으로 하는 실태 조사 결과를 토대로 그래픽으로 구현해 사용자에게 정보를 효과적으로 제공하고 있습니다.
는 실시간으로 변동되는 데이터를 기반으로 그려지는 차트입니다. 앞서 살펴본 그래픽과는 달리, 실시간 전송되는 데이터를 분석해 값을 토대로 사용자 화면에 그래픽을 그려야 합니다. 그렇기에 일반적인 그래픽 이미지 포멧(JPEG, PNG, GIF 등)으로 처리할 수 없습니다.
실시간으로 변동되는 데이터를 네트워크 통신으로 받아와 추출된 데이터에 따라 프로그래밍 된 그래픽 데이터가 화면에 그려지려면 그래픽 포멧을 사용해야 합니다. SVG 그래픽은 사람이 읽을 수 있는 코드로 구조화(Markup) 되므로 정보 접근성이 매우 뛰어난 포멧 입니다.
을 보면 실무자의 인식이 얼마나 부족한지 잘 알 수 있습니다. 색상만으로 각 후보를 구분하려 했기에 색을 인지할 수 없는 사용자는 구분하기 어렵습니다.
는 접근성 있는 색상을 고려한 데이터 시각화 스타일 가이드로 정보 디자인 제작 과정에서 사용 되는 가이드입니다. 해당 가이드는 차트, 그래프, 파이 등을 그래픽으로 제작할 때 컬러의 심도(Depth 1~5)에 따라 사용해야 할 접근성이 있는 색상에 대해 기술합니다.
는 미세 먼지 농도에 따른 대기 오염 정도를 보여주는 인포그래픽 입니다. 색상 외 텍스트 수치 값을 제공 함으로 오염 농도를 파악하는데 문제는 없지만, 좋음, 보통, 나쁨, 매우나쁨을 구분하는 수치 값을 한 눈에 파악하기 쉽지 않습니다. 색상 없이 본다면 "-30 보통", "-80 나쁨"으로 묶여 보일 수 있습니다. UI 디자인 문제입니다.
상대적으로 에서 제공하는 UI 디자인은 구분이 명확하게 됩니다. 좋은 디자인의 기본은 구분이 명확해야 합니다.
은 문재인 대통령과 김정은 국무위원장, 두 정상이 판문점 평화의집에서 만남을 가진 역사적 사건을 계기로, 11년 만에 개최된 정상회담을 즈음해 70여년 간 남북 간에 벌어진 318개의 사건을 경향 신문 인터랙티브에서 정리한 인포그래픽 입니다.
는 최신기사에서 자동으로 추출된 TOP 10 키워드를 인포그래픽으로 제공합니다. 각 키워드를 클릭하면 모달 윈도우가 펼쳐지는 기능을 포함하고 있습니다. 하지만 키보드 입력 장치로는 접근, 제어할 수 없는 문제를 가지고 있습니다.
웹 표준과 접근성 표준 지침을 제정하고 관리 운용하는 World Wide Web Consortium에서 제공하는 인포그래픽은 접근성에 대한 고민과 노력이 잘 반영된 예시입니다. 화면을 확대해도 선명하게 볼 수 있게끔 SVG 그래픽을 사용해 정보를 제공하고 있으며, 키보드와 같은 입력 장치 접근성 또한 훌륭합니다.
