재벌의 가계도를 그렸다
한진그룹/금호그룹 가계도 제작기
가난하지만 당찬 주인공과 모두에게 차갑지만 내 연인에게는 따뜻한 재벌의 로맨스는 현실에 없었다.
이번에 한진그룹과 금호그룹의 가계도를 그리면서 다시 한번 느꼈다. 부인은 고위 관료의 딸, 사촌의 남편은 다른 재벌의 자녀 등등.. 그들은 결혼으로 그들의 기반을 공고히 하는 연을 쌓았다.
그동안 차트나 지도, 네트워크 형태는 많이 시각화했지만 가계도는 처음이라 작업기를 정리했다.
#. 구조 이해 & 형태 정리
일을 시작하면 가장 먼저 스케치를 한다. 스케치는 예쁜 그림이 아니라 마인드맵에 가깝다. 스케치를 하면서 시각화할 데이터의 특징과 작업에서 발생할 수 있는 문제를 정리한다.
우선 가족의 유형을 나눴다. 가장 먼저 자녀가 몇 명인지, 누구인지 파악했다. 그리고 이들이 누구와 결혼했는지 정리했다. 배우자가 대부분 또 다른 재벌이나 고위 관료의 자손이기 때문에 배우자의 부모/조부모도 살펴야 했다.
가계도를 그리기 전 스케치가족의 유형을 정리하고 이들이 어떤 종류의 권력을 가진 사람과 결혼을 하는지 분류했다. 크게 재벌, 고위 관료, 기타로 나눌 수 있었다. 그리고 인물에 대한 기본 정보인 이름, 태어난 순서, 출생 연도, 한자 이름, 주요 이력, 현재 직책 등이 있었다.
데이터를 정리했으니 이번엔 작업에서 발생할 수 있는 문제를 예측했다. 먼저 가계도가 너무 복잡해서 구현을 해도 화면이 작은 모바일에서는 당연히 보기 불편할 것이었다. 그리고 배우자와 배우자의 부모, 조부모까지 봐야 하는 구조를 코드로 어떻게 구현할 지도 생각해야 했다.
#. 그려보자
처음에는 배우자까지 보여줘야 하니 일반적인 네트워크 형태로 구현을 하려 했다. 그러나 가계도가 가진 '가로선은 부부, 밑으로 내려갈수록 자손'이라는 특징과 위치에 관계없이 선으로 얽힌 관계를 표현하는 일반적인 네트워크는 맞지 않았다.
그래서 가계도와 유사하게 구현을 하기로 했다. 코드를 짜기 전에 비슷한 사례가 있는지 찾아봤는데 대부분 한 가문만 그리지 이번처럼 배우자의 가계까지 동시에 구현한 경우는 찾기 힘들었다.
그래서 우선 해당 집안의 가계도만 화면에 보이도록 했다. 그리고 이름을 클릭하면 뜨는 팝업창에 클릭한 인물의 기본 정보를 표기했다.
한진그룹 가계도 1차. 아직 색이나 이미지를 넣지 않았다. 그러면 배우자의 가계도는 어떻게 보여줘야 할까? 다행히 특정한 몇 명만 가계도를 보여주면 됐다. 배우자의 가계도를 보여줘야 하는 경우 인물 정보 창에 함께 나타나도록 했다. 그리고 결혼한 배우자가 어떤 유형인지는 이름을 둘러싼 사각형의 색으로 표현해 어떤 유력 가문과 결합했는지 보여줬다.
최종 웹페이지 화면#. 모바일은?
데이터 시각화를 모바일에서 보여줄 때 보통 세 가지 중 하나를 선택한다. 모바일에 맞게 웹과 모바일의 형태를 완전히 다르게 가거나, 일부만 모바일에 맞게 바꾸거나, 세로형으로 하거나.
이번 가계도는 여러 인물의 위치와(=같은 가로 선상에 있으면 대(代)가 같다) 관계를 나타내는 선(= 가로는 부부, 세로는 자손)으로 결합된 형태가 중요하기 때문에 함부로 형태를 쪼갤 수 없었다. 전체를 조망했을 때 얻을 수 있는 정보가 있기 때문이었다. 그래서 모바일에서는 터치 제스처로 움직이면서 가계도를 볼 수 있게 했다.
#. 마무리
가계도를 코드로 구현할 때 사실 손이 많이 갔다. 처음에 기본 틀을 구현하고, 살을 붙이고 고치면서 형태도 바꿔보고, 어떻게 하면 보기 좋은지 계속 고민했다. 모바일도 고민 끝에 제스처로 보는 방법을 선택했지만 아쉬움이 남는다. 그래도 처음 구현한 시각화 유형이고 재벌의 결혼이라는 독특한 주제를 다룰 수 있어 좋은 작업이었다.
기사
관련 글
이미지 출처
