icon안동민 개발노트

위젯 블루프린트의 기본 개념


 언리얼 엔진의 UMG(Unreal Motion Graphics)는 강력하고 유연한 UI 시스템으로, 게임 내 사용자 인터페이스를 쉽게 제작할 수 있게 해줍니다.

 위젯 블루프린트는 UMG의 핵심 요소로, 시각적 디자인과 로직을 결합하여 동적이고 상호작용적인 UI를 만들 수 있게 합니다.

UMG와 위젯 블루프린트 개요

  • UMG : 언리얼 엔진의 UI 제작 도구 세트
  • 위젯 블루프린트 : UI 요소와 그 동작을 정의하는 특별한 유형의 블루프린트

위젯 블루프린트의 특징

  1. 시각적 디자인과 프로그래밍 로직의 결합
  2. 재사용 가능한 UI 컴포넌트 생성 가능
  3. 반응형 레이아웃 지원
  4. 애니메이션 및 인터랙션 기능 내장

위젯 블루프린트 생성 방법

  1. 콘텐츠 브라우저에서 우클릭
  2. User Interface > Widget Blueprint 선택
  3. 위젯 블루프린트 이름 지정 (예 : WBP_MainMenu)

위젯 블루프린트 기본 구조

 위젯 블루프린트는 두 가지 주요 뷰로 구성됩니다.

  1. 디자이너 뷰 : UI의 시각적 레이아웃을 구성
  2. 그래프 뷰 : UI의 동작과 로직을 정의

 디자이너 뷰

  • UI 요소 배치 및 속성 설정
  • 레이아웃 도구 및 앵커 시스템 사용

 그래프 뷰

  • 이벤트 처리 및 UI 로직 구현
  • 변수 관리 및 함수 정의

기본 UI 요소 추가 및 설정

 1. 텍스트 (Text)

  • 팔레트에서 'Text' 드래그하여 캔버스에 배치
  • Details 패널에서 텍스트 내용, 폰트, 색상 등 설정

 2. 이미지 (Image)

  • 'Image' 위젯 추가
  • Brush 설정에서 이미지 에셋 선택

 3. 버튼 (Button)

  • 'Button' 위젯 추가
  • 스타일 설정 및 자식 요소(텍스트 등) 추가
  • 그래프에서 'OnClicked' 이벤트 처리
Button OnClicked Event
    |
[Custom Logic] --> [Open New Level]

레이아웃 설정

 1. 캔버스 패널 (Canvas Panel)

  • 자유로운 위치 지정 가능
  • Z-order 제어 용이

 2. 수직 박스 (Vertical Box)

  • 요소들을 수직으로 정렬

 3. 수평 박스 (Horizontal Box)

  • 요소들을 수평으로 정렬

 4. 그리드 패널 (Grid Panel)

  • 행과 열로 요소 배치

앵커와 캔버스 패널 활용

 앵커는 UI 요소의 위치와 크기를 화면 크기에 상대적으로 설정할 수 있게 해줍니다.

 1. 앵커 설정

  • UI 요소 선택 후 앵커 아이콘 조정
  • 전체 화면, 코너, 에지 등 다양한 프리셋 제공

 2. 캔버스 패널 활용

  • 절대 위치 지정
  • 다른 요소에 대한 상대적 위치 설정

반응형 디자인 기초

 1. Size Box 활용

  • 최소/최대 너비, 높이 설정으로 유동적 크기 조절

 2. Scale Box 사용

  • UI 요소의 비율 유지하며 크기 조절

 3. Safe Zone 고려

  • 다양한 디바이스 화면에 대응하기 위한 안전 영역 설정
Designer View Hierarchy:
- Canvas Panel
  - Safe Zone
    - Vertical Box
      - Header (Text)
      - Content Area (Size Box)
      - Footer (Horizontal Box)

예제 : 간단한 메인 메뉴 UI 제작

  1. 위젯 블루프린트 생성 (WBP_MainMenu)
  2. 배경 이미지 추가 (전체 화면 앵커 설정)
  3. 수직 박스 추가 (중앙 정렬)
  4. 제목 텍스트 추가
  5. "시작하기", "설정", "종료" 버튼 추가
  6. 각 버튼에 대한 OnClicked 이벤트 처리
Graph View:
"시작하기" Button OnClicked
    |
[Open Level] (FirstLevel)
 
"설정" Button OnClicked
    |
[Create Widget] (WBP_SettingsMenu) --> [Add to Viewport]
 
"종료" Button OnClicked
    |
[Quit Game]

위젯 블루프린트 활용 팁

 1. 스타일 일관성 유지

  • 공통 색상, 폰트, 버튼 스타일 등을 변수로 정의

 2. 재사용 가능한 컴포넌트 제작

  • 자주 사용되는 UI 요소를 별도의 위젯 블루프린트로 제작

 3. 성능 최적화

  • 복잡한 애니메이션이나 동적 요소는 필요할 때만 활성화

 4. 접근성 고려

  • 텍스트 크기 조절, 컬러 대비 옵션 등 구현

 5. 디버깅 도구 활용

  • UMG 디버거를 사용하여 실시간 UI 상태 확인

 위젯 블루프린트는 언리얼 엔진에서 UI를 제작하는 강력하고 유연한 도구입니다.

 시각적 디자인과 프로그래밍 로직을 효과적으로 결합하여 다양한 게임 UI를 쉽게 만들 수 있습니다.

 기본 개념을 잘 이해하고 실습을 통해 익숙해지면 복잡하고 인터랙티브한 UI도 효율적으로 제작할 수 있습니다.