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

Dev Log #1 – 언리얼과 함께 시작하는 게임개발

게임 개발을 시작한 지 얼마 되지 않았지만, 이미 많은 배움과 도전의 순간들이 있었습니다. 예전에 유니티를 사용하며 게임을 개발했던 경험이 있었지만, 이번에는 언리얼 엔진으로 새로운 도전에 나서기로 결심했습니다. Wizsurvive라는 게임을 개발 중인데, 뱀파이어 서바이벌 스타일의 액션 RPG로, 나만의 독특한 게임 시스템을 추가하고자 했습니다. 이 Dev Log에서는 언리얼 엔진을 선택한 이유와 개발을 시작하면서 겪은 첫 번째 경험을 공유해보려 합니다.

언리얼 엔진을 선택한 이유

처음에는 유니티가 익숙했지만, 언리얼 엔진의 강력한 시네마틱 기능과 고급 그래픽 렌더링 기술을 활용하고 싶었습니다. 특히 언리얼 엔진 5의 Lumen과 Nanite 기술은 게임의 비주얼 퀄리티를 한 단계 끌어올릴 수 있는 잠재력을 가지고 있었기 때문에 큰 매력으로 다가왔습니다. 또한, 블루프린트를 활용한 시각적 스크립팅 시스템이 매우 직관적이어서, 프로그래밍에 대한 부담감을 덜어주고 게임 시스템을 빠르게 프로토타입할 수 있다는 점에서 언리얼을 선택하게 되었습니다.

개발 초기 설정

게임의 기획과 전반적인 시스템 설계를 마친 후, 언리얼 엔진 프로젝트를 생성하고 기본적인 레벨을 구성하는 데 집중했습니다. 처음에는 단순한 플레이어 캐릭터와 적 AI를 설정하는 것부터 시작했습니다. 플레이어 캐릭터는 블루프린트로 움직임과 공격 기능을 구현했고, 적 AI는 AI 컨트롤러를 이용해 간단한 추적 및 공격 동작을 추가했습니다.

게임의 전투 시스템은 유니티에서 사용했던 방식과 비슷하지만, 언리얼의 컴포넌트 기반 시스템 덕분에 각 기능을 좀 더 세부적으로 관리할 수 있었습니다. 예를 들어, 캐릭터의 스킬 시스템을 설계하면서, 스킬의 종류나 쿨타임 관리 등을 블루프린트로 시각적으로
구현하는 작업이 매우 직관적이었습니다.

UI 시스템 설계

UI는 **UMG (Unreal Motion Graphics)**를 사용해 구현했습니다. 게임의 로비 UI와 메인 메뉴, 인벤토리 UI 등을 설계하는 과정에서 애니메이션을 추가하여, 버튼 클릭 시 부드럽게 나타나는 효과와 화면 전환 시 매끄러운 애니메이션을 구현했습니다. 언리얼 엔진의 애니메이션 블루프린트와 Timeline 기능을 활용하여, 버튼이나 텍스트의 애니메이션을 자연스럽게 만들 수 있었습니다. 처음에는 UI 요소들이 불안정하게 움직였지만, 여러 번 테스트 후 안정된 UI 구조를 완성할 수 있었습니다.

배운 점과 첫 번째 도전

개발을 하면서 언리얼 엔진의 콜리전 시스템이나 애니메이션 블루프린트와 같은 부분에서 처음에는 많은 어려움을 겪었습니다. 특히, 플레이어와 적의 충돌 처리나 애니메이션 전환에서 예상치 못한 버그가 발생하곤 했습니다. 예를 들어, 캐릭터의 공격 애니메이션이 끝나지 않으면 공격이 중복으로 발생하는 문제가 있었고, 이 문제를 해결하기 위해 애니메이션 노티피케이션을 사용하여 애니메이션 상태를 정확하게 관리하는 방법을 익혔습니다.

앞으로의 계획

현재는 게임의 AI와 전투 시스템을 마무리하고, 무기 시스템과 확률형 아이템 시스템을 구현하는 중입니다. Wizsurvive는 아이템 수집과 캐릭터 성장 요소가 중요한 게임이기 때문에, 무기 업그레이드 시스템과 토템 시스템을 차례대로 구현해 나가려고 합니다. 또한, 게임의 그래픽 품질을 더욱 향상시키기 위해 언리얼 엔진의 레이 트레이싱을 활용할 계획입니다.

이번 Dev Log에서는 게임 개발의 첫 단추를 꿰어본 과정과 언리얼 엔진의 강력한 기능을 활용한 첫 번째 개발 경험을 다뤄봤습니다. 앞으로의 여정에서는 더 많은 기술적인 도전이 기다리고 있을 것 같지만, 이를 해결하면서 성장하는 과정이 정말 기대됩니다. 다음 Dev Log에서는 게임 시스템 설계와 UI/UX에 대해 더 구체적으로 다뤄볼 예정입니다.