[추천] MapPuzzle - 지도를 활용한 온라인 퍼즐, 아이들과 꼭 해 보세요!

 

벡터 방식의 지도 데이터를 이용하고 바이브 코딩을 이용해 온라인으로 퍼즐을 하나 만들 생각이었습니다. 구현하려는 것은 세계 지도를 보여주고 특정 국가명을 보여주면서 그 나라를 지도 상에서 클릭해서 맞히는 게임입니다. 사회과부도나 지구본, 전세계 여행 등에 관심이 많은 아이들에게는 좋은 교육 도구가 될 수 있지 않을까 하는 생각이었죠.

 

그런데... 역시 80억의 사람들 가운데 이런 생각을 하는 사람이 없을리가 없잖겠죠? 제가 구상했던 것보다 훨씬 멋지게, 그것도 웹에서 손쉽게 누구나 접근할 수 있도록 공개해 둔 곳이 있었습니다. 해 보면서 감탄하다가 소개를 해야겠다 싶어 정리해 봅니다. 

 

---

📌 MapPuzzle 란?

MapPuzzle은 세계 지리, 국기, 퍼즐을 기반으로 한 교육용 게임 플랫폼으로, 모든 연령대가 즐길 수 있도록 설계되었습니다. 사용자들은 퍼즐 게임을 통해 자연스럽게 지리 지식과 언어 능력을 향상시킬 수 있습니다. 

 

개발자는 스페인 세비야 출신의 Alejandro Aranda (홈페이지)라는 분으로 MapPuzzle은 이 분의 개인 프로젝트 결과물입니다. 

 

 

🎮 어떤 게임인가요?

 

• MapPuzzle.xyz - 지리 퍼즐 (Geographical Puzzles)
  • 세계 각 지역(국가, 주, 도 등)의 경계 지도를 조각 퍼즐로 맞추는 게임
  • 퍼즐 조각을 제자리에 맞추면 해당 지역의 Wikipedia 정보 제공
  • 지리, 역사, 문화 등 배경지식 습득 가능

그림 : 지리퍼즐 형태로 나온 MapPuzzle.xyz 화면

• Flags Quiz - 국기 맞히기 (Guess the Flag)
  • 펄럭이는 국기와 국가 윤곽을 보고 정답 국가 선택
  • 게임 후 해당 국가의 Wikipedia 정보 탐색 가능

 

그림 : Flags Quiz (국기 맞히기) 게임 예시

 

🧐 MapPuzzle의 특징

• MapPuzzle 의 경우, 대륙/지역 필터로 원하는 지도 선택 가능합니다.
• 코드 로컬 설치 운영 가능 (github 링크 참조)
• MIT 라이선스 채택하고 있습니다. 감사~!!!
• 사용되고 있는 기술 스택 
  • 프론트 : React, Bootsrap
  • 지도 렌더링 : Deck.gl (WebGL 기반 인터랙티브 지도)
  • 백엔드 및 데이터 관리 : Node.js, PHP, sqlite, typeorm, PostGIG(-> GeoJSON 변환)
  • 위키백과와 다국어 변역 데이터 연동
  • 모듈화된 구조로 퍼즐조각, 지도, 게임 로직 등이 다 분리되어 있음 
• 미니멀 인터페이스와 반응형 UI
• 앱 설치 기능 (PWA) : 사이트를 앱처럼 설치할 수 있음

 

---

📚️ 참고자료 

• 사이트) MapPuzzle 게임 사이트 (MapPuzzle.xyz, Flags Quiz)
• 코드) MapPuzzle github 저장소 (링크)
• 사이트) 국토지리원 백지도 다운로드 (국내지도, 세계지도) (링크)
• 사이트) 세계지도 SVG 벡터 (링크)