요약
고전 게임 Lemmings의 캐릭터가 웹 페이지의 글자와 버튼 위를 걸어 다니게 하는 스크립트입니다.
GitHub 이용자 MarkBlah가 만든 데모 페이지 'Walker Playground'입니다. 의존성 없는 자바스크립트 파일 하나로 픽셀 캐릭터가 페이지 요소를 바닥 삼아 돌아다니고, 캐릭터 그림은 이미지 파일 없이 CSS로 그립니다.
왜 중요한가
- 스크립트 태그 하나나 브라우저 콘솔 주입만으로 아무 사이트에나 붙일 수 있습니다.
- 페이지를 따로 고치지 않아도 기존 웹 레이아웃이 그대로 캐릭터가 뛰노는 무대가 됩니다.
핵심 내용
- 버튼이나
__walker.add()호출로 캐릭터를 늘리고, 끌어서 옮기거나 휙 던질 수 있습니다. - 테두리, 버튼, 입력 칸은 단단한 벽으로 막히고, 글자는 올라설 수도 지나갈 수도 있는 바닥입니다.
- 글줄 간격이 캐릭터 키보다 좁아서 본문 글은 이동을 가로막지 않습니다.
- 창 크기를 바꾸면 캐릭터가 밟고 선 요소를 따라 움직이고, 빠르게 바꾸면 튕겨 나갑니다.
- 데모에는 계단, 오를 수 없는 높은 계단, 떠 있는 발판, 구덩이, 벽 같은 시험 구역이 있습니다.
HN 반응
- 어릴 때 즐긴 게임이라 반갑다는 댓글이 많았고, 작성자는 원작에서 스프라이트를 가져왔으며 우산·추락 동작도 고민 중이라고 답했습니다.
- 모바일 확대 버그와 Chrome·Safari의 성능 차이를 짚으며 CSS 수정안과 requestAnimationFrame 사용을 권하는 조언도 이어졌습니다.
어릴 때 아빠랑 이 게임을 수십 시간씩 했는데, 이런 애니메이션을 보고 직접 만져 보니 향수가 너무 압도적이고 갑작스러워서 몸이 어지러울 지경입니다. 레밍이 너무 높은 데서 떨어져 죽을 때 나는 소리[1]까지 났다면 병원에 실려 갔을지도 모릅니다. 잘 만드셨습니다.
[1] https://www.youtube.com/watch?v=F_RmG9WB4BE
여기에 현대적인 macOS용 Lemmings 포트가 있는데, 몇 주째 하고 있습니다(다른 고전 68k 매킨토시 게임 포트도 여러 개 있습니다): https://roytinker.com/68k-ports/
아니면 https://www.macsourceports.com/game/lemmings
써 봤는데 버그가 있는 것 같고 용량도 큽니다(2.06GB!). 68k-ports 버전은 1.5MB 정도거든요.
용량은 아마 그것 때문일 겁니다.
1991년, Psygnosis(당연히), Commodore Amiga(이것도 당연히!). 그때 남동생이 아홉 살이었고 우리는 십대였는데, Amiga로 레밍스를 미친 듯이 했습니다.
동생은 아직 영어를 못했지만, "자살"시키는 레밍이 내는 "오, 노오오오" 하는 소리를 흉내 내곤 했습니다.
30년도 더 지난 지금까지 동생 별명은 "Lemmings"에서 딴 "렘"이고, 우리는 그렇게 부릅니다. 그리고 20년쯤 전에는 자기 컨설팅 회사 이름을 "Lemmings"처럼 들리게(철자는 조금 다르게) 지었습니다. 지금도 "렘"이고, 그 회사도 그대로 운영하고 있습니다.
오 노오오오오오!
아미가(어쩌면 아타리 ST도?)의 가장 좋은 기능 중 하나가 2인용 버전이었죠. 조이스틱 포트마다 마우스를 하나씩 꽂고, 화면을 분할해서 각자 맵의 반대편 끝에서 시작해요. 상대편까지 가야 하는데, 물론 상대의 시도를 방해하는 일은 절대 없고요. 에헴.
사악한 게임이었죠. 정말 재밌었는데. 이쪽으로 더 확장해 줬으면 좋았을 텐데요...
하하 네, 원작 게임에서 스프라이트를 가져왔어요. 저도 똑같은 생각을 했는데, 우산을 쓰든가 죽든가 하게 하면 웹 분석 수치를 인위적으로 올리기 좋겠더라고요. 말풍선도 넣을까 싶고요.
정말 멋지네요, 공유해 주셔서 감사합니다
꽤 멋지네요.
저도 최근에 제 사이트에 비슷한 걸 만들었어요. 육각형을 클릭하면 로봇으로 변해서 SLAM 매핑을 하듯 페이지를 훑으면서 텍스트 요소 사이를 조심스럽게 돌아다니거든요.
DOM 요소 전체가 아니라 글자 하나하나의 정확한 블록 크기를 이렇게 쉽게 얻을 수 있어서 처음엔 놀라셨나요? 저는 그 부분이 제일 어려울 줄 알았거든요.
https://ablakey.ca/
멋지네요! 사이트도 인상적인데 이룬 일들은 더 대단하세요.
로봇이 지나간 자리의 바닥 판에 불이 들어와서 이동 기록을 보여 주는 게 재미있는 디테일이네요
최근에 제가 만들고 있는 클리닉 관리 소프트웨어에 이스터 에그로 레밍스를 넣었습니다.
https://postimg.cc/gxvZHbgG
정말 예쁘네요! 환자들을 측정해서 차트로 그리지는 않았으면 좋겠어요 ^-^
제 기억이 맞는지는 모르겠지만, html5lemmings(비슷한 이름이었을 수도 있습니다)라는 사이트가 있어서 게임 몇 레벨을 해 볼 수 있었습니다. 현대적인 웹 애플리케이션이 나오기 전이라 대부분 서버에서 렌더링하고 자바스크립트는 최소한만 쓰던 시절이었습니다. 데모가 꽤 인상적이었습니다. 아직 남아 있는지는 모르겠습니다. 잠깐 검색해 봤는데 찾지 못했습니다.
dhtml lemmings
https://www.elizium.nu/scripts/lemmings/
그거예요! 고맙습니다.
하하 이런 막연한 부탁에 답이 달리다니 정말 좋네요. 이래서 이 포럼이 좋아요. 주제에서 벗어나서 죄송합니다.
귀엽네요 :) 모바일에서 확대 관련 버그가 몇 개 있는데, 이런 식으로 하면
html { overflow-x: clip; touch-action: manipulation; }해결될 거예요!
모바일에서는 화면을 아래위로 빠르게 스크롤하면 레밍을 점프시킬 수 있어요. 위로 쏘아 올리거나 밀어 올리는 느낌으로요
오 감사합니다, 넣어 볼게요
좋네요! 안드로이드 접근성 설정에서 디스플레이 크기를 최대로 해 보신 적 있나요? 대부분 계단에서 잃어버렸고 나머지는 벽 속으로 떨어졌어요. 원래 그런 건가요? 바닥까지 간 레밍은 하나도 없었어요. 그래도 꽤 멋집니다.
브라우저마다 흥미로운 실험 결과와 차이가 있었습니다.
다음 테스트를 사용했습니다: (async () => { const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); for (let i = 0; i < 200; i++) { __walker.add(); await sleep(10); } })();
Chrome과 Safari 둘 다 JavaScript 콘솔에서 실행했습니다.
애니메이션은 Chrome에서 훨씬 부드럽지만, 그 페이지에서 스크롤하면 정말 괴로워집니다.
반면 Safari는 애니메이션을 돌리는 데 CPU를 훨씬 많이 쓰고, 레밍 수를 10 -> 50 -> 100 -> 200으로 늘릴수록 애니메이션 프레임 속도가 급격히 떨어집니다. 하지만 스크롤은 내내 부드럽게 유지됩니다.
스크립트가
setInterval대신requestAnimationFrame을 쓰도록 바꾸면 두 브라우저 모두 페이지 반응이 더 부드러워질 수도 있습니다.저는 뷰포트 맨 아래 왼쪽이나 오른쪽 여백에 레밍을 놓고 스크롤을 내려서 레밍이 추락하게 하는 걸 즐겨요. 그다음에 다시 스크롤을 올리면 트램펄린 위에 있는 것처럼 튀어 오르게 만들 수 있어요. 진짜 웃겨요.
최근에 xpenguins[1]를 웹[2]으로 바이브 포팅했습니다. 북마클릿으로 쓸 수 있고 아무 웹사이트에서나 돌려 볼 수 있어요. 다만 원조 레밍스는 없고, 짝퉁 펭귄만 나옵니다.
[1] http://xpenguins.seul.org/ 및 업데이트 버전 https://github.com/Grumbel/xpenguins-ng
[2] https://xpenguins-web.github.io/
하하 멋지네요, sheep.exe를 사냥하러 가야겠어요
이 스레드를 열었을 때 제일 먼저 든 생각은 레밍이 아니라 pingus 캐릭터가 보고 싶다는 거였어요.
캐릭터 원작자인 분이 xpenguins 유지보수를 맡으셨다는 것도 멋져요.
잘하셨어요!
참고로 말씀드리면, 동작 줄이기(prefers reduced motion) 설정을 켜 둔 사람에게는 아무것도 표시되지 않습니다.
C64 데모 "Rodents in the Attic"(2026): https://www.youtube.com/watch?v=fbXIdK3o3NU
설명: https://www.youtube.com/watch?v=uZ1atMUOUMU