1. Epic GamesDeveloper
  3. UMG UI 디자이너 퀵스타트 가이드

UMG UI 디자이너 퀵스타트 가이드

언리얼 모션 그래픽 사용을 시작합니다.

UMG UI 디자이너 퀵스타트 가이드

이 퀵스타트 가이드 에서는 언리얼 모션 그래픽 UI 디자이너(Unreal Motion Graphics UI Designer, UMG) 를 사용하여 기본적인 게임 내 HUD 엘리먼트 구현 방법을 보여줍니다. 체력 바, 에너지 바 및 탄약 수와 같은 다이내믹 엘리먼트 생성 프로세스 예시를 살펴봅니다. 또한, 그러한 엘리먼트를 뷰포트(Viewport) 에 추가하는 방법도 알아봅니다.

모든 액션은 단계별로 자세하게 설명되어 있습니다. 하지만, 언리얼 엔진 작업이 처음이라면 레벨 디자이너 퀵스타트를 통해 먼저 엔진에 익숙해지는 것이 좋습니다. 레벨 디자이너 퀵스타트 문서에서는 UE 작업에 대한 기본 지식과 용어를 확인할 수 있습니다. 또한, 이 강좌에는 더 자세한 정보에 대한 링크도 포함되어 있습니다. 필요하다면 그러한 링크도 확인해 보세요.

1 - 필수 프로젝트 구성

이 튜토리얼에서는 시작용 콘텐츠(Starter Content) 가 활성화된 블루프린트 1인칭(Blueprint First Person) 템플릿을 사용합니다.

게임 프로세스 시작 시 캐릭터는 무장하지 않은 상태로 나타납니다. 캐릭터가 무기를 사용하면 탄약 표시가 나타나야 합니다. 그러기 위해 HUD와 HUD_AmmoCount, 이렇게 두 개의 위젯을 사용합니다. 게임 프로세스 시작부터 캐릭터의 체력과 에너지를 표시하도록 HUD 위젯을 조정하고, 무기를 집을 경우 탄약을 표시하도록 HUD_AmmoCount 위젯을 조정해야 합니다.

  1. 위젯 블루프린트(Widget Blueprint) 를 생성합니다. 콘텐츠 브라우저(Content Browser) 에서 신규 추가(Add New) 를 클릭한 다음, 유저 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint) 를 선택합니다. 이 위젯 이름을 HUD 로 지정합니다.

    위젯 블루프린트를 사용하여 HUD, 메뉴 등과 같은 UI 엘리먼트를 생성하고 설정합니다. 위젯 블루프린트를 통해 UI 엘리먼트를 시각적으로 배치하고 스크립트 함수 기능을 제공할 수 있습니다.

    위젯 블루프린트에 대한 자세한 내용은 UMG의 위젯 블루프린트를 참조하세요.

  2. 위젯 블루프린트를 세 개 더 생성하고 각각의 이름을 HUD_AmmoCount, MainMenu, PauseMenu 로 지정합니다.

  3. 새 레벨(Level) 을 생성합니다. 콘텐츠 브라우저 에서 우클릭 하고 레벨 을 선택합니다. 이름을 Main 으로 지정합니다.

    나중에 이 가이드의 메인 메뉴(Main Menu) 구성에서 이 레벨을 사용합니다.

BP_FirstPersonCharacter 블루프린트 조정하기

  1. 콘텐츠 브라우저 에서 Content/FirstPerson/Blueprints 폴더 아래 있는 BP_FirstPersonCharacter 블루프린트를 엽니다.

    게임에서 제어하는 캐릭터 블루프린트 입니다. HUD 위젯을 구성하여 뷰포트에 표시하려면 이 블루프린트를 조정해야 합니다.

  2. 블루프린트 에디터(Blueprint Editor) 창에서 변수 추가(Add Variable) 버튼을 클릭합니다.

  3. 이 변수의 디테일(Details) 패널에서 Float 변수 타입을 선택하고 이름을 Health 라고 입력합니다. 디폴트 값(Default Value) 을 1.0 으로 설정합니다.

    이 변수를 사용하여 HUD 위젯에서 캐릭터의 체력 바를 조정할 것입니다.

  4. Float 타입 변수를 하나 더 생성하고 이름을 Energy 라고 지정합니다. 디폴트 값 을 1.0 으로 설정합니다.

    이 변수를 사용하여 HUD 위젯에서 캐릭터의 에너지 바를 조정할 것입니다.

    디폴트 값을 입력하기 전에 툴바에서 컴파일(Compile) 버튼을 클릭하여 블루프린트를 컴파일해야 합니다.

  5. Integer 타입으로 또 다른 변수를 생성하고 이름을 Ammo 라고 지정합니다. 디폴트 값 을 25 로 설정합니다.

  6. Integer 타입 변수를 하나 더 생성하고 이름을 MaxAmmo 라고 지정합니다. 디폴트 값 을 25 로 설정합니다.

  7. 그래프(Graph) 창 안에서 우클릭 하고 Event Begin Play 노드를 추가한 다음 Create Widget 노드를 추가합니다. 클래스(Class) 를 HUD 위젯으로 생성합니다.

  8. Create HUD Widget 의 Return Value 에 대해 변수로 승격(Promote to Variable) 을 선택하고 이름을 HUD Reference 로 지정합니다.

    이를 통해 게임 시작 시 HUD 위젯을 생성할 수 있으며, 나중에 호출하기 위한 변수로 설정할 수 있습니다. 블루프린트를 통해 HUD 위젯의 프로퍼티를 설정하거나 일부 함수를 호출해야 하는 경우 유용합니다. 예를 들어, 게임이 일시정지된 동안 HUD를 숨겨야 하는 경우, 이 변수를 통해 HUD에 액세스할 수 있습니다.

  9. Set 노드의 출력 핀에 Add to Viewport 노드를 추가합니다.

    이를 통해 게임 프로세스 시작부터 뷰포트에 HUD 위젯을 추가했습니다.

  10. BP_FirstPersonCharacter 블루프린트를 컴파일(Compile) 및 저장(Save) 한 다음 닫습니다.

BP_Rifle 블루프린트 조정하기

BP_Rifle 블루프린트 조정 프로세스는 BP_FirstPersonCharacter 블루프린트 조정과 비슷합니다. 더 자세한 내용이 필요하면 위의 BP_FirstPersonCharacter 블루프린트 조정하기 섹션을 참조하세요.

  1. 콘텐츠 브라우저 에서 Content/FirstPerson/Blueprints 폴더 아래 있는 BP_Rifle 블루프린트를 엽니다.

  2. On Component Begin Overlap (SphereCollision) 노드를 찾습니다. 실행 핀을 우클릭 하고 모든 핀 링크 끊기(Break All Pin Link(s)) 를 선택합니다.

  3. On Component Begin Overlap (SphereCollision) 노드의 실행 핀을 드래그하여 Create Widget 노드를 추가합니다. 클래스(Class) 를 HUD_AmmoCount 위젯으로 생성합니다.

  4. Create HUD Widget 의 Return Value 에 대해 변수로 승격 을 선택하고 이름을 HUD Ammo Count Ref 로 지정합니다.

  5. Set 노드의 출력 핀에 Add to Viewport 노드를 추가합니다.

  6. Add to Viewport 노드의 실행 핀을 Cast to BP_FirstPersonCharacter 노드의 실행 핀에 연결합니다. 스크립트가 아래와 같은 모습일 것입니다.

    이를 통해 캐릭터가 무기를 사용할 경우에 대비해 뷰포트에 HUD_AmmoCount 위젯을 추가했습니다.

  7. BP_Rifle 블루프린트를 컴파일(Compile) 및 저장(Save) 한 다음 닫습니다.

BP_FirstPersonCharacter 블루프린트에서 캐릭터 변수 조정하기

이 챕터에서는 선언된 변수를 조정하고 블루프린트에 추가하는 방법을 살펴봅니다.

  1. BP_FirstPersonCharacter 의 블루프린트 에디터에서 Alt 를 누른 상태로 Energy 변수를 그래프 창에 드래그하여 Jump 스크립트 옆에 배치합니다.

  2. Ctrl 을 누른 상태로 Energy 변수의 사본을 그래프 창에 드래그합니다. 빼기 연산자 노드를 추가하고 아래 이미지처럼 연결하고 0.25 로 설정합니다.

    이 스크립트를 통해, 캐릭터가 점프할 때마다 에너지가 현재 에너지 값에서 0.25씩 감소합니다.

  3. Health 변수에 대해서도 같은 스크립트를 구성합니다. 다만 이번에는 테스트를 위해 F 키 이벤트나 다른 키 누르기 이벤트를 사용합니다.

    이 스크립트를 통해, F 를 누를 때마다 체력이 현재 값에서 0.25씩 감소하는지 테스트할 수 있습니다.

  4. BP_FirstPersonCharacter 블루프린트를 컴파일(Compile) 및 저장(Save) 한 다음 닫습니다.

    탄약 재장전 기능 추가 방법은 다음과 같습니다. R 키 이벤트 를 추가합니다. Alt 를 누른 상태로 Ammo 변수를 드래그합니다. Ctrl 을 누른 상태로 Max Ammo 변수를 드래그합니다. 아래 이미지처럼 연결합니다.

BP_Blueprint블루프린트에서 캐릭터 변수 조정하기

  1. BP_Rifle 블루프린트를 엽니다. OnFireProjectile 커스텀 이벤트(Custom Event) 를 찾습니다. 실행 핀을 우클릭 하고 모든 핀 링크 끊기(Break All Pin Link(s)) 를 선택합니다.

  2. 이 노드 근처를 우클릭 하고 Branch 노드를 추가합니다.

  3. Ctrl 을 누른 상태로 FirstPersonCharacterReference 변수의 사본을 그래프 창에 드래그합니다. 핀을 드래그하고 Get Ammo 를 선택합니다.

  4. 보다 큼 연산자 노드를 추가하고 아래 이미지처럼 연결하고 0 으로 설정합니다.

    이 스크립트 덕분에 플레이하는 캐릭터는 탄약이 0보다 많은 경우 무기를 발사할 수 있습니다.

  5. Montage Play 노드 다음에 있는 OnFireProjectile 커스텀 이벤트 스크립트 끝에서 Ctrl 을 누른 상태로 FirstPersonCharacterReference 변수 사본을 그래프 창에 드래그합니다. 핀을 드래그하고 Get Ammo 를 선택합니다. 핀을 다시 드래그하고 Set Ammo 를 선택합니다.

  6. 빼기 연산자를 추가하고 Ammo 를 Ammo - 1 과 같게 설정합니다. 스크립트가 아래와 같은 모습일 것입니다.

    이 스크립트 덕분에 플레이하는 캐릭터가 무기를 발사할 때마다 탄약이 하나씩 감소합니다.

  7. BP_Rifle 블루프린트를 컴파일(Compile) 및 저장(Save) 한 다음 닫습니다.

2 - 체력, 에너지 및 탄약 표시하기

이 단계에서는 위젯에서 Health, Energy 및 Ammo 변수의 시각화를 설정하고 게임 프로세스와의 연결을 조정합니다.

시각화: Health 및 Energy

HUD 위젯의 시각화 설정 방법은 다음과 같습니다.

  1. HUD 위젯 블루프린트를 열어 위젯 블루프린트 에디터 에 액세스합니다. 이를 통해 HUD 위젯의 비주얼 레이아웃과 스크립트 함수 기능을 생성할 수 있습니다.

    위젯 블루프린트 에디터의 다양한 측면에 대한 자세한 내용은 UMG의 위젯 블루프린트를 참조하세요.

  2. 팔레트(Palette) 패널의 패널(Panel) 아래에서 가로 박스(Horizontal Box) 를 찾아 계층구조(Hierarchy) 패널의 캔버스 패널(Canvas Panel) 에 드래그합니다.

    패널 위젯은 다른 위젯을 담는 컨테이너와 같습니다. 패널 위젯 안에 있는 위젯에 대한 추가 함수 기능을 제공할 수 있습니다.

  3. 또한, 패널 아래에서 두 개의 세로 박스(Vertical Boxes) 도 가로 박스 에 드래그합니다.

  4. 일반(Common) 아래에서 두 개의 텍스트(Text) 위젯을 첫 번째 세로 박스에 드래그하고 두 개의 프로그레스 바(Progress Bars) 를 두 번째 세로 박스에 드래그합니다.

  5. 그래프 에서 가로 박스 를 찾아 선택하고 박스 크기를 조정하고 창의 왼쪽 상단에 배치합니다.

  6. 두 프로그레스 바 를 모두 선택한 다음 디테일 패널에서 크기(Size) 를 둘 다 채우기(Fill) 로 설정합니다.

  7. 프로그레스 바가 포함된 세로 박스 를 선택한 다음 디테일 패널에서 크기(Size) 를 둘 다 채우기(Fill) 로 설정합니다.

  8. 다시 가로 박스 를 선택하고 프로그레스 바가 텍스트에 맞게 정렬되도록 박스 크기를 조정합니다.

  9. 계층구조 패널에서 가장 위에 있는 텍스트 위젯을 선택한 다음, 디테일 패널의 콘텐츠(Content) 아래에서 Health: 를 입력합니다.

  10. 다른 텍스트 위젯도 똑같이 진행하되, 텍스트를 Energy: 로 입력합니다. 그러면 아래와 같은 모습일 것입니다.

    기본적으로 UMG 텍스트 위젯은 언리얼 엔진의 폰트를 사용합니다. 그 덕분에 언리얼 엔진에서 빠르게 작업을 시작할 수 있습니다. 하지만, 이런 내장 폰트에는 몇 가지 제한이 있습니다. 예를 들어, 지원하는 언어가 많지 않습니다. 대부분의 경우 에셋에 커스텀 폰트를 임포트해야 합니다. 커스텀 폰트를 사용하도록 텍스트 위젯을 설정하는 방법에 대한 자세한 내용은 언리얼 엔진 유저 인터페이스에서 폰트 생성 및 할당을 참조하세요.

  11. Health 옆의 프로그레스 바 를 선택한 다음 디테일 패널에서 컬러 및 오파시티 채우기(Fill Color and Opacity) 를 녹색으로 설정합니다.

    컬러를 할당해도 프로그레스 바 컬러는 변경되지 않습니다. 왜냐하면 프로그레스 바를 채우는 백분율(Percent) 값이 0.0으로 설정되어 있기 때문입니다. 이 값을 변경하여 다른 컬러를 테스트할 수 있습니다. 나중에 이 값을 캐릭터의 Health 변수 값에 연결할 것입니다.

  12. Energy 바의 컬러 및 오파시티 채우기도 주황색 등으로 설정합니다.

  13. HUD 위젯 레이아웃이 아래와 같은 모습일 것입니다.

  14. HUD 위젯 블루프린트를 컴파일(Compile) 및 저장(Save) 한 다음 닫습니다.

시각화: Ammo

HUD_AmmoCount 위젯의 시각화 설정 방법은 다음과 같습니다.

  1. HUD_AmmoCount 위젯 블루프린트를 열어 위젯 블루프린트 에디터 에 액세스합니다.

  2. 같은 방식으로 위젯을 계층구조(Hierarchy) 패널에 추가합니다. 레이아웃 구조는 아래와 같은 모습일 것입니다.

  3. 그래프 에서 가로 박스 를 선택하고 박스 크기를 조정한 후 창의 오른쪽 상단에 배치합니다.

  4. 가로 박스 를 선택한 다음 디테일 패널에서 앵커(Anchors) 를 클릭하고 오른쪽 상단 앵커를 선택합니다.

    이를 통해 화면 오른쪽 상단에 앵커 메달리온(Anchor Medallion) 을 배치합니다.

    앵커 세팅 덕분에, 화면 크기와 상관없이 가로 박스 위치가 고정됩니다. 화면 크기 조정 시 위젯은 앵커 메달리온과 똑같은 거리를 유지합니다.

    그래프 내에서 프리뷰 크기(Preview Size) 옵션을 클릭하고 변경하여 다양한 화면 크기를 테스트할 수 있습니다.

  5. HUD_AmmoCount 위젯 블루프린트를 컴파일(Compile) 및 저장(Save) 한 다음 닫습니다.

스크립트: Health 및 Energy

다음 단계는 HUD 위젯 엘리먼트에 대한 함수 기능을 제공하는 것입니다.

  1. HUD 위젯 블루프린트를 열어 위젯 블루프린트 에디터 에 액세스합니다.

  2. 위젯 블루프린트 에디터 창의 오른쪽 상단에서 그래프 버튼을 클릭합니다.

  3. 그래프 의 Event Construct 노드 아래를 우클릭 하고 Get Player Character 노드를 추가합니다.

  4. Get Player Character 노드의 Return Value 핀을 드래그하고 Cast to BP_FirstPersonCharacter 를 선택합니다.

  5. As BP First Person Character 핀을 드래그하고 변수로 승격 을 선택하고 My Character 라고 이름을 지정한 다음 아래 보이는 것처럼 연결합니다.

    이를 통해 BP_FirstPersonCharacter 블루프린트의 변수에 액세스할 수 있습니다.

  6. 툴바에서 컴파일(Compile) 을 클릭하여 스크립트를 컴파일합니다.

  7. 디자이너 로 돌아가 Health 옆의 프로그레스 바 를 선택합니다.

  8. 디테일 패널의 프로그레스(Progress) 아래에서 백분율(Percent) 옆의 바인드(Bind) 옵션을 클릭하고 바인딩 생성(Create Binding) 을 클릭합니다.

    이를 통해 열린 창에서 함수 스크립트를 조정하여 커스텀 바인딩을 생성할 수 있습니다.

  9. Ctrl 을 누른 상태로 MyCharacter 변수의 사본을 그래프 창에 드래그합니다.

  10. MyCharacter 핀을 드래그하고 Get Health 를 선택합니다.

  11. Health 핀을 Return Node 의 Return Value 에 연결합니다. 그러면 아래와 같은 모습일 것입니다.

  12. 같은 절차를 수행하여 Energy 옆의 프로그레스 바 도 조정합니다. 그러면 아래와 같은 모습일 것입니다.

  13. HUD 위젯 블루프린트를 컴파일(Compile) 및 저장(Save) 한 다음 닫습니다.

스크립트: Ammo 및 AmmoMax

Ammo 변수 설정 절차는 Health 및 Energy 변수 설정과 비슷합니다. 자세한 내용은 위의 스크립트: Health 및 Energy 섹션을 참조하세요.

  1. HUD_AmmoCount 위젯 블루프린트를 열고 그래프 탭으로 이동합니다.

  2. 앞서 설명한 대로 HUD_AmmoCount 위젯 블루프린트를 BP_FirstPersonCharacter 블루프린트에 연결하기 위한 스크립트를 생성합니다. 그러면 아래와 같은 모습일 것입니다.

  3. 툴바에서 컴파일(Compile) 을 클릭하여 스크립트를 컴파일합니다.

  4. 디자이너 로 돌아가서 Ammo 텍스트 다음에 있는 25 텍스트를 선택합니다. 디테일 패널에서 텍스트 에 대해 바인드 를 클릭하고 바인딩 생성 을 선택합니다.

  5. 열린 창에서 Ctrl 을 누른 상태로 MyCharacter 변수의 사본을 그래프 에 드래그합니다. MyCharacter 핀을 드래그하고 Get Ammo 를 선택합니다. Ammo 핀을 Return Node 의 Return Value 에 연결합니다. 그러면 아래와 같은 모습일 것입니다.

    Ammo 노드를 Return Node 에 연결하면 변환 노드 To Text 가 자동으로 생성됩니다.

  6. 다른 25 텍스트에 대해서도 위의 프로세스를 반복하여 'AmmoMax' 텍스트에 대한 바인딩을 생성합니다.

    최대 탄약이 상수이면 이 작업은 필요 없습니다. 하지만, 이 AmmoMax 변수 세팅을 통해 BP_FirstPersonCharacter 에서 스크립트를 생성하여 변경할 수 있습니다.

  7. 컴파일(Compile) 및 저장(Save) 을 클릭한 다음 재생(Play) 버튼을 클릭하여 에디터에서 재생합니다.

이 가이드의 도움으로, HUD 위젯을 통해 체력 바와 에너지 바를 표시하고 HUD_AmmoCount 위젯을 통해 탄약을 표시하도록 조정했습니다. 이러한 위젯은 모두 캐릭터 블루프린트의 현재 값을 표시합니다. 게임 진행 중 Space 를 누르면 캐릭터가 점프하면서 에너지가 감소하고, F 를 누르면 체력이 감소하며, 왼쪽 마우스 버튼 을 클릭하면 무기를 발사하면서 탄약이 감소합니다.

다음 섹션에서는 설정한 게임에 로드하는 데 사용할 수 있는 메인 메뉴를 생성하는 방법에 대한 정보를 확인할 수 있습니다. 또한, 언리얼 모션 그래픽 및 블루프린트 로 작업하는 방법에 대한 추가 정보도 있습니다.

3 - 추가 자료

이 가이드의 주제에 관련된 추가 자료는 다음과 같습니다.

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page