AI 요약
웹 개발자 Niels Leenheer는 현대 CSS 기술의 한계를 시험하기 위해 고전 FPS 게임인 'DOOM'을 CSS 기반으로 렌더링하는 프로젝트를 수행했습니다. 이 프로젝트는 1993년 공개된 DOOM 셰어웨어 버전의 WAD 파일에서 정점(vertices), 라인데프(linedefs), 섹터(sectors) 등의 데이터를 추출하여 사용합니다. 모든 벽, 바닥, 적 캐릭터(임프 등)는 각각 하나의 <div> 엘리먼트로 생성되며, CSS 3D 트랜스폼을 통해 3D 공간에 배치됩니다. 게임 로직은 원본 C 코드를 기반으로 Claude AI가 생성한 JavaScript 루프가 담당하지만, 실제 화면의 렌더링과 좌표 계산은 전적으로 CSS 커스텀 속성과 수학 함수에 의존합니다. 이는 지난 30년간 CSS가 단순한 스타일 도구를 넘어 강력한 계산 엔진으로 진화했음을 증명하는 실험적 시도입니다.
핵심 인사이트
- 데이터 소스: 1993년에 출시된 DOOM 셰어웨어 버전의 원본 WAD 파일에서 맵 데이터와 오브젝트 정보를 직접 추출하여 사용함.
- 렌더링 방식: 수천 개의 <div> 요소를 생성하고, GPU 가속이 가능한 CSS 3D 트랜스폼을 활용해 모든 게임 환경을 구성함.
- AI 활용: 원본 DOOM의 C 언어 소스 코드를 JavaScript로 포팅하는 지루한 작업을 해결하기 위해 Claude AI를 활용하여 게임 루프를 생성함.
주요 디테일
- 수학적 계산: 벽의 너비는 피타고라스 정리를, 회전 각도는 델타(delta) 값에 대한 역탄젠트(Inverse Tangent) 함수를 적용하여 CSS 내부에서 계산함.
- CSS 커스텀 속성: 각 <div> 엘리먼트는
--start-x,--floor-z,--ceiling-z와 같은 원본 좌표 데이터를 커스텀 속성으로 전달받아 독립적으로 렌더링됨. - 역할 분담: 게임 상태(Game State)와 로직은 JavaScript가 담당하고, 시각적 표현과 위치 계산은 전적으로 CSS가 담당하는 이원화 구조를 채택함.
- 성능 실험: 브라우저가 수천 개의 3D 변환된 엘리먼트를 실시간으로 처리할 수 있는지 테스트하며 현대 브라우저 엔진의 성능을 입증함.
- 과거 경험: 개발자는 과거 1980년대 오실로스코프에 DOOM을 이식했던 경험을 바탕으로 맵 데이터 추출 및 수학적 기반 지식을 이미 확보한 상태에서 프로젝트를 시작함.
향후 전망
- 웹 기술의 확장성: CSS가 WebGL이나 WebGPU 같은 전문 그래픽 라이브러리 없이도 고성능 3D 렌더링을 보조하거나 대체할 수 있는 가능성을 제시함.
- 브라우저 엔진 최적화: 이와 같은 극한의 실험을 통해 브라우저 제조사들이 CSS 엔진의 3D 처리 효율성을 개선하는 계기가 될 것으로 보임.