Title here
Summary here
자바스크립트 없이 CSS로 마인크래프트를? 이게 진짜 가능합니다!
July 9, 20253 minutes
이게 단순한 영상이 아니라, 직접 플레이 가능한 버전인데요.
여러분, 마인크래프트를 좋아하십니까.
보통 이런 게임은 자바스크립트 같은 프로그래밍 언어로 만들어진다고 생각하는데요.
그런데 만약 자바스크립트 한 줄 없이, 오직 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 선택자와 라디오 버튼, 그리고 라벨의 연결성을 이용해 복잡한 로직을 구현한 개발자의 집요함과 창의력에 감탄하게 됩니다.
이 코드는 우리에게 기술의 한계는 사용자의 상상력에 달려있다는 사실을 다시 한번 일깨워 줍니다.