리모트 컨트롤 프리셋에 노출된 파라미터와 함수는 리모트 컨트롤 웹 인터페이스(Remote Control Web Interface) 플러그인이 제공하는 컴패니언 웹 애플리케이션에서 위젯에 연결해 엔진을 원격으로 제어할 수 있습니다. 이 웹 애플리케이션에는 내장 UI 에디터가 포함되어 코드를 추가로 만들거나 포맷할 필요 없이 인터페이스를 커스터마이징할 수 있습니다.
웹 애플리케이션이므로 여러 클라이언트를 동시에 실행할 수 있습니다. 하나의 클라이언트에서 수정한 프로퍼티는 웹 서버를 통해 다른 모든 클라이언트로 전파됩니다. 라이브 환경의 협업형 워크플로를 만드는 데 유용한 기능입니다.
이 페이지에서는 컴패니언 리모트 컨트롤 웹 애플리케이션에서 노출된 프로퍼티와 함수를 위젯에 연결하고, 애플리케이션의 UI 빌더로 나만의 UI를 만드는 방법을 설명합니다.
전제조건
리모트 컨트롤 웹 인터페이스 는 추가 코드 없이도 엔진을 원격 제어할 수 있도록 NodeJS를 사용해 컴패니언 웹 앱에 게이지, 슬라이더, 색 선택 툴 등 디폴트 위젯을 제공합니다.
프로젝트에 웹 애플리케이션을 연결하려면 아래 단계를 따르세요.
-
사용 중인 장치에 NodeJS를 설치합니다.
-
최소 버전: 8.
-
최대 버전: 14.15.5.
-
-
언리얼 에디터에서 프로젝트를 엽니다.
-
에디터의 메인 메뉴에서 편집(Edit) > 플러그인(Plugins) 으로 이동한 다음 플러그인(Plugins) 창을 엽니다.
-
플러그인 창에서 Messaging 카테고리에 있는 리모트 컨트롤 웹 인터페이스(Remote Control Web Interface) 플러그인을 찾습니다. 활성화됨(Enabled) 체크박스를 선택합니다.
-
엔진을 재시작합니다.
-
웹 앱이 성공적으로 실행되었는지 확인합니다. 에디터 메인 메뉴에서 창(Window) > 개발자 툴(Developer Tools) > 출력 로그(Output Log) 를 선택하고 'remote control web'으로 필터링하면 아래와 비슷한 성공 로그가 보입니다. LogRemoteControlWebInterface:
[Success] Remote Control Web Interface is running - WebApp started, port: 7000
리모트 컨트롤 웹 애플리케이션 시작하기
리모트 컨트롤 패널의 프로퍼티와 함수를 웹 애플리케이션에 연결합니다. 웹 애플리케이션은 언리얼 세션에서 열린 모든 리모트 컨트롤 프리셋을 읽습니다. 공식 지원되는 브라우저는 Chrome, Firefox, Safari입니다.
웹 앱에서 프로퍼티 값을 변경하는 동안 에디터에서 변경된 내용을 확인하려면, 편집(Edit) > 에디터 개인설정(Editor Preferences) 으로 이동한 뒤 일반(General) 아래의 Performance 섹션에서 백그라운드에서 CPU를 덜 사용(Use Less CPU when in Background) 을 선택 해제합니다.
아래 단계를 따라 웹 애플리케이션을 실행하고 노출된 프로퍼티를 추가합니다.
-
엔진을 실행한 컴퓨터에서 웹 브라우저를 열고 URL 127.0.0.1:7000을 입력합니다. 리모트 컨트롤 API를 다른 기기에 노출하는 방법은 리모트 컨트롤 퀵스타트를 참조하세요.
리모트 컨트롤 웹 인터페이스(Remote Control Web Interface) 가 프로젝트에 사용할 포트를 변경할 수 있습니다. 에디터에서 메인 메뉴에서 편집(Edit) > 프로젝트 세팅(Project Settings)... 을 선택해 프로젝트 세팅(Project Settings) 창을 엽니다. 프로젝트 세팅(Project Settings) 창의 플러그인(Plugins) 섹션에서 리모트 컨트롤(Remote Control) 을 선택하면 세팅을 확인하고 디폴트 포트를 변경할 수 있습니다.
리모트 컨트롤 프리셋(Remote Control Preset) 에서 웹 애플리케이션을 실행할 수도 있습니다. 자세한 정보는 리모트 컨트롤 패널 레퍼런스를 참조하세요.
-
페이지가 로드되면 비어 있는 리모트 컨트롤 애플리케이션이 보입니다. 위젯을 추가할 수 있도록 웹 애플리케이션에서 컨트롤(Control) 을 토글해서 디자인(Design) 모드로 변경합니다.
-
프로퍼티(Properties) 탭을 선택합니다.
-
노출된 프로퍼티 하나를 오른쪽 패널로 드래그 앤 드롭합니다. 프로퍼티 패널에서 프로퍼티를 추가했을 때 아직 패널 위젯이 존재하지 않으면 패널 위젯 이 생성되고, 프로퍼티의 관련 위젯이 패널 위젯에 추가됩니다.
아래 예시에서는 패널 위젯이 생성되고 색 선택 툴(Color Picker) 위젯이 패널 위젯에 추가되었습니다. 색 선택 툴은 씬의 PostProcessVolume 의 Contrast 필드에 바인딩되어 있습니다.
-
컨트롤(Control) 모드로 변경합니다.
-
웹 앱에서 노출된 프로퍼티를 수정하고, 에디터에서 관련된 프로퍼티가 업데이트됐는지 확인합니다.
-
언리얼 에디터에서 해당하는 리모트 컨트롤 프리셋을 저장해 웹 애플리케이션에 변경사항을 저장합니다. 다음에 웹 애플리케이션을 열면 레이아웃은 마지막으로 에셋을 저장했을 때와 동일합니다.
프리셋
웹 애플리케이션에서는 여러 리모트 프리셋을 가질 수 있지만, 한 번에 하나의 리모트 컨트롤 프리셋만 열 수 있습니다. 디자인(Design) 모드에서 프리셋(Presets) 섹션으로 이동한 다음, 창 왼쪽에서 사용할 수 있는 리모트 프리셋을 확인한 뒤 보고 싶은 프리셋을 선택합니다. 현재 열린 리모트 컨트롤 프리셋의 이름은 창 우측 상단에 표시됩니다.
탭
웹 애플리케이션에서는 다수의 탭을 열 수 있습니다. 라이브 환경에서 사용자가 여러 뷰를 만드는 데 도움이 됩니다.
-
구별을 위해 탭의 라벨을 변경하고 아이콘 라이브러리에서 아이콘을 선택할 수 있습니다.
-
새 인터페이스의 시작 위치로 사용할 수 있도록 탭을 복제할 수도 있습니다.
이미 다른 언리얼 툴과 함께 작업할 수 있도록 구성된 고유의 탭 2개를 웹 애플리케이션에 추가할 수 있습니다. 레벨 스냅샷 및 시퀀서. 아래 섹션에서는 이 둘을 리모트 컨트롤로 통합하는 방법을 설명합니다.
레벨 스냅샷 통합
리모트 컨트롤 웹 애플리케이션에서는 원격으로 새 레벨 스냅샷을 찍거나 이전에 찍은 스냅샷으로 이동할 수 있습니다. 프로젝트의 레벨 스냅샷 사용에 관한 자세한 내용은 레벨 스냅샷을 참조하세요.
리모트 컨트롤 웹 애플리케이션에서 이 기능을 사용하려면 레벨 스냅샷(Level Snapshots) 플러그인이 활성화된 상태여야 합니다.
시퀀서 통합
리모트 컨트롤 웹 애플리케이션에서는 프로젝트의 모든 시퀀스를 확인하고, 이름으로 필터링하고, 시퀀스를 선택해서 볼 수 있습니다. 프로젝트에서 시퀀서를 사용하는 방법에 대한 자세한 내용은 시퀀서를 참조하세요. 시퀀스 오른쪽의 플레이 버튼을 클릭하면 현재 레벨의 시퀀스를 시작하거나 다시 재생할 수 있습니다. 시퀀스 재생까지 짧은 딜레이가 존재할 수 있습니다.
페이지의 시퀀스는 아웃라이너 목록에 표시되는 이름이 아니라 에셋 이름에 따라 나열됩니다. 월드에 배치된 후 에셋 이름을 수정했더라도 콘텐츠 브라우저에 표시된 에셋 이름으로 표시됩니다.
이 탭에는 프로젝트의 모든 시퀀스가 표시되지만, 현재 레벨에 존재하는 시퀀스만 플레이할 수 있습니다. 필터는 에셋 경로를 기반으로 하므로 현재는 레벨에 있는 시퀀스를 기준으로 필터링할 수 없습니다.
위젯
웹 애플리케이션에 포함된 위젯은 엔진의 인터랙션 가능한 데이터 형식을 나타내며, 웹 페이지를 위한 포매팅을 제공합니다.
아래 목록은 UI에 추가할 수 있는 모든 위젯입니다.
- 버튼
- 색 선택 툴
- 다이얼
- 드롭다운
- 조이스틱
- 라벨
- 목록
- 미니 색 선택 툴
- 패널
- 슬라이더
- 스페이서
- 탭
- 텍스트
- 토글
- 벡터
패널(Panel) 위젯은 다른 모든 위젯을 담을 때 사용되며, 다른 위젯보다 먼저 배치되어야 합니다. 목록(List) 위젯은 패널(Panel) 을 담을 때 사용되며, 같은 탭(Tab) 에 여러 UI를 제공합니다.
프로퍼티
리모트 컨트롤 웹 애플리케이션의 프로퍼티 탭에 나열된 프로퍼티와 그룹은 리모트 컨트롤 프리셋의 프로퍼티 및 그룹과 일치합니다.
웹 애플리케이션의 왼쪽 트레이에서 캔버스 영역으로 프로퍼티를 드래그 앤 드롭해서 UI의 프로퍼티에 이미 바인딩된 위젯을 추가합니다. 패널에 프로퍼티를 내려놓으면 자동으로 추가됩니다. 패널이 없으면 빈 패널이 생성되면서 추가됩니다.
위젯 및 프로퍼티 세팅
디자인(Design) 모드를 사용하는 동안 웹 페이지에서 위젯을 선택하면 창 왼쪽 하단에 세팅 패널이 표시됩니다. 위젯의 유형, 위젯이 나타내는 데이터에 따라 다른 필드가 표시됩니다.
모든 위젯 유형의 라벨을 바꿀 수 있습니다. 위젯이 프로퍼티에 바인딩되어 있다면, 연결된 프로퍼티를 바꿀 수 있습니다.
위젯 모드
벡터 등 일부 데이터 형식은 UI에서 여러 방식으로 표시될 수 있습니다.
위젯 모드를 변경하려면 아래 단계를 따르세요.
-
보고 싶은 위젯을 선택해서 세팅 패널을 엽니다.
-
위젯의 세팅 패널에서 사용하려는 모드를 선택합니다. 예를 들어, 벡터의 경우 조이스틱(Joystick) , 다이얼(Dial) , 슬라이더(Slider) 를 선택할 수 있습니다.
-
모드를 선택하면 프로퍼티 옆에 게임 컨트롤러 아이콘이 표시됩니다. 이 버튼을 눌러서 선택한 모드로 프로퍼티를 엽니다.
-
모드는 창 하단에 표시됩니다.
위젯 삭제
위젯은 하나씩 삭제할 수도 있고, 패널의 모든 위젯을 한 번에 삭제할 수도 있습니다. 위젯을 삭제하려면 해당 위젯의 세팅 패널을 열고 위젯 삭제(Delete Widget) 를 선택합니다. 패널의 모든 위젯을 삭제하려면 패널을 선택해 세팅 패널을 연 뒤 위젯 삭제(Delete Widget) 를 선택합니다.
