코드로 스케치하기: 입문 가이드

이 글은 kyndinfo.notion.site에 처음 게재되었습니다. 더 많은 정보, 업데이트, 추가 자료는 여기에서 확인하세요.

소개

저는 오래전부터 이런 책을 쓰고 싶었습니다. 입문 과학 교양서처럼 접근하되, 피상적이지 않은 책. 대중 과학서보다 깊이 있으면서도, 학술 교재처럼 딱딱하고 빽빽하지 않은 책 말입니다.

양자물리학을 예로 들어볼까요. 대중 과학서는 이렇게 설명합니다. 세상은 원자보다도 작은 입자들로 이루어져 있으며, 이 입자들은 동시에 파동이기도 하다고요. 흥미롭습니다. 하지만 책을 다 읽고 나면 결국 이런 의문이 남습니다. 파동-입자 이중성을 어떻게 이해해야 할까? 실제로 어떻게 작동하는 걸까? 수학적으로는 어떻게 설명되는 걸까? 그래서 이번엔 대학 교재를 펼칩니다. "여기서라면 답을 찾을 수 있겠지." 하지만 기다리고 있는 건 수식의 벽입니다. 빽빽한 수학적 전개, 부족한 설명, 그리고 독자가 이미 중요한 개념을 알고 있다는 전제. 세부 내용은 담겨 있지만, 수학이나 과학에 탄탄한 배경 지식이 없는 저 같은 독자에게는 그다지 도움이 되지 않습니다.

이런 이유로, 나는 진정한 의미의 입문자를 위한 책이나 글을 쓰는 데 오랫동안 애를 먹어왔다.

사실 저도 예전에 쓴 글 중에는 입문자를 위한 것들이 꽤 있었습니다. 강의나 워크숍, 혹은 동료나 친구들과 나눴던 설명 자료를 바탕으로 한 글들인데, 딱딱한 교과서처럼 느껴지지 않도록 최대한 읽는 재미를 살리려 했습니다. 그런데 솔직히 말하면, 그 글들도 완전한 초보자를 위한 것은 아니었습니다. 어느 정도의 배경지식을 전제하고 쓴 경우가 많았거든요. 아무것도 모르는 상태에서 출발해 모든 개념을 쌓아 올리려면 어마어마한 노력이 필요하고, 사실 이미 훌륭한 자료들도 많이 나와 있습니다. 예를 들어, 벡터 수학을 다루는 책은 이미 충분히 있고, 굳이 제가 그 대열에 합류할 이유도 없습니다.

그래서 오래 고민한 끝에, 완벽한 체계를 갖추거나 처음부터 끝까지 빠짐없이 다루겠다는 욕심은 일단 내려놓기로 했습니다. 그 목표를 좇다 보면 공들인 것에 비해 세상에 실제로 필요한 것을 채워주기 어렵다는 생각이 들었습니다.

대신, 제 머릿속에 있는 지도를 꺼내 보여주는 것이 훨씬 재미있고 고유한 가치가 있겠다는 결론에 이르렀습니다. 전체적인 큰 그림, 핵심 개념들 사이의 관계, 그리고 그 배경에 있는 맥락과 이유 같은 것들 말이죠.

언제나 그렇듯, 이런 글쓰기는 저 자신을 위한 연습이기도 합니다. 아이디어를 정리하고 구조화하는 노트 같은 것으로, 언젠가는 제대로 된 책으로 발전할 수도 있겠죠. 동시에, 독자 여러분이 스스로의 위치를 좀 더 잘 파악할 수 있도록 돕고 싶습니다. 각 개념이 어디에 위치하는지, 무엇이 중요한지, 그리고 어떤 부분은 다른 곳에서 직접 채워야 하는지를 가늠할 수 있는 감각을 드리고 싶습니다.

이 글은 총 8개의 섹션으로 구성되어 있으며, 다양한 시각에서 주제를 다룹니다. 순서대로 읽지 않아도 괜찮습니다. 왼쪽 탐색 메뉴(모바일에서는 오른쪽)를 이용해 원하는 섹션으로 바로 이동하세요.

공간에 대하여

우리는 공간이 무엇인지 본능적으로 안다고 생각합니다. 하지만 정말 그럴까요? 일상적인 감각으로 보면, 공간은 사물과 물질이 채워지는 빈 곳처럼 느껴집니다. 우리는 모두 공간 안에 존재하고, 공간 속을 이동합니다. 공간은 그 안의 모든 것과 무관하게 독립적으로 존재하는 배경처럼 보입니다.

절대 공간과 상대 공간

뉴턴도 같은 생각을 했습니다. 그는 이렇게 썼습니다.

절대 공간은 그 본질에 있어, 외부의 어떤 것과도 무관하게, 언제나 동일하고 불변하는 상태로 존재한다.

그러나 뉴턴은 절대 공간이 존재한다 하더라도, 우리가 그것을 실제로 인식하기란 사실상 불가능하다고 보았습니다. 절대 공간 속에서 우리는 어디에 있는 걸까요? 알 수 있는 방법이 없습니다. 그래서 그는 이렇게 이어갑니다.

상대 공간은 절대 공간을 측정하는 움직이는 척도이며, 우리의 감각이 주변 물체와의 위치 관계를 통해 파악하는 것이다.

뉴턴이 말하는 것은 간단합니다. 위치란 항상 무언가를 기준으로 삼아야만 측정할 수 있다는 것입니다. 우리가 걸을 때 움직임은 땅 또는 지구를 기준으로 합니다. 지구의 공전은 태양을 기준으로 한 운동이고, 태양과 태양계는 다시 은하를 기준으로 움직입니다. 상대론적 관점에서 보면 천동설과 지동설 모두 각자의 기준계 안에서는 옳습니다. 어느 쪽이 절대적으로 맞다고 할 수 없지만, 지동설이 행성의 운동을 훨씬 단순하고 명쾌하게 설명해 준다는 점에서 더 널리 받아들여지고 있을 뿐입니다.

다만, 천동설만을 굳게 믿었던 사람들과 지동설을 발견해낸 사람들 사이에는 커다란 간극이 있습니다. 교조적 믿음과 탐구하는 자세의 차이라고도 할 수 있겠죠. 〈Orb – on the movement of earth〉는 이 주제를 다룬 훌륭한 역사 소설입니다.

2D 캔버스에 그림 그리기

컴퓨터 화면에 무언가를 그리려면 세 가지가 필요합니다. 위치를 측정하는 기준점인 원점, 거리를 재는 기준이 되는 축, 그리고 숫자 1이 실제로 어느 정도의 거리를 나타내는지 정해주는 단위입니다.

이론상으로는 이 세 가지를 자유롭게 설정할 수 있지만, 대부분의 소프트웨어는 저마다 기본 좌표계를 갖추고 있습니다. Photoshop, Illustrator, Figma, p5.js, openFrameworks 같은 2D 드로잉 툴에서는 보통 캔버스의 왼쪽 상단이 원점이 되고, 가로 방향이 x축, 세로 방향이 y축입니다. 단위는 대개 픽셀 또는 기기 단위를 사용합니다. 예를 들어 레티나 디스플레이 맥에서는 1포인트가 물리적 픽셀 2개 또는 3개(설정에 따라 달라집니다)에 해당합니다. 이는 실제 화면 해상도가 달라지더라도 여러분이 지정한 크기가 시각적으로 비슷하게 보이도록 맞춰주기 위한 것입니다.

"지각적으로 같은 크기"에 대해 조금 더 설명하자면, 예를 들어 크기 "14"로 설정한 텍스트는 노트북보다 모바일에서 더 작게, TV에서는 훨씬 크게 표시됩니다. 각 기기가 서로 다른 시청 거리를 전제로 설계되어 있기 때문입니다. 이를 완벽하게 계산하는 공식은 없지만, 대부분의 제조사가 비슷한 기준을 따르고 있어 기기마다 일일이 신경 쓸 필요는 없습니다.

"기본값"이라고 표현한 이유는, 많은 경우 공간, 즉 좌표계를 직접 조작할 수 있기 때문입니다. 디자인 툴에서는 캔버스를 드래그하거나 확대·축소할 수 있고, 프로그래밍 프레임워크에서는 공간을 이동·크기 조정·회전하는 메서드를 제공합니다. p5.js의 translate(), scale(), rotate() 함수가 대표적인 예이며, 좌표를 직접 처리하는 함수를 만들어 쓸 수도 있습니다. 공간을 기울이는 것도 가능합니다. 축은 보통 90°로 교차하도록 설정되지만, 반드시 그럴 필요는 없습니다. 두 축이 서로 평행하지 않아 독립적인 관계를 유지한다면, 각 축에 하나의 값을 지정하는 것만으로도 위치를 고유하게 표현할 수 있습니다.

아래 데모는 매핑(Mapping) 페이지에서 가져온 것으로, 이러한 좌표 변환을 가능하게 하는 간단한 방법인 어파인 변환(affine transformation)을 보여줍니다.

2D 뉴턴 역학

좌표계를 갖추었다면, 이제 그 공간 안에서 무언가를 움직일 차례입니다. 출발점으로 삼기에 뉴턴 물리학만한 것이 없습니다.

뉴턴 물리학에서는 위치에서 시작해 속도를 더해 움직임을 만들고, 가속도를 적용해 속도를 변화시킵니다. 이 모든 요소는 벡터로 표현됩니다. 벡터란 몇 개의 숫자(성분이라고 부릅니다)를 묶어놓은 것인데, 각 축의 값을 따로 다루는 것보다 훨씬 편리합니다. 게다가 벡터에는 매우 유용한 연산들이 정의되어 있어서, 한번 알고 나면 쓰지 않을 수가 없습니다.

Newton and Vectors
Vector Operations

3D 그래픽스

2D 다음은 당연히 3D입니다. 차원 하나를 올리는 것 자체는 그리 복잡하지 않습니다. 위치를 나타내는 벡터의 구성 요소를 2개에서 3개로 늘리면 됩니다. 속도, 가속도 등 벡터로 정의된 값들도 마찬가지입니다. 수학적 원리는 본질적으로 동일하게 유지됩니다.

까다로워지는 부분은 바로 렌더링입니다. 우리가 작업하는 캔버스는 2D이기 때문에, 3D 공간에 정의된 물체를 그대로 올려놓을 수는 없습니다. 3D 공간의 점들을 어떤 방식으로든 2D 공간으로 변환해야 하는데, 이를 '투영(projection)'이라고 합니다. 15세기 브루넬레스키(Brunelleschi)의 시대까지 거슬러 올라가는 오래된 개념입니다.

투영과 3D 렌더링