XR 플밍 - 8. UnityEngine3D 입문 - UI, 씬, 유니티 디버거 (4/22)

이형원·2025년 4월 22일

XR플밍

목록 보기

51/215

1. UI

UI는 User Interface의 줄임말로, 게임에서 볼 수 있는 상태창, 버튼 등의 유저에게 보이는 인터페이스를 말한다.
후에 응용 부분으로 다시 배워보겠지만, 기본적인 내용애 대해 알아보고자 한다.

1.1 UI에 대해 알아보자.

우선 하이어라키 창에서 우클릭하고 UI에 들어가보자. 여기에서 생성할 버튼은 Button - TextMeshPro 이다.

Legacy의 위쪽에 있는 기능들이 나름 최신 버전의 기능들이고, Legacy를 확인하면 안에도 똑같은 기능이 들어있는 것을 확인할 수 있다. Legacy에 있는 기능들은 구버전의 기능들로, 일부 구버전의 게임에서 사용할 수도 있다.
칸이 나뉘어져 있는 것을 확인할 수 있는데, 상단의 4가지(Image~)는 상호작용이 안 되는 UI이고 두 번째 칸의 요소들이 상호작용이 가능한 UI들이다.

1.2 캔버스

이와 같이 버튼을 생성하면 Button과 같이 Canvas, EventSystem이 같이 생기는 것을 확인할 수 있다.

Canvas는 UI를 배치하는 도화지이며 이벤트 시스템은 버튼과 같은 UI를 작동시키는 시스템이다.
UI 작업을 용이하기 하기 위해, 씬 창의 2D 모드를 켜고 Canavas를 더블클릭하여 캔버스 창으로 띄워주자.

캔버스의 인스펙터를 살펴보자. 여기서 주목해야 할 부분은 Render Mode와 UI Scale Mode이다.

모드에 대한 설명은 다음과 같이 참고하도록 한다.

캔버스 모드

Screen Space - Overlay - 3D 게임 제작 시 주로 사용

Screen Space - Camera - 2d 게임에서 주로 씀

WorldSpace - 화면에 고정적인 UI에서 많이 씀 - hp바 같은 거

UI Scale Mode

constant pixel size - 픽셀 사이즈만큼의 UI 크기를 가짐 (해상도가 달라지면 위치가 달라지고 크기가 고정-절대사이즈)

scale with screen size - 화면의 비율만큼의 UI 크기를 가짐 (해상도가 달라져도 위치와 크기를 유지함-상대사이즈)

constant physical size - cm 사이즈만큼의 UI 크기를 가짐 (해상도가 달라지면 위치가 달라지고 크기가 고정-절대사이즈)

1.3 UI의 RectTransform과 앵커

UI도 Transform이 있는데, GameObject의 Transform과는 약간 다른, RectTransform(Rectangular Transform)을 사용한다.

캔버스를 더블 클릭해서 보면 이와 같이 게임 씬의 위치보다 한참 바깥의 넓은 공간에 UI들이 배치되는 것을 확인할 수 있다. 여기서 Score의 RectTransform을 살펴보자.

RectTransform의 특이점은, 좌표가 앵커를 기준으로 계산된다는 점이다.

앵커 : UI의 크기 및 위치의 기준점이 되는 지점

UI의 경우 화면 크기가 달라지거나, 가로 및 세로 화면으로 전환될 때 UI 또한 위치가 어그러지지 않고 변할 수 있게 되어야 한다. 여기서 UI는 앵커라는 위치 기준점을 만들어 크기나 위치가 화면 크기 변동에도 고정될 수 있도록 만든다.

1.4 버튼

버튼을 생성하면 인스펙터에서 해당 정보를 확인할 수 있다.

TextMeshPro

버튼은 기본적으로 TMP 형태의 텍스트를 포함한다. 이는 버튼 위에 출력되는 글씨를 표시하는 텍스트로, 다음과 같은 세부 설정을 할 수 있다.

Rect Transform : 글자 위치 및 앵커 조정
Text Input : 글자 내용 입력, 한글 지원 폰트가 아닐 시 글자가 깨지니 주의
또한 글자에 색을 입히고 싶은 경우, HTML 코드로 글자색 변경도 가능하다.

ex) New <color=#FF0000>Text</color>

폰트 스타일, 글자 크기, 왼쪽/중앙/오른쪽 정렬 및 상/중/하 정렬 등도 있다.
폰트 변경 - TextMeshPro는 폰트 자료를 그대로 사용하지 못하고, 그래픽 프리팹 형태로 변환해야 한다.

Window > TextMeshPro > Font Asset Creator 가 있으며 여기서 폰트의 프리팹화를 시킨다.
Wrapping, OverFlow
글씨의 텍스트 수가 많을 경우 글씨를 출력하는 방식을 결정한다.

위 사진처럼 버튼이 여러 개가 있을 경우, Visualize를 활성화하여 각 키로의 이동도 확인할 수 있다.

이벤트 시스템에 기본적으로 버튼의 키입력 이동에 대해 설정된 값이 있으니, 이 상태로 테스트를 해 보면 버튼을 화살표 키로도 이동할 수 있다. 또한 버튼에 커서가 올라가 있거나, 버튼이 눌렸을 때 어떤 색으로 변할지에 대한 세부적인 설정도 가능하다.

1.5 기타 다른 UI들

기능은 추후에도 다시 배울 예정이고, 특이사항이 있는 내용만 정리해보려고 한다.

Image : 말 그대로 이미지를 가져올 수 있다. 특이사항으로는, 외부에서 온 이미지를 사용해야 할 때, 해당 이미지를 Default->Sprite로 변환해서 사용해야 한다.
Text : 폰트 등록 시 프리팹화할 것 - 1.4 버튼 내용 참고
Raw Image : Image와의 차이점이라고 한다면, 동영상을 첨부할 수가 있다.
Panel : 반투명한 판넬을 만들 수 있다.
Toggle : 체크가 가능한 버튼이다.
Slider : 볼륨키처럼 좌우로 왔다갔다 할 수 있다.
Scrollbar : hp바처럼 크기를 늘렸다 줄였다 할 수 있다.
Scroll View : 채팅창 같은 UI를 만들 수 있다.
Dropdown : 목록 형식으로 된 선택지 창을 만들 수 있다.
Input Field : 입력할 수 있는 UI를 만들 수 있다.

2. 씬 전환

2.1 씬 (Scene)

유니티에서 게임월드를 구성하는 단위이다.
프로젝트에 원하는 수만큼 씬을 포함할 수 있고 씬 전환을 통해 다른 게임 월드를 불러올 수 있다.
다중 씬을 이용하여 여러 씬을 동시에 열어 같은 게임월드에서 사용도 가능하다.

빌드 설정
유니티에서 여러 씬을 사용하기 위해선 빌드 설정에서 씬을 포함해야 함
빌드 설정에서 포함한 씬을 게임 빌드 결과물에 포함함

2.2 씬 전환 주요 기능

// 씬 전환
// 프로젝트에 포함된 다른 씬을 로딩하고 기존의 씬의 내용을 삭제함
public void ChageScene(string sceneName)
{
    SceneManager.LoadScene(sceneName);
}


// 씬 추가
// 프로젝트에 포함된 다른 씬을 로딩하고 기존의 씬의 내용을 유지함
public void AddScene(string sceneName)
{
    SceneManager.LoadScene(sceneName, LoadSceneMode.Additive);
}


// 비동기 씬 로드
// 씬 로딩을 백그라운드로 진행하여 게임 중 멈춤이 없도록하는 비동기 방법
public void ChangeSceneASync()
{
    AsyncOperation operation = SceneManager.LoadSceneAsync("StageScene2", LoadSceneMode.Additive);

    operation.allowSceneActivation = true;      // 씬 로딩 완료시 바로 씬 전환을 진행하는지 여부
    bool isLoaded = operation.isDone;           // 씬 로딩의 완료여부 확인
    float progress = operation.progress;        // 씬 로딩의 진행률 확인
    operation.completed += (oper) => { };       // 씬 로딩의 완료시 진행할 이벤트 추가
}


// 씬 언로드
// 로딩되어 있는 씬을 언로드 시키는 방법
public void UnloadScene()
{
    Scene scene = SceneManager.GetSceneByName("StageScene2");
    if (scene.isLoaded == true)
    {
        SceneManager.UnloadSceneAsync(scene);
    }
}


private void OnTriggerEnter(Collider other)
{
    if (other.gameObject.tag != "Player")
        return;

    SceneManager.LoadSceneAsync("StageScene2", LoadSceneMode.Additive);
}

private void OnTriggerExit(Collider other)
{
    if (other.gameObject.tag != "Player")
        return;

    SceneManager.UnloadSceneAsync("StageScene2");
}

3. 유니티에서의 디버거

유니티는 아무래도 실제 게임 과정을 테스트해야 하다 보니, Visual Studio처럼 테스트하기가 어려운 감이 있다. 하지만 유니티 또한 디버깅이 가능하다.

3.1 디버깅

유니티에서 디버깅을 할 때는, 디버깅 모드의 버튼 이름이 다른 것을 알 수 있다.
이는 비주얼 스튜디오와 유니티를 연결해서 디버깅하는 방법으로, 중단점을 설정한 다음 디버깅을 시작할 수 있다.

유니티 에디터에서도 디버깅 버튼이 있고, 우측 하단에 아주 조그맣게 있다.

여기서 버튼이 노란색이면 비주얼 스튜디오가 연결되지 않은 상태이며, 파란색이 되면 디버깅 모드가 시작된 것이다.

3.2 프레임 디버거

Window를 보면 Analysis가 있으며, 여기에 디버깅 관련된 기능들이 모여 있다. 여기에서 Frame Debugger를 실행시키면 아래와 같이 나온다.

이와 같이 씬이 실행되기까지 몇 프레임이 걸리는지, 어떻게 맵이 구성되는지 확인할 수 있다.

3.3 프로파일러

프로파일러는 게임의 최적화를 위해서 사용하는 디버깅 기능이다.

프로파일러를 켜고, 게임 시작을 누른 다음 녹화 버튼 같이 생긴 원형 버튼을 누르면 실시간으로 그래프가 기록된다.

녹화를 중단하면 위와 같이 CPU 점유율에 해당하는 부분이 뜨게 된다. 어떤 스크립트에서 CPU 점유율이 높은지, 가비지 컬렉터가 얼마나 작동했는지 등을 확인할 수 있으며, 어디서 최적화를 진행하면 효율적일지를 파악할 수가 있다.

다만 유의해야 할 점으론, 프로파일러 자체로 CPU를 많이 소모하기 때문에 디버깅을 할 때가 아니면 꺼 두기를 권장한다.