# Boing

> Clean Markdown view of GeekNews topic #24734. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=24734](https://news.hada.io/topic?id=24734)
- GeekNews Markdown: [https://news.hada.io/topic/24734.md](https://news.hada.io/topic/24734.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-12-01T09:44:36+09:00
- Updated: 2025-12-01T09:44:36+09:00
- Original source: [boing.greg.technology](https://boing.greg.technology/)
- Points: 4
- Comments: 1

## Topic Body

- 웹페이지는 사용자가 **마우스로 스프링에 붙은 공을 땡겼다 놓는 동작**을 수행할 때마다 **‘boing’ 횟수**를 기록하는 간단한 인터랙티브 서비스  
- 공과 스프링은 각도에 맞게 물리적으로 움직임  
- 개인별로 **“you've boinged 0 times”** 라는 문구를 통해 현재 사용 횟수를 표시  
- 전 세계적으로 누적된 **총 boing 횟수**도 함께 보여줌  
- 최소한의 인터페이스로 **참여형 웹 실험** 성격을 띠는 프로젝트

## Comments



### Comment 47014

- Author: neo
- Created: 2025-12-01T09:44:36+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=46093473) 
- 이거 정말 마음에 듦. 살짝 **치팅 코드**를 써서 자동으로 마우스를 움직이게 했음  
  - 누군가 이걸로 **Star Wars Imperial March**를 재현하는 코드를 쓸 날을 기다리고 있음 ([YouTube 링크](https://www.youtube.com/watch?v=-NDLlWtudpE))  
  - [boing.playcode.io](https://boing.playcode.io)에서 직접 실행해볼 수 있음  
  - 사실 마우스를 움직일 필요는 없고, 공 안쪽에서 살짝 **오프센터 클릭**만 해도 됨  
  - 거의 포기할 뻔했지만, 결국 **음계 재생 스크립트**를 완성했음. 각 음정에 따라 스프링을 당기고 놓는 방식으로 자동 연주를 구현했음  
  - “업보트 가져가라”는 반응이 나올 만큼 웃겼음  

- 재밌는 점은, 이게 **완벽한 물리 시뮬레이션이 아니기 때문에** 오히려 현실적으로 느껴진다는 것임  
  완벽한 Hooke의 법칙으로 구현하면 너무 뻣뻣하고 가짜처럼 보이는데, 약간의 **느슨함과 감쇠**를 주면 더 자연스러워짐. 일종의 ‘통제된 엉성함’임  
  - “완벽한 물리”가 현실을 완벽히 모사한다는 뜻 아닌가? Hooke의 법칙이 비현실적이라는 말인가, 아니면 실제 스프링 시뮬레이터가 비현실적이라는 뜻인가 헷갈림  
  - 오래된 게임 **Elasto Mania**가 이 원리를 극단적으로 활용했음. 오토바이의 과장된 물리 덕분에 기괴하지만 멋진 스턴트를 할 수 있었음 ([elastomania.com](https://elastomania.com/))  
  - Hooke의 법칙은 이상적인 스프링 모델일 뿐, 실제 스프링은 **감쇠와 마찰**이 존재함. 좀 더 현실적인 모델은 감쇠항을 추가한 **질량-스프링-감쇠기 모델**임 ([Wikipedia 링크](https://en.wikipedia.org/wiki/Mass-spring-damper_model))  
  - Hooke의 법칙은 스프링이 가하는 힘만 고려하고, 스프링 자체의 질량 분포나 운동량 변화는 무시함. 실제 세계는 훨씬 복잡하므로 Hooke의 법칙은 **1차 근사치**에 불과함  
  - 옛날 **플랫폼 게임들**도 마찬가지로, 진짜 물리엔진을 쓰면 오히려 조작감이 나빠졌음  

- 예전에 친구가 아기를 낳았을 때, 장난감이 너무 많아서 거실이 장애물 코스 같았음. 그런데 아이는 결국 **문 스프링**만 가지고 놀았음. 그 단순한 스프링을 만지작거리는 게 묘하게 **치유감**이 있었음  

- 드디어 나왔다! 이제 이걸로 **고전 밈 영상**을 재현할 때임 ([YouTube Shorts 링크](https://www.youtube.com/shorts/pTgJaJYHIAs))  
  - 나는 이 영상일 줄 알았음 ([다른 Shorts 링크](https://youtube.com/shorts/ocvBI_vtJwA))  
  - 아니면 이 버전일 수도 있음 ([YouTube 링크](https://youtu.be/lQ6jZgMaZk4))  

- 이런 걸 보면 예전의 단순한 **웹 토이**들이 왜 그렇게 만족스러웠는지 떠오름  
  로그인도, 온보딩도, “프로로 업그레이드”도 없이, 그냥 하나의 기능만 잘하는 순수한 장난감이었음.  
  전 세계 카운터가 붙어 있지만, 과도한 **게이미피케이션** 없이 깔끔함  

- “이걸 **소셜 기능**으로 만들어보면 어떨까?”라는 제안이 있었음. 예를 들어, 내가 만든 ‘Boing’을 누나에게 보내서 내 기술을 평가받는 식으로  
  - “보낸 마지막 Boing”? “반복 재생되는 Boing”? 그런 식으로 구현할 수도 있겠다는 생각이 듦. 진지하게 고려 중임 :-)  

- 만약 **Elon Musk**였다면, “이건 세계 시뮬레이터의 초기 알파 버전이며, 1년 안에 날씨와 주식 시장을 완벽히 예측할 것”이라고 말했을 것 같음  

- **비압축 코드**를 공개할 생각이 있는지 궁금했음. 코드를 읽어보고 싶었는데, 난독화되어 있어서 아쉬웠음. 얼핏 보니 **howler.js**를 기반으로 하고, 핵심 로직은 모바일 템플릿 아래쪽에 있음  
  - 물론 공개함! [GitHub 저장소](https://github.com/gregsadetsky/boing)  
  - 온라인 **unminifier**로 풀어보는 건 어때? ([unminify2.com](https://www.unminify2.com/))  
  - 구조를 보니 **지수 감쇠 기반 스프링 시뮬레이션**을 `requestAnimationFrame`으로 구현한 것 같음. AI가 만든 버전도 있음 ([jsfiddle 링크](https://jsfiddle.net/z0or7d2y/1/))  

- 이걸 **정확하게 시뮬레이션한 버전**도 보고 싶음. 예를 들어 [engine-sim.parts](https://www.engine-sim.parts/) 같은 스타일로  

- 전 세계 사람들이 만든 **Boing 총합 카운터**가 있었으면 좋겠음  
  - 좋은 아이디어라서 바로 **월드 Boing 카운터**를 구현했음  
  - 여기에 **Boing 히트맵**도 추가하면 재밌을 듯함