'캔버스(Canvas)'라는 작은 가능성.

5

발행일: 2025년 08월 05일

블라디미르의 시선은 HTML5 명세서의 한 줄에 고정되었다. 너무나도 단순해서 그냥 지나치기 쉬운, 하지만 그의 눈에는 그 어떤 태그보다 찬란하게 빛나는 한 단어.

<canvas>

그것은 말 그대로 ‘캔버스’였다. 웹페이지 위에 자바스크립트로 그림을 그릴 수 있는 사각형의 빈 공간을 만들어주는 태그. 그 자체로는 아무것도 보이지 않는, 투명한 도화지였다.

이것이 등장했을 때, 대부분의 개발자들은 그 쓰임새를 명확하게 상상했다. 자바스크립트 명령어를 통해 선을 긋고(lineTo), 사각형을 채우고(fillRect), 원을 그리는(arc) 기능. 이것은 웹페이지에 동적인 차트나 그래프를 그리거나, 간단한 2D 게임을 만들거나, 웹 기반의 포토 에디터를 구현하는 데 쓰일 훌륭한 도구였다.

그 이상도, 그 이하도 아니었다.
이미지 태그(<img>)가 정적인 그림을 보여준다면, 캔버스 태그는 동적으로 그림을 그려내는 판이었다. 혁신적이긴 했지만, 어디까지나 2차원의 범주 안에서의 이야기였다.

하지만 블라디미르의 생각은 달랐다. 그는 캔버스의 본질을 파고들었다.

‘캔버스는… 픽셀의 집합이다.’

캔버스는 벡터(Vector) 방식이 아니었다. ‘좌표 (10,10)에서 (100,100)까지 직선’이라는 정보를 기억하는 것이 아니라, 그 직선이 지나간 자리의 픽셀들을 특정 색상으로 칠해버리는 비트맵(Bitmap) 방식이었다. 한번 그려진 그림은 그저 수많은 색깔 점들의 배열일 뿐, 브라우저는 그것이 원래 선이었는지, 원이었는지 기억하지 못했다.

바로 그 지점에서 블라디미르의 머릿속에 섬광이 스쳤다.

‘어떤 픽셀을, 어떤 색으로 칠할지… 내가 결정할 수 있다면?’

기존의 2D 그리기 명령어(fillRect, lineTo 등)에 의존할 필요가 없었다. 만약 3차원 공간에 있는 큐브를 상상하고, 그 큐브가 2차원 화면에 어떻게 보일지 CPU가 직접 계산한 다음, 그 계산 결과에 따라 캔버스의 각 픽셀 색상을 하나하나 직접 지정해준다면?

이론적으로는 가능했다. 하지만 그것은 결국 성실하지만 느린 CPU에게 모든 짐을 지우는 방식일 뿐, 근본적인 해결책이 될 수 없었다.

그때, 그는 한 단계 더 나아갔다. 발상의 완전한 전환이었다.

‘만약… 캔버스에서 얻어내는 ‘그리기 도구’의 종류가 하나가 아니라면?’

지금까지 개발자들은 캔버스로부터 ‘2d’라는 이름의 그리기 도구 세트(Context)를 받아 사용했다. getContext('2d'). 이 코드는 2차원 그림을 그리는 데 필요한 모든 명령어를 돌려주었다.

그렇다면, 만약 완전히 새로운 종류의 도구 세트를 요청할 수 있다면 어떨까.

getContext('3d') 같은, 혹은 getContext('experimental-webgl') 같은 명령어를 입력했을 때, 브라우저가 2D 그림 도구가 아닌 전혀 다른 것을 돌려주는 것이다.

그것은 선을 긋고 면을 칠하는 도구가 아닐 것이다.
대신, GPU에게 직접 명령을 전달할 수 있는 ‘통신 채널’ 그 자체여야 한다.

이 아이디어 속에서 캔버스의 역할은 완전히 재정의되었다. 캔버스는 더 이상 그림을 그리는 도화지가 아니었다. GPU라는 거대한 화가가 자신의 작품을 완성해서 걸어둘 ‘액자’이자, 그 화가와 소통할 수 있는 유일한 ‘창구’가 되는 것이다.

개발자는 자바스크립트로 3차원 데이터를 준비한다. 그리고 새로 얻어낸 3D 컨텍스트를 통해 그 데이터를 GPU에게 보낸다. GPU는 그 데이터를 받아 엄청난 속도로 3D 이미지를 그려낸 뒤, 약속된 장소인 캔버스 태그 위에 그 결과를 뿌려준다.

모든 조각이 맞아 들어갔다.

보안 문제? 캔버스와 새 컨텍스트를 통해 전달되는 명령어들을 브라우저가 철저히 검증하고 제한하면 된다.
호환성 문제? 모든 브라우저가 동일한 3D 컨텍스트 명세(API)를 따르도록 표준을 정하면 해결된다.
플러그인 문제? 필요 없다. 이것은 순수한 HTML과 자바스크립트, 즉 웹의 언어만으로 동작하니까.

블라디미르는 심장이 세차게 뛰는 것을 느꼈다. 이것은 단순한 아이디어를 넘어, 실현 가능한 청사진이었다. 웹의 평면성에 종말을 고하고, 새로운 차원의 문을 열 수 있는 열쇠.

그 열쇠는 바로 <canvas>라는, 누구도 주목하지 않았던 작은 가능성의 태그였다. 이제 남은 것은 직접 그 문을 만들어 증명해 보이는 것뿐이었다.