# 사람을 위한 정보 그래픽 디자인
[**정보 디자인**](https://ko.wikipedia.org/wiki/%EC%A0%95%EB%B3%B4_%EB%94%94%EC%9E%90%EC%9D%B8)은 정보를 구성하여 효율적으로 사용할 수 있게 하는 디자인 기술 및 업무를 말합니다. 복잡하거나 구조화 되지 않은 **데이터를 시각적으로 표현하여 그 뜻을 명확하고 분명하게 보이게 하는데 목적**을 둡니다.
### 정보 디자인 용어의 탄생
정보 디자인은 시각 디자인의 일부에 속합니다. 이 용어를 처음 사용한 것은 시각 디자인 컨설턴트 [**Pentagram**](https://www.pentagram.com/) 입니다. 1970년대 제품이나 다른 영역의 디자인과 그들의 시각 디자인을 구분하는 의미적 용어로 사용 되었습니다. 이후 이 용어는 예술적 표현만이 아니라, **정보를 효과적으로 전달하기 위한 수단으로서의 그래픽 디자인**을 뜻하는 용어로 확장 되었습니다.
{% hint style="warning" %}
**Pentagram에 대해 궁금하다면?**\
[현재 진행형의 디자인 비즈니스 신화 \[뉴욕의 디자인 스튜디오\] 펜타그램](http://mdesign.designhouse.co.kr/article/article_view/101/42151) 기사 글을 읽어보세요.
{% endhint %}
### 정보의 시각화
**인포메이션 그래픽스**(Information graphics)라는 용어는 주로 **다이어그램, 차트, 그래프 등 정보의 시각화**를 말합니다. 정보를 그래픽으로 처리하는 디자이너는 매우 광범위한 사용자(예: 공항의 공공 표지판)를 만족 시키거나, 아주 구체적인 사용자를 만족시킬 수 있어야 합니다.
> 정보를 토대로 그래픽을 구현하는 디자이너는 때때로 **사용자를 위한 변호사가 되어야 합니다.**
[중국음식 VS 치킨, 얼마나 시켰을까?(2018)](http://contents.newsjel.ly/issue/tableau_food_delivery/)는 SK 텔레콤 빅 데이터 허브를 통해 공개된 2017년 서울 지역 배달음식 업종(치킨, 족발/보쌈 전문, 중국음식, 피자전문점) 이용 현황 데이터를 뉴스젤리에서 분석해 만든 인포그래픽 입니다.
[서울 지역 청년층 실질실업률(2015)](https://i.pinimg.com/originals/d0/8d/74/d08d7419dc463356ad136348265e20b8.jpg)은 통계청이 매달 발표하는 공식 실업률 통계에 포함되지 않은 '실질적 실업자'를 포함한 정보를 토대로 제작된 정보 그래픽 디자인입니다. 30세 미만 청년층의 년간 취업자 수 감소 추세(2010-2014)를 그래픽으로 구현한 결과물 입니다.
[서울지역 택배기사 노동실태조사(2017)](http://www.labors.or.kr/notice/infographic/all/page/1/post/3) 인포그래픽은 서울 지역 택배기사들을 대상으로 하는 실태 조사 결과를 토대로 그래픽으로 구현해 사용자에게 정보를 효과적으로 제공하고 있습니다.
### 실시간 변동 차트 / 그래픽 포멧
[탑빗 Bitcoin 실시간 암호화폐 차트/시세](https://www.topbit.co.kr/cryptocurrency/)는 실시간으로 변동되는 데이터를 기반으로 그려지는 차트입니다. 앞서 살펴본 그래픽과는 달리, **실시간 전송되는 데이터를 분석해 값을 토대로 사용자 화면에 그래픽을 그려야** 합니다. 그렇기에 일반적인 그래픽 이미지 포멧(JPEG, PNG, GIF 등)으로 처리할 수 없습니다.
실시간으로 변동되는 데이터를 네트워크 통신으로 받아와 추출된 데이터에 따라 프로그래밍 된 그래픽 데이터가 화면에 그려지려면 [SVG](https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4) 그래픽 포멧을 사용해야 합니다. **SVG 그래픽은 사람이 읽을 수 있는 코드로 구조화(Markup) 되므로 정보 접근성이 매우 뛰어난 포멧** 입니다.
### 인포그래픽 / 접근성
항상 **`보기 좋은 디자인 ≠ 좋은 디자인`**은 아닙니다. 보이는 것만으로 모든 사용자에게 정보를 제공할 수 없습니다. 정보를 그래픽 디자인할 때 고려하지 않아 발생된 문제점과 이를 해결한 그래픽 결과 물을 살펴보겠습니다.
#### \[ 👎BAD ] 인식의 어려움
보기 좋은 그래프는 읽기도 쉽습니다. 데이터 시각화의 목표는 정보를 명확하고 간결하게 전달하는 것입니다. 대부분 데이터 시각화에서 가장 두드러진 기능 중 하나가 색상 이지만, 색상을 구분하는데 어려움을 겪고 있는 사람의 경우 그래프를 온전히 파악하기 쉽지 않습니다.
예를 들어 정보 그래픽에 주황색과 초록색을 사용했을 때, 색을 구분하기 어려운 사용자가 있을 수 있습니다. 보다 많은 사람이 정보에 접근하고, 주어진 정보를 이해할 수 있도록 그래픽을 다루는 디자이너는 데이터 시각화 접근성 가이드가 필요합니다. 하지만 **국내 디자인 업계의 현실은 이에 대한 인식과 학습 부족으로 실무에 잘 반영되고 있지 않습니다.**
[2018년 6.13 지방 선거 후보 지지율 여론조사 인포그래픽](http://election.daum.net/20180613)을 보면 실무자의 인식이 얼마나 부족한지 잘 알 수 있습니다. 색상만으로 각 후보를 구분하려 했기에 색을 인지할 수 없는 사용자는 구분하기 어렵습니다.
#### 접근성을 고려한 데이터 시각화 스타일 가이드
[Accessible Colors for Data Visualization Style Guide](https://www.figma.com/file/KePb0YwhpKu45pXZnN9s4TmS/Accessible-Colors-for-Data-Visualization)는 접근성 있는 색상을 고려한 데이터 시각화 스타일 가이드로 정보 디자인 제작 과정에서 사용 되는 가이드입니다. 해당 가이드는 차트, 그래프, 파이 등을 그래픽으로 제작할 때 컬러의 심도(Depth 1\~5)에 따라 사용해야 할 접근성이 있는 색상에 대해 기술합니다.
#### UI 디자인 문제 (구분 모호)
[대기오염 정보 (미세먼지 농도)](https://search.naver.com/search.naver?where=nexearch\&sm=top_hty\&fbm=1\&ie=utf8\&query=%EB%AF%B8%EC%84%B8%EB%A8%BC%EC%A7%80)는 미세 먼지 농도에 따른 대기 오염 정도를 보여주는 인포그래픽 입니다. 색상 외 텍스트 수치 값을 제공 함으로 오염 농도를 파악하는데 문제는 없지만, 좋음, 보통, 나쁨, 매우나쁨을 구분하는 수치 값을 한 눈에 파악하기 쉽지 않습니다. 색상 없이 본다면 "-30 보통", "-80 나쁨"으로 묶여 보일 수 있습니다. UI 디자인 문제입니다.
상대적으로 [대기정보 미세먼지 탭](https://search.daum.net/search?nil_suggest=btn\&nil_ch=\&rtupcoll=\&w=tot\&m=\&f=\&lpp=\&DA=SBC\&sug=\&sq=\&o=\&sugo=\&q=%EB%AF%B8%EC%84%B8%EB%A8%BC%EC%A7%80)에서 제공하는 UI 디자인은 구분이 명확하게 됩니다. 좋은 디자인의 기본은 구분이 명확해야 합니다.
#### \[ 👎BAD ] 입력 장치 접근의 어려움
[남북 70년 318개의 사건으로 수놓은 남북 70년의 발걸음](http://news.khan.co.kr/kh_storytelling/2018/korea/index.html)은 문재인 대통령과 김정은 국무위원장, 두 정상이 판문점 평화의집에서 만남을 가진 역사적 사건을 계기로, 11년 만에 개최된 정상회담을 즈음해 70여년 간 남북 간에 벌어진 318개의 사건을 경향 신문 인터랙티브에서 정리한 인포그래픽 입니다.
남과 북이 분단된 70년 이래 발생한 318개의 사건을 보기 좋고 이해하기 쉽게 구현한 멋진 그래픽 이지만, 안타깝게도 겉과 달리 속은 멋지지 않습니다. 정보에 접근할 수 있는 유일한 창구인 "한반도 Click (링크)"에 마우스와 같은 장치 사용이 어려운 이들에게 접근할 수 있는 길을 제시하지 못하기 때문입니다.
HTML 마크업 코드를 살펴보면 "한반도 Click" 그래픽은 링크 또는 버튼 이어야 함에도 불구하고, `` 요소를 사용해 구조화되어 키보드를 통한 초점(Focus) 접근이 불가능합니다. 게다가 대체 텍스트로 제공된 내용이 "한반도"에 불과해 스크린리더 사용자는 "한반도 이미지" 정보만 듣게 되어 그래픽에서 일반 사용자가 인식할 수 있는 것을 온전히 인식할 수 없는 문제를 야기 합니다.
{% code title="news.khan.co.kr/kh\_storytelling/2018/korea" %}
```markup
```
{% endcode %}
[DAUM 미디어랩 키워드](http://media.daum.net/lab/keyword#20180607)는 최신기사에서 자동으로 추출된 TOP 10 키워드를 인포그래픽으로 제공합니다. 각 키워드를 클릭하면 모달 윈도우가 펼쳐지는 기능을 포함하고 있습니다. 하지만 키보드 입력 장치로는 접근, 제어할 수 없는 문제를 가지고 있습니다.
코드를 살펴보면 SVG로 마크업 되어 있고 \ 요소를 사용해 콘텐츠를 제공합니다. 문제는 키보드 포커싱을 적용할 수 있는 방법을 제공하고 있지 않습니다. 해당 키워드는 사용자와 인터랙션 할 수 있도록 조치해야 합니다. (예: 링크 제공)
```markup
```
#### \[ 👍GOOD ] W3C 프로세스 인포그래픽 사례
웹 표준과 접근성 표준 지침을 제정하고 관리 운용하는 World Wide Web Consortium에서 제공하는 [W3C Process](https://w3c.github.io/w3process/#recs-and-notes) 인포그래픽은 접근성에 대한 고민과 노력이 잘 반영된 예시입니다. 화면을 확대해도 선명하게 볼 수 있게끔 SVG 그래픽을 사용해 정보를 제공하고 있으며, 키보드와 같은 입력 장치 접근성 또한 훌륭합니다.
구조는 SVG 요소를 HTML에 포함하는 인라인 유형으로 작성되어 있고, 스크린리더 사용자, 마우스를 사용할 수 없는 사용자 모두를 위한 디자인이 반영되어 있습니다.
{% code title="w3c.github.io/w3process/#recs-and-notes" %}
```markup
```
{% endcode %}
### 참고
데이터 시각화 / 인포그래픽과 관련된 참고 자료 링크입니다.
* [뉴스젤리](http://contents.newsjel.ly/)
* [비주얼 다이브](http://www.visualdive.com/)
* [인포그래픽스.kr](http://info-graphics.kr/)
* [공공데이터포털.go.kr](https://www.data.go.kr/useCase/visualization/index.do)
* [경향신문 인터랙티브](http://news.khan.co.kr/kh_interactive/index.html?mode=grph)
* [정보디자인 연구소 아이디어 랩](http://book.ptwiz.com/?r=lab\&m=bbs\&bid=inform_design)
