UI 디자인 - 전체적인 개선

기존의 UI는 좀 구닥다리처럼 보인다. 가운데 공격 표시 아이콘은 2010년대 초반 플래시 게임에서나 나오던 조잡한 그림 같고, 육각형 아웃라인 패널도 무의미하다. 플레이어 구분을 위해 파란색, 붉은색 그라데이션으로 패널을 채웠지만 부자연스럽고 파란색은 하늘 배경 때문에 명확히 보이지 않는다. 또 왼쪽 탄환 선택 패널은 탄환 선택을 위한 UI인지 한눈에 알아보기 어려우며 굳이 둥근 형태여야 할 이유도 없다.

그리고 조작법 힌트, 나가기 버튼과 같은 것들이 추가될 예정인데 UI 디자인 자체가 일관적이지 않으면 조잡하고 초짜가 만든 것 같은 티가 많이 난다.

그래서 UI를 좀 더 일관된 스타일로, 범용적인 컴포넌트를 이용해 구성하기로 하고 애니메이션 효과도 주어 세련되게 개편하기로 했다.

Nine Patch Rect

게임에서 UI를 디자인하는 기법 중 Nine Patch라는 게 있다. 게임 내에서 버튼을 표시한다고 할 때 만약 고정된 버튼 이미지 하나만 사용하게 된다면 다양한 크기의 버튼을 표현하는 데 제한이 생긴다. 이는 범용성 측면에서 불리하다.

그래서 이런 이미지를 9조각으로 나눈다. 나누는 이유는 크기를 변형시킬 때 각 4개의 모서리가 영향을 받지 않도록 하기 위함이다.

그러면 가운데 부분들은 양옆 변은 세로로, 위아래 변은 가로로 정해진 방향으로만 늘리고 줄이면 디자인을 해치지 않으면서 자유로운 크기의 패널을 구성할 수 있게 된다. 이는 Nine Patch 기법의 핵심 원리이며 하나의 리소스만으로 범용성을 크게 끌어올리는 매우 중요한 개념이기도 하다.

Godot에선 이러한 기법이 적용된 Nine Patch Rect를 기본으로 제공하기 때문에 텍스처 하나와 분할 구역을 지정하기만 하면 바로 적용할 수 있다. 나는 간단하게 하얀색 원형 텍스처로 범용 UI 패널을 구성하였다.

그리고 Godot의 Tween 컴포넌트를 이용해 UI 애니메이션을 코드만으로 간단히 만들 수 있다. Tween은 미리 정의된 커브들로 어떤 움직임이나 값의 변화를 빠르게 연출할 수 있도록 돕는 애니메이션 컴포넌트이다. 전통적인 방식으로 키프레임 애니메이션을 제작한다면 커브 에디터를 이용해야 자연스럽고 탄력 있는 동작을 연출할 수 있는데 Tween 클래스에서는 LINEAR(선형)은 물론 SPRING, BOUNCE, ELASTIC처럼 여러 가지 커브들이 미리 정의되어 있어 빠르게 애니메이션을 적용할 수 있다.

var tween: Tween = create_tween().set_parallel().set_trans(Tween.TRANS_SPRING)
tween.tween_property(npr, "size:x", pannel_length.x, 0.5)
tween.tween_property(npr, "position:x", pannel_length.x / -2, 0.5)
is_tween_playing = true
tween.finished.connect(func():
    visible = false	
    is_tween_playing = false
)

애니메이션이 적용된 버튼 UI들은 아래와 같다.

나가기 버튼

탄환 셀렉터

조작법, 환경 요소 힌트

대시보드

체력바 사이 빈 공간에는 턴 진행 메시지를 띄우고, 플레이어 공격 턴 정보 및 잔여 시간은 각 플레이어의 체력바 밑에 두는 것이 더 직관적이고 가시성이 좋다고 판단했다.

그리고 대시보드 상단에 프로그레스 바를 하나 더 추가했는데, 턴제에서 다음 행동 수행까지 남은 시간을 표현하기 위해 쓰인다.

턴이 시작될 때 공격 턴인 플레이어의 정보 패널을 키우고 빨간 그라데이션으로 채워 어느 쪽이 공격할 차례인지를 좀 더 명확하게 인식할 수 있도록 연출했다. 그리고 잔여 시간은 숫자와 함께 시간이 줄어들면 소모되는 스피너를 추가해 직관성을 높였다.

다음 포스트

마무리 및 체험 부스 운영