자바스크립트 한 줄 없이 CSS로 3D 게임을? 'CSSQuake'가 보여준 브라우저의 진짜 한계

자바스크립트 없이, CSS만으로 3D 게임 화면을 그린다고요?

웹을 처음 배울 때 CSS는 보통 "글자 색 바꾸고, 박스 정렬하고, 버튼 둥글게 만드는 도구" 정도로 익히잖아요. 그런데 이 CSS라는 녀석이 사실 우리가 생각하는 것보다 훨씬 많은 걸 할 수 있거든요. 이번에 나온 CSSQuake가 딱 그 극단을 보여줘요. 1996년에 나온 전설적인 1인칭 슈팅 게임 '퀘이크(Quake)'의 3D 공간을, 화면을 그리는 부분만큼은 자바스크립트 없이 순수 CSS로 렌더링한 데모거든요.

여기서 '렌더링'이라는 말이 좀 어렵게 들릴 수 있는데요. 쉽게 말하면 '화면에 그림을 실제로 그려서 보여주는 일'이에요. 보통 3D 게임은 WebGL이나 캔버스(canvas)로 그래픽카드(GPU)에 직접 그리라고 명령을 내리는데, CSSQuake는 그걸 안 쓰고 평범한 <div> 박스들을 3차원 공간에 늘어놓는 방식으로 만들었다는 게 포인트예요.

div를 대체 어떻게 3D로 세우지?

비밀은 CSS의 '3D 변형(transform)' 기능에 있어요. CSS에는 요소를 앞뒤로 밀고(translateZ), 회전시키고(rotateX, rotateY), 멀고 가까움을 표현하는(perspective) 속성들이 있거든요. 여기에 transform-style: preserve-3d라는 속성을 켜주면, 자식 요소들이 평평하게 눌리지 않고 진짜 3차원 공간에 둥둥 떠 있는 것처럼 배치돼요. 이게 뭐냐면, 종이 인형을 바닥에 눕혀 놓는 게 아니라 공중에 입체적으로 세워두는 거랑 비슷해요.

그래서 벽 하나하나, 바닥 한 칸 한 칸을 전부 div로 만들고, 거기에 텍스처 이미지를 배경으로 깔고, transform으로 적절한 위치와 각도를 잡아주면 퀘이크의 던전 같은 공간이 만들어지는 거예요. 카메라(시점)를 움직이는 것도 결국은 전체 공간을 반대로 회전·이동시키는 CSS 트랜스폼 한 방으로 처리할 수 있고요. 브라우저는 이렇게 만들어진 3D 레이어들을 GPU의 합성(compositing) 단계에서 합쳐 그려주는데, 덕분에 생각보다 부드럽게 돌아가요.

이런 거 처음 보는 건 아니에요

사실 CSS로 한계를 시험하는 문화는 꽤 오래됐어요. 단 몇 줄로 빙글빙글 도는 도넛을 그린 'CSS 도넛'이라든가, 체크박스와 :target 선택자만으로 게임 로직까지 구현한 'CSS 온리 게임'들이 종종 나왔거든요. 옛날 데모씬(demoscene)이라고, 제한된 자원으로 최대한 화려한 걸 뽑아내는 프로그래머들의 경연 문화가 있었는데, CSSQuake도 그 계보에 있는 거예요. WebGL이나 셰이더(Shadertoy)로 하면 훨씬 쉬울 일을, 일부러 CSS라는 '손발 묶인' 도구로 해내는 데서 오는 쾌감이죠.

다만 솔직하게 짚자면, 이건 실무용 게임 엔진이 아니라 '브라우저가 여기까지 된다'를 증명하는 예술 작품에 가까워요. div 수천 개를 3D로 합성하면 GPU 메모리도 많이 먹고, 복잡한 장면에서는 프레임이 떨어지기도 하거든요.

한국 개발자에게는 뭐가 남을까

게임을 CSS로 만들 일은 없겠지만, 여기 쓰인 원리는 실무에 그대로 도움이 돼요. 요즘 웹 서비스에서 카드가 뒤집히는 애니메이션, 패럴랙스 스크롤, 3D 제품 뷰어 같은 걸 만들 때 결국 transform과 perspective, preserve-3d를 쓰거든요. 그리고 "왜 내 애니메이션은 버벅이지?"를 이해하려면 브라우저가 어떤 요소를 별도 GPU 레이어로 올리는지(will-change, transform 사용), 합성 단계가 어떻게 도는지를 알아야 하는데, CSSQuake가 바로 그 합성 엔진을 극한까지 굴린 사례라 좋은 공부거리가 돼요. left/top을 애니메이션하면 느리고 transform을 쓰면 빠른 이유 같은 게 여기서 다 설명되거든요.

한 줄로 정리하면, CSS는 더 이상 '꾸미는 언어'가 아니라 GPU를 다루는 작은 렌더링 엔진이라는 거예요. 여러분은 CSS만으로 어디까지 만들어 보셨어요? 실무에서 3D transform을 재미있게 풀어낸 경험이 있다면 댓글로 공유해 주세요.