[사고력 수학] 다이하드 물통 퍼즐을 아기자기한 마법 물약 게임으로 만들기

 

영화 다이하드 3 를 본 사람이라면 누구나 기억하는 유명한 퍼즐이 있습니다. 분수대 앞에서 3L와 5L짜리 눈금 없는 물통 두 개만 가지고 정확히 4L를 만들어 폭탄을 해제해야 하는 그 장면입니다.

문득 이 고전적인 수학 퍼즐을 웹 앱으로 구현해 보면 재밌겠다는 생각이 들었습니다. 요즘 워낙 AI 스튜디오(Gemini) 같은 도구들이 잘 나와 있으니, 프로토타입 정도는 금방 만들 수 있겠다 싶어 가벼운 마음으로 노트북을 열었습니다.

결과적으로 처음에 생각했던 단순한 숫자 맞추기 게임에서, 지금은 직접 손으로 물약을 제조하는 듯한 인터랙티브 한 게임으로 발전하게 되었는데, 그 과정에서 고민했던 흐름을 가볍게 기록해 둡니다.

 

직접 해보면 재미있는 퍼즐입니다.

 

 

1. 단순한 버튼 조작에서 '손맛'이 있는 드래그 앤 드롭으로

처음에는 그냥 화면에 컵 두 개 그려놓고 하단에 '채우기', '버리기', '따르기' 버튼을 배치하는 정적인 구조를 생각했습니다. AI에게 코드를 요청하니 꽤 그럴듯한 파스텔톤의 UI를 1분 만에 뚝딱 만들어 주더군요.

그런데 막상 마우스로 버튼만 띡띡 누르다 보니 퍼즐을 푸는 재미가 좀 반감되는 느낌이었습니다. 이 게임의 본질은 '컵을 들고 물을 쏟아붓는 행위'에 있는데 말이죠.

그래서 방향을 완전히 틀었습니다. 버튼을 다 없애고 드래그 앤 드롭(Drag & Drop) 방식으로 바꾸기로 했습니다.

• 왼쪽에는 물약이 끊임없이 흘러내리는 '마법의 샘(채우기 영역)'을 두고,
• 오른쪽에는 보라색 연기가 피어오르는 '마법 가마솥(버리기 영역)'을 배치했습니다.

물약병을 직접 마우스로 잡아서 샘에다 대면 물약이 찰랑거리며 차오르고, 가마솥에 던지면 비워지게 만들었습니다. 병과 병 사이도 드래그해서 겹치면 물약이 쪼르르 따러지도록 인터랙션을 바꿨더니 비로소 게임 같은 '손맛'이 살기 시작했습니다.

2. 고정된 3L, 5L는 금방 지루해진다: 커스텀 기능의 도입

원작대로 3L와 5L 조합으로 4L를 만드는 건 한두 번 깨고 나면 공식이 외워져서 더 이상 쓸모없는 앱이 됩니다. 게임의 수명을 늘리려면 매번 새로운 문제를 던져줘야 했습니다.

처음에는 단순히 병의 크기를 랜덤으로 바꿔주는 기능을 넣을까 했는데, 생각해보니 사용자가 직접 문제를 설계할 수 있는 '커스텀 모드'가 있으면 수학 교구로도 쓸 수 있고 훨씬 활용도가 높겠다는 계산이 섰습니다.

여기서 한 단계 더 욕심이 났습니다. "컵이 꼭 2개여야 할까? 3개면 어떨까?"

3. 개발 과정에서의 복병: 3개의 컵과 확장성 있는 로직

컵이 3개로 늘어나는 순간, 내부 코딩의 판도가 완전히 바뀝니다. 보통 AI에게 대충 지시하면 코드를 짤 때 flaskA, flaskB 같은 고정된 변수명으로 로직을 짭니다. 이 상태에서 컵이 3개가 되면 A와 C, B와 C가 상호작용하는 코드를 일일이 하드코딩해야 해서 버그가 나기 십상입니다.

이 문제를 깔끔하게 해결하기 위해 AI에게 구조적 가이드라인을 명확히 제시했습니다.

JavaScript

// 하드코딩 대신 배열(Array) 구조로 확장성 확보
const flasks = [
  { id: 0, maxCapacity: 3, currentVolume: 0 },
  { id: 1, maxCapacity: 5, currentVolume: 0 },
  { id: 2, maxCapacity: 8, currentVolume: 0 } // 3번째 컵도 자연스럽게 포함
];

이렇게 모든 물약병을 하나의 배열로 묶고, 드래그가 시작된 병(Source)과 드롭된 병(Target)의 인덱스만 동적으로 찾아내어 붓기 함수(pour(source, target))를 실행하도록 처리했습니다. 이렇게 하니 컵이 2개든 3개든, 혹은 나중에 4개로 늘어나든 상관없이 똑같은 로직으로 깔끔하게 동작하는 코드를 얻을 수 있었습니다.

4. 수학적 예외 처리 (최대공약수와 목표 용량 자동 추천)

사용자가 컵 크기를 마음대로 지정하게 하면 한 가지 문제가 생깁니다. 만약 컵 크기를 4L와 6L로 지정했는데, 목표 용량을 3L로 잡으면 이 게임은 영원히 깰 수 없습니다. 짝수끼리 아무리 더하고 빼봐야 홀수가 나올 수 없기 때문입니다. (정수론의 베주 항등식과 최대공약수 원리 때문입니다.)

게임을 플레이하는 유저가 수학과 교수가 아닌 이상 이런 조건을 다 계산해서 입력하긴 어렵기 때문에, 인풋 창 옆에 '목표 용량 자동 추천' 버튼을 심었습니다. 입력된 컵들의 크기를 기반으로 최대공약수를 계산해서, 반드시 수학적으로 풀 수 있는 정답 케이스만 골라 추천해주는 로직입니다. 이 기능 덕분에 3개 컵 모드에서도 억지 문제가 생기지 않고 매끄럽게 작동합니다.

마치며

가벼운 퀴즈 앱으로 시작했다가 드래그 앤 드롭 터치 인터랙션에 예외 처리 로직까지 들어가면서 제법 그럴듯한 웹 게임 형태를 갖추게 되었습니다. 코드는 단일 HTML 파일로 깔끔하게 떨어지도록 정리해서 깃헙(GitHub)에 올리고 버셀(Vercel)로 무료 배포까지 마쳤습니다. 용량이 몇 메가 되지도 않아서 트래픽이나 서버 비용 걱정 없이 평생 열어둘 수 있을 것 같네요.

AI 스튜디오를 활용할 때 무작정 "만들어줘"라고 하기보다, "구조를 배열로 짜줘", "수학적 예외를 GCD로 처리해 줘" 같이 개발자의 관점에서 명확한 디렉션을 줄 때 정말 훌륭한 파트너가 된다는 걸 다시 한번 느낀 프로젝트였습니다.

가끔 머리 식히고 싶을 때 생각 없이 컵 크기를 조절해가며 물약을 채우다 보면 은근히 시간이 잘 갑니다. 조만간 주변 지인들이나 아이들에게 피드백을 받아보고 난이도 밸런스를 조금 더 다듬어볼 생각입니다.