UI 위젯 에디터

위젯 섬네일을 더블클릭하면 에디터가 열립니다. 에디터 내에서 뷰포트로 드래그하여 커스텀 UI의 모든 부분을 추가할 수 있습니다. 다음 그림은 위젯 에디터를 자세히 보여줍니다.

클릭하면 이미지가 확대됩니다.

메뉴 및 탭 바

파일

• 최근 위젯 블루프린트 에셋(Recent Widget Blueprint Assets): 프로젝트에서 연 최근 위젯 에셋 블루프린트 목록을 표시합니다.

• 모두 저장(Save All): 디스크에 모든 에셋과 레벨을 저장합니다.

• 저장(Save): 위젯 블루프린트를 저장합니다.

• 다른 이름으로 저장...(Save As...): 위젯 블루프린트를 새로운 이름으로 저장합니다.

• 컴파일(Compile): 위젯 블루프린트를 컴파일합니다.

• 블루프린트 부모변경(Reparent Blueprint): 블루프린트의 부모를 변경합니다.

편집

• 실행 취소(Undo): 가장 최근의 변경사항을 되돌립니다.

• 다시 실행(Redo): 마지막 작업을 다시 실행합니다.

• 실행 취소 히스토리(Undo History): 전체 실행 취소 히스토리를 확인합니다.

에셋

• 콘텐츠 브라우저에서 찾기(Find in Content Browser): 가장 최근에 사용된 콘텐츠 브라우저에서 연결된 에셋을 선택합니다.

• 레퍼런스 뷰어(Reference Viewer): 선택된 에셋의 레퍼런스를 표시하는 레퍼런스 뷰어를 실행합니다.

창

• 레이아웃 불러오기(Load Layout): 디폴트(Default) 레이아웃 또는 UE4 레이아웃을 사용해 레이아웃을 불러올 수 있는 추가 옵션을 제공합니다.

• 레이아웃 저장(Save Layout): 선택한 레이아웃 뷰를 저장합니다.

• 레이아웃 제거(Remove Layout): 레이아웃 뷰를 제거합니다.

• 전체화면 활성화(Enable Fullscreen): 에디터를 전체화면으로 엽니다.

• 디테일(Details): 에디터 창 우측에 디테일 패널을 엽니다.

• 디자이너(Designer): 디자이너 탭을 엽니다.

• 컴파일러 결과(Compiler Results): 컴파일러 결과 탭을 열고 블루프린트 컴파일 중 생성된 오류나 경고를 표시합니다.

• 애니메이션(Animations): 애니메이션 탭을 엽니다.

• 계층구조(Hierarchy): 계층구조 탭을 엽니다.

• 팔레트(Palette): 팔레트 탭을 엽니다.

• 뷰 바인딩(View Bindings): 뷰 바인딩 탭을 엽니다.

• 뷰모델(Viewmodels): 뷰모델 탭을 엽니다.

• 시네마틱(Cinematics): 테이크 레코더(Take Recorder) 또는 테이크 브라우저(Takes Browser) 추가 옵션을 제공합니다.

• 콘텐츠 브라우저(Content Browser): 콘텐츠 브라우저 탭을 엽니다.

• 메시지 로그(Message Log): 메시지 로그 탭을 엽니다.

• 출력 로그(Output Log): 출력 로그 탭을 엽니다.

도움말

• 위젯 에디터 문서(Widget Editor Documentation): 에픽 디벨로퍼 커뮤니티(Epic Developer Community) 사이트의 위젯 에디터 문서를 엽니다.

• 디벨로퍼 커뮤니티(Dev Community): 에픽 디벨로퍼 커뮤니티 사이트를 엽니다.

• 학습 라이브러리(Learning Library): 학습 라이브러리를 엽니다.

• 포럼(Forums): 포트나이트 언리얼 에디터(UEFN) 포럼을 엽니다.

• 스니펫(Snippets): Verse 스니펫 사이트를 엽니다.

• 언리얼 에디터 정보(About Unreal Editor) 에디터 버전, 플랫폼, 저작권 관련 정보를 제공합니다.

• 크레딧(Credits): UEFN을 작업한 전현직 직원 명단입니다.

• UnrealEngine.com 방문(Visit UnrealEngine.com): 언리얼 엔진 사이트를 엽니다.

퀵 툴

퀵 액세스 버튼입니다.

• 저장(Save): 블루프린트를 저장합니다.

• 폴더(Folder): 콘텐츠 브라우저를 엽니다.

• 컴파일(Compile): 블루프린트를 컴파일합니다.

팔레트 패널

뷰포트로 드래그할 수 있는 커스텀 UI를 만들기 위한 에셋이 들어 있습니다. 검색창에서 에셋을 검색하세요.

범용

제작한 머티리얼 인스턴스는 팔레트 패널의 범용 UI(Common UI) 섹션에서 찾을 수 있습니다. 여기서 설정을 통해 커스터마이징할 수 있는 버튼(Button) 위젯과 함께 버튼 배경을 추가하세요.

• 이미지(Image): 이미지를 UI 배경으로 설정하거나 버튼에 사용할 수 있습니다.

• 네임드 슬롯(Named Slot): 사용자 위젯에 외부 슬롯 노출을 허용합니다. 다른 사람이 내 사용자 컨트롤을 재사용하는 경우, 이 네임드 슬롯에 원하는 대로 배치할 수 있습니다.

• UEFN 텍스트 블록(UEFN Text Block): 커스텀 UI 메시지를 만듭니다.

패널

• 캔버스 패널(Canvas Panel): 디자이너 친화적인 패널입니다. 위젯을 임의의 위치에 배치하고 고정할 수 있으며 캔버스의 다른 자손들과 z 순서로 배치할 수 있습니다. 이 위젯을 사용해 수동으로 커스터마이징하세요.

• 그리드 패널(Grid Panel): 표 안의 모든 열 너비가 균등하게 유지되는 표 형식 패널입니다. 자손 에셋을 허용합니다.

• 오버레이(Overlay): 위젯을 서로 쌓을 수 있게 하고, 각 레이어의 콘텐츠에 간단한 플로 레이아웃을 사용할 수 있게 합니다.

• 스케일 박스(Scale Box): 원하는 크기로 콘텐츠를 배치하고, 이 상자의 할당된 영역에 배치된 컨스트레인트에 맞게 스케일 조절할 수 있습니다. 영역이 채워지도록 배경 이미지의 스케일을 조절하되 다른 종횡비로 왜곡되지 않도록 해야 하거나 일부 텍스트를 영역에 자동으로 맞추어야 하는 경우 이 컨트롤이 필요합니다.

• 스크롤 박스(Scroll Box): 임의의 스크롤 가능 위젯 컬렉션입니다. 목록에 10~100개의 위젯을 표시하는 데 적합합니다. 시각화는 지원하지 않습니다.

• 크기 박스(Size Box): 크기 박스 는 오버레이 경계 내의 전체 디자인 크기를 재설정할 수 있도록 합니다.

• 스택 박스(Stack Box): 스택 박스는 자손 패널을 세로 또는 가로로 배치할 수 있는 레이아웃 패널입니다. 모든 UI 에셋이 스택 박스에 포함되어 있을 때, 크기 박스는 스택 박스의 자손으로 배치됩니다.

• 균등 그리드 패널(Uniform Grid Panel): 공간을 균등하게 분할하는 패널입니다.

사용자 생성

목록 상단에는 블루프린트 위젯이 부모 에셋으로 포함되어 있습니다.

• UEFN Button Loud: 큰 활자와 노란색 배경 색상이 있는 대형 버튼입니다.

• UEFN Button Quiet: 작은 활자와 흰색 배경 색상이 있는 소형 버튼입니다.

• UEFN Button Regular: 큰 활자와 흰색 배경 색상이 있는 일반적 크기의 버튼입니다.

• UEFN Slider: 위치 값과 크기 값을 취할 수 있는 슬라이더 박스입니다.

뷰포트

뷰포트는 블루프린트의 레이아웃을 구성하는 에셋을 표시합니다.

디테일 패널

디테일 패널에는 뷰포트에서 현재 선택한 항목의 정보가 표시됩니다. 이 패널은 위치, 크기, 이미지 등에 관한 정보를 제공합니다.

계층구조 탭

계층구조 탭에서 에셋 목록을 배열하는 방식은 각 UI 엘리먼트의 경계와 위치를 결정합니다. 계층구조 탭에 추가할 때에는 모든 에셋 경계 크기를 조절하고 정렬하는 데 디테일 패널을 사용해야 한다는 점을 기억하세요.

에셋을 레이어링하는 방법을 배울 때는 종이에 디자인 초안을 그리고, 디자인이 담길 캔버스 역할을 하도록 바깥에 박스 윤곽선을 만드는 게 더 쉬울 수도 있습니다.

위 영상은 그리드를 추가하고 정렬하는 짧은 데모입니다.

위 사진은 오버레이, 스택 박스, 크기 박스를 사용해 계층구조 탭에서 에셋을 배열하는 작업의 레퍼런스입니다.

오버레이

오버레이 는 에셋의 컨테이너입니다. 위 예시에 배치된 첫 번째 오버레이는 캔버스 역할을 합니다. 두 번째 오버레이는 자손으로 배치되어, 스택 박스 에서 조직된 에셋의 컨테이너 역할을 합니다.

또 하나의 오버레이 위젯은 크기 박스의 자손으로 설정되어, 그리드 내에 존재하는 크기 박스의 영향을 받는 모든 에셋의 컨테이너 역할을 합니다.

스택 박스

스택 박스는 자손 패널을 세로 또는 가로로 배치할 수 있는 레이아웃 패널입니다. 모든 UI 에셋이 스택 박스에 포함되어 있을 때, 크기 박스는 스택 박스의 자손으로 배치됩니다.

크기 박스

크기 박스 는 오버레이 경계 내의 전체 디자인 크기를 재설정할 수 있도록 합니다.

디자인의 전체적인 크기 박스 오버레이에는 세 가지 크기 박스 자손이 포함됩니다. 이 자손은 꽃 디자인, 꽃잎, 중심화, 버튼을 구성하는 그룹화된 조각을 포함합니다.

전체 디자인의 크기를 다시 설정하는 것은 물론, 디자인 내 조각들도 개별적으로 크기를 조절할 수 있습니다.

계층구조 레이아웃 내에서, 버튼과 UI 컨테이너 내부에는 UEFN 텍스트 박스 가 배치되어 UI와 버튼 위 텍스트를 표시합니다.

애니메이션

UI 에셋에 애니메이션을 만들어 보세요. +애니메이션(+Animation) 버튼을 사용하면 위젯 에디터의 시퀀서 패널에 새로운 애니메이션을 만들 수 있습니다.

하단 툴바

하단 툴바에는 에셋을 찾고, 바인딩을 확인하고, 로그를 검사하고, 변경사항을 저장하고 동기화할 수 있는 다양한 퀵 버튼이 있습니다.

• 콘텐츠 드로어(Content Drawer): 콘텐츠 드로어의 에셋을 엽니다.

• 애니메이션(Animations): 애니메이션 탭을 열어 UI 에셋에 새로운 애니메이션을 만들 수 있게 합니다.

• 뷰 바인딩(View Bindings): UI 버튼에 기능을 추가하도록 뷰모델 탭을 엽니다.

• 출력 로그(Output Log): 오류와 경고를 볼 수 있는 출력 로그를 엽니다.

• 명령(Command): 명령을 입력할 수 있는 명령 패널을 엽니다.

• 저장 상태(Save Status): 블루프린트의 저장 상태를 알립니다.

• 변경사항 체크인(Check-in Changes): 변경사항을 언리얼 리비전 컨트롤에 체크인합니다.

• 프로젝트 상태(Project Status): 프로젝트가 최신인지 아닌지를 알립니다.

• 리비전 컨트롤(Revision Control): 리비전 컨트롤 옵션을 엽니다.