디자이너를 위한 노코드 데이터 시각화 툴
노코드 데이터시각화 툴 RAWGraphs
로우그래프(RAWGraphs)라는 노코드 데이터 시각화 툴이 있습니다. 직관적인 인터페이스를 이용하여 데이터 시각화를 쉽게 만들 수 있습니다. 이전에 소개한 ‘데이터래퍼(Datawrapper)’와 비교하면, 인터랙티비티를 제공하지는 않지만 더 다양한 형태의 시각화를 제공한다는 장점이 있습니다. 또한, 무료버전에서도 이미지 뿐 아니라 ‘svg’ 형태로 시각화를 저장할 수 있어서, 일러스트레이터나 피그마 등의 디자인 툴을 이용하여 업데이트가 가능합니다.
<출처: RAWGraphs>
‘로우그래프’는 실제로 워싱턴 포스트의 그래픽 팀에 재직할 당시 저를 포함하여 많은 비주얼 저널리스트들이 사용하던 시각화 툴 중 하나입니다. 서비스에 가입할 필요 없이 사용이 가능합니다. 위의 화면 맨 오른쪽 위쪽에 있는 ‘Use it now!’ 버튼을 누르면, 아래와 같이 데이터를 입력할 수 있는 페이지로 이동합니다. 이 스토리에서는 ‘로우그래프’와 온라인 디자인 협업 툴인 ‘피그마’를 이용하여 피파(FIFA) 축구선수들의 역량을 한 눈에 파악할 수 있는 방사형 차트(Radial chart)를 함께 만들어 보겠습니다.
시각화 유형 선택하기
데이터를 입력하면, 데이터 시각화 유형을 선택할 수 있는 창이 아래와 같이 나타납니다. RawGraphs는 약 30개 이상의 시각화 유형을 제공하는데요. 이 것이 RAWGraphs가 가진 가장 큰 장점 중 하나가 아닐까 생각합니다. 우리에게 익숙한 바 차트(Bar chart), 선 차트(Line chart)를 포함해서 벌집 플롯(Beeswarm plot), 원 패킹(Circle packing)과 같이 다소 생소할 수 있는 시각화 형태들도 보입니다. 데이터에서 발견한 정보를 잘 전달할 수 있는 시각화 선택의 폭이 넓어졌네요. 우리는 각 선수 별로 민첩성, 균형 등의 역량을 한눈에 비교할 수 있도록 돕는 방사형 차트를 선택하도록 합니다.
<출처: RAWGraphs (https://app.rawgraphs.io/)>
그러면 방사형 차트를 만드는 데 필요한 차트 변수(Chart variables)들을 입력할 수 있는 인터페이스가 아래와 같이 자동으로 생성됩니다. 즉, 선택하는 시각화 형식에 따라 다른 인터페이스가 나타납니다. 아래의 바퀴살(Spokes) 부분은 방사형차트에서 뻗어나가는 각각의 선들을 의미합니다. 이 바퀴살에 보여주고 싶은 데이터 변수들을 바퀴살 컬럼 아래에 입력하면 됩니다.
입력 방법도 굉장히 직관적이에요. 왼쪽에 놓인 차원(Dimensions) 컬럼이 보이나요? 여기에 놓인 데이터의 이름을 끌어다가 원하는 변수부분에 놓으면 됩니다. 저는 아래와 같이 구성해 보았어요. 바퀴살(Spokes)에는 스피드, 균형을 포함하여 역량을 나타내는 데이터 들 중 10가지를 옮겨놓았습니다. 시리즈(Series)에는 선수의 이름을 놓았어요. 색은 선수들이 속한 구단(Club)으로 지정하였습니다.
<출처: RAWGraphs (https://app.rawgraphs.io/)>
변수 선택이 완료되면 아래와 같이 시각화가 만들어집니다. 이 시각화는 선수별 역량을 방사형 차트의 형태로 보여주고 있습니다. 이렇게 같은 형태의 차트가 반복되어 보여지며, 패턴을 찾을 수 있게 돕는 것을 ‘작은 다중 그래프(small multiple)’라고 하는데요. RAWGraphs에서는 이런 ‘작은 다중 그래프’를 쉽게 만들 수 있습니다.
피그마에서 디자인 업데이트 하기
다운로드 받은 ‘svg’ 파일을 디자인 툴을 이용하여 업데이트 할 차례입니다. 우리는 온라인 디자인 협업툴인 피그마을 이용할텐데요, 이 외에도 일러스트레이터 등 본인에게 편한 툴을 이용하면 됩니다.
우선 피그마 사이트에 가입합니다. 가입 후, 사이트 위쪽에 있는 ‘디자인 파일(+Design file)’을 클릭하면 아래와 같이 새로운 디자인 파일이 만들어집니다. 여기서 ‘프레임(Frame)’을 클릭하여 원하는 크기의 아트보드를 만든 후, 앞에서 만든 ‘svg’ 파일을 끌어다가 놓습니다. 그럼 아래와 같이 보이겠죠?
<출처: Figma>
우리는 이 중 하나의 차트를 업데이트 해보려고 합니다. 아래 이미지에서의 왼쪽 차트가 로우그래프에서 작업한 ‘svg’ 파일입니다. 시각정보들의 우선순위가 잘 구별되지 않아서, 어떤 정보부터 해석해야 할지 알기 어렵네요. 또한, Y축의 눈금이 너무 많아 복잡해 보이기도 합니다.
이를 오른쪽과 같이 업데이트해 보았습니다. 여기서 가장 중요한 정보는 선수의 이름이기 때문에 이 크기를 키웠습니다. 그다음으로 바퀴살에 놓인 선수의 역량이 보입니다. 눈금의 경우, 눈금 수를 줄이고 색깔과 크기를 업데이트하여 다른 시각정보에 비해 눈에 덜 띄도록 하였습니다. 시각화를 정보 전달이 좀 더 직관적으로 변한 것 같나요? 이렇듯 로우그래프에서 이용하여 시각화를 하면, 디자인 툴을 이용하여 내가 원하는 스타일로 추가 수정이 가능합니다.
<출처: 로우그래프에서 만든 시각화(왼쪽), 작가가 피그마에서 업데이트한 시각화(오른쪽)>
마무리
로우그래프는 실제로 미국의 언론사에서 자주 쓰이는 무료 노코드 데이터 시각화 툴입니다. 30개가 넘는 시각화 타입을 제공한다는 것이 가장 큰 장점 중 하나에요. 시각화 타입 별로 필요한 변수를 입력하는 인터페이스가 자동으로 만들어지는데요, 이를 통해 직관적으로 시각화를 만들 수 있습니다.
또 하나의 큰 장점은 무료버전에서도 시각화를 ‘svg’ 형태로 저장할 수 있다는 점입니다. 우리는 이 ‘svg’를 이용하여, 피그마 혹은 일러스트레이터에서 새로운 디자인으로 시각화를 업데이트할 수 있습니다. 간단한 차트부터 꽤 복잡한 시각화까지 다양한 목적으로 사용이 가능합니다. 본인에게 맞는 목적으로 어떻게 이 툴을 사용하면 좋을지 한번 생각하고 시도해보면 좋을 것 같습니다.
*이 스토리에서 사용된 데이터는 로우그래프의 예제에서 사용된 것으로, 데이터의 출처는 제공되지 않습니다
자세한 아래의 내용은 요즘IT 원문에서 무료로 확인할 수 있습니다.
첫째, 데이터 올리기
둘째, 시각화 유형 선택하기
셋째, 시각화 설정 업데이트하기
넷째, 피그마에서 디자인 업데이트 하기
https://yozm.wishket.com/magazine/detail/2117/
