📂 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에 대해 더 구체적으로 다뤄볼 예정입니다.