마우스 커서가 캠프에 간다면? Neal.fun의 'Cursor Camp' 인터랙티브 실험

마우스 커서로 노는 웹사이트

혹시 Neal Agarwal이라는 이름 들어보셨어요? "The Password Game", "Stimulation Clicker", "Infinite Craft" 같은 중독성 강한 웹 장난감을 혼자 만들어 올리는 개발자예요. 신작이 Cursor Camp인데, 이름 그대로 "커서들이 캠프에 간 풍경"을 보여주는 인터랙티브 페이지예요. 들어가면 내 마우스 커서가 어떤 캐릭터가 되어서 모닥불, 텐트, 호수 같은 캠프 환경을 돌아다닐 수 있어요.

별것 아닌 것 같죠? 그런데 웹 개발자라면 "이걸 어떻게 만들었지?" 하는 호기심이 자연스럽게 생기는 작품이에요. Neal.fun 시리즈는 매번 평범해 보이지만, 들여다보면 의외로 정교한 기술이 들어가 있거든요.

기술적으로 뭐가 들어가는가

웹에서 마우스 커서 모양을 바꾸는 건 사실 오래된 CSS 기능이에요. cursor: url('...'), auto; 한 줄이면 끝이거든요. 그런데 Cursor Camp 같은 작품은 단순히 모양만 바꾸는 게 아니라 커서가 "캐릭터"처럼 행동해요. 움직이면 다리가 걷는 애니메이션이 나오고, 멈추면 가만히 서 있고, 특정 오브젝트에 가까이 가면 상호작용이 일어나요. 이걸 구현하려면 진짜 시스템 커서는 숨기고(cursor: none), 그 자리에 DOM 요소나 Canvas 위 스프라이트를 그려서 mousemove 이벤트로 따라다니게 만들어야 해요.

부드럽게 따라가게 하려면 easing(완만하게 이동)이라는 트릭을 써요. 매 프레임마다 현재위치 = 현재위치 + (목표위치 - 현재위치) * 0.1 같은 식으로 조금씩 다가가게 만들면, 마우스가 휙 움직여도 캐릭터가 살짝 늦게 따라오는 "끈적한" 느낌이 나요. 이게 Cursor Camp의 귀여움을 만드는 핵심 트릭이에요.

배경 요소들 — 모닥불의 불꽃, 호수의 잔물결, 나뭇잎의 흔들림 — 은 GIF나 SVG 애니메이션, 혹은 프레임 단위 스프라이트 시트로 처리하는 게 일반적이에요. Neal은 보통 가벼운 자체 JS와 약간의 Canvas만으로 끝내는 스타일이라, React 같은 무거운 프레임워크 없이도 이런 게 충분히 가능하다는 걸 보여줘요.

작은 웹 작품의 큰 의미

요즘 웹은 "앱"이 됐어요. SaaS 대시보드, 거대한 SPA, 끝없는 스크롤. 그 와중에 Neal.fun 같은 사이트는 "웹은 원래 가지고 노는 곳이었다"는 걸 상기시켜줘요. 단일 HTML 파일로 끝나는 작품, 회원가입 없는 즉시 체험, 모바일에서도 어떻게든 돌아가는 가벼움. 이건 단순한 향수가 아니라, 웹 플랫폼이 가진 진짜 강점을 보여주는 거예요. 앱스토어 심사도, 설치도, 업데이트도 필요 없잖아요.

비슷한 결의 작품을 만드는 사람들로는 Bruno Simon(브루노 시몽) — Three.js로 자기 포트폴리오를 자동차 게임처럼 만든 사람, Robby Leonardi — 슈퍼마리오 풍 인터랙티브 이력서로 유명한 사람, 그리고 Cassie Evans — SVG 애니메이션 대가가 있어요. 이들 모두 "웹은 가지고 놀 수 있는 매체"라는 같은 철학을 공유해요.

한국 개발자에게 주는 시사점

프론트엔드 포트폴리오 고민하는 분들께 추천하고 싶어요. 백 번째 "Todo 앱"보다, 작아도 누가 보면 "오, 이거 어떻게 했지?" 하고 멈추게 하는 인터랙션 한 개가 훨씬 강력해요. 채용 담당자 입장에서도 코드만 보는 게 아니라 "이 사람이 사용자 경험을 얼마나 섬세하게 다루는가"를 한눈에 알 수 있거든요.

기술 스택도 부담 없어요. 바닐라 JS + CSS + 약간의 SVG/Canvas면 충분하고, 호스팅은 Cloudflare Pages, Vercel, GitHub Pages 무료 등급으로 다 커버돼요. 실제로 한국에도 "한강 산책" 같은 인터랙티브 작품들이 가끔 등장하는데, 만들 때 가장 중요한 건 "웃음"이에요. 정보 전달이 아니라 사람이 한 번 미소 짓고 가게 만드는 것.