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

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

『Castle Survive』 웹게임 개발일지: 배포 및 운영

『Castle Survive』는 웹 기반 액션 RPG로, 게임의 개발이 완료된 후 실제 사용자에게 제공하기 위한 배포 및 운영 전략을 설정하는 과정은 매우 중요합니다. 이 글에서는 게임을 웹에서 배포하고 운영하는 과정에서 겪은 주요 문제와 해결 방안, 그리고 향후 개선 사항에 대해 다루겠습니다.

1. 배포 준비

게임의 배포 전 준비 작업으로는 우선 게임 파일 최적화가 필요했습니다. 원활한 로딩과 빠른 실행을 위해 모든 자원 파일들(이미지, 사운드, 스크립트 등)을 최소화하고, 파일 크기를 최적화하였습니다. 이를 위해 이미지 포맷을 .png에서 .webp로 변경하여 용량을 줄였고, JavaScript 파일 역시 압축하여 로딩 시간을 단축시켰습니다​.

게임의 로딩 성능을 최적화하기 위해 각 자원 파일이 로딩된 후 게임을 시작하도록 설정하여 사용자가 기다리는 시간을 최소화했습니다. 이미지 로딩이 완료된 후 게임을 초기화하는 로직을 추가하여, 게임 시작 시 모든 요소가 준비된 상태에서 원활한 게임 플레이가 가능하도록 했습니다.

2. 배포 플랫폼 선택

게임을 배포할 플랫폼으로는 GitHub Pages, Netlify, Firebase Hosting 등을 고려했습니다. 이들 플랫폼은 무료로 사용할 수 있으며, HTML5 기반 웹게임을 호스팅하는 데 적합합니다. 특히 GitHub Pages는 GitHub 리포지토리와 연동되어 손쉽게 배포할 수 있기 때문에 선택했습니다. 이를 통해 게임의 코드 변경 사항이 있을 때마다 빠르게 배포할 수 있는 환경을 마련했습니다​.

Firebase Hosting을 사용할 경우, 실시간 데이터베이스와 인증 시스템을 통합하여 게임의 랭킹 시스템을 더욱 효율적으로 관리할 수 있습니다. 게임의 점수와 랭킹을 Firebase에 저장하고, 실시간으로 업데이트되는 랭킹을 사용자들에게 제공할 수 있게 되었습니다.

3. 운영 및 유지 관리

게임이 배포된 후에는 운영과 유지 관리가 필수적입니다. 사용자들이 게임을 진행하면서 겪는 문제들을 실시간으로 파악하고, 이를 해결하는 것이 운영의 핵심입니다. 이를 위해 사용자 피드백을 적극적으로 수집하고, 버그 리포트를 통해 문제를 해결해 나갔습니다. 게임 내에서 발생하는 오류를 추적할 수 있도록 로깅 시스템을 추가하여, 문제 발생 시 빠르게 대응할 수 있었습니다.

또한, 광고 시스템을 통합하여 게임 내 수익을 창출할 수 있도록 했습니다. 사용자가 광고를 시청할 수 있는 보상형 광고 시스템을 도입하여, 사용자 경험을 방해하지 않으면서 수익을 얻을 수 있도록 했습니다. 광고는 사용자가 게임 오버 후 재시작을 원할 때나 특정 이벤트가 발생했을 때 노출되도록 설정하였습니다​.

4. 게임 업데이트 및 콘텐츠 추가

게임이 배포된 후에는 지속적인 업데이트와 콘텐츠 추가가 중요합니다. 매달 새로운 스킬이나 몬스터를 추가하거나, 기존의 콘텐츠를 개선하여 사용자들이 지루해하지 않도록 했습니다. 이를 통해 게임의 재방문율을 높였으며, 사용자들의 기대감을 유지할 수 있었습니다.

추가적으로, 시즌별 이벤트와 보상 시스템을 도입하여, 유저들이 새로운 보상을 얻기 위해 다시 게임에 접속하도록 유도했습니다. 예를 들어, 특정 기간 동안 진행되는 이벤트에서 특별한 보상을 제공하거나, 한정판 아이템을 출시하여 사용자들에게 새로운 도전을 제공했습니다.

5. 마케팅과 사용자 유입

게임이 배포된 후, 마케팅 전략을 통해 사용자 유입을 늘릴 수 있었습니다. 소셜 미디어와 유튜브 채널을 통해 게임을 홍보하고, 사용자들에게 게임의 재미를 전달할 수 있는 콘텐츠를 제작했습니다. SEO를 활용하여 게임의 웹사이트가 검색 엔진에서 잘 노출될 수 있도록 최적화했습니다​.

또한, 리워드 광고나 친구 초대 시스템을 통해 신규 유저를 유입시키고, 기존 유저들에게 보상을 제공하는 방식으로 자연스럽게 게임의 인지도를 높였습니다.

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

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

『Castle Survive』 웹게임 개발일지: 문제 해결 및 트러블슈팅

『Castle Survive』의 개발 과정에서 많은 기술적 도전과 문제들이 있었습니다. 이 글에서는 그동안 직면했던 주요 문제들과 그 해결 과정, 그리고 최적화 방법을 소개하고자 합니다. 문제 해결은 게임의 품질을 높이는 중요한 과정이기에 이를 공유하는 것이 다른 개발자들에게 도움이 될 것이라고 생각합니다.

1. 게임 로딩 시 이미지 로딩 문제

게임의 이미지가 제대로 로드되지 않는 문제가 있었습니다. 특히, 여러 개의 이미지와 애니메이션 파일이 동시에 로드되면서 일부 이미지가 누락되는 경우가 발생했습니다. 이 문제를 해결하기 위해, 이미지 로딩 확인 및 로딩 완료 후 메뉴 설정을 추가했습니다. 각 이미지가 완전히 로드된 후 게임 화면이 초기화되도록 함으로써, 게임의 안정성을 확보할 수 있었습니다​.

이 코드는 모든 이미지 파일이 로드된 후 게임 메뉴를 설정하는 코드입니다. 이렇게 함으로써 로딩 문제를 해결하고, 사용자 경험을 향상시킬 수 있었습니다.

2. 게임 내 광고 팝업 문제

광고 팝업이 제대로 표시되지 않는 문제는 많은 테스트를 통해 해결되었습니다. 특히, 광고가 끝난 후 다음 화면으로 전환되지 않는 오류가 발생했으며, 광고가 지나치게 자주 발생하여 사용자들이 불편해했습니다. 이를 해결하기 위해, 광고의 재생 시간과 광고 건너뛰기 기능을 추가했습니다. 광고가 끝날 때까지 기다린 후, 사용자가 건너뛸 수 있도록 유도하는 버튼을 추가하여, 게임 흐름을 방해하지 않도록 했습니다

이 코드는 광고 팝업을 5초 동안 표시하고, 그 후 게임 오버 화면으로 전환하는 기능을 구현한 코드입니다. 사용자들이 광고를 건너뛰거나, 자연스럽게 광고가 끝날 때까지 기다릴 수 있도록 했습니다.

3. 게임 성능 최적화

게임을 진행하면서 프레임 드롭과 성능 저하 현상이 발생했었습니다. 특히, 몬스터와 스킬의 애니메이션이 많아지면서 성능에 큰 영향을 미쳤습니다. 이를 해결하기 위해 애니메이션 최적화와 충돌 처리 최적화를 진행했습니다. 애니메이션은 간단한 상태 변경으로 최적화했으며, 충돌 체크는 최소화된 범위 내에서만 계산하도록 조정했습니다. 이를 통해 게임의 성능을 크게 개선할 수 있었습니다.

4. 게임 중단 및 일시 정지 문제

게임이 진행 중일 때 일시 정지와 게임 재시작이 제대로 작동하지 않는 문제가 있었습니다. 이 문제를 해결하기 위해 일시 정지 상태 관리와 게임 상태 초기화를 철저히 구현했습니다. 사용자 인터페이스(UI)에서 일시 정지 버튼을 클릭할 때, 게임 상태를 일시 정지로 변경하고, 게임을 재시작할 때 모든 변수 초기화와 함께 음악과 애니메이션도 초기화되도록 했습니다.

이 코드에서는 일시 정지 상태를 관리하고, 볼륨 조절 창을 표시/숨기며, 게임 상태에 따라 적절하게 반응하도록 했습니다. 이를 통해 사용자가 게임을 중단하고 다시 시작할 때 부드러운 흐름을 경험할 수 있게 되었습니다.

5. 게임 밸런스 문제

게임 내에서 스킬 밸런스와 몬스터의 난이도 조정이 필요했습니다. 초반 게임에서는 너무 쉬웠고, 후반에는 지나치게 어려워지는 문제가 있었습니다. 이를 해결하기 위해 게임의 레벨 시스템과 몬스터의 체력 및 공격력을 점진적으로 증가시키는 방식으로 밸런스를 맞췄습니다. 또한, 유저가 게임을 진행하면서 점점 더 강력한 스킬을 선택할 수 있게 하여, 보상과 도전적인 요소를 동시에 제공할 수 있었습니다

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

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

1. 광고 기반 수익화

가장 주요한 수익화 방법은 광고입니다. 웹게임에서는 사용자가 게임을 시작하고 종료할 때, 또는 게임 중 특정 이벤트가 발생할 때 광고를 삽입하여 수익을 창출할 수 있습니다.

1. 배너 광고: 화면 상단이나 하단에 배너 광고를 삽입하여 광고 클릭으로 수익을 얻을 수 있습니다. 게임 내 플레이 중 배너 광고를 자연스럽게 배치하면 사용자 경험을 해치지 않으면서 수익을 올릴 수 있습니다.
2. 비디오 광고: 사용자가 광고를 시청하는 조건으로 보상(예: 게임 내 아이템, 추가 체력, 특정 스킬)을 제공하는 시스템을 구현할 수 있습니다. 예를 들어, 게임 오버 후 재시작 시 광고를 보게 하고, 이를 통해 사용자가 게임을 다시 시작하도록 유도합니다.
3. 광고 건너뛰기 기능: 게임의 흐름을 방해하지 않기 위해 광고 건너뛰기 버튼을 제공할 수 있습니다. 이 버튼을 통해 유저가 광고를 건너뛸 수 있게 하고, 이를 통해 유저의 선택권을 제공하며 수익을 발생시킬 수 있습니다​.

2. 인앱 구매 시스템

게임 내에서 인앱 구매 기능을 통해 수익을 창출할 수 있습니다. 인앱 구매는 주로 사용자 경험을 향상시키는 아이템이나 편의 기능을 제공하는 방식으로 구현됩니다.

1. 캐릭터 및 스킬 업그레이드: 특정 캐릭터나 스킬을 구매하거나 업그레이드 할 수 있는 시스템을 도입하여 플레이어가 게임을 진행하는 데 있어 더 많은 선택지를 제공할 수 있습니다. 예를 들어, "Fireball"과 같은 강력한 스킬을 사용할 수 있도록 유료 아이템을 제공할 수 있습니다​game​index.
2. 유료 아이템 및 무기: 게임 내에서 희귀 아이템이나 무기를 유료로 제공하여, 사용자들이 실제 돈을 지불하고 이를 구매할 수 있도록 할 수 있습니다. 예를 들어, 특별한 스킨이나 무기를 구매할 수 있는 옵션을 추가하면, 게임의 재미를 더욱 강화할 수 있습니다.
3. 광고 제거 기능: 광고를 제거하는 유료 구매 옵션을 제공하여, 일부 유저들이 더 나은 게임 경험을 위해 광고를 제거할 수 있게 합니다. 이 방식은 광고 수익과 함께 두 가지 수익원으로 작용할 수 있습니다.

3. 리워드 시스템과 보상형 광고

게임의 주요 플레이어인 유저가 자발적으로 광고를 시청하도록 유도하는 리워드 광고 시스템도 수익화에 중요한 역할을 합니다. 사용자가 자원이나 보상을 얻기 위해 광고를 시청할 수 있는 시스템은 게임의 진행에 큰 영향을 줄 수 있으며, 게임 내 상호작용을 강화하는 좋은 방법입니다.

4. 랭킹 시스템과 경쟁 요소

게임 내 랭킹 시스템을 통해 유저들이 경쟁하며 더 많은 시간을 할애할 수 있도록 유도할 수 있습니다. 유저들이 경쟁하며 더 나은 순위를 목표로 게임을 진행하게 되면, 자연스럽게 게임의 사용 시간도 늘어나고, 그만큼 광고를 볼 확률도 높아집니다. 또한, 리더보드를 통해 유저들의 도전적인 욕구를 자극할 수 있으며, 랭킹 보상으로 유료 아이템이나 스킨을 제공할 수도 있습니다​.

5. 이벤트 및 프로모션

주기적으로 이벤트나 프로모션을 진행하여 사용자들이 더욱 자주 게임에 접속하도록 유도합니다. 예를 들어, 특별한 보상을 제공하거나 특정 기간 동안 유료 아이템을 할인하여 판매하는 방식입니다. 이는 유저 참여도를 높이고, 장기적으로는 수익화에 큰 도움이 될 수 있습니다.

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

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

1. 사운드 디자인의 중요성

사운드는 게임에서 시각적인 요소와 함께 플레이어의 몰입을 이끌어내는 중요한 역할을 합니다. 웹게임에서는 하드웨어나 시스템 자원의 제한이 있을 수 있지만, 적절한 사운드 디자인을 통해 게임의 분위기와 긴장감을 강화할 수 있습니다. 예를 들어, 적의 공격이나 마법 발사 시 효과음은 플레이어에게 바로 직관적으로 상황을 전달합니다. 또한, 각 이벤트마다 배경음악과 효과음을 적절히 배치하여 플레이어가 게임에 몰입할 수 있도록 합니다.

2. 게임 내 배경음악(BGM)

『Castle Survive』에서는 각 게임 상태에 맞는 배경음악을 준비했습니다. 게임 시작 전에는 menuBgm이 재생되며, 이는 게임의 분위기를 설정하는 데 중요한 역할을 합니다. 메뉴 화면에서 게임을 시작하는 버튼을 클릭할 때, 플레이어는 gameBgm을 들으며 본격적인 게임을 시작하게 됩니다. 게임 오버 시에는 gameoverBgm이 재생되며, 이로써 게임의 종료와 패배의 느낌을 강조할 수 있습니다. 배경음악은 게임의 몰입도를 높이는데 중요한 요소로 작용하며, 각 상황에 맞는 분위기를 전달합니다.

배경음악은 각 게임 상태에 따라 적절하게 전환되며, 음악의 변화는 게임 흐름을 부드럽게 이어줍니다. 특히, 게임이 진행되는 동안 반복적으로 들려오는 BGM은 플레이어가 게임에 몰입할 수 있도록 돕습니다.

3. 효과음(SFX)

게임 내에서 발생하는 각종 액션, 예를 들어 공격, 피격, 레벨업 등의 순간에는 **효과음(SFX)**을 추가하여 게임의 리듬을 강조하고 플레이어에게 반응을 시각적으로만이 아니라 청각적으로도 전달합니다. 예를 들어, shoot.wav는 플레이어가 Fireball을 발사할 때 재생되며, hit.wav는 적이나 캐릭터가 공격을 받을 때 발생합니다.

이러한 사운드 효과는 게임의 각기 다른 순간마다 플레이어에게 즉각적인 피드백을 제공하며, 게임의 리듬을 자연스럽게 만들어줍니다. 효과음이 적절히 사용되지 않으면 게임이 단조롭게 느껴질 수 있기 때문에, 각 액션에 맞는 사운드를 신중하게 선택하는 것이 중요합니다.

4. 사운드의 이벤트 기반 처리

사운드는 단순히 고정된 음악을 재생하는 것 외에도, 게임 내 여러 이벤트에 맞추어 동적으로 반응할 수 있습니다. 예를 들어, 플레이어가 특정 레벨에 도달하거나 특별한 능력을 사용할 때마다 levelup.wav와 같은 추가적인 사운드가 재생됩니다. 이를 통해 게임 내 중요한 순간을 강조하고, 플레이어에게 성취감을 전달할 수 있습니다.

이와 같이 사운드는 게임의 이벤트 흐름을 따라 동적으로 반응하며, 플레이어의 경험을 풍부하게 만들어줍니다.

5. 볼륨 조절 시스템

웹게임에서는 BGM과 효과음의 볼륨을 플레이어가 직접 조절할 수 있도록 기능을 추가하는 것이 중요합니다. 『Castle Survive』는 게임 내에서 볼륨 조절 UI를 제공하여, 플레이어가 원하는 볼륨 수준에 맞게 배경음악과 효과음의 음량을 조절할 수 있습니다. 이를 통해 사용자는 자신에게 맞는 게임 환경을 설정할 수 있으며, 불편함 없이 게임을 즐길 수 있습니다.

볼륨 조절 시스템을 통해 플레이어는 게임 내 사운드를 세밀하게 제어할 수 있으며, 이는 게임의 전반적인 사용자 경험을 개선하는 데 중요한 역할을 합니다.

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

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

1. 게임 아트 스타일

『Castle Survive』의 비주얼은 중세 판타지 세계를 배경으로 합니다. 고딕풍의 성, 몬스터들, 그리고 마법을 사용하는 캐릭터들로 구성된 이 세계는 플레이어가 몰입할 수 있는 독특한 분위기를 제공합니다. 게임 내 캐릭터와 배경은 픽셀 아트 스타일로 제작되었으며, 이를 통해 고전 게임의 느낌을 현대적인 웹 환경에서 재현할 수 있었습니다.

캐릭터 디자인: 주인공인 마법사 캐릭터는 2D 픽셀 아트로 그려졌습니다. 주인공 캐릭터의 디자인은 간단하면서도 강력한 느낌을 주도록 설정했습니다. 마법사의 이동 및 공격 동작은 부드러운 애니메이션으로 표현되며, fireball, lightning, poison 등의 마법을 사용하면서 게임의 핵심적인 시각적 요소를 강화했습니다.

몬스터 디자인: 각기 다른 특성을 가진 몬스터들이 등장합니다. 각 몬스터는 고유의 크기, 체력, 공격력을 가지며, 게임의 난이도를 점차적으로 상승시킵니다. 이러한 몬스터들은 다양한 색상과 스타일로 디자인되었으며, Monster_1.png와 같은 기본적인 이미지들로 구현되었습니다.

배경: 게임의 배경은 고딕풍의 성을 중심으로 한 다양한 환경이 펼쳐집니다. assets/1.png 이미지를 사용하여 배경을 설정했으며, 배경에 맞는 다양한 시각적 요소들이 게임의 진행에 따라 동적으로 변화합니다.

2. 애니메이션 구현

애니메이션은 게임의 몰입도를 높이는 데 중요한 역할을 합니다. 특히, 캐릭터와 적들의 움직임, 마법 발동 시의 효과 등은 게임의 재미와 긴장감을 극대화시킵니다.

캐릭터 애니메이션: 캐릭터는 기본적으로 idle, hit, dead 상태에 맞춘 애니메이션이 구현되었습니다.

• idle 상태에서는 캐릭터가 떠다니는 듯한 부드러운 움직임을 연출합니다. 이 애니메이션은 @keyframes idleFloat을 사용하여 구현되었으며, 50% 지점에서 캐릭터가 약간 위로 떠오르는 효과를 만들어냅니다.
• hit 상태에서는 캐릭터가 맞았을 때 붉은 플래시와 함께 화면이 흔들리는 효과를 줍니다. 이는 @keyframes flashRed 애니메이션을 통해 구현되었습니다.
• dead 상태는 캐릭터가 사망했을 때 축소되며 페이드 아웃되는 효과를 사용하여, 게임이 종료될 때의 비극적인 느낌을 강조합니다. 이 애니메이션은 @keyframes fadeOutShrink을 사용하여 구현되었습니다.

효과 애니메이션: 마법을 사용하거나 적이 맞았을 때의 애니메이션은 게임의 비주얼적인 핵심 요소입니다.

• fireball, lightning, poison, wind와 같은 마법은 각각의 특성에 맞는 애니메이션을 구현하여 플레이어가 시각적으로 마법의 효과를 명확히 인식할 수 있도록 했습니다. 예를 들어, fireball.gif는 불꽃이 튀는 효과로 마법의 강렬함을 강조하며, lightning.gif는 번개가 내려치는 시각적인 효과를 제공합니다.
• heal.gif는 체력 회복 효과를 시각적으로 구현하는 애니메이션으로, 게임의 전략적 요소를 강화합니다.

폭죽 효과: 플레이어가 레벨업을 할 때나 특정한 이벤트가 발생할 때, 게임 화면에 firework 애니메이션을 사용하여 축하의 효과를 추가했습니다. 폭죽은 화면 전체에 랜덤하게 등장하며, firework-blink 애니메이션을 사용해 깜빡이는 효과를 줍니다.

3. 스킬 및 공격 애니메이션

게임 내 캐릭터의 공격과 스킬 발동은 중요한 게임 플레이 요소입니다. 각 스킬은 고유의 애니메이션을 가지며, 이를 통해 플레이어는 각 스킬의 발동 효과를 직관적으로 이해할 수 있습니다. 예를 들어, Fireball은 불덩이가 날아가는 애니메이션을 통해 공격이 이뤄지며, Lightning은 번개가 내리치는 애니메이션을 통해 강력한 전기 공격을 시각적으로 표현합니다.

이러한 스킬 애니메이션은 게임의 몰입감을 높이는 중요한 요소로, 스킬 사용 시에 적절한 사운드 이펙트도 함께 제공됩니다. 예를 들어, shoot.wav와 같은 사운드가 Fireball 발사 시 재생되며, 스킬의 효과를 강조합니다.

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

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

『Castle Survive』 웹게임 UI/UX 디자인 개발일지

"Castle Survive"는 유저에게 직관적이고 몰입감 넘치는 경험을 제공하는 웹게임입니다. 게임의 UI/UX 디자인은 사용자가 자연스럽게 게임을 진행하고, 각 화면에서 중요한 정보를 명확히 전달할 수 있도록 구성되었습니다. 이번 글에서는 게임 내 UI/UX 요소와 그 설계 과정에 대해 설명하고, 각 디자인이 게임의 몰입감을 어떻게 향상시키는지에 대해 다뤄보겠습니다.

1. 게임 시작 화면 및 메뉴

게임의 시작 화면은 유저가 게임을 시작하기 전에 가장 먼저 접하는 부분이기 때문에 간결하고 직관적인 디자인을 채택했습니다. "Play" 버튼과 "Rank" 버튼을 중앙에 배치하여 사용자가 쉽게 게임을 시작할 수 있도록 유도합니다. 게임의 타이틀과 배경 이미지는 게임의 분위기를 전달하며, 버튼 클릭 시 애니메이션 효과를 추가하여 사용자가 자연스럽게 게임을 시작할 수 있게 만듭니다​index​style.

2. 게임 진행 화면 (HUD)

게임이 시작되면 상단에 표시되는 HUD가 유저에게 게임의 진행 상황을 명확히 보여줍니다. 경험치 바(XP bar), 레벨 표시, 스킬 아이콘 등은 사용자가 실시간으로 게임 내 상태를 확인할 수 있도록 설계되었습니다. 경험치 바는 유저가 몬스터를 처치하거나 임무를 수행할 때마다 자동으로 업데이트되어 진행 상황을 실시간으로 반영합니다. 레벨 표시는 게임의 성장 요소를 강조하며, 유저가 레벨업을 통해 새로운 스킬을 획득할 수 있다는 목표를 부각시킵니다​game​style.

3. 스킬 팝업 및 레벨업 화면

유저가 레벨업을 할 때 나타나는 스킬 선택 팝업은 게임의 핵심 요소 중 하나입니다. 이 팝업은 유저가 새로운 스킬을 선택할 수 있는 화면으로, 폭죽 애니메이션과 함께 시각적 효과를 제공합니다. 이 애니메이션은 유저가 중요한 결정을 내릴 때 몰입감을 극대화하는 데 도움을 주며, 선택 가능한 스킬은 직관적인 아이콘과 함께 설명이 제공되어 유저가 쉽게 이해하고 선택할 수 있도록 돕습니다​style.

4. 게임 오버 및 광고 팝업

게임 오버 시 나타나는 화면은 유저가 게임을 다시 시작하거나 순위를 확인할 수 있는 옵션을 제공합니다. 게임 오버 메뉴는 배경을 어둡게 하고, 중앙에 버튼을 배치하여 사용자가 쉽게 다음 동작을 선택할 수 있도록 합니다. 또한, 게임 내에서 광고 팝업이 나타날 때, 유저가 광고를 건너뛰거나 기다릴 수 있는 옵션을 제공하여 불편함을 최소화했습니다​index​style.

5. 게임 내 애니메이션과 상호작용

게임의 중요한 요소인 애니메이션은 UI와 상호작용을 통해 유저의 몰입도를 높입니다. 예를 들어, 스킬 발사 시 발생하는 애니메이션이나 몬스터 처치 후 나타나는 효과는 게임의 긴장감을 증대시키고, 유저가 자신의 행동에 대한 피드백을 즉각적으로 받을 수 있도록 합니다. 또한, 피격 애니메이션은 유저가 피해를 입을 때 시각적으로 즉각 반응하도록 만들어 실시간 피드백을 제공합니다​game.

6. 반응형 디자인

웹게임은 다양한 디바이스에서 접근될 수 있기 때문에 반응형 디자인이 필수적입니다. "Castle Survive"는 화면 크기에 맞게 자동으로 조정되는 UI 레이아웃을 채택하여, 모바일과 데스크탑 등 다양한 기기에서 일관된 사용자 경험을 제공합니다. 이를 통해 사용자는 디바이스에 관계없이 편리하게 게임을 즐길 수 있습니다​style.

7. UI/UX 디자인의 개선 방향

현재 "Castle Survive"의 UI/UX는 직관적이고 몰입감을 주는 경험을 제공하지만, 일부 요소는 더욱 직관적인 피드백 시스템을 도입하거나, 애니메이션의 종류를 추가하여 유저 경험을 더욱 풍부하게 할 수 있습니다. 예를 들어, 레벨업 시 발생하는 피드백을 더욱 눈에 띄게 만들어 유저가 성취감을 느낄 수 있도록 개선할 수 있습니다. 또한, UI 색상이나 아이콘 디자인에 좀 더 차별화된 스타일을 추가하여 게임의 개성을 더욱 강조할 수 있습니다.

『Castle Survive』 게임 시스템 구조

Castle Survive는 HTML5와 JavaScript를 기반으로 한 로그라이크 서바이벌 웹게임입니다. 이 게임의 핵심은 플레이어 성장, 적 AI, 스킬 시스템, 아이템 관리 등의 복합적인 시스템을 통해 지속적인 도전과 보상을 제공합니다.

1. 플레이어 성장 시스템

플레이어는 경험치를 통해 레벨업하며, 레벨업 시 스킬을 선택하여 게임을 유리하게 이끌 수 있습니다. 선택할 수 있는 스킬은 Fireball, Lightning, Poison, Wind 등으로, 각 스킬은 게임의 전투 및 생존에 중요한 역할을 합니다. 스킬은 레벨업을 통해 강화되며, 플레이어의 전략을 바꿀 수 있는 중요한 요소입니다.

2. 적 AI 시스템

게임은 여러 종류의 적들이 등장하는 웨이브 시스템을 기반으로 합니다. 각 적은 체력, 공격력, 크기가 다르며, 점차적으로 강해지는 보스 몬스터가 등장하여 도전을 더합니다. 적들은 자동 이동하며 플레이어에게 접근하여 공격하며, 플레이어는 이를 피해가거나 반격해야 합니다.

3. 스킬 시스템

플레이어는 각 레벨업마다 스킬을 선택하게 되며, 이는 전투에서 중요한 역할을 합니다. 예를 들어, Fireball은 적에게 데미지를 주는 공격 스킬이고, Wind는 주변 피해를 줄여주는 방어 스킬입니다. 각 스킬은 레벨업을 통해 효과가 강화되며, 쿨타임 감소나 범위 확대 등의 특성이 추가될 수 있습니다.

4. 아이템 관리

아이템은 게임 내에서 중요한 자원으로, 소모품과 장비로 나뉩니다. 포션을 먹거나 특정 아이템을 사용하여 플레이어의 체력을 회복하고, 레벨업에 필요한 XP를 증가시키는 등 다양한 방식으로 활용됩니다. 또한, 아이템 업그레이드 시스템을 통해 아이템을 강화하여 더 강력한 효과를 발휘하게 할 수 있습니다.

5. 게임의 경제 시스템

게임 내에서는 골드와 다이아몬드 두 가지 주요 화폐가 사용됩니다. 골드는 주로 아이템 구매와 업그레이드에 사용되며, 다이아몬드는 프리미엄 기능이나 특별한 아이템을 구매하는 데 사용됩니다. 이러한 경제 시스템은 광고 시청이나 게임 플레이를 통해 획득할 수 있습니다.

6. 반복 가능한 게임플레이

Castle Survive는 로그라이크 장르의 특성상, 매번 다른 맵과 적들이 등장하며, 이를 클리어하면서 점점 강해지는 게임 시스템을 제공합니다. 이 시스템은 리플레이성을 강화시켜 플레이어가 반복해서 게임을 즐기게 만듭니다.

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

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

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

맺음말

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