CSS만으로 DOOM을 3D 렌더링하다 — 브라우저의 한계는 어디까지일까

자바스크립트 없이 CSS로 DOOM을?

1993년에 나온 전설적인 FPS 게임 DOOM을 온갖 플랫폼에서 돌리는 건 개발자 커뮤니티의 오래된 밈이에요. 임신 테스트기, ATM, 프린터 등 "이걸로도 DOOM이 돌아간다고?" 하는 기기들이 수도 없이 등장했죠. 그런데 이번에는 좀 특별해요. 네덜란드의 웹 개발자 Niels Leenheer가 순수 CSS만으로 DOOM의 3D 렌더링을 구현한 프로젝트를 공개했거든요.

여기서 핵심은 "자바스크립트 없이"라는 점이에요. 보통 웹에서 뭔가 동적인 걸 하려면 JavaScript가 필수라고 생각하잖아요. 그런데 이 프로젝트는 CSS의 최신 기능들만 조합해서 3D 공간을 표현하고, 실제로 DOOM의 맵을 렌더링하는 데 성공했어요.

어떻게 CSS로 3D를 만들 수 있을까

이게 가능한 이유를 이해하려면, 최근 CSS에 추가된 기능들을 좀 알아야 해요. CSS는 더 이상 "글자 색 바꾸고 여백 주는 도구"가 아니거든요.

먼저 CSS 3D Transforms라는 게 있어요. transform: rotateX(), perspective() 같은 속성을 쓰면 HTML 요소를 3D 공간에서 회전시키거나 원근감을 줄 수 있어요. 이게 뭐냐면, 종이 한 장을 비스듬히 기울여서 보는 것처럼 HTML 요소를 3차원적으로 배치할 수 있다는 뜻이에요.

다음으로 CSS Custom Properties(CSS 변수)와 calc() 함수가 있어요. 변수에 값을 넣고 수학 계산을 할 수 있는 건데, 이걸 조합하면 꽤 복잡한 수치 연산도 CSS 안에서 처리할 수 있어요. 예를 들어 플레이어의 위치 좌표를 CSS 변수로 잡고, 벽까지의 거리를 calc()로 계산하는 식이죠.

또 CSS Houdini라는 스펙이 있는데, 이건 브라우저의 렌더링 엔진에 직접 접근할 수 있게 해주는 API예요. 쉽게 말하면, 브라우저가 화면을 그리는 과정에 개발자가 끼어들 수 있는 통로를 열어주는 거예요. 이걸 통해 커스텀 페인트 워크릿(Custom Paint Worklet)을 만들면, CSS만으로도 픽셀 단위의 렌더링이 가능해져요.

Niels는 이런 기능들을 극한까지 활용해서, DOOM의 레이캐스팅(raycasting) 방식을 CSS로 재현했어요. 레이캐스팅이 뭐냐면, 플레이어의 시점에서 광선을 쏴서 벽에 부딪히는 지점을 계산하고, 그 거리에 따라 벽의 높이를 다르게 그려서 3D처럼 보이게 하는 기법이에요. 원래 DOOM이 사용했던 바로 그 방법이죠.

기존 CSS 데모와는 차원이 다른 이유

사실 CSS로 게임을 만드는 시도는 이전에도 있었어요. CSS로 체스 게임을 만들거나, 체크박스 해킹으로 간단한 인터랙션을 구현한 프로젝트들이 있었죠. 하지만 대부분 2D였고, 상태 관리가 매우 제한적이었어요.

이번 프로젝트가 다른 건 진짜 3D 렌더링 파이프라인을 CSS로 구현했다는 점이에요. 단순히 미리 그려둔 이미지를 보여주는 게 아니라, 실시간으로 시점에 따라 화면을 다시 그려요. CSS의 @property 규칙으로 타입이 지정된 커스텀 프로퍼티를 선언하고, 이걸 통해 브라우저가 값의 변화를 보간(interpolation)할 수 있게 만든 거예요.

웹 표준의 발전 속도를 실감하게 되는 프로젝트이기도 해요. 5년 전만 해도 이런 건 상상하기 어려웠거든요. CSS Working Group이 Houdini, Scroll-driven Animations, Container Queries 같은 스펙을 꾸준히 밀어온 결과가 이렇게 극단적인 형태로 증명된 셈이에요.

업계 맥락에서 보면

CSS의 능력이 확장되는 건 단순히 재미있는 데모를 넘어서, 실제 웹 개발에도 영향을 줘요. 예를 들어 CSS Houdini의 Paint API는 차트 라이브러리, 커스텀 배경 패턴, 복잡한 UI 데코레이션에 활용될 수 있어요. JavaScript 없이 CSS만으로 처리할 수 있는 영역이 넓어지면, 그만큼 메인 스레드의 부담이 줄고 성능이 좋아지거든요.

비슷한 맥락에서 CSS Scroll-driven Animations도 주목할 만해요. 이전에는 스크롤에 따른 애니메이션을 구현하려면 반드시 JavaScript의 IntersectionObserver나 scroll 이벤트를 써야 했는데, 이제는 CSS만으로 가능해졌어요. 이런 흐름을 보면, CSS는 "스타일링 언어"에서 "선언적 인터랙션 언어"로 진화하고 있다고 봐도 과언이 아니에요.

한국 개발자에게 주는 시사점

솔직히 실무에서 CSS로 DOOM을 만들 일은 없겠죠. 하지만 이 프로젝트에서 사용한 기법들은 실무에 직접 적용할 수 있어요.

첫째, CSS Custom Properties를 활용한 동적 테마나 반응형 디자인에서 calc()과 조합하면 JavaScript 의존도를 크게 줄일 수 있어요. 둘째, CSS Houdini Paint API를 알아두면 커스텀 UI 요소를 만들 때 캔버스를 꺼내지 않아도 되는 경우가 생겨요. 셋째, CSS 스펙의 변화를 계속 따라가는 게 중요하다는 걸 보여줘요. @property나 @layer 같은 비교적 새로운 기능들이 실제로 어떤 가능성을 열어주는지 알아두면, 프론트엔드 개발의 폭이 확 넓어지거든요.