모바일 UI 디자인의 베스트 프랙티스 - 파트 1

모바일 UI 디자인은 쉽지 않은 작업입니다. 그리고 수많은 게임과 기기가 기하급수적으로 출현하고 있는 현재는 가장 성능이 안정적인 게임을 만드는 것이 최우선 과제가 되었습니다.

이번에는 Outfit7의 시니어 소프트웨어 엔지니어 알렉산더 그레고르카 및 UI 디자이너 마야 나드베슈니크, 삼성의 개발사 관리 엔지니어 쇠렌 클릿 람백, 유니티의 시니어 프로덕트 디자이너 스테파니 발로로소(UI 툴) 및 시니어 테크니컬 프로덕트 매니저 브누아 뒤피 님을 모시고 파트 1, 2로 구성된 인터뷰를 진행하면서 효과적인 모바일 UI 디자인에 관한 실용적인 노하우와 팁을 알아보겠습니다.

Q&A 파트 1에서는 모바일 UI 디자인 프로세스와 기기별 문제를 비롯해 현재 모바일 게임에서 창의력과 플로를 극대화하기 위한 주요 전략에 대해 살펴보겠습니다.

먼저 기본적인 질문부터 다뤄 보겠습니다. 훌륭한 게임 UI의 조건은 무엇인가요?

마야 나드베슈니크: 훌륭한 게임 UI는 원활하고 재미있는 플레이어 경험을 뒷받침합니다. 플레이어가 혼란스럽거나 조악한 인터페이스 구성 요소들로 인해 어려움을 겪지 않고 게임 본연의 재미에 집중할 수 있게 해 준다는 것입니다. 플레이 중에 편리하며 쉽게 익힐 수 있는 UI 디자인을 구현하기 위해서는 명확성, 사용성, 일관성, 접근성을 고려해야 합니다.

브누아 뒤피: 훌륭한 게임 사용자 인터페이스는 플레이어의 시선을 사로잡아야 하며, 플레이어가 경험하는 게임의 세계관과 자연스럽게 어우러져야 합니다. 또한 접근과 사용이 용이해야 하고 필요할 때는 쉽게 찾을 수 있되 게임을 플레이하는 데 방해가 되어선 안 됩니다. UI가 부실하거나 신속하게 반응하지 못하면 게임플레이에 방해가 되므로 견고함과 성능도 갖춰야 합니다. 무엇보다도 사용성과 가독성을 확보하여 플레이어가 다양한 게임 시스템과 상호 작용하고 중요한 정보에 접근할 수 있도록 해야 합니다.

어떤 과정을 거쳐서 게임 UI를 제작하시나요? 

마야: 게임 UI는 보통 여러 단계를 거쳐 제작됩니다. 예컨대 UI의 목표와 요구 사항 정의, 스케치와 프로토타이핑, 디자인과 스타일링, 구현과 테스트, 반복 작업과 다듬기 과정을 거칩니다. 경우에 따라 UI 제작 과정은 아티스트, 프로그래머, 프로듀서 같은 팀원들과 긴밀하게 협업하는 대형 개발 프로세스의 일환으로 진행되기도 합니다. 이를 통해 UI가 게임이나 프로젝트에 자연스럽게 통합될 수 있는 것이죠.

프로젝트의 폰트는 어떻게 선택하고, 색상 구성은 어떻게 결정하시죠?

마야: 폰트와 색상 구성은 프로젝트의 전반적인 시각적 스타일과 분위기를 뒷받침하고 강화해야 합니다. 저희는 온 가족이 즐길 수 있는 독특하고 창의적인 게임을 개발하므로 그에 맞춰 현대적이고 생동감 있는 디자인을 지향하죠.

그리고 또렷하고 가독성이 높은 명랑한 분위기의 폰트를 사용합니다. 저희는 디자인을 할 때 가독성이 확보되는 텍스트의 최소 크기를 테스트하고 정의합니다. 색상 구성을 결정할 때는 아트 디렉터의 구상과 어울리면서 대비가 충분하고 서로 잘 어울리는 색상 조합을 선택하는 편이에요.

UI 제작은 평균적으로 얼마나 걸리나요?

마야: 게임 UI 제작 기간은 프로젝트별 요구 사항과 더불어 사용하는 리소스와 프로세스에 따라서 달라집니다. 저희의 경우 게임 UI 제작은 사전 제작 단계에서 시작됩니다. 사전 제작에는 수개월이 소요되죠. 사전 제작 단계가 끝나면 UI의 방향성을 결정한 다음, UI를 계속 다듬으면서 주요 게임플레이부터 주변 기능으로 UI를 확장해 갑니다. UI 스타일을 완전히 명확하게 정의하기까지는 6~12개월이 소요되지만, 그 이후에도 게임의 모든 기능이 완성될 때까지 UI 작업은 계속 진행되고요.

UI 제작 시에 플레이어들의 손이나 손가락 크기를 반드시 고려해야 하나요?

알렉산더 그레고르카: 물론입니다. 저희 앱은 사용자층이 다양한데, 어린이가 기기와 상호 작용하는 방식은 10대나 성인들과는 조금 다를 수밖에 없습니다. 어린이는 다른 방식으로 기기를 잡고, 특정 동작을 수행할 때 다소 어려움을 겪기도 하거든요. 또한 온갖 다양한 방식으로 멀티 터치 동작을 입력하기 때문에 그에 대한 대비가 필요합니다.

저희는 알아보기 쉽게끔 버튼을 크게 만드는 편이고, 여러 개를 선택해야 할 때는 서로 간격을 멀리 떨어뜨려 놓습니다. 또 개체를 드래그해야 할 때는 손가락이 해당 개체를 가리지 않도록 조금 위로 옮깁니다. 플레이어가 자신의 동작을 확인할 수 있도록 손이 화면을 가리지 않게 만드는 것이 중요하고요.

스테파니 발로로소: 손 크기는 모바일 게임에서 특히 고민해야 하는 문제이고, 그에 대한 대응 방식은 타겟 플레이어에 따라 크게 달라집니다. 성인보다 손이 작고 민첩성이 높지 않은 어린이를 위한 게임을 만든다고 가정하면, 제스처의 작동 방식이나 사용자의 구체적인 동작 수행 방식, 자주 사용하는 버튼과 상호 작용의 배치 방식 등을 신중하게 고려해야 해요. 손이 작은 사용자는 기기의 중앙부를 터치하기 어렵습니다. 주로 사용하는 손의 반대편에 위치한 모서리는 말할 것도 없죠.

상호 작용에 필요한 컨트롤과 UI를 주로 사용하는 손에 따라 사용자가 커스터마이즈할 수 있는 방식도 고려할 만합니다. 접근성 툴을 활용하는 플레이어를 위해 다른 방식으로 해당 상호 작용을 수행할 수 있는지도 따져 보아야 합니다. 더 깊게 설명하자면 대상의 크기와 떨어진 정도에 따라 대상에 도달하는 시간이 달라진다는 디자인 원리인 피츠의 법칙(Fitts' Law)이 모바일 기기에 어떻게 적용될 수 있는지 고민해야 합니다. 자세한 내용이 궁금하다면 Nielsen Norman Group에서 작성한 이 게시물을 확인해 보세요.

UI가 큰 비중을 차지하는 게임의 UI 제작과 디자인에서는 어떤 점을 주로 고려해야 하나요?

알렉산더: 가장 중요한 것은 일관성입니다. 예를 들면 버튼의 모양과 작동 방식은 게임 전체에 걸쳐서 일관적이어야 하고, 여백을 적절하게 사용해 같은 범주에 속하는 항목을 하나로 묶어야 합니다. 불필요한 요소와 과도한 애니메이션 사용을 지양하고 플레이어가 주의를 기울여야 하는 핵심적인 요소들을 집중적으로 부각해야 해요.

쇠렌 클릿 람백: 게임의 성능에 영향을 끼치지 않도록 UI 시스템을 신중하게 설계해야 합니다. 주기적으로 최대한 많은 기기에서 UI를 테스트하는 것이 필수적이죠. 실시간으로 렌더링되는 UI가 있다면 정말 필요할 때만 업데이트가 되도록 만들어야 합니다.

폴더블 UI 디자인에는 어떤 어려움이 있으며 무엇을 추가로 고려해야 하나요? 또 어떤 이점이 있나요?

쇠렌: Unity는 폴더블 기기에 대한 지원이 아주 뛰어나기 때문에 개발자가 폴더블 기기 지원을 위해 번거로운 작업을 많이 하지 않아도 됩니다. UI 컴포넌트에 이미 반영되어 있기 때문이죠. 하지만 화면의 종횡비는 공통적으로 고려해야 하는 사항입니다. 폴더블 휴대폰 화면이 커버 스크린에서 더블 스크린으로 전환될 때 그에 맞게 UI를 배치하기란 쉽지 않습니다. 그러니 기기에서 수많은 테스트를 진행해야 합니다.

폴더블 UI를 디자인할 때는 어떤 툴과 리소스를 활용할 수 있나요?

쇠렌: Unity를 통한 폴더블 휴대폰 지원과 관련하여 저희가 작성한 튜토리얼 문서가 있습니다. 저희 개발자 웹사이트에서 확인할 수 있어요.

• Unity와 Unreal Engine 4의 폴더블 기기 관련 기능
• Android용 게임 개발을 위한 Jetpack Window Manager 사용법

UI의 반응성을 유지하면서 UI 애니메이션을 만들려면 어떻게 해야 하나요?

스테파니 및 브누아: 무엇보다 애니메이션을 과도하게 사용하지 말아야 합니다. 물론 정보를 전달하고, 사용자의 주의를 환기하고, 다양한 요소 간의 관계를 확립하도록 사용자 인터페이스의 사용성을 확보하기 위해서는 애니메이션이 필요한 것은 사실이죠. 게임에서 애니메이션은 중요한 순간을 기념하기 위한 목적으로도 사용됩니다. 이때 더욱 정교한 그래픽스와 시각 효과를 사용하면 플레이어에게 확실한 보상 심리를 안겨 줍니다. 하지만 애니메이션은 그러한 용도로만 제한적으로 사용하는 게 좋습니다.

UI 전반에 공통적으로 존재하는 소규모 애니메이션이나 전환을 반복해서 사용하는 것이 바람직합니다. 그러면 게임 내에서 일관성을 갖출 수 있으며 성능 문제도 줄어들게 됩니다. 프로젝트 성격에 따라서 표준 애니메이션을 코드를 통해 애니메이션 컴포넌트와 함께 적재적소에 적용한다면 멋진 UI를 구현할 수 있으며, 레이아웃이나 화면 방향이 변할 때도 UI가 신속하게 반응하도록 만들 수 있습니다. UI 툴킷을 사용하면 유니티의 USS 전환을 활용해 UI에 간단한 전환 효과를 추가할 수 있습니다.

다양한 모바일 기기의 서로 다른 해상도를 아우르기 위한 UI 디자인 원칙은 무엇인가요?

마야: 반응형 디자인을 사용하면 UI의 레이아웃과 외관이 다양한 화면 크기와 해상도에 맞춰 자동으로 조정됩니다. 마찬가지로 고정된 픽셀값보다는 백분율이나 em을 사용하는 유연한 레이아웃을 활용하면 UI가 다양한 화면 크기와 해상도에 따라 원활하게 조정됩니다.

삼성 기기용 UI 디자인에서 활용할 수 있는 팁을 몇 가지 알려 주세요.

쇠렌: 폴더블 휴대폰에서는 종횡비와 화면 크기 조절(커버 스크린에서 메인 스크린으로 전환)이 정확하게 작동해야 합니다. 그렇지 않으면 UI가 사라지거나 그래픽스가 뭉개지는 상황이 발생할 수 있습니다.

폴더블 휴대폰에 관해서는 Flex mode를 최대한 빨리 도입하기를 권장합니다. 그러면 UI 디자이너가 다양한 아이디어가 의도한 대로 구현되는지 테스트해 볼 수 있거든요.

UI는 최대한 많은 기기에서 테스트해야 합니다. 삼성에서 UI 테스트용으로 제공하는 Remote Test Labs는 삼성 계정만 있으면 누구나 무료로 사용할 수 있어요.

크로스 플랫폼 UI 디자인은 어떻게 접근하는 것이 가장 바람직한가요?

스테파니: 우선 각 플랫폼에 따라서 배치, 사용자의 물리적 상호 작용, 예상 행동, 맥락 등을 비롯한 UI와 컨트롤이 어떻게 달라지는지 파악해야 합니다. 예를 들면 모바일에서 엄지로 캐릭터를 움직이는 것은 데스크톱에서 키보드나 마우스를 사용하거나 콘솔에서 컨트롤러를 사용해서 캐릭터를 움직이는 것과는 완전히 다를 수밖에 없겠죠.

각 플랫폼에서 실제 UI는 어떻게 나타날까요? 터치 기기라면 화면 가장자리에서 사용자의 입력을 받아들이는 방식의 인터랙터블 UI를 도입하는 것이 좋을까요? 혹시 그렇게 하면 사용자가 터치 기기를 사용하면서 앱을 전환하거나 기기 설정을 신속하게 불러내기 위해 일상적으로 수행하는 스와이프 동작과 간섭이 발생하지는 않을까요?

Unity에서 구현 작업을 진행한다면 타겟 플랫폼에 맞춰 토글되는 프리팹 에셋이나 UI Document를 활용할 수 있습니다. UI 툴킷을 사용하면 플랫폼별 USS (Unity Style Sheets)를 설정하여 UI Document를 초기화할 수 있습니다. UI Document는 MonoBehaviours 형태로 나타낼 수 있으므로 코딩이 없는 워크플로를 활용하는 사용자가 원하는 USS를 각 플랫폼에 쉽게 할당할 수 있습니다. 차이가 크게 나타난다면 컴포넌트를 통해 플랫폼별로 UXML 에셋을 할당해서 비슷한 효과를 얻을 수 있습니다.

중요한 것은 사용자가 특정 플랫폼에서 인터페이스와 어떻게 상호 작용할지 체감할 수 있을 때까지 기기에서 최대한 많은 테스트를 수행해 보는 겁니다.

가로 모드와 세로 모드에 모두 잘 어울리는 모바일 UI를 만들기 위해서는 어떻게 해야 하나요?

알렉산더: 세로 모드 UI를 가로 모드에 그냥 이식하면 어색한 부분이 발생할 거예요. 그러니 UI를 재배치하면서 각 모드에 맞는 디자인을 설계하는 게 좋습니다. 이를테면 가로 모드에서는 메뉴를 측면으로 옮기면 게임 화면을 더욱 넓게 표시할 수 있겠죠. 무엇보다 플레이어들이 UI를 의도한 대로 사용하는지 테스트를 통해 확인해 보아야 합니다. 분명히 뜻밖의 상황이 발생할 거예요.

스테파니: 사용자들이 특정 컨텍스트에서 인터페이스와 어떻게 상호 작용하는지 파악하는 것이 중요합니다. 세로 모드에서는 사용자가 중앙에 있는 버튼을 엄지로 신속하게 누를 수 있을 겁니다. 하지만 UI가 가로 모드로 전환되었을 때는 사용자가 해당 버튼을 정확하게 누를 확률이 줄어듭니다. 그러니 버튼을 쉽게 누를 수 있도록 모서리로 옮기는 게 좋을 겁니다.

게다가 모서리에 고정되어 있는 요소들은 가로 모드와 세로 모드에서 크기를 동일하게 유지하고, 캔버스가 변할 때 함께 변화할 수 있습니다. 화면 방향에 따라서 요소의 위치를 옮겨야 하거나 완전히 다른 인터페이스를 사용해야 한다면 뷰에 따라서 요소들을 활성화하거나 비활성화할 수 있습니다.

다양한 화면 해상도의 UI 디자인에서 안전 영역은 어떻게 관리해야 할까요?

알렉산더: 저희는 안전 영역을 동적 UI 오프셋으로 취급합니다. 각 기기에서 상단과 하단 오프셋을 확보하거나, 가로 모드 게임에서 좌우 오프셋을 확보합니다. 그리고 UI 요소들을 동적으로 오프셋하는 것이죠.

본 인터뷰에서 모바일 디자이너가 기억해야 할 중요한 팁은 원활하고 접근성이 좋으며 재미있는 플레이어 경험에 집중해야 한다는 것입니다. 초기 단계부터 플레이어를 위한 디자인을 지향하고 일관성을 갖추기 위한 계획을 수립한다면 디자인과 그 이후 프로세스를 수월하게 진행할 수 있습니다. 본 시리즈의 두 번째 파트에서는 UI의 구현, 테스트, 성능 최적화, 분석 통합에 관한 전문가들의 인사이트를 확인할 수 있을 것입니다.

더 자세히 알고 싶으신가요? Unity에서의 사용자 인터페이스 디자인과 구현에 관하여 저희가 작성한 전자책을 읽어 보세요. 또한 Made with Unity 포럼에서 여러분만의 성공 팁을 공유해 주세요.