Unreal Engine 위젯 블루프린트(Widget Blueprint) 이해하기

 

Unreal Engine의 위젯 블루프린트(Widget Blueprint) 이해하기

이번 강의에서는 언리얼 엔진에서 위젯 블루프린트(Widget Blueprint)를 사용하여 메뉴를 만드는 방법에 대해 알아봅니다. 위젯 블루프린트는 게임 내 사용자 인터페이스(UI)를 구축하는 데 사용되며, 버튼, 텍스트, 이미지 등 다양한 요소를 포함할 수 있습니다. 완성된 메뉴는 "Tab to Edit(탭하여 수정하기)" 버튼을 누르면 나타나는 여러 탭들로 구성됩니다. 이 탭들은 각각 다른 재료(materials)와 아이콘을 보여줄 것입니다.

 

UI 요소 준비 및 임포트(Import)

먼저, 메뉴를 만들 때 필요한 재료와 아이콘을 준비합니다. 강의에서는 포토샵으로 만든 RAW-파일(Raw-files)과 PNG 형식의 이미지 파일들을 제공합니다. 이 파일들은 언리얼 엔진에서 활용할 수 있도록 **미리 추출(exported)**되었습니다.

언리얼 엔진에서 위젯 폴더를 새로 만들고, 그 안에 이미지 폴더를 만들어 아이콘들을 불러옵니다. 포토샵 파일을 직접 가져와서 작업할 수도 있지만, 여기서는 미리 준비된 PNG 파일들을 사용합니다.

 

위젯 블루프린트 생성 및 설정

1. 위젯 블루프린트 생성: 위젯 폴더 안에서 마우스 오른쪽 버튼을 클릭하고 사용자 인터페이스(User Interface) > **위젯 블루프린트(Widget Blueprint)**를 선택하여 새로운 위젯을 만듭니다. 이때 "사용자 위젯(User Widget)"을 선택하면 됩니다.

1. 화면 크기 설정: 위젯의 크기를 **1920x1080(FHD)**로 설정하여 Full HD 화면 비율에 맞춥니다.
2. 캔버스 패널(Canvas Panel): UI 요소를 자유롭게 배치하기 위해 캔버스 패널을 드래그하여 위젯에 추가합니다. 이 패널은 모든 UI 요소의 컨테이너(container) 역할을 합니다.
3. 참조용 배경 이미지: 디자인 참조용으로 배경 이미지를 추가하고, **투명도(tint)**를 낮춰 그 위에 다른 요소들을 배치할 수 있도록 합니다. 이 이미지를 "BG_trace(배경 추적)"라고 명명하여 나중에 참고하기 쉽게 만듭니다.
4. 앵커(Anchor): 앵커는 UI가 화면의 어느 위치에 고정될지 언리얼 엔진에 알려주는 매우 중요한 기능입니다. 화면의 크기가 변경될 때 UI 요소가 올바른 위치에 유지되도록 해줍니다. 강의에서는 중앙에 앵커를 설정하여 어떤 화면 크기에서도 중앙에 고정되도록 합니다.

 

UI 요소 배치 및 스타일링(Styling)

1. "Tab to Edit" 버튼

• • 이미지 추가: "Tab to Edit" 이미지를 추가하고 콘텐츠에 맞게 크기 조절(Size to Content) 기능을 사용하여 이미지 크기에 자동으로 맞춥니다. 또는 이미지 크기(145x63)를 직접 입력하여 크기를 조절할 수도 있습니다.
  • 앵커 설정: 이 버튼도 화면 중앙에 앵커를 설정합니다.

2. 재료 선택 버튼들

• • 버튼 추가: "Living Room(거실)", "Sitting Room(앉는 방)", "Kitchen(부엌)", "MetaHole"과 같은 재료 선택 버튼들을 추가합니다.
  • 스타일 설정: 각 버튼에는 노멀(Normal), 호버(Hovered), 눌림(Pressed) 세 가지 상태에 대한 스타일을 설정할 수 있습니다.
  • 노멀: 기본 상태.
  • 호버: 마우스를 올렸을 때. 이때 버튼의 색상을 약간 노란색으로 변경합니다.
  • 눌림: 버튼을 눌렀을 때. 이때 버튼의 색상을 주황색으로 변경하여 시각적 피드백을 제공합니다.
  • 크기 설정: 콘텐츠에 맞게 크기 조절(Size to Content) 기능을 사용하지 않고, 이미지 크기(401x63)를 직접 입력하여 크기를 수동으로 조절할 수 있게 만듭니다. 이는 나중에 크기나 비율을 자유롭게 변경하는 데 유용합니다.
  • 복사/붙여넣기: 첫 번째 버튼을 스타일링한 후, Ctrl+C와 Ctrl+V를 사용하여 복사하고, 이미지와 텍스트만 변경하여 다른 버튼들을 빠르게 만듭니다.

3. Living Room 패널

• • 새로운 캔버스 패널: 메인(Main) 캔버스 패널 안에 "Living"이라는 새로운 캔버스 패널을 만듭니다. 이 패널은 거실과 관련된 모든 UI 요소를 담는 컨테이너 역할을 합니다.
  • 배경 이미지 추가: 거실 메뉴의 배경 이미지를 추가합니다. 크기를 수동으로 설정(392x181)하여 나중에 수동으로 크기를 조절할 수 있도록 합니다.
  • 텍스트 추가: 텍스트 요소를 드래그하여 "Floor(바닥)", "Wall(벽)" 등의 글자를 입력합니다. 폰트, 크기, 색상 등을 조절할 수 있습니다.
  • 재료 아이콘: 미리 준비된 재료 아이콘들을 임포트하여 버튼으로 만듭니다. 각 아이콘의 노멀, 호버, 눌림 상태에 따라 이미지를 다르게 설정하여 시각적 효과를 줍니다. 크기는 36x36으로 설정합니다.

 

핵심 요점 및 팁

• 폴더 구조: 모든 재료와 아이콘을 언리얼 엔진의 폴더에 정리하는 것은 프로젝트를 깔끔하게 유지하는 데 중요합니다.
• 앵커의 중요성: 앵커는 다양한 화면 크기에서 UI가 올바르게 작동하도록 보장하는 핵심 기능입니다. 항상 UI 요소에 맞는 앵커를 설정하는 것을 잊지 마세요.
• 수동 크기 조절: 콘텐츠에 맞게 크기 조절(Size to Content) 기능을 사용하면 위젯 크기를 임의로 변경할 수 없습니다. 따라서 수동으로 크기를 설정하는 것이 더 유연합니다.
• 스타일링: 노멀, 호버, 눌림 상태를 활용하여 사용자가 UI와 상호작용할 때 시각적 피드백을 제공하면 사용성이 향상됩니다.