SDF Font Atlas

컴퓨터는 글자를 어떻게 그릴까. 대부분의 운영체제와 응용 프로그램은 벡터 폰트 기반의 렌더링 기법을 사용한다. 컴퓨터는 벡터 정보를 해독해 이를 래스터화하고, 후처리를 거쳐 화면에 출력한다. 이는 우리에게 가장 친숙한 방법으로, 굳이 의식하지 않아도 언제든 사용할 수 있다.

하지만 이것이 컴퓨터가 글자를 그리는 유일한 방법은 아니다. 또 다른 방식으로는 부호 거리장(Signed Distance Field, SDF)을 이용하는 방법이 있다. 부호 거리장은 이미지를 이루는 각 점과 형태의 경계선 사이의 거리를 나타내는 장(場)이다. 외곽선을 기준으로 점이 형태 내부에 있으면 음수 값(-), 바깥에 있으면 양수 값(+)을 반환하여, 부호로 형태의 내부와 외부를 구분한다. 이러한 원리를 이용해 픽셀 정보를 다룰 수 있는 환경에서, 셰이더 프로그램을 이용하여 글자 형태를 그려낼 수 있다.

각 글자마다 부호 거리장을 만든다면, 한글의 경우 11,172개의 텍스처 유닛이 필요하다. 그러나 WebGL 2.0 환경에서는 16개의 텍스처만 셰이더 프로그램에 전달할 수 있다. 설령 제약이 없더라도, 만 개가 넘는 텍스처를 각각 관리하는 것은 매우 비경제적이다. 그래서 하나의 텍스처 안에 가능한 많은 글자를 꽉 눌러 담는 방식이 필요하다. 이를 우리는 부호 거리장 서체 판(SDF Font Atlas)이라 부른다.

이는 나에게 단순히 글자를 집적해놓은 기술적 도구 그 이상의 의미로 다가온다. 하나의 PNG 이미지 안에 방대한 서체가 전부 담겨 있는 것을 응시한다. 무심코 사용해 온 하나의 완전한 서체가 이처럼 작은(어쩌면 커다란) 판에 전부 담겨 있음을 확인하는 경험은 무척 감동적이다. 내가 느낀 감동은 시간과 공간, 두 측면에서 표현될 수 있다. 서체 제작자들이 하나하나의 글자를 정교히 다듬기 위해 쏟았을 시간의 깊이를 짐작할 때, 그리고, 단순히 고해상도의 서체 이미지가 차지하는 컴퓨터 메모리 공간뿐 아니라, 수많은 글자들이 서로 밀착하여 이루는 하나의 광활한 공간을 상상할 때.

이 감각은 곧 작업에도 반영된다. 작업은 시간과 공간이라는 두 축으로 나뉜다. 시간 작업은 서체 판의 첫 글자부터 마지막 글자까지 유기적으로 이어진다. 공간 작업은 격자 배열된 글자들을 손가락으로 자유롭게 움직이고, 크기를 키우거나 줄일 수 있도록 설계된다. 이는 부호 거리장 출력이 가진 특징—해상도에 구애받지 않고 다양한 효과를 실시간으로 구현할 수 있다는 점—을 드러내기도 한다.

작업 환경은 라즈베리파이의 크로미움 웹 브라우저 위에서 구현된다. 손바닥만 한 크기의 작은 컴퓨터인 라즈베리파이에서는 텍스처 해상도가 4096×4096으로 제한된다. 그렇기에 모든 정보를 압축하고 최적화하여 담아내야 한다. 이는 곧, 방대한 글자를 한 장의 서체 판에 꽉 눌러 담는 방식과 닮아 있다. 이 모든 과정을 거치고, 최종 출력은 5인치, 7인치 크기의 소형 터치 패널을 통해 이루어진다.