게임을 만들다 보면 가장 어려운 부분 중 하나가 바로 UI 입니다. 단순히 버튼과 화면 배치를 넘어서, 게임의 분위기와 개성을 표현하고, 플레이어의 몰입감을 유지하는 핵심 요소이기 때문입니다.
저는 현재 TypeScript 기반의 하이브리드 앱 방식으로 모바일 게임을 개발하고 있습니다. 게임 엔진은 제가 제작한 키위엔진을 활용하고 있으며, UI는 조금 독특하게도 Web Components를 사용해 HTML Element를 직접 다루는 방식을 채택했습니다.
키위엔진 소개
https://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=193760
안녕하세요? 개인적인 목적으로 개발중이던 TypeScript 기반 2D 웹 게임 엔진을 오픈소스로 공개했습니다.웹 사이트http:// kiwiengine.github.io/ko(띄어쓰기를 지워주세요, 이 갤러리에 //
gall.dcinside.com
이 접근법은 확장성과 유연성 측면에서 장점이 크지만, 문제는 제게 디자인 감각이 부족하다는 점이었습니다. ^^; 개발자라면 한 번쯤 겪는 딜레마죠. 기능은 잘 돌아가는데, 막상 화면이 예쁘지가 않은 겁니다.
이때 도움이 된 것이 바로 UI 프레임워크입니다.
프레임워크는 일관된 디자인과 컴포넌트를 제공하기 때문에, 디자인 능력이 부족한 개발자라도 어느 정도 완성도 있는 화면을 쉽게 만들 수 있습니다. 게다가 웹 생태계에는 수많은 UI 프레임워크가 존재하기 때문에, 프로젝트 성격이나 취향에 맞게 선택할 수 있다는 장점이 있습니다.
게임 UI는 보통 귀엽고 키치한 스타일을 요구하는 경우가 많습니다. 이런 분위기에 잘 어울리는 프레임워크로는 다음과 같은 것들이 있습니다.
Web Awesome
webawesome.com
Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.
bulma.io
그리고 모바일 게임을 개발하다 보면 하단 메뉴 바 같은 모바일 전용 UI 컴포넌트가 필요할 때가 많습니다. 이런 경우에는 모바일 UI에 특화된 프레임워크가 큰 도움이 됩니다.
대표적으로 많이 쓰이는 두 가지는 다음과 같습니다.
Ionic empowers web developers to build leading cross-platform mobile apps and Progressive Web Apps (PWAs)
ionicframework.com
Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools
onsen.io
이 프레임워크들은 모바일 친화적인 디자인 시스템과 네이티브와 유사한 UI 요소들을 제공해주기 때문에, 게임 인터페이스를 구성할 때 상당히 유용합니다.
저런 오픈 프레임웍의 단점은 크게 두가지입니다. 1. 오픈소스라 개별지원 받기가 힘듬 2. 학습곡선이 천차만별이고 별개의 학습 시간이 소요됨 뭐 이 정도만 제외한다면 좋은 방법이라고 생각합니다.