언리얼 엔진 5 문서가 에픽 디벨로퍼 커뮤니티로 이전되었습니다

리모트 컨트롤 프리셋 및 웹 애플리케이션

UI 파라미터 및 함수를 리모트 컨트롤 프리셋 안으로 수집, 정리하고 웹 애플리케이션의 위젯에 연결합니다.

Choose your operating system:

Windows

macOS

Linux

리모트 컨트롤 프리셋(Remote Control Preset) 으로 단일 패널에서 모든 UI 파라미터 혹은 함수를 수집, 정리하고 리모트 컨트롤 API 에 노출합니다. 해당 파라미터 및 변수를 리모트 컨트롤 웹 인터페이스(Remote Control Web Interface) 플러그인에서 제공하는 컴패니언 웹 애플리케이션의 위젯에 연결해 엔진을 원격으로 조종할 수 있습니다. 이 웹 애플리케이션에는 추가 코드 생성 및 포맷 없이도 인터페이스를 커스터마이징 할 수 있도록 자체 UI 에디터가 포함됩니다.

웹 애플리케이션이므로 여러 클라이언트를 동시에 실행할 수 있습니다. 한 클라이언트에서 프로퍼티를 수정하면 웹 서버를 통해 다른 클라이언트에도 전부 적용됩니다. 리얼타임 환경에서 협업형 워크플로를 구축할 때도 유용합니다.

이 페이지에서는 언리얼 에디터의 프로퍼티 및 함수를 리모트 컨트롤 API에 노출하는 법과 컴패니언 리모트 컨트롤 웹 애플리케이션의 위젯에 연결하는 법을 다룹니다.

리모트 컨트롤 웹 애플리케이션에서 다이얼 위젯을 돌려 하늘의 회전 값을 수정하는 GIF

필요 플러그인

리모트 컨트롤 프리셋 및 리모트 컨트롤 웹 애플리케이션을 시작하려면 프로젝트에 다음 플러그인을 추가하세요.

리모트 컨트롤 API

리모트 컨트롤 API(Remote Control API) 플러그인은 데이터 및 **리모트 컨트롤 프리셋**에 대한 WebSocket 연결을 주관하는 웹 서버를 제공합니다.

프로젝트에서 플러그인을 활성화하려면 아래 단계를 따르세요.

  1. 언리얼 에디터에서 프로젝트를 실행하세요.

  2. 에디터의 메인 메뉴에서 편집(Edit) > 플러그인(Plugins) 을 선택해 플러그인 창을 여세요.

  3. 플러그인 창에서 메시징(Messaging) 카테고리에 있는 리모트 컨트롤 API 플러그인을 찾으세요. 활성화됨(Enabled) 체크박스를 클릭하세요.

    image alt text

  4. 엔진을 재시작하세요.

리모트 컨트롤 웹 인터페이스

리모트 컨트롤 웹 인터페이스(Remote Control Web Interface) 는 NodeJS를 사용하여 컴패니언 웹 애플리케이션에 추가 코드 없이 원격으로 엔진을 조작할 수 있는 게이지, 슬라이더, 색 선택 툴 등 기본 위젯을 제공합니다.

프로젝트에 웹 애플리케이션을 연결하려면 아래 단계를 따르세요.

  1. 사용 중인 장치에 버전 8 이상의 NodeJS 설치 작업을 수행하세요.

  2. 언리얼 에디터에서 프로젝트를 실행하세요.

  3. 에디터의 메인 메뉴에서 편집 > 플러그인**을 선택해 플러그인** 창을 여세요.

  4. 플러그인 창에서 메시징 카테고리에 있는 리모트 컨트롤 웹 인터페이스 플러그인을 찾으세요. 활성화됨 체크박스를 클릭하세요.

    image alt text

  5. 엔진을 재시작하세요.

  6. 웹 애플리케이션이 실행되었는지 확인하세요. 에디터의 메인 메뉴에서 창(Window) > 개발자 툴(Developer Tools) > 출력 로그)(Output Log) 를 선택한 뒤, "remote control web" 필터를 적용해 다음과 비슷한 성공 로그가 출력되는지 알아보세요.

    LogRemoteControlWebInterface: [성공] 리모트 컨트롤 웹 인터페이스 실행 중 - 웹앱 시작됨, 포트: 7000

    image alt text

프로퍼티를 리모트 컨트롤 패널 및 리모트 컨트롤 API에 노출하기

언리얼 에디터(Unreal Editor) 의 리모트 컨트롤 패널(Remote Control Panel) 에서 레벨의 다양한 오브젝트에 대한 프로퍼티를 수집하여 손쉽게 이용할 수 있습니다. 함수를 패널에 추가하고, 추가한 패널에서 호출할 수도 있습니다. 리모트 컨트롤 패널 에 노출된 프로퍼티 및 함수는 리모트 컨트롤 API 에도 노출됩니다. 작업자가 리얼타임 환경에서 조작해야 하는 항목을 쉽게 정리할 수 있습니다.

리모트 컨트롤 프리셋 을 추가하고 리모트 컨트롤 패널 을 열려면 아래 단계를 따르세요.

  1. 콘텐츠 브라우저(Content Browser) 에서 우클릭한 뒤, 기타(Miscellaneous) 항목을 찾아보세요. 리모트 컨트롤 프리셋 을 선택하세요.

    image alt text image alt text

  2. 리모트 컨트롤 프리셋 에셋(Remote Control Preset Asset) 을 더블 클릭해 리모트 컨트롤 패널 을 여세요.

    image alt text

  3. 편집 모드 체크박스를 클릭하세요.

    image alt text

  4. 에셋(Assets) 의 디테일 패널 을 보면 감은 눈 혹은 뜬 눈 아이콘이 있습니다.

    image alt text

  5. 눈 아이콘은 프로퍼티의 리모트 컨트롤 패널 추가 여부를 결정합니다.

    • 뜬 눈 아이콘은 프로퍼티가 리모트 컨트롤 패널에 추가되었다 는 뜻입니다.

    • 감은 눈 아이콘은 프로퍼티가 리모트 컨트롤 패널에 추가되지 않았다 는 뜻입니다.

    • 눈 아이콘을 클릭하면 프로퍼티가 리모트 컨트롤 패널에 추가되거나 제거됩니다.

  6. 프로퍼티가 리모트 컨트롤 패널에 있으면 디테일 패널과 인터페이스가 같습니다.

    image alt text image alt text

    리모트 컨트롤 패널(왼쪽)과 디테일 패널(오른쪽)의 Light Color 프로퍼티(RGB 값 사용).

  7. 리모트 컨트롤 프리셋 을 우클릭한 뒤, 저장 을 눌러 변경사항을 유지하세요.

리모트 컨트롤 패널 사용하기

image alt text

리모트 컨트롤 패널을 정리하고 엘리먼트의 이름을 변경해 리모트 컨트롤 API의 레퍼런스를 쉽게 구분할 수 있습니다. 다음 표는 프로젝트의 용도에 맞게 패널을 커스터마이징할 수 있는 UI를 다루고 있습니다.

액션

UI 엘리먼트

설명

그룹 생성

create_group_panel.png

다수의 그룹을 생성해 비슷한 프로퍼티와 함수끼리 정리합니다.

함수 추가

add_function_panel.png

단순한 프로퍼티가 아닌 기능을 표시할 패널에 함수를 추가합니다. 함수의 파라미터를 커스터마이징하고 패널에서 실행할 수 있습니다.

프로퍼티 또는 함수 제거

remove_property_panel.png

프로퍼티 혹은 함수를 패널에서 제거해 리모트 컨트롤 API에서 보이지 않도록 합니다.

프로퍼티 초기화

reset_property_value.png

프로퍼티의 값을 기본값으로 초기화합니다.

엘리먼트 이동

move_panel_element.png

패널의 엘리먼트를 끌어다 옮겨 프로퍼티, 함수, 그룹을 변경합니다.

엘리먼트 이름 변경

rename_panel_element.png

프로퍼티, 함수 혹은 그룹의 이름을 변경해 레퍼런스를 명확히 하고 함수 호출을 간단하게 합니다.

리모트 컨트롤 웹 애플리케이션 사용하기

리모트 컨트롤 패널의 프로퍼티 및 함수를 웹 애플리케이션에 연결하세요. 웹 애플리케이션은 언리얼 세션에서 실행한 리모트 컨트롤 프리셋을 읽습니다. Chrome, Firefox, Safari 브라우저를 공식 지원합니다.

웹 애플리케이션에서 프로퍼티 값을 변경하는 동안 에디터에서 변경된 내용을 보려면 편집 > 에디터 개인설정(Editor Preferences) 을 실행한 뒤, 일반(General) 의 퍼포먼스(Performance) 에서 백그라운드일 때 CPU를 덜 사용(Use Less CPU when in Background) 을 비활성화하세요. image alt text

웹 애플리케이션을 실행하고 인터페이스를 커스터마이징하려면 아래 단계를 따르세요.

  1. 엔진을 실행하는 동일한 장치에서 웹 브라우저를 열고 URL 127.0.0.1:7000 에 접속하세요. 리모트 컨트롤 API를 다른 장치에 표시하는 자세한 방법은 리모트 컨트롤 퀵스타트 를 참조하세요.

    image alt text

    프로젝트에 사용할 리모트 컨트롤 웹 인터페이스 를 변경할 수 있습니다. 에디터의 메인 메뉴에서 편집 > 프로젝트 세팅… 을 선택해 프로젝트 세팅 창을 실행하세요. 프로젝트 세팅 창에서 플러그인 항목의 리모트 컨트롤 웹 인터페이스 를 선택해 해당 설정을 살펴보세요. 기본 포트를 변경할 수 있습니다.

    image alt text

  2. 페이지를 불러올 때 공백 상태인 리모트 컨트롤 애플리케이션을 살펴보세요. 웹 애플리케이션에서 탭(Tab) 을 생성해 위젯 추가를 시작하세요.

    image alt text

  3. 웹 애플리케이션은 그리드 기반입니다. 선호하는 화면 레이아웃을 구성할 수 있습니다. 오른쪽 화면에서 패널 레이아웃을 선택할 수 있습니다. 패널마다 여러 개의 위젯을 포함합니다.

    네 개의 웹 애플리케이션 레이아웃을 이용할 수 있습니다.

  4. 패널 내부의 + 버튼을 클릭해 위젯 설정(Set Widget) 창을 여세요.

    image alt text

  5. 위젯 설정 창에는 프리셋에 표시된 사용 가능 프로퍼티 목록이 표시됩니다.

    image alt text

  6. 프로퍼티를 선택하세요.

    • 창 오른쪽의 사용 가능 위젯(Available Widgets) 항목에는 웹 애플리케이션 UI에 속한 프로퍼티 구현에 사용되는 모든 위젯이 표시됩니다.

    • 사용 가능 위젯 밑에는 최소값(Minimum) , 최대값(Maximum) 등 위젯을 추가로 커스터마이징할 수 있는 위젯 옵션(Widget Options) 항목이 있습니다.

    image alt text

    웹 애플리케이션에서 이용할 수 있는 일부 위젯의 예시입니다.

  7. 여러 위젯을 한 패널에 모아 웹 애플리케이션 UI를 단순화할 수 있습니다. 색 선택 툴처럼 동일한 위젯 유형을 사용하는 여러 프로퍼티가 있을 경우, 동일한 위젯 인터페이스를 사용하되 위젯 목록의 프로퍼티를 선택해 변경사항이 적용될 대상을 변경할 수 있습니다.

    image alt text

  8. 웹 애플리케이션에서 여러 개의 탭을 이용할 수 있습니다. 리얼타임 환경에서 작업자를 위한 다양한 뷰를 만드는 데 도움이 됩니다.

    • 탭의 라벨을 변경하고 아이콘 라이브러리에서 아이콘을 선택해 탭을 구별할 수 있습니다.

    • 탭을 새 인터페이스의 시작 지점으로 사용하기 위해 복사할 수도 있습니다.

    image alt text

  9. 언리얼 에디터**에서 해당되는 리모트 컨트롤 프리셋**을 저장해 변경사항을 웹 애플리케이션에 저장하세요. 나중에 웹 애플리케이션을 다시 실행하면, 레이아웃이 에셋을 마지막으로 저장할 때와 동일하게 설정됩니다.

  10. 플레이(Play) 를 눌러 웹 애플리케이션의 편집 모드를 종료하세요.

    image alt text

웹 애플리케이션에서 동시에 여러 리모트 프리셋을 사용할 수 있지만, 리모트 컨트롤 프리셋 은 한 번에 하나만 열 수 있습니다. 창의 왼쪽에 사용 가능한 리모트 프리셋이 나타납니다.

image alt text

언리얼 엔진 문서의 미래를 함께 만들어주세요! 더 나은 서비스를 제공할 수 있도록 문서 사용에 대한 피드백을 주세요.
설문조사에 참여해 주세요
건너뛰기