Unity 검색

Best practices for mobile UI design – part 2 | Hero image
Best practices for mobile UI design – part 2 | Hero image
공유

Is this article helpful for you?

Thank you for your feedback!

모바일 UI 성능을 테스트하고 최적화하는 과정은 디자인 및 개발 프로세스의 핵심적인 부분이며 게임의 성패를 좌우합니다.

본 인터뷰의 파트 2에서는 Outfit7의 시니어 소프트웨어 엔지니어 알렉산더 그레고르카, 삼성의 개발사 관리 엔지니어 쇠렌 클릿 람백, 유니티의 시니어 테크니컬 프로덕트 매니저 브누아 뒤피 님을 모시고 즐거운 플레이어 경험과 뛰어난 성능을 갖춘 게임을 출시하기 위한 베스트 프랙티스에 대해 계속 논의해 보겠습니다.

Q&A 파트 2에서는 UI의 구현, 테스트, 성능 최적화, 분석 통합에 대하여 상세히 알아보겠습니다.

지난 시간에 이어서 진행해 보겠습니다. 코딩 없이 사용자 인터페이스를 구현하기 위한 베스트 프랙티스에는 무엇이 있나요?

브누아 뒤피: Unity UI를 사용한다면 Unity 이벤트로 인터페이스 요소들을 활성화하거나 비활성화하여 간단하게 기능적 와이어프레임을 프로토타이핑할 수 있습니다. 해당 요소들은 인스펙터에 버튼이나 토글과 같은 특정한 인터랙티브 UI 요소로 나타나 있습니다. 예를 들면 게임 오브젝트를 Unity 이벤트에 추가한 다음 버튼을 클릭했을 때 어떤 동작이 수행될지 선택할 수 있죠.

Setting the Active state of GameObjects during ClickEvents
ClickEvents에서 게임 오브젝트의 활성화 상태 설정

이 예시는 게임 오브젝트를 활성화하는 내비게이션 플로를 보여 줍니다. OnClick 이벤트SetActive(true)를 호출한 다음 PopUp 게임 오브젝트를 비활성화하여 NewPopUp 이라는 게임 오브젝트를 활성화합니다.

그 외에도 다음과 같은 사항을 고려해야 합니다.

  • Unity UI의 Unity 이벤트UI 툴킷 을 사용해 트리거할 수 있는 게임플레이 기능은 비주얼 스크립팅을 통해 코딩 없이도 만들 수 있습니다.
  • UI Builder를 사용해 UI 툴킷으로 UI를 구현할 수 있습니다. UI 툴킷의 UI 요소를 코드로 연결하는 사람은 개발자일 가능성이 높습니다. UI Builder는 모든 인터페이스를 시각적으로 만들 수 있도록 지원하는 시각적 저작 툴입니다. 해당 워크플로가 효과적인 이유는 디자이너와 프로그래머가 따로 작업을 진행하되, 메인 플레이 버튼과 같은 요소에 이름을 붙일 때는 공통의 명명 규칙을 따르는 식으로 협업하기 때문입니다.
UI Builder (top) and code (bottom)
UI Builder(위)와 코드(아래)

위 이미지에서 위쪽은 UI Builder, 아래쪽은 코드에 해당합니다. 요소 간의 계층 구조인 시각적 요소 트리는 코드에서 스캔되며 상호 작용이 필요한 요소들을 등록합니다. 예를 들어 플레이 버튼은 하나의 변수로 저장될 것이며 해당 버튼이 눌리면 콜백에 대응할 수 있습니다. 디자이너와 프로그래머에게 필요한 정보는 버튼의 호출 방식뿐입니다.

  • 시각적 요소와 스타일 시트에는 BEM(Block Element Modifier) 명명 규칙을 사용하는 것이 좋습니다. BEM 명명 규칙을 따르면 각 요소의 이름만 보더라도 그 요소가 어떤 역할을 하고 어디에 위치하며 주변의 다른 요소들과는 어떤 관련이 있는지 한눈에 파악할 수 있습니다.

    BEM 명명 규칙의 사용 예시:

    menu__home-button
    menu__shop-button
    menu__shop-button--small
    button-label
    Button-label--selected

다양한 UI 변경 사항을 통합하고 테스트할 수 있도록 코드베이스를 설계하려면 어떻게 해야 하나요?

알렉산더: 로직을 뷰 컴포넌트에서 분리해야 합니다. UI가 어떻게 바뀔지는 미리 알 수 없지만, UI 뷰가 로직에 변화를 일으켜서는 안 됩니다. UI는 직접적으로 전송받거나 값을 관찰하고 이벤트를 수신하여 받은 대상을 표시하는 역할만 해야 합니다. 그러면 UI 시스템 전체가 바뀌더라도 필요에 따라 자유롭게 렌더링 로직을 교체할 수 있습니다.

보통 UI 테스트 과정에는 누가 참여하나요?

알렉산더: 저희는 다양한 방식으로 UI 테스트를 진행합니다. 첫 번째 방식은 타겟 사용자 일부를 초청해 게임을 플레이하게 하는 ‘사용자 테스트’입니다. 해당 사용자들의 게임 내 행동을 관찰해서 시사점을 도출한 뒤 필요에 따라 UI를 조정하는 거죠.

‘내부 테스트’라는 방식도 사용합니다. 직원들이 게임을 테스트하면서 발생했던 문제를 보고하는 방식입니다. 직원들은 최고의 UI만을 원하며 관련 경험도 풍부한 만큼 유용한 피드백을 충분하게 제공해 줍니다.

폴더블 기기를 보유하고 있지 않은 상황에서 폴더블 UI를 테스트하려면 어떻게 해야 할까요?

쇠렌: 삼성에서 제공하는 Remote Test Labs를 활용하면 됩니다. 저희는 다양한 기기를 설정해 두었고, 삼성 계정만 있으면 누구든지 기기를 선택해서 타임슬롯을 예약할 수 있습니다. 해당 시스템을 활용하면 APK 파일을 업로드해 다양한 기기에서 테스트할 수 있습니다.

모바일 UI의 성능을 저해하는 주요 요인은 무엇인가요?

알렉산더: 모바일 UI의 성능을 저해하는 주요 요인으로는 오버드로우, 동적 요소가 있을 때 캔버스를 너무 빈번하게 재빌딩하는 것, 구성 요소가 많을 때 캔버스 재빌드 시간이 너무 오래 걸리는 것, 텍스트 메시 생성을 꼽을 수 있습니다. 저희는 다양한 기기를 지원해야 하므로 게임 프로젝트를 진행할 때 이와 같은 요인에 항상 주의를 기울이고 있습니다.

쇠렌: 지나치게 큰 래스터 그래픽스를 사용하면 UI가 느려질 수 있으니 기기의 메모리 용량에 맞는 그래픽스를 사용해야 합니다. UI에 3D 그래픽스를 실시간으로 렌더링하는 것도 성능을 크게 떨어뜨릴 수 있습니다. 미니맵과 캐릭터 인벤토리 시스템이 여기에 해당하죠.

UI 최적화에서 가장 중요한 팁을 알려 주세요. 

알렉산더: UI 요소를 서로 다른 캔버스나 자식 캔버스로 묶어서 과도한 캔버스 재빌딩을 방지해야 합니다. 요소 하나만 바뀌어도 캔버스 전체가 지저분해지므로 재빌딩을 해야 합니다. 이 과정에서 많은 리소스를 소모할 수 있으니 동적 요소는 별도의 캔버스에 배치하는 것이 좋습니다. 아예 여러 개를 사용하는 것도 좋고요.

레이아웃 그룹 중에서도 특히 중첩된 레이아웃 그룹은 캔버스를 지저분하게 만드니 최대한 사용을 자제하세요. 정적인 항목이 있다면 미리 계산된 위치와 크기를 제공하는 것이 좋습니다.

그래픽 레이캐스터를 비활성화하고 상호 작용이 불가능한 UI 요소에 레이캐스트 대상을 지정하세요. 사용자가 UI 컴포넌트 내에서 터치했는지 그래픽 레이캐스터가 판단하는 과정은 상당한 리소스를 소모합니다.

비슷한 맥락으로 전체 화면 UI를 표시할 때는 배경 카메라를 비활성화하세요(다이얼로그 참고). 그러면 가려진 카메라에 소모되는 추가 렌더링 비용을 제외할 수 있습니다.

텍스처 아틀라스를 사용하되 스프라이트를 여러 아틀라스로 나눠 두면, 상황에 따라 필요한 아틀라스만 로드할 수 있으므로 메모리 소비를 줄일 수 있습니다.

마지막으로 가장 중요한 팁은 게임을 기기에서 실제로 프로파일링해서 개선점을 찾아내는 것입니다. 최적화 요령을 무작정 따르는 것은 절대 바람직하지 않습니다.

브누아: Unity UI에서는 정적 요소와 업데이트가 필요한 요소를 서로 다른 캔버스로 나누는 것을 보편적으로 권장합니다. 캔버스는 업데이트될 때 모든 자식 요소를 함께 새고로침합니다. 따라서 실제로 새로고침이 필요한 요소에서만 진행하는 게 좋겠죠.

또한 서로 겹치는 투명한 픽셀을 사용하기보다는 UI 요소의 비주얼을 최대한 개성 있게 만드는 편이 낫습니다. UI 요소의 개수를 줄일 수 있는 한 가지 방법은 런타임 동안 생성되는 UI 요소 중에 단순한 이미지로 만들 수 있는 것을 스프라이트 이미지로 만드는 것입니다. 예를 들면 화면에 표시되는 한 자릿수 시각적 표시자나 사전 정의된 이모티콘 세트가 있겠죠. 더 자세한 내용이 궁금하다면 UI 성능에 대해 별도의 챕터로 다루고 있는 이 전자책을 참고하시기 바랍니다.

UI는 삼성 기기의 모바일 게임 성능에 어떤 영향을 미치나요?

쇠렌: 지금까지는 UI가 성능에 큰 영향을 미치는 사례가 없었습니다. 하지만 그렇게 될 가능성이 없는 것은 아니죠. UI 디자인이 유난히 복잡하다거나 미니맵 같은 UI 컴포넌트가 제대로 구현되지 않는다면 성능에 충분히 악영향을 미칠 수 있습니다.

UI 디자인에도 Adaptive Performance를 활용해 효과를 볼 수 있을까요?

쇠렌: UI 디자인에서도 Adaptive Performance를 활용할 수 있어요. 하지만 2D 래스터 그래픽스 작업의 경우 과도하게 사용하면 불분명하거나 예상하지 못한 결과값을 얻을 수 있으므로 주의해야 합니다. Adaptive Performance는 3D 지오메트리를 UI 레이어에 실시간으로 렌더링할 때 더 어울릴 것 같네요.

리소스 관리와 런타임 최적화 측면에서 각 패널에 고유한 대형 아트 에셋을 만드는 것이 좋을까요, 아니면 조합해서 하나의 레이어로 만들 수 있는 작은 파트로 구성된 라이브러리를 만드는 것이 좋을까요?

알렉산더: 어떻게 사용하느냐에 따라 다르겠네요. 성능 측면에서는 커다란 아트 에셋을 사용하는 게 좋지만, 일반적으로 작은 UI 파트의 라이브러리를 사용하는 게 더 안전합니다. 모바일에서는 앱 크기가 제한되므로 저희는 최대한 9슬라이스 스케일링을 사용하려 합니다.

UI 요소 프리팹 라이브러리를 구축해 두면 프로젝트를 시작할 때 매우 유용합니다. 처음에는 조금 시간이 걸리겠지만, 일단 구축해 두면 해당 컴포넌트를 빠르게 재사용하여 UI를 신속하게 만들 수 있습니다. 가장 중요한 것은 게임 전반에 걸쳐 아트 스타일을 일관되게 유지하는 것입니다.

브누아: 세련된 스타일을 지닌 게임에서 Unity UI를 사용한다면 주요 팝업 메뉴용 이미지를 마련해서 런타임 성능을 높일 수도 있습니다. 하지만 텍스처 크기 측면에서는 항상 스프라이트 에디터의 슬라이싱 같은 기능을 사용하고 자식 UI 오브젝트 개수를 최대한 줄이는 것이 바람직합니다.

현지화를 염두에 둔 상황에서, 텍스트 크기 자동 조정은 어떻게 관리하시나요?

알렉산더: 자동 크기 조정은 따로 관리할 필요가 없게 만드는 게 최선이라고 생각합니다. 화면 공간에 여유가 있다면 모든 현지화 언어를 수용할 수 있을 정도로 텍스트 영역을 넓히는 게 좋습니다. 텍스트가 정적이라면 서로 다른 언어에 맞는 프리셋을 준비할 수도 있습니다. 자동 크기 조정을 사용할 때는 텍스트가 프레임마다 불필요하게 업데이트되지 않도록 주의해야 합니다. 그리고 텍스트가 추가될 때마다 모든 현지화 언어에 테스트를 진행해 해당 텍스트가 화면과 어울리는지 확인해야 합니다. 

디자인의 효과를 검증하기 위해 UI 워크플로에 분석 단계를 포함하시나요?

알렉산더: 저희는 UI를 포함하여 게임의 모든 측면을 포괄하는 자체 분석 워크플로를 갖추고 있습니다. 어떤 UI 요소가 클릭되거나 클릭되지 않았는지 측정하고 해당 데이터를 기반으로 의사 결정을 내리죠.

저희는 보상형 비디오의 위치나 IAP(인앱 구매) 혜택처럼 저희의 KPI(주요 성과 지표)와 밀접한 연관이 있는 UI 요소에 주로 초점을 맞춥니다. 화면 히트맵 시각화를 활용해 플레이어 행동에 대한 인사이트를 추가로 확보하기도 합니다.

모바일 디자이너와 개발자가 기억해야 할 중요한 사실은 UI의 테스트, 성능 최적화, 데이터 분석에는 천편일률적으로 적용할 수 있는 만능 전략이 없다는 것입니다. 모든 상황이 다르기 때문에 오늘 다룬 베스트 프랙티스를 염두에 두고 게임 성능을 최대한 끌어올리려 노력해야 합니다.

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

2023년 2월 7일 게임 | 13 분 소요

Is this article helpful for you?

Thank you for your feedback!

포럼에서 토론에 참여하기
관련 게시물