[🏆HIT] 래토피아 개발일지 #12 - UI 개선 및 게임 테스터 모집

[카셀(220.71)]

안녕! <래토피아>를 개발 중인 카셀이야

개발일지를 소개하기 앞서 공유하고자 하는 내용이 있는데,

드디어 이번 3월 6일부터 3월 20일까지 <래토피아>에 대한 첫 플레이 테스트를 진행해 보려해.

평소 <래토피아>에 관심이 있었다면 이번 테스트를 통해 게임을 한번 찍먹해주고,

피드백을 작성해 주면 소정의 선물을 주려고 하니까 많은 신청 부탁할게!

<래토피아> 테스터 신청하기 ⇒ https://forms.gle/kCqFHw2ApCc5gWTL6

그럼 다시 개발일지로 돌아가서, 지난번에는 타이틀 화면에 대한 내용을 소개했었는데.

이번에는 이에 이어서 <래토피아>의 UI 변천사에 대해 소개할까 해.

전작 <래트로폴리스>의 UI를 기획할 때에는 어떤 UI가 적합한지 판단하기가 참 어려웠었어.

그래서 만들고 수정하고 부수는 것을 반복하면서 개발을 진행해 왔었는데.

그래서 그런지 이번 <래토피아>에서도 정말 많은 시행착오가 있을 것이라 단념하고 UI 개발을 시작했었지.

<래트로폴리스>의 지도자 선택화면 변천사

UI 컨셉 아트와 목업 제작

<래토피아>의 UI는 귀여운 쥐 캐릭터와 잘 어울릴 수 있도록 캐주얼한 분위기로 작업하고자 했어.

UI에서부터 만화스럽고, 쥐가 갉아먹은 듯한 치즈를 묘사해 UI를 꾸며보고자 하였지.

그러나 이를 고민하고 있었던 때는 아직 본격적인 개발은 시작도 안한 상태였고,

어떤 기능이 UI에 포함되어야 할지 가늠하기 어려웠던 시점이었기 때문에,

우선 모티브가 됐던 게임인 <산소미포함>을 토대로 한 UI 컨셉 아트를 제작해 보기로 하였어.

대략적인 UI 분위기를 확인하기 위한 UI 컨셉 아트

그러나 첫 UI 컨셉 아트는 너무 만화풍과 연출에 초점이 맞춰져서 그런지 아쉬운 부분이 많았어.

장식들이 너무 과해 UI 속 정보의 가독성이 떨어졌으며, UI 리소스들의 크기도 너무 제각각이었지.

범용적으로 사용하기에는 노가다를 너무 많이 해야하는 이미지들이어서 실적용에 대한 걱정이 컸어.

원하는 대로 디자인하고 구현하는 것이 쉽지 않다는 것을 체감하며,

어느 정도의 기능이 구현되기 전까지는 컨셉 아트의 작업은 보류하는 게 낫겠다고 판단하였지.

개발이 진행되면서 기능들이 하나둘씩 구현되자, UI의 문제점들이 조금씩 더 드러났는데.

초기에는 <산소미포함>이나 <림월드>의 UI를 많이 생각하며 참고하였으나,

두 게임 모두 마우스 위주의 조작 방식이기에,

마우스보다는 키보드와 콘솔 조작 방식을 지향하는 <래토피아>에서는 적용이 어려운 부분이 많았어.

엄청난 삽질이 된 셈이었지...

그래서 다양한 콘솔 게임들의 UI를 찾아볼 필요가 있었고,

“https://www.gameuidatabase.com/”와 같은 게임 UI 모음 사이트를 통해 여러 UI들을 조사하였어.

여러 콘솔 게임들 중에서 <드래곤 퀘스트 빌더즈 2>는 <래토피아>와 가장 접점이 많았는데.

두 게임 모두 샌드박스 장르, 플레이어 캐릭터의 등장, 캐쥬얼풍 분위기를 가지고 있었기에,

UI의 구성을 어떻게 해야 할지 참고가 많이 되더라.

이 외에도 필요한 기능들에 대한 여러 게임들의 UI들 차곡차곡 수집하면서,

다양한 화면의 UI 목업을 간단하게 제작해가며 기틀을 잡아가기 시작했어.

조사된 자료를 바탕으로 제작한 초기 UI 목업 이미지 (허접허접 부끄부끄)

효율적인 UI 제작

이렇게 다양한 UI 화면의 목업을 미리 만들어두고 더미 이미지를 그대로 게임에 적용하니

개발 속도를 높일 수는 있었으나, 꾸밈과 연출이 전혀 없어서 조잡한 느낌이 상당하였어.

그래서 목업을 기반으로 한 UI 리소스를 제작해 보기로 하였지.

그러나 목업을 만들어두었다 할지라도 UI 크기의 수정과 변화는 빈번하였기에,

이번에는 크기 변환이 가능하게 단순한 UI 이미지를 최소한으로만 사용해 제작해 보기로 하였어.

다채로운 모습의 UI를 적용하는 것은 분명 시각적으로 더 만족스럽겠지만, 용량도 많이 차지할뿐더러,

이후 레이아웃이 변경될 필요가 생기면 해당 UI 리소스를 새로 그려야 하는 문제가 발생할 수 있어.

그래서 버튼과 슬롯의 이미지를 통일시키고, 나인 패치, 패턴, 쉐이더 등의 기능을 활용하여

기본 UI의 리소스를 최대한 활용해 다양한 환경에서 재사용 될 수 있게 제작하였지.

덩어리 형태의 이미지를 자르고 붙여서 다양한 UI에 사용

이 방식은 효율적이기는 했으나, 모든 화면에서 반복적으로 표시되는 단순한 UI는 아무래도 조금 밋밋하게 보였고,

시각적으로 지루하게 느껴지는 단점이 존재하였어.

그래서 정답은 아닐지라도, 부족한 부분을 애니메이션을 통해 어느정도 보완해 보고자

UI 애니메이션 컨셉 시안도 만들어서 적용해보려고 하기도 하였지.

통통 튀는 느낌을 살린 UI 애니메이션들

그러나 이러한 애니메이션들을 적용하기에는 UI의 변화가 너무 잦았어.

UI의 일관성을 중요시하려다 보니, A 화면을 변경하면 규칙에 따라 B 화면도 변경해 줘야 하고,

그러다 보면 전체 화면을 교체해 줘야하는 대작업이 될 수도 있기에 적용과 수정이 많이 부담되었지.

또한 이를 통해 전체적인 개선이 될 수 있을 지도 명확하지 않은 부분이 컸어.

그래서 시간 소모를 최소화하고자, 진행이 불가능할 정도가 아니라면 후에 일괄적으로 수정하기로 하였고,

수정하는 시기는 전시회나, 데모 공개 등 외부로 게임을 선보이는 시기로 예정해두었어.

이를 통해 플레이어분들은 일관된 규칙 하에 조작을 할 수 있고,

수정과 추가를 반복하며 낭비되는 시간을 줄여, 게임을 더욱 발전시킬 수 있으리란 생각이 들었지.

대대적인 그래픽 수정이나 상세한 스타일링 작업을 개발 후반부에 처리하기로 하니,

작업 시 매번 바로 적용하고 다듬어야 하는 부담감이 크게 완화되기도 하였어.

그러나 이러한 UI의 대대적인 변화를 일괄적으로 수정하기 위해서는,

개발 중간중간에 추가적으로 필요한 규칙들을 차근차근 정립해나아갈 필요가 있었어.

대게는 UI 프레임의 규격이나 아이콘, 하이라이트, 그리고 애니메이션의 처리 등의 규칙들이었지.

규격에 대한 UI 규칙 명세

이렇게 규칙을 정해가며 개발했음에도 결국 잘 지켜지지 않았는데 ㅎㅎ...;;;

아트, 프로그래밍, 기획 파트 각각의 니즈와 우선순위가 다르다 보니,

규칙과는 별개로 임시로 적용되는 UI 형식이 늘어나기 시작하였고,

임시 UI가 누적되고 익숙해짐에 따라 고착화되기 시작하였어.

이는 아무래도 ‘나중에 일괄 변경될 것이니 일단 적용하자’라는 생각이 만든 결과라 생각되었고,

이를 바로잡기 위해 규칙들을 다시 최신화시키며 중심을 잡고,

그 틀 안에서 작업하는 습관을 익힐 필요가 있었지.

아직도 <래토피아>의 UI는 갈 길이 멀지만 여러 게임들의 인상 깊은 UI 변천사를 목격했기에,

<래토피아> 역시도 혁신을 통해 이렇게 큰 발전이 있길 희망하고 있어.

어쩌면 우리 손으로는 해결이 불가능한 영역이 아닌가 싶어 변화를 도와줄 UI 디자이너도 구인하고 있기도 해

게임의 전반적인 만듦새와 완성도가 상당히 높아졌던 <Foundation>의 UI 패치

이만 이번 개발일지를 마무리 짓도록 할게.

긴 글 읽어주셔서 고맙고, 다음 개발일지에서는 연구 시스템에 대해 소개하도록 할게!

앞서 공유한 <래토피아> 플레이 테스트에도 많은 참여 부탁할게~!

홈페이지: https://www.CasselGames.com/

스팀 스토어: https://store.steampowered.com/app/2244130/Ratopia/

페이스북: https://www.facebook.com/CasselGames/

[익명(119.194)]

갓껨 등장 두둥!!

[익명(180.70)]

ㄹㅇ ui가 머리 터질거 같음 결국 나중에 해야지 하고 대충 너덜너덜하게 냅둠..

[야겜제작좌(dottoru69)]

우왕 쩐당

[코하루다이스키(thetruewilsetyoufree)]

화이팅추

[dryrain(dryrain1025)]

UI 아트가 너무 부럽슴

[머스타드리소스(ssss4610)]

[ㅇㅇㄷ(incar8341)]

[oo(210.104)]

굿!!

[카퍠인(happys96)]

[익명(121.164)]

님님 재분소 오타요 재분소->제분소

[익명(121.164)]

근데 UI 지린다 진짜

[익명(nnkxmd2htvyh)]

개추