Unity Development [1] : 사용자 인터페이스와 바인딩

---

 

 

Unity의 UI 시스템에서 Canvas는 화면에 UI 요소를 그리기 위한 기본적인 컨테이너이다. 모든 UI 요소는 Canvas 내부에 배치해야 렌더링되며, 화면 상의 위치, 크기, 스케일링 등이 적용된다. Canvas는 Render Mode에 따라 월드 스페이스, 카메라, 스크린 모드로 설정할 수 있으며, 월드 스페이스는 3D 공간에 UI를 배치해 오브젝트와의 상호작용을 가능하게 하고, 카메라 모드는 특정 카메라 뷰에 고정된 UI를, 스크린 모드는 화면 해상도에 맞춰 UI를 표시한다. 예를 들어, 게임의 메인 메뉴가 스크린 모드 Canvas에 추가되면, 화면 크기에 따라 자동으로 조정되며 언제나 동일한 위치에 표시될 수 있다.

 

Unity의 Canvas Sorting Layer와 Order in Layer는 UI가 3D 오브젝트나 다른 UI 레이어와 겹칠 때 순서를 제어하는 기능이다. Sorting Layer는 여러 레이어 중 어떤 레이어가 위에 표시될지를 정하며, Order in Layer는 같은 레이어 내에서 Canvas끼리의 렌더링 순서를 결정한다. 예를 들어, UI 메뉴와 인벤토리 Canvas가 각각 다른 Sorting Layer에 있으면, 특정한 Sorting Layer가 우선적으로 표시되어 인벤토리 창이 메뉴 위에 나타나도록 설정할 수 있다. Order in Layer 값이 낮을수록 먼저, 높을수록 나중에 렌더링되어 UI의 시각적 중첩을 쉽게 조정할 수 있다.

 

Additional Shader Channels는 Unity에서 UI 렌더링에 사용할 추가 데이터를 지정하는 옵션이다. 기본적으로는 Position, Color, UV 등의 데이터만 사용되지만, Normal과 Tangent 등의 채널을 추가로 선택할 수 있다. 이 기능은 주로 커스텀 셰이더가 추가 정보를 필요로 할 때 사용되며, 이를 통해 UI에 빛 반사, 그림자 등 특수 효과를 더할 수 있다. 예를 들어, UI 버튼에 동적 조명 효과를 주기 위해 Normal 채널을 활성화하면 셰이더에서 해당 정보를 이용해 빛이 닿았을 때 버튼이 반짝이는 효과를 구현할 수 있다.

 

 

Canvas Scaler는 Canvas 내의 UI 요소들이 다양한 해상도에서 일관된 크기와 배치를 유지하도록 돕는 컴포넌트이다. 주로 해상도가 다른 다양한 기기에서 UI가 깨지지 않고 동일한 사용자 경험을 제공할 때 필요하다. Scale With Screen Size 모드에서는 기준 해상도를 지정해 그에 비례하여 UI가 크기 조절되며, Constant Pixel Size 모드에서는 절대 픽셀 크기로 고정된 상태로 표시된다. 예를 들어, 모바일 게임에서 Canvas Scaler의 기준 해상도를 1920x1080으로 설정하면, 다른 해상도에서도 UI 요소들이 비율에 맞춰 조정된다.

 

Graphic Raycaster는 Canvas 내의 UI 요소들이 사용자의 입력을 감지할 수 있도록 도와주는 컴포넌트이다. 이 컴포넌트는 주로 클릭, 터치, 드래그 등 UI 상호작용을 감지하는데 사용되며, 마우스나 터치 입력이 특정 UI 요소 위에 위치했는지 판단한다. 예를 들어, Button 요소에 OnClick() 이벤트가 설정되어 있다면 Graphic Raycaster가 이를 인식해 버튼이 클릭되었을 때의 동작을 처리하게 된다. 또한, Raycast Target 옵션을 사용해 특정 UI 요소만 상호작용 가능하게 조절할 수도 있다.

 

 

Canvas Renderer는 Canvas 상의 UI 요소를 화면에 렌더링하는 데 사용되는 컴포넌트로, 주로 각 UI 요소가 효율적으로 그려지도록 돕는다. Sprite, Image, Text 등 다양한 그래픽 요소를 Canvas 위에 배치할 때 Canvas Renderer는 이 요소들이 최적화된 방식으로 렌더링되도록 조정한다. 이때 Cull Transparent Mesh 옵션을 활성화하면 투명한 영역은 렌더링하지 않아 성능을 개선할 수 있다. 예를 들어, 투명한 Image가 여러 개 겹쳐져 있을 때, Canvas Renderer가 투명한 영역을 무시하여 불필요한 렌더링을 줄일 수 있다.

 

Mask는 UI 요소의 특정 영역만 보여주거나 가리는 기능을 제공하는 컴포넌트이다. 주로 Scroll View나 제한된 영역 내에만 특정 UI 요소가 표시되도록 할 때 사용된다. Mask가 적용된 요소는 지정된 자식 오브젝트만 보이게 되며, 이외의 영역은 잘려 나가거나 가려진다. 예를 들어, 스크롤 가능한 리스트에서 스크롤 시 리스트 아이템들이 Mask의 영역 안에서만 보이도록 설정해 시각적으로 깔끔한 효과를 줄 수 있다. Mask와 RectMask2D를 사용해 UI 요소의 성능을 최적화하면서도 원하는 디자인을 구현할 수 있다.

 

 

 

유니티에서 한글 폰트 사용

 

UGUI 한글 입력 문제를 해결하기위해 TextMeshPro로 텍스트를 변경하고 한글을 입력했더니 한글이 안나오는 이슈가 있었다. 이유는 셋팅된 폰트에 한글이 없기 때문이었고, 한글폰트를 추가해주기로 했다. 

1. 폰트를 다운받는다.

 

2. 다운받아진 폰트를 유니티로 옮겨준다 

 

 

다운로드 받은 파일을 모두 유니티의 Font폴더에 추가해줬다. 

3. 유니티에서 Window -> TextMeshPro -> Font Asset Creator

 

 

SourceFontFile : 다운받은 폰트 선택

Sampling Point Size : 자동으로 셋팅하거나 사이즈 지정해줌

Padding : 글자끼리 패딩값

PackingMethod : Fast로 셋팅

Atlas Resolution : 사이즈 넉넉하게 4096으로 셋팅

CharacterSet : CustomRange로 셋팅 ( 이부분 셋팅 잘못되어있으면 추가가 이상하게 됨)

Character Sequence 에 입력 : 32-126,44032-55203,12593-12643,8200-9900

GenerateFontAtlas 클릭하고 Save버튼 클릭하면 .asset형태의 폰트가 추가된다