언리얼 에디터와 주요 패널 이해

Visual Studio가 코드를 쓰는 곳이라면, 언리얼 에디터(Unreal Editor)는 그 코드가 실제 동작으로 이어지는 장면을 구성하고 시험하는 곳입니다. 게임 월드를 꾸미고, 에셋을 배치하고, 플레이해 보는 일이 모두 에디터에서 이루어집니다. C++로 클래스를 만들어도 그 클래스로 만든 액터를 레벨에 놓고 값을 확인하는 일은 에디터에서 하므로, 에디터의 패널이 각각 무엇을 보여 주는지 알아야 코드를 고친 결과를 제대로 확인할 수 있습니다.

언리얼 에디터는 서로 다른 일을 하는 여러 패널(panel)로 이루어져 있습니다. 이 글에서는 가장 자주 쓰는 뷰포트, 아웃라이너, 디테일, 콘텐츠 브라우저와 툴바의 컴파일, 플레이 버튼을 차례로 살펴보고, 코드와 에셋, 배치한 인스턴스를 각각 어디서 확인하는지 정리합니다.

---

뷰포트: 월드를 들여다보는 창

에디터를 열면 가운데에 가장 크게 보이는 것이 뷰포트(Viewport)입니다. 뷰포트는 지금 만들고 있는 게임 월드를 실시간으로 보여 주는 창으로, 이 안에서 액터를 배치하고, 옮기고, 회전시키고, 크기를 바꾸는 시각적인 작업을 합니다.

뷰포트 안을 돌아다니는 방법은 몇 가지가 있습니다. 마우스 오른쪽 버튼을 누른 채 W, A, S, D 키를 누르면 게임처럼 자유롭게 이동할 수 있고, 마우스 휠로 앞뒤로 다가가거나 멀어질 수 있습니다. 기본 설정에서 Alt와 마우스 왼쪽 버튼은 중심점 주위를 도는 회전, Alt와 가운데 버튼은 화면을 평행 이동하는 팬(pan), Alt와 오른쪽 버튼은 중심점 쪽으로 다가가거나 멀어지는 데 씁니다. 처음에는 손에 익지 않지만 자주 쓰다 보면 금방 익숙해집니다.

뷰포트에서 액터를 선택하면 기즈모(gizmo)가 나타납니다. 기즈모는 액터를 직접 끌어서 조작하는 손잡이로, W 키를 누르면 이동, E 키는 회전, R 키는 스케일을 조절하는 기즈모로 바뀝니다.

---

아웃라이너: 월드에 있는 액터 목록

아웃라이너(Outliner)는 현재 월드에 있는 액터를 트리(tree) 구조로 보여 주는 패널입니다. 언리얼 엔진 4에서는 월드 아웃라이너(World Outliner)라고 불렀습니다. 파일 탐색기처럼 배치한 액터를 찾고 관리할 수 있는데, 검색어와 필터, 그리고 레벨이 불러와져 있는지에 따라 보이는 항목이 달라집니다.

아웃라이너에서 액터를 누르면 뷰포트에서도 그 액터가 선택되고, 반대로 뷰포트에서 선택하면 아웃라이너에서도 강조됩니다. 위쪽 검색창으로 원하는 액터를 이름으로 찾을 수도 있습니다.

액터는 다른 액터에 부착(attach)되어 부모와 자식 관계를 가질 수 있고, 아웃라이너는 이 계층을 트리로 보여 줍니다. 예를 들어 문 액터를 건물 액터에 붙이면 건물이 움직일 때 문도 함께 움직입니다. 이 부착 관계는 실행 중인 대상의 트랜스폼 계층일 뿐, C++ 클래스의 상속 관계와는 다릅니다.

각 액터 옆의 눈 모양 아이콘을 누르면 뷰포트에서 그 액터를 보이거나 숨길 수 있습니다. 편집하는 동안 특정 액터를 잠시 가릴 때 쓰는 기능이므로, 게임을 실행했을 때 액터를 숨기는 설정과는 구분합니다.

---

디테일: 선택한 대상의 속성

디테일(Details) 패널은 선택한 대상의 속성(property)과 설정을 보여 주고 편집하게 해 주는 패널로, 에디터에서 가장 많이 쓰는 패널 가운데 하나입니다. 다만 모든 C++ 변수가 여기에 나오는 것은 아닙니다. 디테일 패널에 표시되고 편집할 수 있는지는 2장에서 배울 속성 지정자와 지금 선택한 대상에 따라 달라집니다.

디테일 패널에서는 액터의 위치, 회전, 스케일 같은 트랜스폼 값은 물론, 메시, 머티리얼, 물리 설정 같은 여러 속성을 직접 바꿀 수 있습니다. 액터에 붙은 컴포넌트 목록도 이 패널 위쪽에 나오므로, 새 컴포넌트를 추가하거나 기존 컴포넌트를 골라 그 속성을 바꿀 수 있습니다. C++에서 컴포넌트를 만들어 붙이면 그 구조가 여기에 그대로 보입니다. 블루프린트와 관련된 이벤트를 추가하는 버튼도 디테일 패널에서 찾을 수 있습니다.

---

콘텐츠 브라우저: 프로젝트의 에셋

콘텐츠 브라우저(Content Browser)는 프로젝트에서 쓰는 에셋(asset)을 관리하는 패널입니다. 3D 모델(메시), 텍스처, 머티리얼, 사운드, 애니메이션, 블루프린트 에셋을 여기서 찾아 엽니다. 외부에서 만든 3D 모델 같은 파일을 프로젝트로 가져오거나, 에디터 안에서 새 머티리얼이나 블루프린트를 만들 수도 있습니다. 에셋은 폴더 구조로 분류하고, 검색과 필터로 필요한 것을 빠르게 찾습니다.

C++ 클래스도 콘텐츠 브라우저에 C++ Classes라는 가상 폴더로 보이게 할 수 있습니다. 하지만 이것은 컴파일된 클래스를 보여 주는 것일 뿐이고, 실제 .h, .cpp 파일은 Content 폴더의 에셋이 아니라 Source 폴더 아래에 있습니다.

새 C++ 클래스를 만들 때는 C++ 클래스 마법사(C++ Class Wizard)를 씁니다. Epic의 공식 안내에 나온 경로는 레벨 에디터의 Tools > New C++ Class...이며, 버전에 따라 콘텐츠 브라우저의 마우스 오른쪽 버튼 메뉴에서 시작하는 경로도 보일 수 있습니다. 마법사가 만든 .h와 .cpp는 Source 아래에 생기고, 컴파일이 끝난 클래스가 콘텐츠 브라우저의 가상 폴더에 나타납니다.

---

컴파일과 플레이 버튼

C++ 코드를 고친 뒤 에디터를 켜 둔 채 다시 빌드하는 기능을 라이브 코딩(Live Coding)이라고 합니다. 라이브 코딩은 새로 설치한 엔진에서 기본으로 켜져 있으며, 에디터나 IDE에서 Ctrl+Alt+F11을 누르거나 에디터의 컴파일 버튼으로 실행합니다. 버튼의 위치와 모양은 엔진 버전과 설정에 따라 다르고, 빌드가 진행되면 에디터 오른쪽 아래에 알림이 나타납니다.

라이브 코딩은 편리하지만 모든 변경을 반영하지는 않습니다. 예를 들어 .cpp 파일의 생성자에서 정한 값은 이미 만들어진 객체에는 반영되지 않습니다. 그래서 빌드가 성공했다고 기존 인스턴스의 값이 모두 바뀌었다고 판단하면 안 됩니다. 클래스 구조나 생성자 기본값을 바꿨다면, 에디터를 닫고 전체 빌드를 한 뒤 다시 여는 편이 안전합니다.

플레이(Play) 버튼은 현재 레벨을 에디터 안에서 실행합니다. 구현한 게임 로직과 배치한 액터가 어떻게 동작하는지 직접 시험해 보는 버튼이며, 단축키 Alt+P로도 실행할 수 있습니다. 이 단축키는 앞으로 자주 쓰게 됩니다.

---

레이아웃 바꾸기

에디터의 패널은 끌어다 놓아 위치를 바꾸거나, 다른 패널 옆에 붙이는 도킹(docking)을 하거나, 별도의 창으로 떼어 낼 수 있습니다. 작업하는 방식에 맞게 배치를 바꾸면 자주 쓰는 패널을 가까이 둘 수 있습니다. 실수로 닫은 패널은 상단의 창(Window) 메뉴에서 다시 열 수 있고, 바꾼 배치를 레이아웃으로 저장해 둘 수도 있습니다.

---

코드를 고친 결과는 어디서 확인할까

위 그림은 코드 파일을 여는 일, 블루프린트 에셋을 편집하는 일, 현재 월드의 액터 인스턴스를 선택하는 일이 서로 다른 작업이라는 점을 보여 줍니다. 왼쪽부터 보면, Source의 .h와 .cpp는 IDE에서 편집하고 Editor 타깃 빌드를 거쳐 에디터의 C++ 클래스에 반영됩니다. 블루프린트 클래스 에셋은 그 C++ 클래스를 부모 타입으로 상속하며, 콘텐츠 브라우저에서 열어 클래스 기본값과 그래프를 편집합니다. 같은 블루프린트 클래스를 골라 인스턴스 A와 B를 따로 배치할 수 있고, 두 인스턴스는 아웃라이너와 디테일 패널에서 각자의 배치값을 가집니다.

그림의 화살표는 빌드, 상속, 배치라는 서로 다른 관계를 나타냅니다. 콘텐츠 브라우저의 C++ 가상 폴더가 코드 파일을 Content의 에셋으로 바꾸지 않는다는 점, 그리고 클래스 기본값과 인스턴스의 개별 편집값이 다르다는 점도 그림에 함께 적혀 있습니다. 그림 아래쪽은 같은 시험 대상의 결과를 이어서 보는 순서로, 선택한 인스턴스의 디테일 값을 확인하고 Play에서 동작과 Output Log를 확인합니다.

이 순서를 실제로 따라가면 다음과 같습니다. 먼저 콘텐츠 브라우저에서 클래스와 에셋의 경로를 확인하고, 아웃라이너에서 시험할 인스턴스를 선택합니다. 그다음 디테일 패널에 보이는 값이 클래스의 기본값인지, 배치한 인스턴스에서 따로 바꾼 값인지를 구분합니다. 마지막으로 Play에서 동작을 확인하고, Output Log의 메시지가 같은 시험 대상에서 나온 것인지 확인합니다. 그림 아래의 설명처럼 기본값, 배치값, 실행 중의 값은 서로 다르며, 라이브 코딩이 성공했다고 모든 기존 인스턴스가 같은 값으로 갱신되었다고 판단하지 않습니다.

간단한 예로 확인해 봅시다. 현재 레벨에 기본 큐브(Cube) 두 개를 배치하고 아웃라이너에서 이름을 Cube_A, Cube_B로 바꿔 구별합니다. 각 액터를 하나씩 선택해 디테일 패널의 트랜스폼을 보고, 기본 길이 단위가 cm인 프로젝트에서 A의 Location X를 0, B의 Location X를 100으로 둡니다. 그러면 두 액터의 원점은 X축으로 100cm, 즉 1m 떨어집니다. 다른 축과 스케일은 같게 두고 레벨을 저장한 뒤, 뷰포트에서 보이는 위치와 디테일 패널의 Location 숫자를 함께 확인합니다.

---

정리

• 뷰포트는 월드를 보여 주는 창이며, 마우스 오른쪽 버튼과 W, A, S, D로 이동하고 W, E, R로 기즈모를 이동, 회전, 스케일로 바꿉니다.
• 아웃라이너는 현재 월드의 액터를 트리로 보여 주고, 부착 계층을 나타냅니다. 부착은 트랜스폼 계층이며 클래스 상속과 다릅니다.
• 디테일 패널은 선택한 대상의 속성을 보여 주며, 어떤 속성이 보이고 편집되는지는 속성 지정자와 선택 대상에 따라 다릅니다.
• 콘텐츠 브라우저는 에셋을 관리합니다. C++ 클래스는 가상 폴더로 보일 뿐이고, 코드 파일은 Source 아래에 있습니다. 새 C++ 클래스는 Tools > New C++ Class...로 만듭니다.
• 라이브 코딩은 기본으로 켜져 있고 Ctrl+Alt+F11로 실행하지만, 생성자에서 정한 값은 기존 인스턴스에 반영되지 않습니다. Play는 Alt+P로도 실행합니다.
• 코드를 고친 결과는 시험할 인스턴스를 고르고, 기본값과 배치값을 구분하고, Play와 Output Log를 같은 대상에서 확인하는 순서로 봅니다.

---

연습 문제

1. B만 옮기면

앞의 예에서 Cube_B만 선택해 Location X를 200으로 바꿨습니다. 두 큐브는 서로 부착되어 있지 않습니다. A의 위치도 함께 바뀔까요?

해설 보기

바뀌지 않습니다. A는 0cm, B는 200cm에 있게 됩니다. 두 큐브는 같은 기본 큐브로 만들었어도 서로 다른 인스턴스이므로, 디테일 패널에서 B의 값을 바꾸면 B만 바뀝니다.

2. 부착과 상속, 기본값과 배치값

두 큐브를 아웃라이너에서 부착 관계로 묶으면 같은 C++ 클래스가 된다는 뜻일까요? 또 나중에 블루프린트 클래스 에셋을 열어 기본값을 고치는 일과, 배치한 인스턴스를 선택해 디테일 패널에서 값을 고치는 일은 어떻게 다를까요?

해설 보기

부착은 실행 중인 대상의 트랜스폼 계층을 만드는 것일 뿐, C++ 클래스의 상속을 바꾸지 않습니다. 부착한 뒤에도 두 큐브의 클래스는 그대로입니다.

블루프린트 에셋을 여는 것은 클래스의 기본값을 편집하는 일이고, 현재 월드에서 선택한 인스턴스의 값을 고치는 것은 그 인스턴스 하나만 편집하는 일입니다. 두 작업의 대상이 다르므로, 기본값을 고쳤다고 이미 배치한 인스턴스에서 따로 바꾼 값까지 자동으로 같아진다고 가정하면 안 됩니다.

C++ 클래스 마법사의 경로는 Epic의 C++ Class Wizard 문서에서, 라이브 코딩의 동작과 제한은 Live Coding 문서에서 확인할 수 있습니다.

이것으로 1장을 마칩니다. 1장에서는 언리얼 엔진의 특징과 액터, 컴포넌트, 월드, 게임 모드, 컨트롤러, 폰의 관계를 살펴보고, 엔진과 Visual Studio를 설치해 첫 C++ 프로젝트를 만들어 빌드한 뒤, 에디터의 주요 패널에서 코드와 에셋, 인스턴스를 확인하는 방법을 익혔습니다. 다음 장의 C++ 클래스와 언리얼 리플렉션 시스템부터는 언리얼 C++의 리플렉션 매크로와 UObject, AActor의 차이, 블루프린트 확장, 게임 루프와 주요 클래스 구조를 다룹니다.