브라우저에서 바로 즐기는 해적 해전 게임 — '대항해시대'의 추억을 웹으로

설치 없이 바로 돛을 올리는 해적 게임

옛날 게임 좋아하셨던 분들은 'Sid Meier's Pirates!'라는 이름만 들어도 가슴이 두근거릴 거예요. 1987년 시드 마이어가 만든 이 게임은 카리브해를 무대로 배를 몰고, 다른 배와 포격전을 벌이고, 항구에서 물건을 사고팔고, 때로는 칼싸움까지 하는 자유로운 해적 시뮬레이션이었거든요. 그 고전에서 영감을 받은 'Pirates'라는 해전 게임이 GitHub Pages에 올라왔어요. 가장 좋은 점은 설치가 전혀 필요 없다는 거예요. 링크만 누르면 브라우저에서 바로 게임이 시작되거든요.

왜 이런 프로젝트가 반가운가 하면, 무거운 다운로드나 계정 가입 없이 클릭 한 번으로 게임이 뜬다는 건, 요즘 우리가 잊고 지내던 웹의 가벼운 매력을 다시 보여주기 때문이에요. 게다가 GitHub에 올라온 프로젝트라 소스 코드를 직접 들여다보며 배울 수도 있고요.

브라우저 게임은 어떻게 돌아갈까

이런 웹 게임이 작동하는 원리를 주니어 눈높이에서 풀어볼게요. 보통 브라우저 게임은 HTML의 Canvas라는 '그림판' 위에 그림을 그리는 방식으로 만들어요. Canvas가 뭐냐면, 웹페이지 안에 픽셀 단위로 자유롭게 그림을 그릴 수 있는 도화지 같은 영역이에요. 여기에 자바스크립트로 배, 바다, 포탄을 매 순간 다시 그려주면 움직이는 것처럼 보이는 거죠.

핵심은 게임 루프(game loop) 라는 개념이에요. 이게 뭐냐면, '입력을 받고 → 게임 상태를 갱신하고(배 위치, 포탄 궤적, 바람 등) → 화면을 다시 그린다'를 1초에 수십 번씩 끝없이 반복하는 심장 박동 같은 구조예요. 브라우저에서는 보통 requestAnimationFrame이라는 함수로 이 박자를 화면 주사율에 맞춰 돌려요. 그래야 부드럽게 움직이거든요.

해전 게임이라면 여기에 약간의 물리와 전략이 더해져요. 바람의 방향에 따라 배 속도가 달라지고, 포탄은 거리에 따라 떨어지고, 적 AI는 내 위치를 보고 항로를 트는 식이죠. 이런 규칙들을 잘게 쪼개서 상태(state)로 관리하고, 매 프레임마다 조금씩 업데이트하는 게 게임 프로그래밍의 기본기예요.

업계 맥락 — 왜 다들 웹·오픈소스 게임을 만들까

인디 개발자들이 이런 브라우저 게임을 만드는 데는 이유가 있어요. 첫째, 배포가 압도적으로 쉬워요. 앱스토어 심사도, 설치 파일도 필요 없이 URL 하나면 전 세계 누구나 즉시 플레이할 수 있거든요. GitHub Pages는 이런 정적 웹사이트를 공짜로 호스팅해주니 개인 프로젝트에 딱이고요. 둘째, 소스를 공개하면 다른 개발자들에게 좋은 학습 자료가 돼요. 상용 게임 엔진의 거대한 코드와 달리, 이런 소규모 프로젝트는 '게임이 어떻게 만들어지는가'를 한눈에 따라가기 좋거든요.

물론 Unity나 Godot 같은 본격 게임 엔진으로 만든 작품에 비하면 규모나 그래픽은 소박하겠죠. 하지만 '가볍게, 누구나, 바로'라는 웹 게임만의 강점은 그것대로 뚜렷해요. 고전 명작에 대한 오마주를 현대 웹 기술로 재해석했다는 점에서도 의미가 있고요.

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

게임 개발에 관심 있는 분이라면 이런 오픈소스 프로젝트는 최고의 교과서예요. 직접 코드를 클론해서 '포탄 속도를 바꾸면 어떻게 되지?', '바람 로직은 어디서 처리하지?' 하고 만져보면, 책 백 권 읽는 것보다 빨리 감이 와요. 사이드 프로젝트로 작은 브라우저 게임 하나를 완성해보는 건 자바스크립트 실력과 상태 관리 감각을 키우는 데도 정말 좋고요. 거창한 엔진 없이 Canvas와 순수 자바스크립트만으로도 충분히 재미있는 걸 만들 수 있다는 걸 직접 느껴보세요.

포트폴리오 측면에서도, '완성해서 돌아가는 무언가'를 URL로 바로 보여줄 수 있다는 건 큰 강점이에요. 면접관이 클릭 한 번으로 내 결과물을 즐겨볼 수 있으니까요.