← Log

I am Ironman: 게임 배포와 프로젝트 점검

I am Ironman 게임 개발기· 7 / 7
  1. 1 — I am Ironman: 프로젝트 소개
  2. 2 — I am Ironman: 프로젝트 세팅
  3. 3 — I am Ironman: 게임 화면 구현
  4. 4 — I am Ironman: 콘텐츠 모션과 애니메이션
  5. 5 — I am Ironman: 콘텐츠 물리 충돌 처리
  6. 6 — I am Ironman: 게임 씬 구성
  7. 7 — I am Ironman: 게임 배포와 프로젝트 점검

기획한 모든 게임 개발을 완료했다.
이제 프로젝트의 최종 목표인 게임을 배포하여 블로그에서 플레이해볼 수 있도록 구현할 것이다.

끝으로, 프로젝트를 최종적으로 점검며 이번 문서를 마무리하겠다.

프로젝트 배포

배포 정보와 과정, 그리고 완료된 화면을 정리한다.

배포 정보

  • 빌드 도구: Webpack
  • 호스팅 서비스: Vercel
  • 접근 방식: 블로그 문서 내 임베딩

배포 과정

  1. Webpack을 사용해 프로젝트를 번들 파일로 빌드하도록 설정한다.
  2. GithubVercel 계정을 연동하고, 해당 레포지토리에 대한 Vercel 접근을 허용한다.
  3. Vercel 계정 내에 새로운 프로젝트를 생성하고, 환경 설정을 마친 후 레포지토리를 연결한다.
  4. 자동 배포가 완료되면 제공된 URL을 통해 웹 게임에 접근할 수 있다.
  5. 블로그 문서에 URL을 연결된 <iframe> 태그를 삽입하여, 게임을 직접 플레이할 수 있도록 한다.
  6. 보안을 강화하기 위해, 본 블로그에 삽입된 <iframe>에서만 접근할 수 있도록 제한한다.

배포 완료 화면

I am Ironman

본 블로그의 ‘Projects’ 메뉴에 게시되어 있는 I am Ironman 프로젝트 소개 페이지에서 배포된 게임을 플레이 해볼 수 있다.

I am Ironman

플레이 하러 가기 →

프로젝트 점검

처음 세운 동기와 목적, 그리고 개발 규칙에 맞춰 프로젝트를 점검한다.

동기와 목적 체크

  • 나의 개발 블로그에서 바로 실행할 수 있도록 하고 싶었다.
    → 배포와 임베드를 이용해 완료.

  • 클래스 기반의 모듈화를 연습하고, 게임 특성상 클래스, 의존성, 인스턴스, 객체를 가시적으로 체감할 수 있어 학습 효과가 좋을 것이라고 생각했다.
    → 클래스를 적극 활용하면서 객체와 인스턴스를 실제로 다루는 데 많은 도움이 됨.

  • 나의 주 프로그래밍 언어인 JavaScript(혹은 TypeScript)로 개발한 프로젝트로 남기고 싶었다.
    → TypeScript 이용해 완료.

개발 규칙 체크

  • 최대한 기능적으로 분리가 가능한 요소를 클래스로 모듈화하고, 역할을 논리적으로 분배한다.
    90% - 후반 씬(Scene) 클래스 작업에서 일부 누락되었음.

  • 유지 관리 측면에서 기능에 대한 주석을 정확하게 기입한다.
    80% - 모든 기능에 주석이 작성하진 않았음.

  • 가독성 측면에서 클래스 및 메서드의 명칭에서 일관성을 유지하고 불필요한 코드는 제거한다.
    80% - 중복된 코드가 다소 있음.

Closing.

완성된 게임의 외관은 이전 구현과 크게 다르지 않지만, 내부적으로 코드의 효율성을 높이고 기능을 더욱 세밀하게 조정하는 데 집중했다.

이 과정에서 효율적인 로직 설계와 JavaScript의 객체지향 프로그래밍을 학습하는 데 많은 도움이 됐다.

현재는 기본적인 프로토타입 단계로 구현되어 있지만, 앞으로 점진적으로 기능을 추가하여 더 완성도 높은 게임으로 개발해나갈 예정이다.

다음 목표는 게임의 첫 번째 스테이지를 구현하는 것이다.

참고 자료

  • [1] Getting Started with Phaser 3
목차