『Castle Survive』 웹게임 개발일지_프로젝트 소개 및 기획

머돌

|2025. 4. 28. 04:51

728x90

📂 Castle Survive 개발일지
├── 📄 프로젝트 소개 및 기획

├── 📄 개발환경 및 구조
├── 📄 게임 시스템 개발
├── 📄 UI/UX 디자인
├── 📄 아트 및 애니메이션
├── 📄 사운드 디자인
├── 📄 수익화 전략
├── 📄 문제해결 및 트러블슈팅
├── 📄 배포 및 운영
└── 📄 앞으로의 계획

Castle Survive 개발환경 및 구조 소개

이번에 소개할 프로젝트는 제가 직접 개발한 웹 게임 Castle Survive입니다. 주로 HTML5 / CSS / JavaScript를 기반으로 개발했으며, 목표는 가벼운 브라우저 게임이면서도 일정 수준 이상의 몰입감을 제공하는 것이었습니다. 이번 글에서는 이 게임의 개발환경과 구조, 그리고 실제 작업하면서 겪었던 주요 포인트들을 공유하고자 합니다.

개발환경

언어: HTML5, CSS3, JavaScript (ES6+)
IDE: Visual Studio Code
테스트 브라우저: Chrome, Edge 최신 버전
버전 관리: Git (로컬 위주)
호스팅: GitHub Pages → 향후 개인 서버로 이전 예정
라이브러리: 기본 Vanilla JS, 필요시 간단한 유틸성 코드만 사용 (ex: 이벤트 위임)

게임은 처음부터 가벼운 구조를 목표로 했기 때문에, 프레임워크나 무거운 엔진 없이 순수 자바스크립트로 작성했습니다.

기획 및 초기 설계

Castle Survive는 간단하지만 반복 플레이를 유도하는 로그라이크 스타일 게임입니다. 초기 기획 단계에서는 크게 세 가지 요소에 집중했습니다.

플레이어가 점차 강해지는 성장성
짧은 세션 안에 확실한 재미를 느끼게 하는 리듬감
광고 수익을 고려한 UI 배치 최적화

특히 모바일과 PC 모두 지원해야 했기 때문에 화면 해상도와 터치 대응 문제를 초기에 설계에 반영했습니다.

개발 구조

전체 코드는 크게 다음과 같이 구성되어 있습니다.

index.html: 전체 게임 화면을 구성하는 기본 HTML
style.css: 게임 레이아웃, 버튼 스타일, 애니메이션 등
game.js: 게임의 전체 로직 (스테이지, 몬스터 스폰, 충돌 판정, 게임 오버 처리 등)
sfx 폴더: 효과음 저장
img 폴더: 게임 배경, 캐릭터, 몬스터, 아이템 등 그래픽 리소스

특히 game.js 파일은 기능별로 나누지 않고 하나의 큰 파일로 유지하면서 주석과 함수 분리로 가독성을 확보했습니다. 이 방식은 프로토타입을 빠르게 개발하고 수정하기에 효율적이었습니다.

내가 직접 구현한 주요 포인트

스킬 시스템 구축
사용자가 레벨업할 때마다 다양한 스킬을 선택할 수 있게 하여 전략적인 플레이를 유도했습니다. 각각의 스킬은 독립된 객체로 관리했고, 스킬 발동 시 이펙트와 사운드를 함께 처리했습니다.
재화 저장 시스템 개발
골드, 경험치, 다이아몬드 등 획득한 재화를 저장하고 누적되도록 로컬 스토리지(LocalStorage)를 활용했습니다. 이는 서버 없이도 기본적인 데이터 저장이 가능하도록 설계했습니다.
가벼운 최적화
게임이 오래 진행되더라도 프레임 드랍이 최소화되도록, 몬스터 삭제 시 DOM 조작 최소화, 캔버스 요소 재활용 등을 적용했습니다.
광고 연동 고려한 UI 배치
추후 티스토리 블로그 및 자체 홈페이지에 애드센스 광고를 연동하기 위해, 게임 좌우에 배너를 삽입할 수 있도록 CSS로 여유 공간을 확보했습니다.

맺음말

Castle Survive 개발은 저에게 있어 웹 기술을 활용한 게임 개발의 좋은 경험이 되었습니다. 앞으로는 이 프로젝트를 기반으로 점점 더 완성도 높은 게임을 제작할 계획입니다. 게임을 개발하면서 겪었던 시행착오와 배운 점들은 추후 별도 포스팅으로 정리해 보려고 합니다.