[UI/UX] 건축 시각화 인터랙티브 UI 제작 - 2

안녕하세요. 오늘은 저번 강의를 이어서 인터랙티브 UI 제작을 설명하겠습니다.

우선 저번에 만든 프로젝트를 실행하면 영상이 실행됩니다. 원활한 진행을 위해 영상을 삭제하겠습니다.

아웃라이너 창에서 동영상을 재생하는 시퀀스 2개를 찾아 삭제합니다. 선택 후 Delete키를 누릅니다.

삭제 후 게임을 실행하면 더이상 동영상이 재생되지 않습니다.

(추후 언리얼 동영상 플레이 강의도 다룰 예정입니다.)

시퀀스 액터를 모두 삭제하세요.

 

다음으로 에디터를 실행했을 때 내가 만든 UI를 화면에 표시해 보겠습니다.

우선, UI를 제작하겠습니다.

UI 폴더를 만든 후 우클릭 > 유저인터페이스 > 위젯 블루프린트 클릭합니다.

 

사용자 위젯 클릭합니다.

클릭 후 이름을 WBP_Main 으로 설정합니다. 

 

설정 후 해당 애셋을 더블클릭해 실행하면 아래와 같은 화면이 생성됩니다.

 

이 화면에서 UI를 디자인 할 수 있습니다. 

버튼을 만들어 화면 중앙에 배치 후 클릭하면 Hello를 출력하는 UI를 만들어보겠습니다.

우선, 캔버스를 디자인 창에 적용하겠습니다.

왼쪽 팔레트 창에서 캔버스를 검색 후 디자인 창(가장 큰 화면 창)에 드래그 앤 드롭 하겠습니다.

드래그 앤 드롭 하면 오른쪽 그림과 같이 초록색 박스가 생성

그리고 버튼을 생성하겠습니다.

팔레트 창에서 버튼을 검색 후 디자인 창에 드래그 앤 드롭 하겠습니다.

 

만들어진 버튼을 중앙에 배치하겠습니다.

버튼을 클릭 후 오른쪽 디테일 창에서 설정할 수 있습니다.

 

슬롯 > 앵커 를 클릭한 후 기준점을 설정합니다. 저희는 화면 가운데 배치를 할 예정이니 아래 그림에서 알려주는 모양을 클릭합니다.

 

그리고 X 위치, Y 위치, X 크기, Y크기, 정렬을 아래 그림과 같이 변경합니다.

성공하시면 앵커 아이콘이 버튼 중앙에 위치한 것을 확인 할 수 있습니다.

(원하시는 위치와 크기가 있으면 마음대로 설정하시면 됩니다.)

 

다음시간에는 만든 UI를 화면에 배치하는 방법과 클릭했을 때 Hello가 출력되도록 만들어보겠습니다.