프론트엔드 개발자 마크 블라하가 자신의 웹사이트를 통해 ‘Walker Playground’라는 이름의 CSS 애니메이션 실험 프로젝트를 공개했습니다. 이 프로젝트는 고전 게임 ‘레밍즈’의 캐릭터들이 화면 내 다양한 요소 위를 걷고 떨어지는 모습을 모사합니다.
사용자는 페이지 상단의 버튼이나 콘솔 명령어를 통해 작은 보행자 캐릭터를 생성할 수 있습니다. 생성된 캐릭터는 드래그로 들어 올릴 수 있고, 튕기듯 던지면 관성에 따라 움직입니다. 가장 주목할 만한 점은 웹 페이지의 구조적 요소들이 물리적 장애물이나 바닥으로 기능한다는 사실입니다.
테두리, 버튼, 입력 필드, 이미지 박스 등은 단단한 벽처럼 작용하여 캐릭터가 통과하지 못하게 막습니다. 반면 텍스트 영역은 독특한 특성을 보입니다. 각 행이 개별적인 바닥으로 인식되어 캐릭터가 그 위에 착지하거나 걸어서 지나갈 수 있습니다.
하지만 텍스트 자체는 투명한 것처럼 처리되어 캐릭터가 글자를 뚫고 내려가는 현상은 발생하지 않습니다.
창 크기를 조절하면 이러한 물리 환경이 실시간으로 변합니다. 카드형 레이아웃이 좁아진 화면 폭에 맞춰 새로운 줄로 재배치될 때, 그 위에 서 있던 캐릭터들은 밀려나거나 공중으로 튀어 오릅니다. 이는 CSS의 유동적 레이아웃 속성이 자바스크립트 기반 물리 엔진과 결합되어 만들어내는 결과입니다.
브라우저별 성능 차이도 확인되었습니다. 크롬에서는 애니메이션이 부드럽게 재생되는 대신 스크롤링이 다소 버거워질 수 있습니다. 사파리는 CPU 사용량이 더 높지만 스크롤링은 매끄럽게 유지됩니다.
캐릭터 수가 10명에서 200명으로 증가할수록 프레임 드랍이 발생하는 경향이 두 브라우저 모두에서 관찰되었습니다.
기술 커뮤니티에서는 이 구현 방식에 대한 놀라움과 함께 nostalgic한 반응을 보이고 있습니다. 일부 사용자들은 과거 레밍즈 게임을 플레이했던 기억과 연결지어 감정적 몰입감을 토로하기도 했습니다. 또한 CSS가 단순한 스타일링 언어를 넘어 Turing complete에 가까운 복잡성을 가질 수 있다는 점에 대해 우려와 흥미를 동시에 표하는 의견도 제시되었습니다.
현재 해당 실험실은 markblah.github.io/lemmings 주소에서 접근 가능합니다. 프로젝트는 특정 버전의 최신 브라우저 환경을 요구하며, 대량의 캐릭터 동시 처리 시 성능 저하가 발생할 수 있는 한계를 명시하고 있습니다.