게임 UI 제작 기초 | 프로젝트 Project, 씬 Scene, 프리팹 Prefab, 캔버스 Canvas | 유니티 UI 기초
유니티 엔진에서 UI 제작을 진행함에 있어 반드시 이해해야 하는 기초 개념을 살펴보겠습니다.
프로젝트 Project
씬 Scene
프리팹 Prefab
캔버스 Canvas
1. 프로젝트 Project
프로젝트는 하나의 게임을 의미하는 단위입니다. 프로젝트는 게임에 필요한 재료들로 구성되는데 우리가 잘 알고 있는 그래픽 리소스 (2D/3D 이미지, UI 이미지, 이펙트, 애니메이션 등)와 프로그래머들이 만드는 프로그램 코드들 (Scripts), 사운드 리소스, 그 밖에 게임에 필요한 데이터와 설정 등 모든 것이 포함됩니다. 하나의 게임 프로젝트에 참여하는 개발자들(기획자, 디자이너, 프로그래머 등)은 모두 하나의 프로젝트에 접근해서 리소스를 추가하거나, 가공하거나, 코드를 만들거나, 데이터를 추가하는 등 각자의 작업을 합니다.
UI 또한 하나의 게임 프로젝트에 속하는 리소스로 하나의 프로젝트 안에서 필요한 UI들을 만들어 나가면 됩니다. 수업을 진행하다 보면 UI를 새로 만들 때마다 게임 프로젝트를 새로 만드는 실수를 하는 경우가 간혹 있는데, 게임 프로젝트는 하나이고 그 안에 필요한 내용을 채우는 개념으로 이해하시면 됩니다.
*유니티 UI 실습을 할 때에는 1개의 프로젝트 안에서 UI를 추가하며 작업하면 됩니다.
2. 프로젝트 Project
씬은 영어로 '장면'을 뜻합니다. 영화의 장면과 같은 개념입니다. 영화에서 아래와 같은 이야기를 표현한다고 가정해 보겠습니다.
늦은 밤, 주인공은 숲길을 걷고 있다.
주인공이 사는 집이 숲속에 있기 때문이다.
주인공이 집으로 돌아와 제일 먼저 하는 일은 불을 켜는 일이다.
이 이야기를 표현하기 위해서는 2개의 장면 = 씬 Scene 이 필요합니다.
숲 Scene
집 Scene
각 'Scene'은 각 장면에서 표현해야 하는 각종 무대 장치와 소품들을 가지고 있습니다. 숲 Scene에는 숲을 표현하기 위해 필요한 소품들이 있고, 집 Scene에는 집을 표현하기 위한 소품이 있습니다. 그러나 숲 Scene에는 집 Scene이 가지고 있는 소품은 가지고 있지 않습니다. 반대의 경우도 마찬가지입니다. 각 장면에 필요한 소품만을 가지고 있음에 주목합니다.
1. 숲 Scene
밤하늘, 달, 별, 흙바닥, 잔디 바닥, 나무, 풀, 돌, 자갈, 숲속 벌레나 동물, 풀벌레 사운드 등
2. 집 Scene
문, 벽, 바닥, 조명, 반려동물, 집안 살림 등
이러한 소품들을 게임에서는 오브젝트라고 부릅니다. 유니티 엔진에서는 게임 오브젝트(GameObject)라고 부릅니다.
영화의 장면과 마찬가지로 게임을 만들 때에도 게임의 흐름을 적절히 나누어 씬으로 구분하여 게임 리소스를 효율적으로 나누어 불러오거나 저장해 두는 등 게임 실행시 부하를 최대한 줄입니다. 리소스의 종류와 게임 기능의 구분이 명확한 경우 씬을 분리하여 관리합니다. 예를 들어 로그인 씬, 로비 씬, 인게임 전투 씬 등으로 나눌 수 있는데, 로비 화면에서는 전투 플레이를 할 경우가 없으니, 전투와 관련된 리소스나 코드를 가지고 있을 필요(불러오거나 실행시킬 필요)가 없습니다.
*유니티 UI 실습을 할 때에는 1개의 씬을 만들고 해당 씬에서 계속 작업하시면 됩니다.
3. 프리팹 Prefab
프리팹은 여러 리소스를 하나로 묶어놓은 리소스입니다.
예를 들어 공용 시스템 팝업창은 게임 UI 이미지들과 각 요소의 위치 좌표, 각종 UI의 기능(버튼, 텍스트 등), 사운드, 애니메이션, UI 기능을 구현한 코드 등이 하나로 묶여 있습니다. 이렇게 하나의 단위로 묶어서 저장해두면 필요에 따라 묶음 단위로 불러와 손쉽게 사용할 수 있습니다.
또한 프리팹은 '재활용'과 깊은 관련이 있습니다. 모든 경우의 수만큼 UI를 새로 만드는 것은 매우 비효율적이기 때문에 UI 하나로 다양한 상황에서 재활용하는 것입니다. 예를 들어 '공통 메시지 팝업창'을 프리팹으로 묶어 활용하면 하나의 팝업창 프리팹으로 다음과 같은 상황을 모두 커버할 수 있습니다.
이 게임을 한국이 아닌 미국에 서비스하기로 했습니다. 팝업창의 텍스트를 모두 영어로 바꾸어야 합니다.
> 텍스트에 여러 언어를 설정해 두고 상황에 따라 다른 언어로 출력할 수 있습니다.서버 문제가 발생하여 게임 접속이 불가능합니다. 안내 메시지를 띄워야 합니다. 하단 버튼은 확인 버튼만 띄우면 됩니다.
> 자동 레이아웃 기능을 적용해 버튼이 2개일 때와 1개일 때 모두 중간에 뜨도록 정렬할 수 있습니다.
> 텍스트 내용도 상황에 따라 다르게 출력할 수 있습니다.
*유니티 UI 실습을 할 때에는 프리팹으로 저장하면서 작업하시면 됩니다.
프리팹으로 저장하면 오브젝트를 나타내는 아이콘이 푸른색으로 변하고, 프리팹 상태에서는 편집모드에 진입해야 수정이 가능합니다.
4. 캔버스 Canvas
캔버스는 게임 화면 상에 UI를 보여주는 UI 전용 카메라로 이해하면 편합니다.
게임 화면에는 게임 그래픽과 UI가 그려집니다. 게임 그래픽과 UI는 분리되어 있으며 보통 UI는 게임 그래픽보다 위에 그려집니다. 그래픽 리소스는 게임 카메라가, UI는 캔버스가 찍어서 각각의 내용을 게임 화면 위에 순서대로 그려주는 것입니다.
씬에 게임 UI 관련 오브젝트(텍스트, 버튼 등)를 추가하면 캔버스 1개가 자동 생성됩니다. 특별히 의도한 경우를 제외하면, 캔버스는 씬에 단 1개만 존재합니다.
Canvas가 추가되면 EventSystem라는 오브젝트도 자동 생성되는데, 이 오브젝트는 UI의 입력을 처리하는 역할을 합니다. 그대로 두고 특별히 신경 쓰지 않아도 됩니다.
*유니티 UI 실습을 할 때에는 캔버스를 1개로 유지하고 캔버스 오브젝트 아래 자식 오브젝트로 UI를 구성하며 작업하면 됩니다.
또한, 캔버스는 해상도 대응 작업과도 밀접한 연관이 있습니다.
해상도 대응 관련 [캔버스 Canvas 설정 방법]은 아래 글을 참고하시기 바랍니다.
유니티 UI 작업을 시작하는 데 있어서 필요한 기초 개념을 짚어 봤습니다.
실제 게임 엔진에서 UI를 제작할 때에는 훨씬 더 많은 부분을 신경 써야 하지만, 시작이 반이고 한 걸음을 내딛는 것부터가 시작입니다.
