다리 놓기: 자바스크립트에서 OpenGL까지.

72025년 08월 06일3

블라디미르의 눈앞에는 두 개의 세상이 놓여 있었다.

첫 번째는 자바스크립트의 세상. 유연하고, 동적이며, 웹페이지의 모든 요소를 자유롭게 주무르는 언어. 숫자든, 문자열이든, 심지어 함수 자체든 변수에 아무렇지 않게 담을 수 있는 곳. 이곳은 브라우저라는 안전한 영토 안에서 움직였다.

두 번째는 OpenGL의 세상. C/C++을 기반으로 한, 엄격하고 정적인 언어. 모든 데이터는 미리 정해진 자료형을 가져야 했고, 명령어 하나하나가 GPU의 동작을 직접 제어하는 날것의 힘을 지니고 있었다. 이곳은 운영체제의 깊숙한 곳, 시스템 하드웨어와 직접 맞닿아 있었다.

두 세상은 사용하는 언어도, 문법도, 살아가는 환경도 완전히 달랐다. 블라디미르가 ‘Canvas 3D’ 프로토타입으로 하려는 일은, 이 두 이질적인 세계 사이에 다리를 놓는 것이었다.

그 다리의 설계도는 그의 머릿속에 있었다. 그리고 그 설계도를 구현하는 것이 바로 지금 그가 마주한 과제였다.

그는 가장 먼저 ‘통역관’의 역할을 할 인터페이스를 정의해야 했다. 자바스크립트 개발자가 canvas.getContext('experimental-canvas-3d')를 호출했을 때, 어떤 객체를 돌려줄 것인가? 그 객체는 어떤 함수(메소드)들을 가지고 있어야 하는가?

예를 들어, 화면을 특정 색으로 지우는 OpenGL의 glClearColor 함수를 생각해보자. C++에서는 보통 이렇게 호출한다.

glClearColor(1.0f, 0.0f, 0.0f, 1.0f); // 빨강, 초록, 파랑, 투명도

네 개의 실수(float) 값을 인자로 받는 함수. 블라디미르는 자바스크립트 세상에서도 비슷한 경험을 제공해야 한다고 생각했다. 그는 자신이 만든 3D 컨텍스트 객체에 clearColor라는 이름의 함수를 만들기로 했다.

gl.clearColor(1.0, 0.0, 0.0, 1.0);

자바스크립트 개발자가 이 코드를 실행하면, 브라우저 내부에서는 다음과 같은 일이 벌어져야 했다.

  1. 자바스크립트 엔진이 gl.clearColor 함수 호출을 인지한다.
  2. 브라우저는 이 gl 객체가 일반 자바스크립트 객체가 아니라, 게코 엔진의 C++ 코드와 연결된 특별한 객체임을 알고 있다.
  3. 자바스크립트의 숫자(Number) 타입인 네 개의 인자 1.0, 0.0, 0.0, 1.0을 C++의 실수(float) 타입으로 변환한다. 이 과정에서 데이터 손실이나 타입 오류가 없는지 철저한 검증이 필요하다.
  4. 안전하게 변환된 값들을 가지고, 마침내 운영체제 레벨의 glClearColor 함수를 호출한다.

이 단순해 보이는 과정 하나에 수많은 고민이 담겨 있었다. 만약 개발자가 숫자가 아닌 문자열("red")을 인자로 넣으면 어떻게 처리할 것인가? 인자를 3개만 넣거나 5개를 넣으면? 이런 예외 상황들을 모두 처리하고, 브라우저가 다운되지 않도록 안정적인 오류를 뱉어내야 했다.

그는 OpenGL의 수많은 함수들을 하나씩 자바스크립트 세상으로 옮겨오는 작업을 시작했다.

화면을 실제로 지우는 glClear.
어떤 영역을 그릴지 지정하는 glViewport.

함수 하나를 연결할 때마다, 그는 자바스크립트의 유연함과 C++의 엄격함 사이에서 아슬아슬한 균형을 잡아야 했다. 너무 많은 자유를 허용하면 보안에 구멍이 뚫리고, 너무 엄격하게 제한하면 자바스크립트 개발자들이 사용하기에 너무 불편해질 터였다.

그의 코드는 단순히 한 언어를 다른 언어로 번역하는 것을 넘어, 두 세계의 문화와 규칙을 중재하는 외교관의 문서와도 같았다.

블라디미르는 자신이 지금 쌓아 올리는 코드 한 줄 한 줄이, 미래의 수많은 웹 개발자들이 걷게 될 다리의 주춧돌이 되리라는 것을 알고 있었다. 그는 아직 아무도 건너보지 못한 그 다리를 홀로, 묵묵히 건설하고 있었다. 그 끝에 무엇이 있을지는 아직 알 수 없었지만, 그는 확신했다. 이 다리가 완성되면, 웹은 다시는 예전과 같지 않으리라는 것을.