3-1. Canvas와 Render Mode

지난 시간까지 unity에서 다양한 script를 작성해보며 게임을 작동시키는 방법에 대한 전반적인 내용을 학습해보는 시간을 가져보았습니다. 흔히 게임 개발팀에서 게임을 개발할 때는 크게 두 가지로 역할을 나누어서 개발합니다. 첫 번째는 바로 script 및 database 등을 관리하는 프로그래머가 있고요. 그리고 게임의 전반적인 디자인을 담당하는 디자이너가 있습니다. 물론 더 세분화하면 프로그래머도 서버 개발자 및 클라이언트 개발자로 나누어지지만 일단 간략하게 프로그래머와 디자이너가 주가 된다고 이해를 하시면 돼요. 이번 시간부터는 사용자 interface 즉, UI에 대해서 공부하게 됩니다. 본래 사용자 Interface란 게임을 마주하는 사용자가 실질적으로 접하게 되는 그러한 부분을 의미해요. 간단하게 게임 시작 버튼이나 캐릭터 이미지를 포함해서 캐릭터를 실질적으로 클릭해서 보여지는 화면 등을 통틀어서 interface라고 말합니다. 사실 프로그래밍의 관점에서 넓게 보면 지난 시간까지 단순히 object를 만들어서 Sprite 이미지를 띄우는 것만으로도 일단 화면에 보이는 부분들은 어떻게 작업을 했으니깐 interface를 작업했다고 볼 수도 있어요. 하지만 흔히 unity에서 말하는 interface란 버튼, 텍스트, 이미지 등 더욱 구체적인 디자인 요소를 의미합니다. 사용자가 키보드 등을 이용해서 플레이할 때 마주하는 그러한 게임 캐릭터 등의 이미지가 아니고요. 환경설정이나 hp 체력 바, 뭐 쿨타임 표시 등 사용자가 임의적으로 게임 내에서 막 조작하지 못하는 그렇게 단순히 보여지는 화면들이 unity에서 말하는 interface라고 이해하시면 됩니다. 이번 시간에는 사용자 interface의 기본인 canvas에 대해서 알아보겠습니다. canvas는 무언가를 그리기 위해 사용하는 판을 의미하잖아요. unity에서도 비슷합니다. UI를 배치하기 위한 영역을 canvas라고 말하고 게임 시작 등의 어떠한 버튼, 그러한 UI 요소를 canvas에 담는 식으로 interface를 구성할 수가 있어요. 이는 지금까지 저희가 다루었던 캐릭터, 몬스터들을 그려왔던 그런 이런 메인 카메라 영역과는 좀 다른 곳이에요. 좀 거칠게 말하자면 이러한 메인 카메라는 단순하게 카메라가 뭐 게임 내에서 보여질 어떠한 영상을 캐치하는 거라고 한다면 이제 이번 시간에 다룰 canvas는 지금까지 다룬 이러한 카메라 영역과는 완전히 다른 개념이다. 이 정도만 기억을 하시면 좋을 것 같습니다. 그래서 이번 시간에는 새롭게 UI를 즉, 사용자 interface를 실습해보기 위하여 새롭게 unity 프로젝트를 만들어 주시면 됩니다. 저는 이미 프로젝트 이름을 Practice 3-1이라고 지었고요. 2D 템플릿으로 만들어 두었습니다. 이렇게 생성을 완료하고 나서 canvas와 구분하기 위해서 일단 먼저 지난 시간까지 우려먹었던 이 캐릭터 이미지와 몬스터 이미지를 그대로 우리의 프로젝트 안으로 가져오도록 할게요. 그다음에 이제 바로 Sprites 폴더부터 만들어봐야겠죠? 그다음 이렇게 안에 넣어주시고요. 그리고 일단 간단하게 우리가 기존에 했던 것과 마찬가지로 카메라 영역 안에 이렇게 그냥 두 개 다 넣어줄게요. 너무 크죠? 그래서 0.4 정도로 줄이면 좋은 거 같아요. 네, 너무 커요. 너무 커서 좀 작게 만들어 주었고요. 이렇게 카메라 중간에 놓아주었고 또한 마찬가지로 제공해 드렸던 이 UI_Basic 이미지 파일 또한 가져오시고요. 이제 이거는 기본적인 sprite 이미지와는 조금 차이점이 존재해요. 그래서 Images란 이름의 폴더를 만든 다음에 이거를 이제 Images 폴더 안에 넣어주도록 할게요. 이렇게 이전에 sprite 이미지를 담는 이미지 폴더명을 Sprites라고 쓴다고 말을 했었죠. 이제 이와 구분하기 위해서 UI에서 사용하는 이미지라는 뜻으로 그냥 간단하게 Images라고 이름을 지어준 거예요. 이제 user interface, 즉 UI에서 사용할 이미지를 canvas에 배치를 해보도록 할게요. Hierarchy View 에서 마우스 우클릭을 한 뒤에 UI에 들어가서 Image를 하나 만들어 보겠습니다. 그럼 이렇게 자동으로 세 개나 object가 만들어졌어요. 나는 이미지밖에 안 만들었는데 왜 세 개나 있냐. 이렇게 궁금하실 수 있죠? 제일 먼저 이 EventSystem 같은 경우는 기본적으로 canvas를 생성하면 자동으로 생성되는 object입니다. canvas를 여러 개 만들어도 오직 하나만 생성이 돼요. 사실 기본적으로 지금 이것을 이용할 일은 없을 테니깐 일단은 건드리지 않으시면 됩니다. canvas와 관한 일정한 어떠한 이벤트 기능들을 처리하는 역할을 수행하는 건데요. 지우거나 잘못 건드리시면 안 됩니다. 그냥 가만히 두시는 게 일단 좋을 것 같고요. 보시면 재미있는 점은 이 Image object가 이 canvas 내부 즉, 이 아래에 들어가 있다는 것입니다. 아까 말했듯이 이 canvas는 UI가 그려지는 일종의 판이라고 할 수가 있어요. 예시로 체력 표시줄이나 스킬 쿨 타임, 뭐 게임 시작 버튼 및 일시 정지 버튼 등의 그러한 UI object들은 반드시 특정한 canvas 안에서 만들어지고 사용이 됩니다. 이제 이걸 UI가 canvas에 속해 있다고 말합니다. 모든 UI는 특정 canvas의 아래에 이렇게 속해있는 구조를 가진다고 생각을 하시면 되는데요. 다음 시간에 더 자세히 배우겠지만 이렇게 어떤 객체가 다른 객체 아래에 속하는 구조를 부모 자식 계층구조라고 말합니다. 한번 이 Hierarchy View에서 Image를 더블 클릭해서 이미지를 확인해보도록 할게요. 보니깐 흰색 네모가 눈에 보이실 거예요. 이게 UI 이미지에 어떤 이미지도 넣지 않았을 때 생성되는 기본 이미지라고 할 수 있어요. 그런데 기존에 만들어 두었던 이제 이 몬스터와 캐릭터 object가 사라졌죠? 어, 어디 갔죠? 다시 확인하기 위해서 이렇게 메인 카메라로 가보시면 다시 이렇게 우리가 아까 만들었던 object가 보이는 걸 알 수가 있죠. 즉, 그래서 이제 이 메인 카메라 영역과 canvas의 영역, 이미지 영역 이렇게 다 다른 화면이 보인다는 걸 알 수가 있는 거예요. 이렇게 한번 canvas를 눌러봐요. 그러면 이제 아까 전에 봤던 이미지가 이렇게 보이는 걸 알 수가 있죠. 아까 말했듯이 기존에 보이는 어떤 object들 배치하는 공간과 이렇게 UI를 배치하는 이 canvas의 공간은 완전히 다른 영역인 겁니다. 즉, 카메라의 영역과는 다른 영역이 이 canvas 영역이라는 거죠. 이제 UI는 기본적으로 canvas가 일종의 카메라의 역할을 수행해줘요. 마치 카메라 화면 같죠? 그래서 UI 이미지가 canvas에 보이는 그대로 게임 화면에 보이게 될 겁니다. 바로 이런 식으로요. 이렇게 잘 감이 안 오시면 Image를 이렇게 클릭해서 이거를 살짝 우측 상단으로 이렇게 보낼 수가 있어요. 맞춰볼게요. 이렇게 우측 상단에 올려 두시고 재생 버튼을 눌러 보시면 이렇게 오른쪽 위에 우리가 방금 만든 UI가 들어가 있는 걸 알 수가 있습니다. 어떻게 보면 이제 이 canvas는 어떤 UI 전용 카메라라고 생각을 하셔도 편하실 것 같네요. 그래서 그 UI를 그릴 때 최대한 기본 object들하고 따로 작업을 하라고 이렇게 완전히 분리해둔 거라고. 즉, 이렇게 카메라 영역과 완전히 다른 공간으로 둔 거라고 이해를 하실 수 있는 거예요. 다시 한번 말하지만 모든 UI는 canvas에서 보이는 그대로 화면에 보이도록 일단 만들어져 있어요. Main Camera에서 보이는 그대로가 아니고요. 이 Main Camera에서 보이는 게 아니라 이제 만약 저희가 이미지를 좌측 하단으로 다시 한번 옮겨보도록 할게요. 이렇게 옮겨서 지금 보시면 이렇게 canvas의 아래쪽에는 작게 이제 이렇게 계속 가보시면 작게 카메라 영역이 있어요. 한번 이렇게 이 UI를 이용해서 카메라 영역을 가려 보도록 할게요. 이렇게 하면 어떻게 될까요? 이렇게 되면 scene view에서는 이제 어떠한 몬스터 object가 이 UI 때문에 가려져서 잘 보이지 않게 돼요. 하지만 이렇게 실행을 해보면 좌측 하단에 흰 네모 박스가 보이는 걸 알 수가 있죠. 즉, 이렇게 Game View에 나타나기 위해서는 이렇게 canvas 안에서 배치를 해야 된다는 겁니다. 즉, 메인 카메라에서 배치를 하는 게 아니라는 것을 잘 기억하셔야 돼요. 이제 그다음에 이 예제 파일로 제공된 피망 모양의 아이콘을 한번 이 UI 이미지에 적용을 해보도록 할까요? sprite와 작용하는 방법이 굉장히 흡사해요. 그냥 이렇게 드래그 앤 드롭으로 넣어줄 수가 있고요. 혹은 이렇게 옆에 동그라미를 눌러서 이 피망 버튼을 클릭해서 적용을 할 수가 있겠죠. 이렇게 클릭을 해서 피망이 만들어지면요. 이제 이 피망을 조금 움직여 보도록 할게요. 이 좌측 상단으로 한번 올려볼까요? 이렇게 올려보았죠? 이렇게 한번 실행을 해보시면 이제 또 피망이 움직여서 좌측 상단에 출력이 잘 되는 걸 확인할 수가 있습니다. 이제 예를 들어서 뭐 이런 것들을 저희 캐릭터의 목숨, 혹은 뭐 스킬 등을 표시하는 용도로 사용할 수가 있겠죠? 이제 이 상태에서 한번 일부러 캐릭터를 이 게임 화면에서 이 피망과 겹치도록 만들어 보도록 할게요. 이제 이럴 때는 간단하게 이 피망의 위치를 살짝 이정도로 두면 될 것 같아요. 조금 더 가야겠네요. 이렇게 해보면은 정확히 이 캐릭터와 겹치는 것을 알 수가 있죠. 이렇게 보시다시피 캐릭터보다 이 피망 아이콘 UI가 조금 더 앞쪽에 위치하는 것을 알 수 있습니다. 그리고 보시다시피 흔히 게임에서 게임 환경설정이나 hp 체력 바 등은 게임의 어떤 다른 배경 즉, 캐릭터 등의 요소보다 이렇게 앞쪽에 출력이 되는 경우가 많아요. 거기다 뭐 hp 같은 그런 바들은 앞쪽에 보이죠? 이제 그런 것과 같은 원리라고 보시면 됩니다. 먼저 canvas를 제외한 다른 것들을 다 그리고 그 위에 canvas와 canvas에 담긴 UI 이미지들을 그려내기 때문인데요. 이렇게 그려내는 과정을 렌더링이라고 말합니다. 그런데 canvas를 그려내는 방식 즉, 렌더링하는 방식은 여러 가지가 있어요. 이 렌더링하는 방식을 설정하는 게 바로 이 canvas의 이 canvas component입니다. 이 canvas component의 Render Mode를 눌러보시면 이렇게 세 가지 모드가 나올 거예요. Screen Space-Overlay와 밑에 있는 Screen Space-Camera 그리고 이 World Space, 총 세 가지가 나오는데요. 이에 대해서 하나하나 알아보도록 할게요. 첫 번째는 이렇게 overlay 방식이에요. canvas의 기본적인 설정이기도 하고요. overlay는 어떠한 표면을 얇게 덮는다는 뜻을 가지는데요. 그 이름 그대로 모든 UI는 우리의 scene view나 카메라와는 상관없이 완전히 분리된 canvas 영역에서 렌더링이 수행되고 UI 이외에 모든 object 들보다 항상 앞에 그려지게 됩니다. 특히 2D 게임에서는 object의 이 z축을 잘못 설정하거나 하면 카메라에서 아예 안 보이게 되는 경우가 종종 있다고 예전에 말씀을 드린 적이 있을 겁니다. 그러나 이 overlay 모드에서는 z축을 전혀 신경 쓰지 않고 만들어도 예전에 말씀드린 적이 있듯이 이제 어차피 이미 만들어진 UI가 따로 canvas에서 그려진 다음에 이제 그 canvas를 통째로 game view의 맨 앞에 그려내는 방식이기 때문에 무조건 다른 object보다 더 앞에 그려지고 또 드러나게 되어 있는 겁니다. Camera 렌더링 모드는 이제 overlay 다음으로 자주 사용이 되고 또 많이 쓰는 렌더링 모드인데요. 이 렌더링 모드의 가장 큰 특징은 scene view에서 이제 UI object를 동시에 보고 작업할 때 사용할 수가 있습니다. 이제 카메라 영역과 Canvas영역을 scene view 내에서는 같이 표시할 수가 있기 때문에 개발자 입장에서 작업할 때는 보다 편리할 수가 있거든요. 바로 이렇게 unity로 돌아와서 확인을 해보도록 할게요. canvas로 가서 이 canvas component에서 이 Screen Space를 Camera로 변경을 해보도록 할게요. 그런데 이제 이름에서 이렇게 드러나듯이 말 그대로 이 렌더링 모드는 카메라와 canvas를 같은 사이즈로 그려내게 된다는 특징이 있습니다. 이제 그러기 위해서는 어떠한 카메라를 기준으로 해서 렌더링을 할 것인지 그 카메라를 반드시 정해줘야 돼요. 그래서 이렇게 Main Camera를 설정해보도록 할게요. 이제 까먹지 말아야 되는 것이 바로 여기 밑에 plane distance입니다. 이 plane distance를 이 100에서 10으로 조금 조절해주시면 이제 메인 카메라가 보는 영역과 이 canvas가 보는 영역이 정확히 일치하게 됩니다. 이제 그 이유는 메인 카메라는 기본적으로 -12로 이 z축이 설정되어 있기 때문인데요. 더욱 자세하게 설명을 드리도록 할게요. 보시면은 이제 이 canvas를 이렇게 더블 클릭을 해보시면 이렇게 저희가 그려준 이 피망콘이, 이 피망콘 UI 이미지가 캐릭터와 몬스터 이 두 가지 object와 동시에 scene view에서 보이는 걸 확인할 수가 있죠? 아까 전에는 이제 완전하게 다른 영역에서 보였는데 이젠 이렇게 scene view 내에서 동일하게 보이는 걸 알 수가 있습니다. 이렇게 메인 카메라를 선택해줘도 마찬가지로 동일하게 보이는 걸 알 수가 있죠? 이 Camera 렌더링 모드에서는 이렇게 우리가 UI를 작업할 때 다른 object와 canvas를 scene view에서 동시에 보고 작업하고자 할 때 매우 유용하게 사용할 수가 있습니다. overlay 모드와 가장 큰 차이점은 이 plane distance를 어떻게 설정하느냐에 따라서 UI가 전체적으로 object들 뒤에 보일 수도 있고, 보이지 않을 수도 있다는 것이에요. 이걸 보다 쉽게 이해하기 위해서 잠시 이 scene view에서 2D를 눌러 보도록 할게요. 이렇게 이동을 해서 한번 지금 이 카메라의 시점에서 확인을 해보도록 할게요. 이렇게 확인을 해보시면, 이렇게 메인 카메라를 봤을 때 우리가 배치한 object가 어떻게 그려지고 있는지 전체적으로 조망을 할 수가 있잖아요? 이제 여기에서 canvas를 누르시고요. 한번 plane distance를 조절을 해보도록 할게요. 그리고 그게 어떻게 보이는지 확인하기 위해서 이 game view를 잠시 이 scene view 밑에 있는 project view가 있는 곳으로 이동을 시켜보도록 할게요. 그럼 이렇게 아래쪽엔 game view가 보이고요. 이렇게 위쪽에는 scene view가 보이는 것을 알 수가 있습니다. 그리고 이제 이 상태에서 우리 canvas의 plane distance 값을 조금 변경해보도록 할게요. 조금 줄여볼게요. 이렇게 1로 줄여보면 이 피망콘이 앞쪽으로, 이렇게 앞쪽으로 오는 것을 볼 수 있습니다. 다시 이렇게 10으로 했을 때는 기본적으로 이 카메라로부터의 거리가 10이라는 뜻이기 때문에 사실상 아까 overlay와 큰 차이가 없다고 볼 수 있어요. 반면 이렇게 가까워지면 카메라에 더욱 가까워지는 것이기 때문에 이렇게 앞쪽으로 그려지게 된다는 거죠. 물론 이제 game view에서는 동일한 크기로 출력이 되지만 이렇게 scene view 내에서는 보다 앞쪽에 이렇게 피망콘이 있는 걸 확인할 수가 있다는 거죠. 그래서 이렇게 0까지, 혹은 이렇게 -5까지 계속 줄이게 되면 결과적으로 이 카메라보다 앞쪽이 아닌 뒤쪽에 있기 때문에 이제 game view에서는 이렇게 실제로 게임을 실행했을 때 피망콘이 안 보이게 된 걸 확인할 수가 있는 겁니다. 근데 이제 우리 object는 전부 이 z축이 0이였죠? 이 카메라는 이렇게 -10이고요. 다른 object와는 조금 차이점이 있는 걸 확인할 수가 있습니다. 그래서 딱 이 plane distance가 정확히 10일 때 이러한 몬스터 이 캐릭터 object와 정확히 동일한 z축에 위치해서 출력되는 거라고 할 수가 있는 거예요. 그런데 이제 이 overlay와 다른 점이라고 한다면 이렇게 이 plane distance가 또 더 커진다고 하면 이렇게 캐릭터 뒤에 존재하기 때문에 우리의 scene view에서는 보이지만 또 게임 view에서는 안 보일 수 있다는 것을 알 수 있는 겁니다. 즉, 이렇게 정확히 카메라가 보는 것과 정확히 일치한다고 해서 object 들과 위치를 같이 보면서 작업을 할 때 편한 것을 확인할 수 있습니다. 이제 한번 피망콘을 조금 더 위쪽으로 올려보도록 할게요. 이렇게 쉽게 올릴 수가 있고요. scene view 내에서 간단하게 작업을 할 수 있다는 점에서 굉장히 활용도가 높다고 할 수 있습니다. 그래서 canvas가 다른 object와 동일한 공간에 있다고 해서 canvas가 일단 다른 object와 똑같지는 않다는 점만 기억을 잘하시면 될 것 같습니다. 예를 들어서 이제 이 scene view에서 이 canvas의 위치를 바꿔보려고 하세요. 바꿔지나요? 안 바꿔지죠? 이제 이 Rect Transform component는 기본적으로 canvas의 위치 정보를 담고 있는데요. 이것이 회색 처리가 되어서 애초에 못 바꾸도록 되어 있는 것을 알 수 있습니다. 즉, 카메라에 이렇게 귀속되어서 canvas 자체의 위치는 바꿀 수가 없다는 거죠. 그래서 일반적인 object를 다루듯이 처리할 수는 없다는 거예요. 물론 그 안에 담긴 이렇게 UI 같은 것들은 마음대로 움직이거나 할 순 있지요. 그래서 마지막으론 이렇게 World Space 렌더링 모드에 대해서 알아봅시다. 이제 이것은 다른 object 들과 UI object를 완전히 동일하게 취급할 때 사용합니다. 아까 전에는 이제 canvas의 위치를 움직이지 못했었는데요. 이제 이걸 사용하게 되면 위치까지 움직일 수가 있어요. 이렇게 unity로 돌아와서 World Space의 모드로 변경을 하게 되면 이렇게 scene view에서 canvas를 들었다 놨다도 할 수가 있는 겁니다. 이렇게 game view에서 잘 보이는 걸 확인할 수가 있죠? 뿐만 아니라 이렇게 위치의 어떠한 z축 같은 것도 쉽게 바꿀 수가 있기 때문에 전반적으로 더욱 편리하게 이제 scene view에서 다룰 수 있다는 특징이 있죠. 흔히 이제 어떠한 UI를 게임 내의 어떠한 object처럼 정말 다루고자 할 때 사용하는 방식이에요. 이렇게 object와 완전히 동일하다고 할 수가 있는 거고요. 이제 이런 게 있다 정도로만 알고 계시면 충분할 것 같습니다. 네, 이상으로 이렇게 이번 시간에는 UI의 개요와 그리고 canvas의 세 가지 렌더 모드를 이용해서 UI를 다양하게 화면에 출력하는 방법에 대해서 알아보는 시간을 가져보았습니다. 개념만 잘 이해하면 엄청 어렵진 않을 거라고 생각을 하고요. 다음 시간에는 이제 UI의 부모, 자식 계층구조에 대해 자세히 알아보는 시간을 가져보도록 할게요.