CSS로 구현한 3D DOOM 렌더링

Context

CSS는 원래 선언적 스타일링 언어였으나, 조건문, 수학 함수, 렌더링 트릭이 추가되면서 프로그래밍 가능한 시스템으로 전환되고 있다. 표현과 상호작용의 경계가 흐려지며 추상화 역전(abstraction inversion) 현상이 발생하고 있다.

Technical Solution

• x86CSS 프로젝트 → 순수 CSS만으로 x86 CPU 에뮬레이션 구현
• animation-delay와 @keyframes → 가시성(visibility) 토글 트릭 구현
• .wall에 opacity: 0.7 적용 → 투명 벽핵(wall hack) 효과 재현
• 플레이어 이동 대신 세상 전체 이동으로 렌더링 처리
• 카메라 개념 → 시야각(frustum) 계산 전용으로 활용

Key Takeaway

CSS로 의도하지 않은 용도의 로직을 처리하는 것은 창의적이지만, 이는 명세의 설계 한계를 보여주는 동시에 잘못된 추상화 역전으로 발전할 위험을 경고한다.