Graph
그래프 디자인과 종류
앞서 다양한 헬스케어 스마트밴드와 연동되는 애플리케이션을 살펴보면서 그래프를 통해 사용자들에게 한눈에 정보를 제공하는 화면을 많이 볼 수 있었습니다. 우리가 알고 있다시피 그래프에는 다양한 종류가 존재하고 상황과 정보에 맞게 사용하면 더욱더 효과적으로 보일 수 있습니다. 많은 정보를 글이나 숫자로 보여주기보다는 이번 포스팅에서는 그래프에 대해 알아보겠습니다.
그래프란 자료를 점, 직선, 곡선, 막대, 그림 등을 사용하여 나타낸 것으로 수량의 크기를 비교하거나, 수량이 변화하는 것을 한눈에 알아보기 쉽게 시각적으로 나타낸 것을 말합니다. 그래프에는 선 그래프, 막대그래프, 그림그래프, 비율 그래프 등이 있습니다.
Line Graph
우선 꺾은선 그래프는 가장 일반적으로 찾아볼 수 있는 그래프입니다. 수량을 점으로 표시하고, 그 점들을 선분으로 이어 그린 그래프라 정의되어 있습니다.
https://www.behance.net/gallery/27394045/SUNNY-Dashboard-UI-Design꺾은선 그래프는 수량이 변화하는 모양과 정도를 쉽게 알 수 있다는 장점을 갖고 있으며, 조사하지 않은 중간값을 쉽게 예상할 수 있습니다. 쉽게 말해 선 그래프는 시간에 따른 연속적인 변화 파악에 쉬운 그래프입니다.
https://dribbble.com/shots/1389856-Analytics/ https://dribbble.com/shots/1724332-Stats선 그래프로 쉽게 알 수 있는 사실은 가로 눈금과, 세로 눈금이 나타내는 정보, 최댓값과 최솟값, 증가와 감소, 변화가 심한 것과 변화가 없는 것, 중간값을 예상할 수 있다는 점입니다. 때문에 수량의 시간적 변화 상태를 나타낼때 이용되고, 한 가지 지표를 나타낸 경우로 운동량이나, 방문객 수, 기온의 시간에 따른 변화, 매출액 변화 등을 나타내기에 알맞은 그래프입니다.
Bar Graph
막대그래프 역시 우리가 쉽게 접할 수 있는 그래프인데요, 여러 가지 통계나 사물의 양을 막대 모양의 길이로 나타내어 알아보기 쉽도록 그린 그림표라 정의되어 있습니다.
http://design.tutsplus.com/tutorials/막대그래프는 수량의 많고 적음이나 늘고 줄어드는 양, 크고 작음을 비교하거나 변화 상황의 일별, 월별, 연별 통계 등에 많이 이용되어지고 있습니다. 즉 자료를 쉽게 비교할 때 사용하는 그래프입니다.
https://www.behance.net/janlosert https://dribbble.com/shots/2032069수평으로 나타낸 그래프는 수평 막대그래프, 막대를 수직으로 하여 나타낸 그래프는 수직 막대그래프라고 합니다. 앞서 꺾은선 그래프가 어떤 것의 변화를 알아보는 데에 쉬웠다면 막대그래프는 무언가를 비교할 때 한눈에 알아볼 수 있도록 사용되어지고 있습니다. 예를 들어 세금, 국민총생산(GNP), 업체의 수익률 등 어떤 통계 값의 늘어나고 줄어든 데에 대한 비교에 알맞은 그래프입니다.
Pie Chart
다음으로 비율 그래프의 한 종류인 원그래프에 대하여 알아보겠습니다. 원그래프는 전체에 대한 각 항목의 비율을 원모 양으로 나타낸 그래프라고 정의되어 있습니다.
다시 말해 전체에 대한 부분의 비율을 쉽게 알 수 있게 해주는 그래프로 항목은 백분율로 표시해 나타냅니다.
원그래프에서 유의할 점은 각 항목의 합이 100%가 되어야 한다는 점입니다.
https://dribbble.com/shots/1562370 https://dribbble.com/shots/1169335원그래프는 비교대상이 5개 미만일 때에 사용하는 것이 가장 좋고, 차이가 큰 경우에 사용하는 것이 더욱 효과적입니다.
Scatter Diagram
산점도는 주어진 데이터를 점으로 표시해 흩뿌리듯이 시각화한 그림입니다. 어떤 상황에서 한 종류의 데이터만이 아니라 두 종류 사이의 관계를 고려해야 할 때 사용되며, 개선하여야 할 특성과 요인과의 관계를 파악하는 데 사용되고 있습니다. 주로 양적인 변수, 연속형 자료의 관계를 보고자 할 때 용이하게 사용된다고 합니다.
https://github.com/ffleandro/VisualMobility?files=1그래픽 디자이너 Kevin Wu는 유명 TV 드라마 에피소드에 대한 시청자의 만족도를 IMDb의 자료를 활용하여 도표로 나타내었습니다. 도트를 클릭하여 시청자의 리뷰를 볼 수 있도록 해놓아서 자신이 좋아하는 드라마 에피소드의 만족도 통계를 알 수 있도록 흥미를 유발해주고 있습니다.
http://graphtv.kevinformatics.com/Radar Chart
레이더 도표는 어떤 측정 목표에 대한 평가항목이 여러 개일 때 항목 수에 따라 원을 같은 간격으로 나누고, 항목 간 균형을 한눈에 볼 수 있도록 해주는 도표라 정의되어 있습니다.
https://dribbble.com/shots/1893311-Health-Tracker-Radar-Graph/attachments/322531여러 측정 목표를 함께 겹쳐놓아 비교하기에도 편리하고, 각 항목 간 비율뿐 아니라 균형과 경향을 직관적으로 알 수 있습니다. 특히 신문, 잡지 등에서 많이 쓰이는 레이더 도표는 여러 제품의 품질을 평가하기 위해서 견고성, 사용 편의성, 가격, 디자인, 고객 서비스 등의 항목을 두고 이를 레이더 도표로 만들어서 각 제품의 장단점과 균형을 쉽게 알 수 있도록 하고 있습니다.
https://dribbble.com/shots/2145307 https://dribbble.com/shots/2033194레이더의 표시장치와 닮아서 레이더 도표라고 하며 레이더차트, 레이더 그래프, 스파이더 차트라 고도 불리고 있습니다.
Pictograph
마지막으로 픽토그래프는 사물, 시설, 행위, 개념 등을 상징화된 그림문자로 나타내 불특정 다수의 사람들이 빠르고 쉽게 공감할 수 있도록 만든 상징 문자라고 정의되어 있습니다.
http://www.worldbank.org/픽토그래프는 상징적인 그림문자 이기 때문에 대상의 의미를 시각적으로 쉽고 빠르게 인식할 수 있도록 만들어져 있습니다. 따라서 인종과 언어를 뛰어넘어 누구라도 보기만 하면 그것이 무엇을 뜻하는지 공감할 수 있어야 합니다.
http://spacing.ca/vancouver/2010/05/26/water-footprint-metro-vancouver/
https://dribbble.com/shots/1746685각 기호는 특정한 양에 대응하고 여러 번 반복하여 수를 나타냅니다. 픽토그래프는 양을 비교할 때에 유용하지만, 정확한 숫자를 나타내는 데에는 무리가 있습니다. 예를 들어 소수점을 나타내거나, 정확한 양을 표시하는 데에는 어려움이 있기 때문입니다. 그렇기 때문에 숫자를 활용하여 정확한 양을 알 수 있도록 함께 표기하기도 합니다.
이외에도 다양한 그래프가 존재하고 있습니다. 다양한 그래프는 정보를 한눈에 전달하고, 쉽게 분석할 수 있도록 도와주고 있습니다. 리서치를 통해서 통계를 내거나 비교를 하는 정보에 있어서 복잡한 말이나 글보다는 도표를 활용하여 시각적으로 정보를 전달하는 것이 더 효과적이라는 것을 생각하게 되었습니다. 더하여 정보와 상황을 파악하여 그에 걸맞은 도표를 사용한다면 사용자가 좀 더 편리하고 쉽게 요점을 파악할 수 있을 것이라 생각합니다.
*참고
