[D3.js] 투수TOP20 vs 타자TOP30
노가다는 모 야메룽다...
문디(Moon.D)는 ‘디지털 저널리즘+데이터 저널리즘+D3.js’를 공부하는 스터디 모임입니다. 주로 문과생들이 참여하고 있습니다. 그래서 이름도 ‘문과생들의 디지털 미디어’를 뜻하는 ‘문디’입니다. 이곳에서 저는 친구들과 함께 위 3가지를 공부하고 있습니다. 지난달까지는 ‘D3.js’라는 자바스크립트 기반 데이터 시각화 라이브러리를 중점적으로 공부했는데요. 책을 한 권 떼고 나서 새로운 유형을 익히기 위해 다양한 템플릿을 이용한 시각화에 도전했습니다.
우선 전달하고자 하는 내용이 있고, 어울리는 도구를 선택하는 과정에서 시각화를 고르는 게 일반적인 방법입니다. 그러나 목적이 시각화 실습이었던 만큼 ‘시각화에 어울리는 이야기’를 고려했습니다. 모여서 회의를 하던 중 생각난 게 야구였습니다. 야구는 매 상황과 결과가 숫자로 저장될 수 있는 경기이고, 기록의 스포츠라 불리기도 합니다. 선수 평가의 기준은 철저히 숫자에 기반을 두고 있으며, 통계적으로 상황에 따라 기대할 수 있는 결과가 달라지기도 합니다. 야구에서의 시각화를 위해 논의를 하다가 타자와 투수 간 관계에 대해 시각화를 하면 좋겠다는 의견이 나왔습니다.
시각화의 초점은 ‘정보’
시각화라고 해서 꼭 특별할 필요는 없습니다. 정보를 시각적으로 전달하기에 적합하기만 하면 됩니다. 물론 화려하고 복잡한 시각화는 대단해 보이기도 하고, 시선도 사로잡을 수 있습니다. 그러나 지나치게 시각적인 효과에 집중하는 시각화는 본연의 목적인 정보 전달을 해칠 수 있습니다. 시각화할 때는 해당 정보에 가장 알맞은 형식을 찾는 게 중요합니다. 초점은 ‘보여주기’가 아니라 ‘정보’에 있기 때문입니다.
스터디 구성원과 상의 끝에 관계도를 그리기에 적합한 템플릿을 찾기로 했습니다. 마이크 보스탁의 블로그에 공개된Hierarchical Edge Bundling 그래프입니다. 요소들이 선으로 이어져 있고, 관계의 속성에 따라서 이어진 선의 색깔이 변하는 그래프입니다. 타자와 투수의 강약관계를 설정하면 한눈에 볼 수 있다는 판단이 들었습니다.
기준 설정의 어려움
시각화를 하기 위해서는 기준이 필요합니다. ‘투수 vs 타자’의 그래프를 그리기 위해서 3가지의 기준이 필요했습니다. ‘어떤 투수’와 ‘어떤 타자’를 선정해서 비교할 것인지, ‘무엇을 기준으로’ 비교할지를 설정해야 했습니다.
야구선수를 어떤 지표 하나만 가지고 단순하게 판단할 수는 없습니다. 타자만 봐도 타율이 높은 타자가 있고, 홈런을 잘 치는 타자가 있고, 작전(희생플라이, 번트)을 잘 수행하는 타자가 있고, 수비력이 중요한 타자가 있습니다. 투수도 마찬가지입니다. 선발투수, 추격조, 중간계투, 마무리투수 등 보직에 따라 요구되는 역할과 능력이 다릅니다.
이처럼 야구선수의 역할은 다양하므로 일률적으로 판단하기란 참으로 어려운 일입니다. 여기서부터는 다소 자의적인 판단이 들어갈 수밖에 없었습니다. KBO 기록실 자료에서 가장 앞에 위치하는 기록을 기준으로 했습니다. 타자는 타율, 투수는 평균자책점이라는 단일 기준을 설정하고 줄을 세웠습니다. 특히 투수의 경우는 규정이닝을 채워야 하므로 중간이나 마무리에서 쏠쏠한 활약을 보여주고 있는 선수는 포함되지 않았습니다.
강·약의 관계 설정도 어려웠습니다. ‘안타를 칠까, 못 칠까’만 따졌을 때는 0.500을 기준으로 하면 됩니다. 그러나 야구에서 일반적으로 ‘잘 치는’ 타자는 통상 3할을 기준으로 하기 때문에 시각화에서도 0.300 이상을 기준으로 했습니다.
데이터 시각화는 데이터 수집과 정제가 필수
데이터 파일데이터 수집은 쉽지 않았습니다. KBO 기록실은 여러 자료를 보여주지만 활용하기 쉽게 데이터 파일 형식으로 올려주지는 않습니다. 게다가 이 파일은 한 명 한 명의 데이터만 출력되는 형식이기 때문에 우리가 아는 범위 내에서는 자료를 한 번에 긁어오기 힘들었습니다. 데이터 파일을 만들기 위해 웹에서 하나하나 클릭해서 일일이 자료를 옮겼습니다. 투수 한 명을 클릭하고 해당하는 팀-타자의 성적을 일일이 스프레드시트에 옮겼습니다.
정제도 쉽지 않았습니다. D3가 읽어낼 수 있는 데이터 형식에 맞춰야 했습니다. 이 과정에서도 제이슨(json) 파일을 편집하는 방법을 모르다보니 편집기를 열어서 직접 텍스트로 작업할 수밖에 없었습니다. 클릭을 너무 많이 해서 팔이 다 아팠습니다. 데이터를 가져오고, 데이터를 정제하는 과정을 확실히 알고 있어야 효율적으로 시각화할 수 있다는 걸 깨달았습니다. 일련의 과정을 지켜본 창성실 블로터 개발자는 다음과 같이 평했습니다.
“아니, 뭐 처음에 그렇게 시작을 하는 거죠.(웃음) 좀 하는 사람 입장에서는 답답해 보일 수도 있는데, 이런 과정에서 도구가 필요하다는 걸 알게 되죠. 처음에는 하나하나 긁는 시간이랑 자동화 도구를 만드는 시간이 거의 똑같긴 한데, 한 번 만들면 다음에 또 쓸 수 있다는 장점이 있습니다.”
완성된 그래프. 마우스를 올리면 선수 간 관계가 표시된다데이터 시각화는 객관적이다?
“(중략) 결국 이것은 우리가 현실의 기반 구조에 대해 많은 가정을 설정해야 하는 모형화 과정의 일부다. 또한, 우리는 변수를 선택하고 설명하는 방법에 관해 표준적 절차를 가져야 한다. 그러나 보편적인 표준이 존재하지 않기 때문에 우리는 작업을 해 나가면서 사려 깊은 방법으로 표준을 마련해야 한다.” – ‘Doing Data Science’, 레이철 슈트, 케시 오닐, p55.
시각화를 하고 나니 선수 간의 강약 관계가 깔끔하게 드러났습니다. 팀도 표시했기 때문에 팀에 강한지 아닌지도 짐작할 수 있었습니다. 예컨대 평균자책점 1위인 양현종의 경우는 타자 상위 30명에 포함된 4명의 넥센 선수 중 3명에게 약했습니다. 2위 해커는 반대로 3명에게 강했습니다. 타율이 높은 선수는 팀의 주축 타자라고 볼 수 있습니다. 기록을 확인해 보니 양현종의 넥센전 피안타율은 0.356이었고, 해커의 넥센전 피안타율은 0.156으로 큰 차이를 보였습니다.
김광현 vs 이호준, 출처 : KBO 기록실문제점도 뚜렷이 나타났습니다. 앞서 이야기한 기준 선정의 한계로 반영하지 못하는 요소는 물론, 선정된 기준을 바탕으로 한 시각화가 사실을 부풀리거나 왜곡하는 경우도 있었습니다. SK의 김광현 선수와 NC 나성범, NC 이호준 선수의 관계를 보면 김광현 선수가 두 선수에게 강한 것으로 나옵니다. 그러나 현실은 조금 다릅니다. 나성범 선수의 경우에는 맞대결이 한 번뿐이라 의미 있는 통계라고 보기 어렵습니다. 특히 이호준 선수의 경우는 총 3번의 타석에서 2번의 볼넷을 얻어 나갔습니다. 이 정도면 오히려 강하다고 할 수 있음에도 타율을 기준으로 삼았기 때문에 선수 간 관계를 제대로 반영하지 못했습니다. 시각화 그래프를 함께 준비한 황유덕 씨는 “데이터 시각화는 현실을 동일하게 보여줄 수 없다”라며 “전체 데이터를 시각화하면서 분명 놓치는 부분들이 있다는 점을 이번 프로젝트를 통해 알았다”고 말했습니다.
