rejin 아바타

서브컬처 게이머

세상의 모든 아름다운 것들을 위하여

image 100

다이얼로그 UI를 설계할 때 고려해야하는 것들

다이얼로그 UI란, 게임 내에서 스토리가 진행되는 화면의 UI 씬을 말한다.

다이얼로그(Dialogue)란 인물 사이의 대화를 의미하는데, 보통의 다이얼로그 UI 화면은 아래와 같이 뒤에 배경이 깔려 있고 캐릭터 포트레이트가 배치되어 있는 구조가 대표적이다.

보통은 캐릭터의 머리부터 허벅지 정도까지 포트레이트가 노출되며, 최대 등장 가능 캐릭터는 5명이다.

하지만 포트레이트가 겹치는 것이 그다지 보기 이쁘지 않기 때문에 특별한 이유가 있는 게 아니라면 3명까지만 배치하는 게 일반적이다.

과거에는 미연시에서나 볼 수 있던 화면인데, 이제는 CCG(캐릭터 수집 게임)에서 더 흔하게 볼 수 있게 되었다.

image 100
@두근두근 문예부
image 101 edited
@블루 아카이브

해상도 파편화 문제

image 102
2015년 기준 모바일 디바이스의 해상도 파편화를 시각화한 이미지. 이미 수 년 전부터 파편화는 일상이 되어가고 있었다.
@www2.stardust-testing.com/

현재, 2023년에는 정말 무수히 많은 디스플레이 해상도가 공존하고 있다.

모바일, 태블릿 및 PC에서 제각기 다른 해상도를 지원하고 있으며, 특히 종횡비 측면에서 매 해마다 새로운 해상도가 생겨나고 있는 실정이다.

따라서 UI 디자이너는 이러한 해상도 파편화에 따른 대응을 해주어야 하나, 현실적으로 모든 해상도에 대해 대응할 수는 없다.

그렇다면 어떻게 해야 할까?

UI 컴포넌트의 경우

image 103
유니티 엔진의 여러 해상도 지원 예시
@docs.unity3d.com/kr/2023.2/Manual/HOWTO-UIMultiResolution.html
image 104
피그마에서 Smartphone과 Tablet의 해상도를 지원하는 예시

좌측의 유니티 엔진의 예시를 보자.

여기에서는 청록색 화면에 세 개의 버튼이 위치한 것을 볼 수 있다. 위와 같이 각 UI 컴포넌트가 화면의 각 코너에서 일정한 거리 만큼 떨어져 있다. 예를 들어, Menu 버튼은 좌측 상단 코너에서 Offset을, Previous와 Next도 각각 하단의 좌, 우측 영역으로부터 일정 Offset만큼 떨어져 있도록 지정할 수 있다. 이런 경우 디스플레이의 크기가 어떻게 되든 상관 없이 화면의 네 모퉁이만 있으면 버튼은 지정된 Offset만큼 각 코너에서 떨어진 지점에 위치할 것이다.

우측의 Figma 툴에서의 배치를 보면 훨씬 직관적으로 차이점을 알 수 있다.

왼쪽은 스마트폰, 오른쪽은 태블릿 기기에서 동일한 Music Player를 열었을 때 보이는 화면이다. 우측의 화면이 가로가 훨씬 큰 것을 볼 수 있는데, 그에 맞춰서 ‘이전 곡’, ‘다음 곡’ 버튼의 위치가 훨씬 넓어진 것을 확인할 수 있다. 하지만 다른 요소들은 크기 및 위치가 거의 차이가 없다. 따라서 사용자 UI 경험도 스마트폰/태블릿 상관 없이 거의 동일할 것이다.

플레이어가 보는 화면의 종횡비 문제

그렇다면 UI 컴포넌트 문제가 해결되었으니 모두 끝난 것일까? 안타깝게도 아직 문제는 남아 있다.

종횡비에 따라서 플레이어에게 보이는 캐릭터 및 배경화면의 비율 또한 달라질 수 있다.

아래의 이미지를 보자. 좌측의 이미지는 20:9 해상도이고, 우측의 이미지는 극단적인 종횡비를 가진 1:1 해상도다.

좌측의 이미지는 화면에 꽉 찬 느낌이 들며 쾌적하게 보이지만, 만약 우측처럼 종횡비가 극단적으로 치우칠 경우, 우측 위 이미지처럼 위 아래로 레터박스(LetterBox)가 생기거나, 아니면 우측 아래의 이미지처럼 배경 이미지 좌우가 큰 폭으로 잘려나간 화면이 보이게 될 것이다. 이런 경우의 수를 다 일일히 대응한다는 건 현실적으로 불가능하다.

Frame 95
좌측은 2400 x 1080(종횡비 20:9) 해상도의 예시.
우측 위 예시는 레터박스를 이용해 비율을 지키고 있으며, 우측 아래 예시는 레터박스 없이 화면 위아래가 확대되었다.

종횡비 1:1처럼 가로와 세로의 비율이 아예 동일한 경우도 있겠지만, 종횡비 22:9처럼 가로가 세로에 비해 지나치게 길어지는 경우도 있다.

이 경우도 마찬가지로 종횡비에 따른 대응이 필요하다.

Frame 96 1
좌측은 2400 x 1080(종횡비 20:9) 해상도이며,
우측 위 예시는 필러박스(Pillarbox)를 이용해 비율을 지키고 있다. 우측 아래 예시는 배경화면이 비율을 깨고 확대된 것이다.

그렇다면 레터박스와 필러박스만 적용하면 모든 문제가 해결된 걸까?

만약 배경화면 연출을 넣지 않겠다고 하면 이 단계에서 문제가 해결되었다고 봐도 된다.

하지만 만약 배경화면을 두고 확대(Zoom), 이동(Panning) 및 움직임(Shaking)을 주게 된다면, 화면 이펙트가 적용되면서 또 UI가 문제를 일으킬 수도 있다.

따라서 다음 글에서는 이러한 잠재적 이슈를 해결하기 위한 다이얼로그 UI 디자인 기획을 해보도록 하겠다.