차트를 그리는 사람 말고

이 사이트의 코드 전체에서 d3 라는 글자를 찾으면 딱 한 줄이 나옵니다.

"mermaid는 d3와 dagre를 포함해 gzip 500KB가 넘고,"

안 쓰기로 한 이유로만 나옵니다.

D3 는 데이터를 그림으로 바꿔 주는 유명한 도구입니다. 그런데 제가 가고 싶은 방향을 정리한 자료는, 배워야 할 것들 한가운데 그걸 놓습니다.

가고 싶다는 것도 주장입니다. 이 사이트의 규칙은 주장에 증거를 붙이는 것이라서, 배워야 할 것 여섯 개를 하나씩 세어 봤습니다.

세어 본 결과

그림 9편. 이 사이트의 그림은 전부 손으로 그린 것입니다. 도구를 쓰지 않았습니다. 그래서 밝은 화면·어두운 화면을 자동으로 따라가고, 하나가 수백 바이트밖에 안 됩니다.

데이터 2편. 하나는 팀의 실제 기록을 세어 봤더니 "업무를 관리하는 도구"라고 생각한 것이 사실은 배포를 관리하는 도구였다는 이야기입니다. 배포 18건 대 업무 11건이었습니다.

누구나 쓰게 3편. 글자와 배경의 밝기 차이를 계약으로 못박아 두고, 그게 어긋나면 아예 만들어지지 않게 해 뒀습니다.

D3 0편. 그리고 만들어야 한다는 것 세 가지 — 데이터를 설명하는 화면, 지도나 시간 그래프, 다시 쓸 수 있는 차트 묶음 — 도 전부 0 입니다.

0 이라고 못 적은 칸

고르는 법 을 0 이라고 적지 않고 "셀 수 없음"으로 뒀습니다. 정직하려면 그래야 했습니다.

그림 9개를 그리면서 매번 뭘 어떻게 보여줄지 골랐습니다. 예를 들어 바로 앞 글의 그림은 상자 두 개를 일부러 똑같이 그립니다. 화면에서 구별이 안 된다는 게 그 글의 요점이라, 그림도 구별 안 되게 그려야 했습니다.

그건 고른 것이 맞습니다. 다만 이론을 알아서 고른 게 아니라 글의 내용에서 거꾸로 뽑았습니다. 색을 어떻게 써야 오해가 없는지, 축을 어떻게 그리면 사람을 속이는지 배운 적이 없습니다. 그래서 제가 고른 게 맞았는지 판정할 기준이 저한테 없습니다.

증거가 0 인 것과 판정할 기준이 없는 것은 다릅니다. 앞의 것은 만들면 되고, 뒤의 것은 먼저 배워야 합니다.

제일 아픈 칸은 D3 가 아니다

제가 본 자료는, 채용할 때 실제로 확인하는 것에 "키보드로도 쓸 수 있는가" 를 넣습니다.

이 사이트에 시각화라고 부를 만한 게 하나 있습니다. 기록들을 막대로 세워 놓은 3D 화면입니다. 막대 하나가 글 하나이고, 높이가 분량, 가로가 시간 순서입니다.

그리고 이 사이트 문서에 제가 이렇게 적어 뒀습니다.

그 화면의 막대는 키보드로 짚을 수 없다. 목록이라는 다른 길이 있고, 막대에 키보드를 붙이는 건 할 만한 일인데 안 했다.

제가 가장 많이 쓴 주제에서, 제가 가진 유일한 시각화가 떨어집니다. 밝기 차이는 계약으로 못박아 두고, 버튼 크기도 기준까지 올려 놓고, 정작 막대는 키보드로 못 짚습니다.

D3 가 0 인 건 안 해서 없는 것입니다. 이건 해 놓고 빠뜨린 것이라 성질이 다릅니다.

거절했던 이유가 여기서도 맞나

그림 도구를 안 쓴 이유는 이랬습니다 — 그림 하나 그리자고 500KB 를 내려받게 할 수는 없다. 그 글에서 쓸 수 있는 여유가 12KB 였습니다.

그 판단은 지금도 맞습니다. 그런데 D3 를 안 쓸 이유로는 옮겨지지 않습니다.

차이는 그 그림이 무엇이냐입니다.

• 이 사이트에서 그림은 글을 돕는 삽화입니다. 삽화 하나에 큰 도구를 붙이면 본문보다 무거워집니다.
• 데이터를 보여 주는 화면에서는 차트가 제품 그 자체입니다. 무게를 재는 기준이 아예 다릅니다.

같은 저울에 다른 물건을 올려놓고 같은 답이 나오길 바란 셈입니다. 무게를 기준으로 삼은 건 맞았고, 그 기준을 다른 문제에 그대로 들고 간 게 틀렸습니다.

다만 손으로 9번 그려 본 게 손해는 아닙니다. 도구가 대신 해 주는 게 무엇인지 알려면, 그것 없이 직접 계산해 본 쪽이 빠릅니다.

이미 하고 있던 것 하나

제가 본 자료의 마지막 문장은 이렇습니다.

목표는 차트를 그리는 사람이 아니라, 데이터의 의미를 이해하고 알맞은 표현을 골라서 잘 도는 제품으로 만드는 사람이다.

가운데 것 — 알맞은 표현을 고르는 것 — 은 이 사이트가 이미 하고 있었습니다. 차트로 한 적이 없을 뿐입니다.

이 사이트의 마크가 그렇습니다. 저장소의 작업 기록을 동그란 모양으로 접어 만듭니다. 칸 하나가 작업 하나, 깊이가 그 작업이 바꾼 줄 수, 바깥으로 튀어나온 표시가 큰 단계입니다.

그게 데이터를 그림으로 바꾼 것입니다. 차트라고 부르지 않았을 뿐입니다. 그리고 그 마크는 다른 사람 사이트에 붙일 수 없습니다 — 데이터가 다르니까요. 시각화가 장식과 갈리는 지점이 정확히 거기입니다.

제가 확인하지 못한 것

이 글의 근거 절반은 제가 센 것이고, 나머지 절반은 그 자료가 든 것입니다. 둘을 같은 무게로 쓰면 안 됩니다.

그 자료는 실제 채용 사례로 몇 개 회사를 듭니다. 저는 그 공고들을 직접 열어 보지 않았습니다. 그런 직책이 있다는 근거로만 쓰고, 각 공고가 뭘 요구하는지 제가 확인했다고는 적지 않습니다.

확인한 것과 전해 들은 것을 구별하지 않으면, 읽는 사람이 어느 쪽을 믿어야 할지 알 수 없습니다.

다음에 할 것

• 기초를 건너뛰지 않습니다. 그림 9개는 매체를 안다는 증거지 이론을 안다는 증거가 아닙니다. "셀 수 없음"이 그 뜻입니다.
• 키보드부터 갚습니다. 이미 가진 시각화 하나가 이미 적어 둔 기준에 떨어져 있습니다. 새 걸 셋 시작하기 전에 갚는 게 순서입니다.
• D3 는 삽화가 아니라 제품에서 처음 씁니다. 이 사이트 그림에 넣으면 거절했던 판단이 다시 옳아집니다.

증명되지 않은 칸이 부끄러운 게 아닙니다. 증명되지 않았다는 걸 적지 않는 게 부끄러운 것입니다.