UI 디자이너를 위한 Unity3D (2) - Canvas

박창훈 (MERHENNE)·2021년 6월 6일

Unity3D.N.Designer

목록 보기

2/4

UI 출력을 위한 초석 - Canvas

Canvas 란?

Canvas는 Canvas 컴포넌트를 가지고 있는 게임 오브젝트로 UI를 카메라에 렌더링하기 위한 것이다. UI를 렌더링하기 위해서는 반드시 Scene 내에 한 개 이상 존재해야 한다. 모든 UI는 반드시 Scene 내에 존재하는 어떤 Canvas 하위의 Child여야만 한다.

'Child' 라는 개념
Hierarchy 계층 구조에서 어떤 특정한 게임 오브젝트의 하위에 있는 오브젝트를 이르는 개념이다. Position, rotation, scale등이 Parent의 영향을 받아 함께 움직인다.

Scene을 처음 생성했을 때는 Canvas가 존재하지 않는다. Unity Editor에서 제공하는 메뉴를 이용하여 Canvas를 만들 수 있으며, 직접 Canvas를 만들지 않더라도 같은 메뉴에서 UI를 생성할 경우 자동으로 생성해준다. 또한 생성 시, Canvas의 메시징 시스템을 돕기 위한 Event System 오브젝트를 함께 생성한다.

Event System
아래 그림과 같이 기본 컴포넌트들이 설정되서 생성된다. 일반적인 경우에는 해당 옵션들을 수정할 필요가 없다. 이후 포스트에서 자세히 설명한다.

생성된 Canvas 게임 오브젝트는 Canvas는 물론 Canvas Scaler, Graphic Raycaster를 포함하고 있다. 아래에서 다른 컴포넌트에 대해서도 설명한다.

Rect Transform 컴포넌트

Canvas를 포함한 모든 UI 게임 오브젝트가 기본적으로 가지고 있는 컴포넌트로 일반 게임 오브젝트가 가지고 있는 Transform을 상속하여 만들어진 컴포넌트이다. 이에 대해서는 이후 작성되는 포스트에서 조금 더 자세하게 설명하기로 한다.

Canvas 컴포넌트

Canvas 게임 오브젝트가 기본적으로 가지고 있는 컴포넌트 중 하나이다. Canvas의 렌더링 방식 및 렌더링 순서를 지정할 수 있다.

1. Render Mode

Canvas의 렌더링 모드를 설정할 수 있는 옵션이다. 옵션으로는 'Screen Space - Overlay', 'Screen Space - Camera', 'World Space'로 총 세가지가 있다. 세 가지를 잘 활용하면 원하는 UI 타입을 만들어 낼 수 있다.

Screen Space - Overlay
Canvas를 스크린 좌표계 위에 모든 오브젝트들보다 최상위로 렌더링하는 옵션이다. 자동으로 디바이스의 화면을 채우고, 디바이스의 해상도가 변경되면 자동으로 조정된다. 다른 게임 오브젝트에 의하여 UI가 가리지 않는 장점이 있다. 단, canvas의 크기와 게임 오브젝트의 크기가 달라 한 눈에 컨트롤 하기는 힘들다. Pixel Perfect 옵션이 나타난다.

* Pixel Perfect: UI Element를 렌더링할 때, 가장 가까운 픽셀로 조정하도록 하는 옵션이다.

Screen Space - Camera
Canvas를 스크린 좌표계 위에 렌더링하지만, 카메라를 기준으로 Canvas의 위치를 조절한다. 카메라를 기준으로 렌더링하므로 카메라의 옵션이 Canvas의 렌더링에 영향을 미친다. 카메라의 Projection 옵션이 Perspective 라면 UI 요소들도 원근감 있게 렌더링 된다. 해당 옵션일 때, Render Camera, Plane Distance 옵션이 나타난다.

* Pixel Perfect: UI Element를 렌더링할 때, 가장 가까운 픽셀로 조정하도록 하는 옵션이다.

* Render Camera: Canvas의 기준이 될 Camera를 지정하는 옵션, 선택된 카메라를 기준으로 캔버스의 위치를 조절한다. 이 부분을 비워두면 Camera를 찾기 위해 Camere.Main을 호출하여 성능의 하락이 발생할 수 있다.

* Plane Distance: 카메라를 기준으로 Forward 방향으로 위치할 거리를 지정하는 옵션이다. 해당 옵션에 따라 다른 오브젝트에 가려질 수도 있다.

위 사진은 Plane Distance 가 100인 경우를 캡쳐한 것이다.

World Space
이 렌더링 모드에서는 Canvas를 다른 게임 오브젝트와 동일하게 취급한다. 다른 렌더링 모드와 다르게 Rect Transform을 통해서 캔버스의 크기를 조절할 수 있다. 'Screen Space - Camera'와 같이 위치에 따라서 다른 게임 오브젝트에 의하여 가려질 수 있다. 'World Space' 선택 시, Event Camera 옵션이 나타난다.

* Event Camera: 월드 좌표계 상에 있는 Canvas와 인터랙션할 카메라를 지정하는 옵션이다. 본 카메라에서 터치 등의 이벤트를 전달받아서 Canvas에 전달한다. 이 부분을 비워두면 Camera를 찾기 위해 Camere.Main을 호출하여 성능의 하락이 발생할 수 있다.

2. Sorting Layer

Canvas 사이의 렌더링 순서를 결정하는 옵션들이다.

Sorting Layer 생성 방법

Canvas 옵션 Sorting Layer 드롭 다운 메뉴를 클릭한다.

옵션 최하단의 Add Sorting Layer를 클릭하여 설정 창을 연다.

'+' 버튼을 눌러 Sorting Layer를 추가하고 이름을 입력한다.

세줄 버튼을 누른 후, 드래그 앤 드롭으로 순서를 변경할 수 있다.

3. Order In Layer

Canvas 사이의 렌더링 순서를 결정하는 옵션들이다. Sorting Layer와 함께 사용하며, 같은 Sorting Layer 안에서 세밀한 순서를 정하는 용도로 사용된다.

Canvas Scaler 컴포넌트

Canvas Scaler는 Canvas 내에 있는 모든 UI의 크기 및 픽셀 밀도를 조절하는 컴포넌트이다. Canvas 하위의 모든 UI가 Canvas Scaler의 영향을 받는다.

1. UI Scale Mode

해상도의 변경에 따른 Canvas 하위의 UI 변경 모드를 바꿀 수 있는 옵션이다. 'Constant Pixel Size', 'Scale With Screen Size', 'Constant Physical Size' 등의 옵션이 있다. 단, Canvas의 렌더링 모드가 World Space일 때는 World로 고정된다. 각 옵션에 따라서 하위 세부 옵션이 등장한다.

Constant Pixel Size
화면의 해상도 및 크기와 상관없이 UI 요소의 위치와 크기가 항상 같은 Pixel 단위로 지정된다. Canvas Scaler 컴포넌트가 없는 경우 이 모드가 기본으로 설정된다. Scale Factor 옵션을 사용하여 캔버스의 모든 UI 요소에 일정한 스케일을 적용할 수 있다.

* Scale Factor: Canvas 하위의 모든 Scale를 설정한 값 만큼 키운다.

Scale With Screen Size
해상도의 크기에 맞추어서 UI의 크기를 조절하는 옵션이다. 여러 가지 세부 옵션을 이용하여 UI의 크기가 결정되는 방법을 제어할 수 있다.

* Reference Resolution: 기준 해상도를 설정하는 옵션이다. 설정한 해상도를 기준으로 크기를 계산하여 조절해준다.

* Screen Match Mode: 변경되는 해상도에 따라 Canvas의 크기를 변경할 모드를 설정하는 옵션이다. 'Match width or height', 'Expand', 'Shrink'의 세 가지 옵션이 있다.

Screen Match Mode의 세부 옵션

* Match width or height: Canvas 영역의 Width 혹은 Height를 기준으로 하여 확장한다. 옵션 선택 시 Match 비율을 선택할 수 있는 Slider 옵션이 나타난다. 0 이면 Width, 1이면 Height이다.

* Expand(확장): Canvas의 크기가 기준 해상도보다 작아지지 않도록 확장한다.

* Shrink(축소): Canvas의 크기가 기준 해상도보다 커지지 않도록 잘라낸다.

Constant Physical Size
화면의 해상도 및 크기와 상관없이 UI 요소의 위치와 크기가 물리적인 단위로 지정된다. 물리적 크기의 단위 및 DPI를 설정할 수 있다. 이 모드를 사용하려면 기기의 화면 DPI를 정확하게 알고 있어야 한다. 기기가 DPI를 모르는 경우, 기본적으로 사용할 DPI를 지정할 수 있다.

* Physical Unit: 물리적인 크기의 단위를 설정하는 옵션이다. 'CentiMeter', 'MilliMeter', 'Inch', 'Points', 'Picas'로 총 5개의 옵션이 있다.

* Fallback Screen DPI: 화면의 DPI를 알 수 없을 경우 사용되는 DPI Value이다.

* Default Sprite DPI: ‘Pixels Per Unit’ 설정이 ‘Reference Pixels Per Unit’ 설정과 일치하는 스프라이트에 사용할 DPI이다.

2. Reference Pixels Per Unit

1유닛에 대한 픽셀의 수를 설정하는 옵션이다. 세부적인 의미는 UI Scale Mode에 따라 다르다. UI Scale Mode에 따른 의미는 아래와 같다.

UI Scale Mode	의미
Constant Pixel Size	스프라이트에 이 ‘Pixels Per Unit’ 설정이 적용된 경우, 스프라이트의 1픽셀이 UI의 1 Unit에 해당한다.
Scale With Screen Size	'Constant Pixel Size'와 동일
Constant Physical Size	스프라이트에 ‘Pixels Per Unit’ 설정이 있는 경우, DPI는 ‘Default Sprite DPI’ 설정과 일치한다.

위 표에서 '스프라이트에서 'Pixels Per Unit' 설정이 적용된 경우' 라는 것은 이미지 에셋의 Texture Type 옵션이 Sprite일 때를 의미한다. 왜냐하면 'Pixels Per Unit' 옵션이 Sprite 일 때만 활성화되기 때문이다.

Graphic Raycaster 컴포넌트

Canvas를 위한 Ray Casting에 사용되는 컴포넌트이다. Canvas 하위에 있는 모든 UI 요소에 대해서 검사를 진행하며, 어떤 UI가 선택되었는지 판별한다.

Ray Casting
시작점과 방향을 가지고 끊임없는 직선을 생성하여 충돌한 게임 오브젝트를 검출하는 방법을 지칭한다. 일반적으로 카메라의 터치 지점을 시작점으로 사용하고 카메라의 Forward 방향으로 Ray를 보내어 충돌한 게임 오브젝트를 검출하는 형태로 사용한다.

1. Ignore Reversed Graphics

카메라를 바라보고 있지 않은 UI 요소는 무시하도록 설정하는 옵션이다. 필요 없는 연산을 줄일 수 있다.

2. Blocked Objects

RayCasting을 막을 수 있는 오브젝트 타입을 설정하는 옵션이다. 'None: 막지 않음', 'Two D: 2D 오브젝트만 막음', 'Three D: 3D 오브젝트만 막음', 'All: 전부 막음'등을 선택할 수 있다. UI 요소 앞에 해당 오브젝트가 있을 경우, Ray Casting 되지 않는다.

3. Blocking Mask

RayCasting을 막을 수 있는 오브젝트의 Mask 타입을 설정하는 옵션이다. 이전 포스트에서 설명한 Layer 생성 방법을 통해 생성된 Layer들을 선택할 수 있다. 선택된 Layer에 해당하는 오브젝트가 UI 요소 앞에 있을 때, Ray Casting 되지 않는다.

One more thing - Canvas Group

UI를 구성하면서 가장 힘든 일 중 하나는 구조가 복잡해질 수록 애니메이션이나 설정을 조절함에 있어 반복 작업이 많다는 것이다. Canvas Group은 그 일을 줄여주는 기능을 가지고 있는 컴포넌트이다. 작업 후에 구조가 바뀌었을 때, 재작업을 막아주기도 하는 재활용 측면이 높은 컴포넌트이다.