위젯 블루프린트의 기본 개념
언리얼 엔진의 UMG(Unreal Motion Graphics)는 강력하고 유연한 UI 시스템으로, 게임 내 사용자 인터페이스를 쉽게 제작할 수 있게 해줍니다.
위젯 블루프린트는 UMG의 핵심 요소로, 시각적 디자인과 로직을 결합하여 동적이고 상호작용적인 UI를 만들 수 있게 합니다.
UMG와 위젯 블루프린트 개요
- UMG : 언리얼 엔진의 UI 제작 도구 세트
- 위젯 블루프린트 : UI 요소와 그 동작을 정의하는 특별한 유형의 블루프린트
위젯 블루프린트의 특징
- 시각적 디자인과 프로그래밍 로직의 결합
- 재사용 가능한 UI 컴포넌트 생성 가능
- 반응형 레이아웃 지원
- 애니메이션 및 인터랙션 기능 내장
위젯 블루프린트 생성 방법
- 콘텐츠 브라우저에서 우클릭
- User Interface > Widget Blueprint 선택
- 위젯 블루프린트 이름 지정 (예 : WBP_MainMenu)
위젯 블루프린트 기본 구조
위젯 블루프린트는 두 가지 주요 뷰로 구성됩니다.
- 디자이너 뷰 : UI의 시각적 레이아웃을 구성
- 그래프 뷰 : UI의 동작과 로직을 정의
디자이너 뷰
- UI 요소 배치 및 속성 설정
- 레이아웃 도구 및 앵커 시스템 사용
그래프 뷰
- 이벤트 처리 및 UI 로직 구현
- 변수 관리 및 함수 정의
기본 UI 요소 추가 및 설정
- 텍스트 (Text)
- 팔레트에서 'Text' 드래그하여 캔버스에 배치
- Details 패널에서 텍스트 내용, 폰트, 색상 등 설정
- 이미지 (Image)
- 'Image' 위젯 추가
- Brush 설정에서 이미지 에셋 선택
- 버튼 (Button)
- 'Button' 위젯 추가
- 스타일 설정 및 자식 요소(텍스트 등) 추가
- 그래프에서 'OnClicked' 이벤트 처리
Button OnClicked Event
|
[Custom Logic] --> [Open New Level]레이아웃 설정
- 캔버스 패널 (Canvas Panel)
- 자유로운 위치 지정 가능
- Z-order 제어 용이
- 수직 박스 (Vertical Box)
- 요소들을 수직으로 정렬
- 수평 박스 (Horizontal Box)
- 요소들을 수평으로 정렬
- 그리드 패널 (Grid Panel)
- 행과 열로 요소 배치
앵커와 캔버스 패널 활용
앵커는 UI 요소의 위치와 크기를 화면 크기에 상대적으로 설정할 수 있게 해줍니다.
- 앵커 설정
- UI 요소 선택 후 앵커 아이콘 조정
- 전체 화면, 코너, 에지 등 다양한 프리셋 제공
- 캔버스 패널 활용
- 절대 위치 지정
- 다른 요소에 대한 상대적 위치 설정
반응형 디자인 기초
- Size Box 활용
- 최소/최대 너비, 높이 설정으로 유동적 크기 조절
- Scale Box 사용
- UI 요소의 비율 유지하며 크기 조절
- Safe Zone 고려
- 다양한 디바이스 화면에 대응하기 위한 안전 영역 설정
Designer View Hierarchy:
- Canvas Panel
- Safe Zone
- Vertical Box
- Header (Text)
- Content Area (Size Box)
- Footer (Horizontal Box)예제 : 간단한 메인 메뉴 UI 제작
- 위젯 블루프린트 생성 (WBP_MainMenu)
- 배경 이미지 추가 (전체 화면 앵커 설정)
- 수직 박스 추가 (중앙 정렬)
- 제목 텍스트 추가
- "시작하기", "설정", "종료" 버튼 추가
- 각 버튼에 대한 OnClicked 이벤트 처리
Graph View:
"시작하기" Button OnClicked
|
[Open Level] (FirstLevel)
"설정" Button OnClicked
|
[Create Widget] (WBP_SettingsMenu) --> [Add to Viewport]
"종료" Button OnClicked
|
[Quit Game]위젯 블루프린트 활용 팁
- 스타일 일관성 유지
- 공통 색상, 폰트, 버튼 스타일 등을 변수로 정의
- 재사용 가능한 컴포넌트 제작
- 자주 사용되는 UI 요소를 별도의 위젯 블루프린트로 제작
- 성능 최적화
- 복잡한 애니메이션이나 동적 요소는 필요할 때만 활성화
- 접근성 고려
- 텍스트 크기 조절, 컬러 대비 옵션 등 구현
- 디버깅 도구 활용
- UMG 디버거를 사용하여 실시간 UI 상태 확인
위젯 블루프린트는 언리얼 엔진에서 UI를 제작하는 강력하고 유연한 도구입니다. 시각적 디자인과 프로그래밍 로직을 효과적으로 결합하여 다양한 게임 UI를 쉽게 만들 수 있습니다. 기본 개념을 잘 이해하고 실습을 통해 익숙해지면, 복잡하고 인터랙티브한 UI도 효율적으로 제작할 수 있습니다. 지속적인 연습과 다양한 프로젝트 적용을 통해 UMG와 위젯 블루프린트의 활용 능력을 향상시키는 것이 중요합니다.