[번역] Unreal에서 C++ UI를 위한 소개

원문: https://benui.ca/unreal/ui-cpp-basics/

 

Unreal을 위한 많은 UI 튜토리얼은 Blueprint에 초점을 맞추고 있습니다. 이것은 더 넓은 매력을 가질 수 있지만 전문가 수준의 UI를 만들려면 C++을 사용해야 합니다.

 

왜 우리는 C++을 사용해야 하는가?

우선, 분명히 우리는 Blueprint로 모든 것을 할 수 있는데, 왜 우리는 C++로 UI를 만들어야 하나요? 라는 질문을 할 수 있습니다. 그것은 맞을수도 있지만 아닐수도 있습니다. Blueprint를 사용하여 전체 게임의 UI를 작성할 수 있지만 그 과정에서 몇 가지 주요 문제에 부딪힐 것입니다.

• Blueprint 기반의 대형 UI에서 성능 문제에 부딪힐 가능성이 높습니다. 작은 1회용 Blueprint는 괜찮지만 모든 프레임으로 불리는 크고 복잡한 로직의 경우 Blueprint 기반의 UI가 실제로 성능에 영향을 미칠 수 있습니다.
• Blueprint에서 복잡한 논리는 악몽을 계속 유지시킵니다. 큰 Blueprint 스크립트를 작성한 사람은 스파게티 코드에 대한 끊임없는 싸움의 원인이 될 것 입니다.
• 수집, 처리 및 데이터 프레젠테이션을 분리할 필요가 없습니다. Blueprint 전용 시스템을 사용하면 서로 다른 소스에서 데이터를 가져오는 것과 표시를 위해 포맷화하는 것을 쉽게 혼합할 수 있습니다. 이것은 디스플레이 그래프 노드가 데이터 수집 노드와 매우 밀접하게 연결되어 있기 때문에 향후 데이터를 변경하거나 구현해야 할 때 실질적인 어려움을 야기합니다.
• 많은 사람들이 한 번에 UI 작업을 하기가 더 어렵습니다. Blueprint는 이진 자산으로 병합이 불가능하므로 한번에 한 사람만 편집할 수 있습니다. UI 아티스트가 위젯의 모양을 업데이트하고 개발자가 Blueprint 로직을 업데이트하려면 아티스트가 기다려야 합니다. 대부분의 로직이 C++이면 두 사람 모두 서로의 발가락을 밟을 가능성이 낮습니다.

C++을 사용한 UI를 만드는 세가지 방법

여기서 일이 조금 까다로워집니다. 모든 UI 디자인과 마찬가지로 동일한 작업을 수행하는 100가지 방법이 있습니다. 이 세 가지 접근 방식은 다음 튜토리얼에서 개별적으로 다루겠지만 대략 다음과 같습니다

• UUserWidget 의 Subclassing(다른 클래스의 코드를 재사용할 목적으로 상속을 사용하는 경우)
• Subclassing 혹은 새로운 UMG 위젯 생성
• Subclassing 혹은 새로은 Slate 위젯 생성

이것들은 각각 장점과 단점이 있습니다. 이것들이 의마하는 바를 알기 위해서는 Slate와 UMG의 차이점에 대해 얘기해야 합니다.

Slate와 UMG

첫 번째 C++ 기반 UserWidget을 만들려면 UUserWidget의 하위 클래스인 C++ 클래스를 만들어야 합니다.

 

이 작업을 시작하기 전에 이제 편집기에서 UI를 만들고 팔레트에 있는 대부분의 위젯의 목적과 기능을 이해해야 합니다. 이는 에디터와 블루프린트를 사용하여 간단한 UI를 생성해봄으로써 가장 빠르게 이해할 수 있습니다. 그 방법은 시리즈 소개를 참조하십시오.

 

다음 단계는 C++에서 위젯을 만드는 방법을 배우는 것입니다.

 

이번 시리즈의 서론에서 언급했듯이 Unreal(4.15 기준)에는 UMG와 Slate 두 가지 UI 시스템이 있습니다.

 

Slate는 오래된 Unreal UI 시스템이고, UMG와 에디터가 기반을 두고 있습니다. 위젯 설정을 단순화하기 위해 고전적인 외관의 C++을 사용합니다. "오래된" 시스템이라고 해서 오래된 것은 아니라는 것을 이해하는 것이 중요합니다. UI에 더 복잡한 기능을 추가하기 위해 슬레이트를 점차 배워야 할 것입니다.

 

UMG는 Unreal 4의 일부로 추가된 새로운 UI 시스템입니다. Blueprint 친화적으로 설계되었으며 디자이너가 편집기에서 UI를 시각적으로 배치할 수 있습니다. 각 UMG 위젯은 일반적으로 거의 동일한 이름의 Slate 클래스를 내부에 가지고 있습니다. **Slate 클래스는 대부분의 로직을 처기하고 해당 UMG 클래스는 그것을 감싸는 wrapper입니다. 예를 들어 UImage는 UMG 클래스이며 내부에 SImage 인스턴스를 포함합니다.

 

먼저, 역사의 작은 부분입니다. 이것을 넘어가지 마세요. 여러분의 이해를 위해 중요합니다!

 

4.0 버전 이전에는 Unreal의 UI가 Slate라는 시스템을 사용하여 만들어졌습니다. 가능한 한 간단하게 C++의 UI를 만들 수 있도록 설계되었습니다. 나중에 튜토리얼 시리즈에서 여러분도 어떻게 사용할 수 있는지 설명하겠습니다.

 

언리얼 엔진 4.0 버전으로 에픽은 그들의 새로운 UI 시스템인 UMG를 출시했습니다. UMG는 효과적으로 Slate를 감싸는 wrapper 이고, Blueprints에서 더 쉽게 사용할 수 있도록 하고 UI 디자이너가 언리얼 에디터 내에서 사용자 정의 UI를 만들 수 있도록 합니다.

 

Slate가 논의할 모든 UMG시스템의 기초가 된다는 것을 이해하는 것이 중요합니다. 슬롯, 다양한 위젯, 위젯에 대한 옵션 등은 Slate와 모두 동일합니다. UMG는 Slate를 위한 에디터 및 Blueprint에 적합한 wrapper일 뿐입니다.

세 가지 접근방법

이 방법에서 벗어나 UI에 C++ 기반 위젯을 추가할 수 있는 방법은 크게 세 가지입니다. 아래에 나열된 것은 점진적으로 낮은 수준의 '더 많은 작업'이며, 그 중 어느 것도 문제를 해결할 수 있는 유일한 '최상의 방법'은 아니며, 각각의 접근 방식에는 각각의 장점과 단점이 있습니다.

 

맥락상, 여러 해 동안 Unreal UI 프로그래머로 일한 경험은 다음과 같습니다.

• 커스텀 UUserWidget - 95%의 경우 이것으로 충분함
• 커스텀 UMG/Slate subclass - 5%의 경우 (매우 특정한 것을 원할 경우 사용자 정의 UMG/Slate 서브 클래스를 만듬)

모든 것이 그렇듯이, 각 접근 방식에도 장단점이 있습니다. 하지만 일반적으로 계층 구조에서 Slate로 갈수록, 더 많은 사용자 정의를 수행할 수 있지만, Blueprints로 인터페이스를 설정하는 작업이 더 많아질 수 있습니다.

 

각 접근 방식을 각각의 튜토리얼로 분리했습니다.