[📜일지] 초속 거합 마법소녀 아카네 개발 - UI 만들기

[익명(221.149)]

 

 UI는 게임 그래픽의 한 부분을 담당하기 때문에 어느 정도 좋은 비주얼을 가지고 있어야 한다.

그리고 게임 플레이의 한 부분을 담당하기 때문에 좋은 UX를 전달할 수 있어야 한다.

 이번에는 인게임에서 가장 많이 보게 될 HUD만 다뤘다.

하스스톤의 인게임 UI, 여관에서 진행되는 카드게임이라는 컨셉을 잘 녹여내었다.

 보기 좋은 UI는 게임에 몰입하는 것을 돕는 UI일 것이다. 그러기 위해서는 자신의 게임의 컨셉과 어울리는 디자인을 적용해야 한다.

 이 때, 디자인에 전체적으로 적용할 공통된 요소를 생각해놓는 것이 큰 도움이 된다.

메인 컬러와 서브 컬러, 자주 반복할 도형, 외곽선의 두께, 폰트 크기 등을 정해놓는 것이다.

캠코더 화면 레퍼런스

 초속 거합 마법소녀 아카네는 다중우주 마법소녀 관측부에서 관측한 어느 마법소녀의 활동의 기록물이라는 설정이다.

그래서 옛날 비디오테이프(VHS)와 캠코더의 이미지를 중심으로 디자인했다.

작업중인 HUD 프리뷰

 그래서 UI를 흰색과 단순한 도형의 형태의 조합으로 만들기로 했고, 포인트로 빨간색과 화면 아래에 그림자를 넣었다.

마법소녀의 컨셉을 나타내기 위해서 대부분의 UI에 별 모양의 도형을 넣었다.

이후 다른 UI 요소를 새로 만들어야 한다면 공통 요소에서 확장해 나갈 수 있을 것이다.

 추가로 위의 UI 디자인은 컨셉과 잘 어울리긴 하지만, 저런 단순한 단색의 UI는 비슷한 색의 배경이 나오기라도 하면 UI를 식별하기 어려워지기 때문에 어떤 배경에도 어울리게 작업을 잘 하거나 게임 배경의 전체적인 색감을 신경쓰면서 작업을 해야한다.

하지만 배경도 내가 하니까 상관없다.

더 파이널스의 인게임 UI 일부, 피격 시 화면에 글리치 효과가 나타난다.

 UI를 플레이어의 인풋이나 게임의 상황에 맞춰 반응을 하게 만드는 것 역시 게임에 몰입하는 것을 돕는다.

UI를 단순히 게임 화면 위에 올려져 있는 것이 아닌 게임 세계에 들어가 있는 것처럼 느껴지게 한다.

작업중인 아카네 체력바 UI 애니메이션

 아카네 에서도 최근 반응형 UI를 시도해보는 중인데 꽤 괜찮게 나온 것 같아서 만족스럽다.

 추가로 이런 UI 애니메이션은 보통 코드로 작동하는 것이다 보니 UI 디자이너는 디자인 요청서를 프로그래머에게 전달하고, 프로그래머는 요청서 대로 만든 후 UI 디자이너에게 보여주고, 이후 수정 사항을 반영하면서 위의 과정을 반복하게 된다.

하지만 게임 플레이와 UI의 코드를 어느 정도 분리해 놓았기에 그냥 내가 배워서 할 수 있게 되었으니 상관없다.

택티컬 브리치 위자드의 인게임 UI 일부

 보기 좋은 UI도 좋지만 역시 UX(플레이 경험)가 좋은 UI를 만드는 것이 중요하다(물론 좋은 비주얼도 UX에 도움이 된다).

UI도 게임이 재밌어지는데 도움을 줘야 한다.

 UI는 플레이어에게 게임 속의 정보를 전달해준다.

여기서 자신의 게임에 맞게 플레이어에게 어떤 정보를 전달해 줄지 선별하는 것이 중요하다.

이 과정에서 플레이 경험에 영향을 미치는 UI를 만들 수 있다.

 초속 거합 마법소녀 아카네는 빠른 템포로 진행돼 순간적인 판단으로 끊임없이 적과의 전투를 요구한다.

그 과정에서 실수를 하더라도 쉽게 체력과 대시 횟수를 회복할 수 있어 죽지 않고 적을 계속 베어 넘길 수 있다.

UI를 만들 때 이런 경험을 줄 수 있도록 전달할 정보를 선별하기로 했다.

적 체력 UI

 적의 체력을 표시해주는 UI는 단순한 하트 모양의 게이지 형태로, 플레이어는 여기서 적의 정확한 체력 정보를 읽을 수는 없다.

체력이 많은지 적은지 여부만 대략적으로 알 수 있을 뿐이다.

체력을 하트의 개수로 나타내거나 옆에 숫자를 추가해 정확하게 표시해 줄 수도 있었다.

적 체력 UI 스케치

 그러지 않은 이유는 두 가지가 있다.

 적들은 한번에 여러 명이 등장하는 상황이 많고, 카메라 안에 그 적들이 모두 들어간다.

화면에 적들이 많을수록 적 체력 UI도 많아진다. 그래서 최대한 UI의 면적을 줄여야 했다.

 그리고 아카네의 다음 공격으로 잡몹이 쓰러지지 않는다면, 정확한 체력 정보는 어차피 필요 없는 정보일 것이라고 생각했다.

대신 다음 공격으로 어떤 잡몹을 쓰러뜨릴 수 있을지에 대한 정보가 더 중요하다고 생각했다.

그래서 다음 공격으로 쓰러질 적은 하트 모양 게이지가 빨갛게 변한다.

공격을 주고받다가 적들의 머릿수를 확실하게 줄일 수 있는 상황이 되었을 때, 그 적을 우선해서 공격할 수 있게 강조한다.

보조 크로스헤어 UI의 활용

 크로스헤어와 아카네 사이에 위치하는 보조 크로스헤어 UI가 있다.

 보조 크로스헤어 UI는 아카네의 공격 사거리를 표시한다.

그래서 아카네가 다음 대시로 어디까지 이동할 지, 다음 공격이 적에게 적중할 지를 쉽게 파악할 수 있어 정신없는 상황에서도 최소한의 설계를 할 수 있도록 도와준다.

 그리고 플레이어의 머릿속에 크로스헤어와 보조 크로스헤어 사이에 가상의 선을 그어주어 크로스헤어가 목표 위에 있지 않은 상황에서도 공격 방향을 파악하는 데도 유용하다.

 잡몹 적 체력 UI의 경우에는 전달하는 정보를 줄여서, 보조 크로스헤어 UI는 전달하는 정보를 추가해서 플레이 경험에 도움을 주었다.

이런 정보의 선별은 디자인 단계에서부터 계획하기에는 조금 어려운데, 우선 다양한 UI 시안을 적용해본 후 직접 플레이 해보면서 차근차근 개선해 나가면 어느 정도 할 만해진다.

[Indie 1(118.43)]

초속v거합v마법소녀? 초속거합v마법소녀? 초속거합마법소녀? 촉수세뇌마법소녀?

[익명(dxtr126)]

[불타는키보드(1bnmaker)]

[익명(outside0930)]

[211214(tomatoss)]

쥬시하다

[yunoha(concrete1038)]

이건 개추지

[-인.(unicornmoim)]

보조 크로스가 사거리를 의미하는게 플레이 느낌 확 다가와서 넘 좋아보여요

[엊그제(national3771)]

저는 저런 보조 크로스가 좋더라구요 민감한 조작할때는 마우스를 순간적으로 멀리 떨어뜨려놓고(상대적으로 가까이 있는 보조 크로스가 둔감해지니까) 세밀한 조작 할 수 있는 느낌?

[Indie 2(153.156)]

안경캐 왜때리는거야...

[익명(attract2327)]

피 이펙트 너무쫀득하고 ㅋㅋ