[Unity] 유니티 캔버스 구조 이해하기

유니티에서 UI를 만들 때 가장 중요한 캔버스

---

 

게임 개발 시 가장 중요한게 바로 사용자 인터페이스(UI)입니다.

버튼, 텍스트, 이미지와 같은 UI 요소는 모두 유니티에서 캔버스(Canvas)라는 큰 틀 안에서 배치되고 관리됩니다.

하지만 유니티가 능숙하지 않은 분들이라면 캔버스 구조를 이해하지 못해 버튼 위치가 어긋나거나, 해상도에 따라 UI가 깨지는 문제를 자주 겪습니다.

그래서 이번 글을 통해 유니티 캔버스 구조를 처음부터 천천히 알아보도록 하겠습니다.

 

유니티 캔버스 기본 개념

캔버스의 역할

• 모든 UI 요소는 캔버스 안에서만 보입니다.
• UI는 3D 오브젝트와 달리 게임 화면 위에 덮어 씌워지는 개념입니다.

 

캔버스의 기본 구성 요소

• Canvas 컴포넌트: UI가 그려질 영역을 정의합니다.
• Canvas Scaler: 해상도 대응을 위한 크기를 조정합니다.
• Canvas Raycaster: 마우스/터치 입력을 감지합니다.
• Canvas RenderMode
  
  • Screen Space - Overlay: 화면에 직접 UI 출력
  • Screen Space - Camera: 특정 카메라 기준으로 UI 렌더링
  • World Space: 3D 오브젝트럼 UI 배치

 

캔버스 다루기

RectTransform 이해하기

• UI의 위치, 크기, 기준점을 잡는 핵심 도구
• 앵커(Anchor) 설정으로 다양한 해상도 대응 가능

캔버스 계층 구조

• 부모 - 자식 관계를 이용해 UI 관리
• 버튼, 텍스트, 이미지 같은 요소는 항상 캔버스의 자식으로 배치

해상도 문제 해결하기

• Canvas Scaler를 Scale With Screen Size로 설정
• 기준 해상도를 설정하면 자동으로 UI 크기가 맞춰짐

캔버스 다루기 예시

UIController 컴포넌트를 추가하고 버튼과 이미지 등을 추가해서 간단한 메뉴 UI를 만들 수 있음 

 

 

그럼 추가적으로 더 알아보도록 하겠습니다.

 

• 캔버스(Canvas)는 왜 필요할까요?
  
  • 캔버스는 모든 UI 요소가 배치되는 기본 틀입니다.
  • 만약 캔버스가 없다면 버튼, 텍스트, 이미지 같은 UI는 화면에 표시되지 않습니다.
  • 따라서 게임 내 인터페이스를 만들 때는 항상 캔버스부터 생성해야 합니다.
  • 실무에서는 여러 개의 캔버스를 사용하는 경우도 있지만 성능과 관리 효율을 높이기 위한 경우입니다.
• 캔버스 랜더 모드 차이가 중요할까요?
  • 랜더 모드는 UI가 화면에 표시되는 방식을 결정합니다.
  • Overlay는 항상 화면 위에 표시되며, Camera 모드는 특정 카메라 기준으로 표시됩니다.
  • World Space는 3D 공간 속 UI를 만들 때 유용합니다.
  • 상황에 따라 적절히 선택하여야 UI가 원하는 대로 보입니다.
• RectTransform과 Transform의 차이는 뭘까요?
  
  • RectTransform은 UI 전용 Transform입니다. 사각형 기반 좌표계와 앵커 시스템을 제공합니다.
  • 일반 Transform은 3D 오브젝트 위치를 다루지만, RectTransform은 화면 비율과 해상도 대응에 특화되어 있습니다.
  • UI를 제작할 때 반드시 RectTransform을 다뤄야 합니다.
• Canvas Scaler 설정은 어떻게 해야 할까요?
  • 실무에서는 Scale With Screen Size 많이 활용합니다.
  • 기준 해상도를 정해두면 다양한 기기에서도 UI 비율이 일정하게 유지됩니다.
  • 해상도를 1920 * 1080으로 기준 해상도를 설정했다면 작은 화면에서는 축소, 큰 화면에서는 확대됩니다.
• UI가 해상도에 따라 깨지는 이유는 뭘까요?
  • 앵커와 Canvas Scaler 설정이 잘못되었을 가능성이 큽니다.
  • 앵커를 부모 오브젝트에 맞게 조정하지 않으면 화면 크기 변경 시 위치가 어긋나게 됩니다.
  • Sclaer가 Constant Pixel Size로 설정되어 있다면 해상도가 달라질 때 크기가 그대로 유지되므로 비율이 깨집니다.
• 버튼이 클릭되지 않는 이유는 뭘까요?
  • 일반적으로 Graphic Ratcaster가 꺼져 있거나, 버튼 위에 투명한 UI가 덮여 있을 때 발생합니다.
  • 이 경우 Ratcast Target 옵션을 확인하고 불필요한 UI의 Ratcaster를 꺼주면 해결됩니다.
• UI 성능 최적화 방법은 뭘까요?
  • 캔버스를 어러 개로 분리하는 것이 효과적입니다.
  • 캔버스는 변경이 발생할 때마다 전체를 다시 그려주므로, 자주 변하는 UI와 고정 UI를 분리하면 성능이 좋아집니다.
• UI를 3D 공간에도 배치할 수 있을까요?
  • World Space 모드를 사용하면 배치할 수 있습니다.
  • NPC 머리 위에 체력 게이지를 띄워야 한다면 World Space 캔버스를 만들고 슬라이더를 배치하면 됩니다.
• UI 정렬이 꼬일 때 어떻게 해결해야 할까요?
  • hierarchy 창에서 순서를 조정하면 됩니다.
  • 같은 레벨의 UI 요소는 위쪽에 있는 것이 아래쪽 요소 보다 위에 렌디링됩니다.
  • Sorting Order로 캔버스 우선순위를 조정할 수 있습니다.
• 텍스트가 흐릿하게 보이는 이유는 뭘까요?
  • Canvas Scaler나 Text 컴포넌트의 Font Size, Best Fir 옵션 설정 문제일 수 있습니다.
  • DPI에 따라 다르게 보일 수 있으므로, 해상도별 테스트가 필요합니다.
• Canvas를 하나만 써야 할까요?
  • 반드시 캔버스 하나만 쓸 필요는 없습니다.
  • 오히려 캔버스를 여러 개로 나누면 UI 업데이트 시 불필요한 리소스 낭비를 줄일 수 있습니다.
• 모바일 해상도 대응은 어떻게 해야 할까요?
  • 앵커를 화면 비율에 맞춰 설정하고, Canvas Scaler의 기준 해상도를 모바일 해상도로 맞추는 것이 좋습니다.
• UI 애니메이션은 어떻게 추가할까요?
  • Animator를 UI 오브젝트에 추가하면 가능합니다.
  • 버튼 클릭 시 페이드 인, 페이드 아웃 같은 효과를 쉽게 구현할 수 있습니다.
• UI 이벤트를 코드에서 제어할 수 있을까요?
  • C# 스크립트에서 Button.onClick.AddListener() 같은 코드를 통해 이벤트를 처리할 수  있습니다.
• UI 레이아웃을 정리하는 방법은 뭘까요?
  •  Grid Layout Group, Vertical Layout Group 같은 레이아웃 컴포넌트를 활용하면 손쉽게 정렬할 수 있습니다.
• Canvas의 Pixel Perfect 옵션은 언제 사용할까요?
  • 픽셀 단위로 정확하게 맞추고 싶을 때 활용합니다.
  • 모든 해상도에서 좋은 결과를 보장할 수 없기 때문에 주의해서 사용해야 합니다.
• UI를 프리팹으로 만들어야 하는 이유는 뭘까요?
  • 반복적으로 사용하는 UI를 프리팹으로 만들어두면 재사용과 관리가 쉽습니다.
• UI가 특정 카메라에만 보이게 할 수 있을까요?
  • Render Camera를 지정하면 해당 카메라에서만 보이도록 설정할 수 있습니다.
• UI를 비활성화하면 성능이 좋아질까요?
  
  • 보이지 않는 UI는 비활성화하는 것이 좋습니다.
  • 다만 해당 UI를 자주 켜고 꺼야 한다면 고려해봐야 합니다.
• UI 디버깅 시 유용한 방법은 뭐가 있을까요?
  • Gizmo 표시를 켜 Scene 뷰에서 RectTransform 도구를 활용하면 위치와 크기를 쉽게 확인할 수 있습니다.

 

유니티에서 캔버스는 UI를 구성하는 핵심 요소이며, 해상도 대응과 입력 처리를 담당하는 중요한 구조입니다.

렌더 모드 RectTransform, Canvas Scaler의 개념을 잘 이해하면, 어떤 화면 크기에서도 안정적으로 UI를 배치할 수 있습니다.

실제 프로젝트에서는 성능을 고려해 여러 캔버스를 나누고, 앵커를 적절히 설정하는 것이 중요합니다.

 

UI 제작 시 캔버스를 단순히 "UI가 담기는 통"이 아니라 게임 경험을 결정짓는 핵심 도구로 생각해보시는걸 추천드립니다.

그럼 더 깔끔한 UI가 나올 수 있을거라고 봅니다.

읽어주셔서 감사합니다. 추가로 궁금하신 내용이 있으시다면 하단의 글을 참고해주세요

 

https://bit.ly/46mC54S

[Unity] 유니티 충돌(Collision) 감지하는 방법

 

https://bit.ly/3Ii7OfM

[Unity] 유니티 카메라 기본 설정과 이동 방법

 

https://bit.ly/4gzAzBh

[Unity] 유니티 오브젝트 생성과 삭제 스크립트