원문: Julia Evans, “How to teach technical concepts with cartoons”

요즘 들어 종종 이런 말을 듣습니다. “와 줄리아, 그림 정말 잘 그리시네요. 멋져요!”

이 말을 들으면 좀 웃음이 나옵니다. 왜냐면 제가 동물을 그리면 이런 모습이 되거든요.

그렇지만! 기술 개념을 그림으로 설명하는 ‘기술’이 실제로 존재합니다. 그리고 여기에 저는 꽤 능숙해진 것 같고요! 여기서 말하는 기술은 "코끼리를 코끼리같이 그리는 것"과는 다른 종류의 기술입니다.

이 글에서는 컴터에 대한 개념을 그림으로 설명할 때 제가 사용하는 몇 가지 패턴을 다룰 것입니다. 특히 애정하는 컴퓨터 관련 주제를 다른 사람들에게 그림으로 알려주고 싶다면, 이 글이 여러분에게 도움이 되면 좋겠어요!

이제 만화를 구성하는 방법과 컴퓨터 개념을 그림으로 표현하는 방법을 살펴봅시다!

만화를 그리기는 그림 실력과는 별개예요

다시 한번 강조하지만 제가 쓰는 시각적 표현 수단은 기본적으로 이게 전부입니다.

저는 기술 만화라는 건 결국 '만화 실력’에 달려 있다고 생각해요! 제가 잘해야 하는 건 다음과 같은 것들이죠.

아주 적은 수의 단어로 아이디어를 전달하기 (예를 들어 이 뮤텍스 만화에는 고작 60 단어 정도만 담겨 있죠)
개념을 간단하게 쪼개기 (“DNS를 이해하기 위해 꼭 알아야 할 핵심 개념은 뭘까?”)
적절한 시나리오를 설정하기 (“뮤텍스가 어떻게 동작하는지 보여주기에 좋은 예시는 뭘까?” )

이제 제가 그림을 그릴 때 자주 쓰는 몇 가지 요령을 소개해볼게요!

캐릭터에 생명을 불어넣으세요

저는 의인화와 인격화 기법을 자주 사용합니다. 시스템을 여러 캐릭터로 의인화하여 서로 대화를 나누는 방식으로 표현하는 거죠. 예를 들면 아래는 쿠버네티스 만화의 한 장면인데요. kubelet 컴포넌트가 API 서버와 이야기하고 있습니다.

이런 방식이 유용한 이유는 다음과 같습니다.

“kubelet”과 “api server”가 (그게 무엇이든 간에) 쿠버네티스에서 중요한 개념임을 강조해 줍니다
두 컴포넌트가 서로 소통한다는 사실을 시각적으로 보여줍니다
같은 내용을 글로 읽는 것보다 훨씬 더 재미있습니다

다음은 제가 만든 네트워킹 진(zine)에 등장하는 일부 캐릭터들입니다. (노트북! 라우터! 운영체제! 프로그램!)

복잡한 컴퓨터 시스템을 “자, 이 시스템에서 핵심이 되는 주요 인물은 이 셋이야!”라고 나눠보는 일은 정말 많은 도움이 돼요.

장면을 보여주세요

캐릭터를 만들었다면 다음 단계는 그 캐릭터들을 장면 속에 넣어 서로 상호작용하도록 하는 것입니다! 다시 말해 “여기서 중요한 등장인물은 노트북, DNS 서버, HTTP 서버다”라는 사실을 먼저 확립한 다음, 실제로 그들이 어떻게 함께 작동하는지를 보여줄 수 있습니다.

다음은 두 사람이 대화하는 장면입니다.

그리고 다음은 두 프로그램이 같은 뮤텍스를 사용하는 장면입니다.

프로그램 2가 “아직 내 차례 아냐”라고 생각하는 이 장면으로 뮤텍스가 사용 중일 때 어떤 일이 벌어지는지를 꽤 명확하게 설명해 줄 수 있습니다. 같은 내용을 문단으로 설명하는 것보다 훨씬 빨리 이해할 수 있을 거예요.

목록을 만들어 보세요

저는 목록을 정말 많이 만듭니다 (한 예로 이 글 자체도 “만화 만들기에서 배운 것들의 목록 :)”이죠). 몇 가지 사례를 소개하겠습니다.

다음은 네트워크 도구들과 각 도구의 용도를 정리한 목록의 일부입니다.

다음은 유닉스 프로세스의 속성을 나열한 목록입니다.

그리고 좋은 질문을 하는 전략에 대한 목록도 있습니다.

제가 목록 만들기를 애정하는 이유는 다음과 같습니다.

단계별로 정리해 볼 수 있습니다 (1단계! 2단계! 3단계!)
구조가 명확해서 이해하기 쉽습니다
누군가에게 새로운 정보를 가르치는 데 효과적입니다 (여러분이 흥미로운 사실 10가지를 나열했는데, 누군가는 그중 7가지만 알고 있었을 수도 있죠!)
어떤 목록도 철저히 완전할 필요는 없습니다 (저도 유닉스 프로세스의 속성 전부를 다룬 건 아니에요!)
목록을 만들다 보면 뜻밖의 배움을 얻는 경우도 있습니다. 예를 들어 저는 리눅스 네트워크 도구를 나열하다가 정말 많은 수의 도구가 있다는 걸 알고 깜짝 놀란 경험이 있어요 (결국 24개만 목록화하고 마무리했습니다!) (목록은 여기에서 볼 수 있어요.)

다이어그램을 그려보세요

손으로 만화를 그릴 때의 가장 큰 즐거움 중 하나는 내가 설명하고자 하는 개념에 대한 다이어그램을 정말 쉽게 그릴 수 있다는 점입니다! LaTeX이나 Graphviz처럼 번거로운 도구들을 만질 필요가 전혀 없죠.

다음은 제가 메모리 단편화를 설명하기 위해 만든 다이어그램의 일부입니다.

그리고 조금 더 복잡한 예시로 UDP 패킷의 구조를 보여주는 다이어그램입니다.

저는 다이어그램에서 화살표와 색상을 활용해 중요한 부분을 강조하거나 부가적인 정보를 전달할 수 있다는 점이 정말 좋습니다. 위 UDP 패킷 다이어그램에서는 (‘출발지 IP 주소(source IP address)’에 비해 내용을 이해하는 데 중요성이 확연히 낮은 ‘프래그먼트 오프셋(fragment offset)’같은) 덜 중요하다고 판단되는 필드는 회색으로 처리했습니다.

농담을 곁들여 보세요

컴퓨터는 종종 몹시 혼란스럽고 예측불가능하게 느껴질 때가 있습니다. 때로는 정말 짜증이 나죠. ("도대체 내 프로그램은 하는 게 뭐야?!!?!") 그래도 한편으론 꽤 웃기기도 해요! 이런 기이한 상황들도 컴퓨터가 주는 재미의 일부라고 생각합니다. 그런 이유로 저는 때때로 만화에 농담을 곁들이고자 합니다.

다음 그림은 쿠버네티스의 스케줄러가 어떤 파드를 아직 스케줄링 하지 않았다는 사실을 깨닫고 걱정에 휩싸인 장면이에요. (스케줄러: “아, 안돼! 나 그거 진작 했어야 했는데! 줄리아가 화낼 텐데!”)

그리고 다음은 다소 엉뚱한 농담인데요. “C는 linearizable(선형화가능한)의 C야!”라는 문장입니다. (‘CAP 정리’에서 C는 ‘consistent(일관된)’를 의미하는데 사실 ‘consistent’라는 용어는 다소 모호합니다. 보다 정확히 말하자면 사실 ‘linearizable’을 뜻한다고 보는 게 맞거든요. 헷갈릴 만하죠!)

텍스트를 그냥 써도 괜찮아요

만화를 즐겨 그리지만 때로는 단락을 그냥 적기도 합니다. 다음은 제가 dstat에 대해 설명한 페이지의 첫 부분입니다.

이 장면은 기본적으로 “dstat은 매초마다 그 1초 동안 컴퓨터가 사용한 네트워크와 디스크의 양을 출력해 줍니다.”라고 단순하게 말합니다. 사실 그냥 타이핑했어도 됐죠! 그럼에도 제가 손글씨로 직접 적는 이유는 “아니, 이건 정말 내가 애정하는 거야. 손으로 직접 써서 보여줄 만큼 좋아해!”라는 마음을 보다 잘 나타낼 수 있다고 생각하기 때문입니다.

컴퓨터 출력 결과도 붙여 넣어 보세요

가끔은 컴퓨터에서 실제로 볼 수 있는 출력 결과를 붙여 넣고 그에 대해 논의하고 싶을 때가 있습니다. 예를 들자면 제가 strace를 주제로 진을 만들 때 strace 출력 결과가 꽤나 혼란스럽다는 사실을 깨달았습니다. 실제 strace 출력 결과를 첨부해서 이에 대해 이야기하고 싶었죠!

다행히 그림에서는 아주 쉬운 일입니다. 왜냐하면 그림에는 내가 원하는 건 뭐든지 넣을 수 있으니까요!

아이콘이나 로고를 따라 그려보세요

처음에 제가 “그림을 잘 못 그린다”라고 했었는데 그건 정말 사실입니다! 하지만 따라 그리기는 할 수 있어요. 제 부족한 그림 실력을 보완하는 재밌는 방법이죠.

로고나 아이콘을 그려 넣는 게 유용할 때가 있어요! 예를 들면 아래는 제가 따라 그린 쿠버네티스 로고, 리커스 센터(Recurse Center) 로고, 리눅스 펭귄인 턱스(Tux), 그리고 고양이 그림이에요. 제가 알기로 고양이는 누군가의 로고는 아니에요.

손으로 따라 그린 이 로고들은 좀 울퉁불퉁하고 애매하지만 저는 그게 오히려 퍽 만족스럽습니다. 마음에 들어요.

만화 디자인하기

여러분의 눈앞에 빈 종이 한 장이 있고 전달하고 싶은 정보가 있다면! 어떻게 하시겠어요? 이럴 때 몇 가지 구조적인 패턴을 가지고 있으면 정말 도움이 됩니다. 다음은 제가 자주 사용하는 예시들이에요.

이건 목록을 만드는 한 가지 방식입니다.

작은 항목 여러 개로 이루어진 목록이고요.

그리고 또 다른 목록인데요, 단계별 목록입니다. 숫자가 매겨진 칸으로 구성되어 있어요!

다음은 목록이라기보다는 일반적인 만화에 가까운 구성입니다. 정사각형이나 직사각형 칸 안에 시각적으로 내용을 배치하여 약간의 이야기가 전개되죠.

마지막으로 꽤나 구조적이지 않은 구성입니다. 개인적으로는 이 정도로 자유로운 구성은 읽거나 따라가기가 조금 어렵다고 느껴져요. 그래서 이보다는 좀 더 구조화된 형태를 선호합니다.

만화를 구성하는 데에 칸을 사용하는 것이 보편적인 방식인 데에는 그만한 이유가 있다고 생각합니다. 칸으로 그림을 구획화해서 독자가 어떤 순서로 읽어야 하는지를 명확하게 만들어주거든요.

단순히 만화로 만든다고 해서 사람들이 알아야 할 내용을 언제나 잘 전달하는 것은 아니에요

다른 만화를 예시로 조금만 비판해 보겠습니다. 이런 건 좋아하지 않지만 예시가 필요하니까요 :)

쿠버네티스를 소개하는 정말 사랑스러운 가이드인 “어린이를 위한 쿠버네티스 일러스트 가이드(The Children’s Illustrated Guide to Kubernetes)”가 있어요.

이 만화는 멋지고, 중요한 개념들도 많이 소개하고 있습니다. 하지만 개인적으로는 쿠버네티스에서 etcd의 역할을 이해하기 전까지는 쿠버네티스가 어떻게 작동하는 건지 전혀 알 수 없었어요. (쿠버네티스의 모든 상태는 etcd에 저장되고 다른 모든 컴포넌트는 상태를 갖지 않거든요.) 그런데 이 만화에서는 etcd에 대한 언급이 단 한 번도 없어요! 그래서 저에게는 쿠버네티스를 이해하는 데 큰 도움이 되지는 않았습니다.

만화를 사용해서 기술 개념을 설명하는 방식에는 두 가지가 있는 것 같아요.

설명을 더 명확히 할 수 있도록 다이어그램이나 만화를 그린다
설명을 더 재미있게 하기 위해 그림을 사용한다

개념을 더 명확하게 만들든 더 재미있게 만들든 둘 다 정말 훌륭한 목표입니다! 재미있게 만드는 건 사람들의 주의를 끌고, 어려운 개념에 대한 두려움을 덜 수 있는 좋은 방법이니까요.

그럼에도 삽화 작업을 할 때면 제 그림이 실제로 개념을 설명하는 데 도움이 되는지 아니면 단순히 재미만 있는지를 꼭 구분해서 생각해보려 합니다. (Wireshark에 대해 설명하면서 상어 그림을 그리는 경우처럼요!)

제 생각에 아동용 쿠버네티스 일러스트 가이드의 경우, 그림의 대부분은 내용을 더 재미있게 만들어주는 역할을 하는 것 같습니다. 실제 내용은 거의 모두 텍스트에 들어 있고요. 기린 그림들을 모두 없애더라도 문서가 전달하는 정보는 기본적으로 달라지지 않을 것 같습니다! 물론 이게 꼭 나쁘다는 뜻은 아니에요. 다만 저는 보통 그림 안에도 좀 더 정보가 담겨 있는 편을 선호하는 거죠.

그리기를 쉽게 해주는 도구들

제가 요즘 이런 그림들을 그릴 때 사용하는 도구는 다음과 같습니다. (더 자세한 내용은 이 인터뷰를 참고하세요)

Samsung Chromebook Plus (꼭 이 모델이 아니어도 되고 S펜이 있는 삼성 태블릿이면 돼요. 아이패드 + 애플 펜슬 조합도 좋아요!)
안드로이드의 Squid 앱 (아이패드의 굿노트도 훌륭해요!)
이게 다예요!

그릴 수 있는 태블릿이 있다는 건, 정말 빠르게 그림을 그린 다음 ‘트위터에 공유’를 눌러 전 세계에 곧바로 보여줄 수 있다는 뜻입니다. 펜과 종이를 썼을 때보다 훨씬 더 많은 그림을 만들어 내게 되었고 그림도 훨씬 보기 좋아졌어요 :)

그림이 예쁘지 않아도 충분히 멋질 수 있어요

처음에는 종이에 펜이나 샤피(Sharpie)로 그림을 그리고 그냥 사진을 찍어서 올리기 시작했어요. 지금까지 보여드린 그림들보다 훨씬 덜 멋져 보였지만 그래도 여전히 정말 괜찮았어요!!

예를 들어 여기 종이에 펜으로 그린 뒤 트위터에 올렸던 아주 초기 그림이 있어요. 지금 보면 좀 조잡하고 읽기 어렵지만 솔직히 말해서 당시 포스팅 했을 때는 긍정적인 반응을 엄청나게 받았답니다 (증거).

그러니까 그림이 꼭 예쁘고 깔끔할 필요는 없어요! 종이에 끄적인 거라도 충분히 괜찮습니다.

기술 만화 주제로 뭐가 좋을지 어떻게 정하냐고요?

작년에 제가 만들었던 부동소수점(Floating Point) 만화를 예로 살펴봅시다! 그 과정을 단계별로 정리하면 다음과 같아요.

먼저 부동소수점에 대해 예전엔 저도 정말 헷갈렸다는 걸 떠올렸어요. 그런데 스테판 카핀스키(Stefan Karpinski)로부터 몇 가지 핵심적인 통찰을 배운 뒤에는 완전히 깨달음을 얻고 엄청 신이 났죠!!!
- double은 64비트입니다. 즉 부동소수점 숫자가 단 2⁶⁴개뿐이라는 뜻이에요!!!
- 2⁵² 다음의 가장 작은 double 값은 2⁵² + 1입니다 (그래서 2⁵² + 0.2 = 2⁵²가 돼요).
- 이 말은 자바스크립트에서는 2⁵³ 이상의 정수를 제대로 표현할 수 없다는 뜻이죠.
“음, 이 세 가지는 정말 단순하니까 만화로 만들 수 있겠다”라고 생각했습니다.
그리고 이 내용을 어떻게 만화의 칸으로 나눠 구성할지 고민했어요!
한 페이지를 넘기지 않도록 했어요.

이렇게 해서 만들어진 최종 부동소수점 만화는 다음과 같습니다.

제 만화의 대부분을 이런 식으로 구성합니다. 제가 오랜 시간에 걸쳐 어렵게 배웠지만 정말 유용했던 어떤 핵심 개념이나 사실, 혹은 놀라웠던 점들을 바탕으로 만들어지죠.

또 다른 예로 “유닉스 권한의 작동 방식”이라는 만화도 그렇습니다. 만약 누군가가 ‘0644’라는 숫자가 8진수라는 사실과 그것이 어떻게 rw-r--r--와 매핑되는지를 모른다면 유닉스 권한 체계를 이해하기가 정말 어렵거든요. 유닉스 권한 만화는 여기에서 보실 수 있어요.

여러분도 기술 만화를 만들 수 있습니다

혹시 여러분도 기술 만화를 그리는 데 관심이 있다면 이 블로그 글이 도움이 되었기를 바랍니다! 저도 기술을 주제로 멋진 일러스트를 만드는 분들을 여럿 봐왔어요.

만화를 만드는 데에 관심이 있다면 스콧 맥클라우드(Scott McCloud)의 책 『만화의 이해(Understanding Comics)』를 강력히 추천드려요. 만화가 어떻게 작동하는지를 아주 멋지게 설명한 책으로, 저도 정말 많은 걸 배웠습니다.

훌륭한 기술 만화를 그리는 다른 몇몇 분도 소개할게요.

Lin Clark https://code-cartoons.com/ (리액트 관련 만화를 많이 그렸어요). 파이어폭스의 내부에 대한 멋진 글들도 있습니다. Inside a super fast CSS engine: Quantum CSS (aka Stylo)
Amy Wibowo https://bubblesort-zines.myshopify.com (컴퓨터 과학을 주제로 한 진!). 예전에 제가 그녀의 작업을 얼마나 좋아하는지를 소개하는 팬 글도 쓴 적 있어요.
Mariko Kosaka https://twitter.com/kosamari 멋진 그림을 트위터에 자주 올려요! HTML1.x와 2.x의 차이를 그린 이 그림을 보세요.
Vaidehi Joshi는 컴퓨터 과학을 주제로 정말 멋진 만화를 https://medium.com/basecs에서 만들어 오고 있어요.

만화로 기술 개념을 설명하는 방법

Table of contents