자바스크립트 없이 CSS로 마인크래프트를? 이게 진짜 가능합니다!
이게 단순한 영상이 아니라, 직접 플레이 가능한 버전인데요.
여러분, 마인크래프트를 좋아하십니까.
보통 이런 게임은 자바스크립트 같은 프로그래밍 언어로 만들어진다고 생각하는데요.
그런데 만약 자바스크립트 한 줄 없이, 오직 CSS만으로 마인크래프트를 만들었다면 믿으시겠습니까.
블록을 쌓고, 부수고, 세상을 회전시키는 모든 것이 가능한, 순수 CSS 마인크래프트가 등장했습니다.
CSS로 만든 마인크래프트, 원리를 알아볼까요.
일단 아래 링크타고 실제 작동영상 살펴보시죠.
이 프로젝트는 CSS의 가능성을 정말 극한까지 밀어붙인 사례인데요.
핵심 비결: 수만 개의 라디오 버튼
이 프로젝트는 보이지 않는 수많은 '라디오 버튼'을 사용한데요.
마치 스위치를 켜고 끄는 것처럼, 이 버튼들의 상태를 저장 공간으로 활용하는 것입니다.
총 3만 5천 개의 라벨(보이는 부분)과 6천 개의 라디오 버튼(보이지 않는 스위치)으로 게임 속 블록의 위치와 종류를 전부 기록한데요.
우리가 블록을 바꾸는 행동은 사실 특정 라디오 버튼을 선택하는 것과 같습니다.
CSS의 숨겨진 능력, :has() 선택자
여기서 CSS의 :has() 와 :checked 라는 기능이 마법을 부립니다.:checked는 '만약 이 라디오 버튼이 눌렸다면?' 이라는 조건을 거는 것이고, :has()는 '어떤 요소가 특정 자식 요소를 가지고 있다면?'을 확인하는 최신 기능입니다.
이 두 가지를 조합해서, 자바스크립트 없이도 "A 버튼이 눌리면 B 블록의 모양을 바꿔라" 같은 명령을 처리할 수 있게 되는 것입니다.
3D 세상 구현과 움직임
CSS에 있는 3D 변환과 원근법 기능을 이용해 픽셀 아트로 된 마인크래프트 특유의 느낌을 완벽하게 재현했습니다.
움직임 버튼을 누르고 있으면 CSS 애니메이션이 부드럽게 작동하여 월드를 회전시키거나 이동하는 것이 가능합니다.
상상을 초월하는 코드의 양
놀랍게도 이 모든 것을 단 480줄의 CSS 코드로 제어한데요.
물론 그 뒤에는 4만 6천 줄에 달하는, 미리 모든 경우의 수를 계산해놓은 거대한 HTML 파일이 있습니다.
말 그대로 CSS를 스타일링 도구가 아닌, 하나의 게임 엔진처럼 사용한 것입니다.
단순한 기술 과시 그 이상
물론 이 프로젝트를 실제 게임 개발에 사용하기는 어렵습니다.
하지만 웹 기술의 한계는 어디까지인지, 그리고 개발자의 창의력이 얼마나 대단할 수 있는지를 보여주는 정말 멋진 사례입니다.
우리가 당연하게 생각했던 기술의 경계를 허무는 이런 도전을 보는 것은 언제나 즐거운 일입니다.
자바스크립트 없이 CSS로 만든 마인크래프트, 그 소스 코드를 직접 분석해 봤습니다.
그러면 실제 공개된 HTML 소스 코드를 직접 들여다보면서, 그 경이로운 작동 원리를 좀 더 깊게 파헤쳐 보고자 합니다.
이것은 단순한 추측이 아닌, 코드에 담긴 개발자의 천재적인 아이디어를 확인하는 과정입니다.
1단계: 9x9x9 세상의 선언
가장 먼저 눈에 띄는 것은 <html> 태그입니다.
보통은 <html lang="en"> 정도로 끝나는데, 이 프로젝트는 시작부터 남다릅니다.<html lang="en" style="--layers: 9; --rows: 9; --columns: 9">
바로 여기서 CSS 변수를 사용해 9x9x9, 즉 729개의 블록으로 이루어진 세상의 크기를 정의하고 시작하는 것입니다.
게임의 기본 틀을 HTML 최상단에서부터 설계한 점이 정말 인상적입니다.
2단계: 모든 경우의 수를 저장하는 라디오 버튼
이 프로젝트의 핵심은 바로 <input type="radio">인데요.
소스 코드를 보면 각 블록의 위치마다 라디오 버튼들이 그룹으로 묶여있는 것을 볼 수 있습니다.
예를 들어 (0, 0, 0) 위치의 코드를 보면 name="cube-layer-0-row-0-column-0" 이라는 똑같은 이름을 가진 라디오 버튼들이 여러 개 있습니다.
그리고 각 버튼은 id="...-air", id="...-stone" 처럼 저마다 다른 블록 타입을 대표합니다.
즉, 한 위치에 어떤 블록이 놓일지는 이 라디오 버튼 그룹 중 어떤 것이 checked 상태인지에 따라 결정됩니다.
마치 수많은 스위치로 각 좌표의 블록 상태를 기록하는 거대한 데이터베이스를 HTML로 만든 셈입니다.
3단계: 상호작용의 마법, <label> 태그
그렇다면 블록을 설치하는 원리는 무엇일까요.
여기서 개발자의 진짜 기발한 아이디어가 드러납니다.
우리가 블록의 한 면을 클릭할 때, 사실 그 면은 <label> 태그로 만들어져 있습니다.
놀라운 점은 이 <label> 태그가 가리키는(for 속성) 라디오 버튼이 자기 자신이 아니라는 점입니다.
예를 들어, (0,0,0) 위치에 있는 블록의 윗면을 클릭하면, 그 라벨은 (0,0,1) 위치, 즉 바로 위 칸의 라디오 버튼과 연결되어 있습니다.
결과적으로 아래 블록의 윗면을 클릭하는 행동이, 비어있는 위 칸에 새로운 블록을 생성(해당 위치의 라디오 버튼을 checked로 만듦)하는 명령으로 이어지는 것입니다.
이것이 자바스크립트 없이도 클릭으로 블록을 쌓는 상호작용을 구현한 핵심 비결입니다.
코드는 상상력을 담는 그릇
이 프로젝트는 단순히 CSS의 기능을 뽐내는 것을 넘어, 웹 표준 기술만으로 얼마나 창의적인 결과를 만들 수 있는지 보여주는 완벽한 증거입니다.
모든 경우의 수를 HTML에 미리 그려놓고, CSS 선택자와 라디오 버튼, 그리고 라벨의 연결성을 이용해 복잡한 로직을 구현한 개발자의 집요함과 창의력에 감탄하게 됩니다.
이 코드는 우리에게 기술의 한계는 사용자의 상상력에 달려있다는 사실을 다시 한번 일깨워 줍니다.