게임 UI 리소스 잘 만드는 방법 : 9 그리드 (feat.유니티 UI)
포토샵에서 디자인한 UI를 게임에서 사용하려면 먼저 UI 이미지들을 전부 리소스로 만들어야 하고, 각 UI 요소들을 빠짐없이 게임 프로젝트 안에 구성해 넣어야 합니다. 또한 용도에 따라 적절히 묶거나 나누어 저장하는 등 여러 작업 과정을 거치게 됩니다. UI 이미지는 게임에서 거의 항상 그려지기 때문에 게임의 성능을 높이기 위해서는 절약해서 사용해야하는 리소스 중 하나입니다.
게임 엔진 상에서 UI를 제작하기 위해서는 UI 이미지 리소스들을 미리 준비해 두어야 합니다. 디자인한 이미지를 리소스로 만든다는 것은 낭비되는 영역을 최소화하고, 재활용이 용이한 형태로 이미지를 줄이거나 자르거나 이어붙이는 작업을 의미합니다. UI 이미지를 리소스로 만드는 것에 어느 정도 익숙해지고 나면, 포토샵에서 처음 디자인을 구상하는 단계에서부터 정보 전달이 잘 되고 예쁜 디자인을 고민하는 동시에 지금 만들고 있는 디자인이 리소스로 잘 정리될 수 있는 형태인지까지 자연스럽게 고민하며 작업하게 됩니다.
그럼, UI 이미지 리소스를 어떻게 만드는지 작업 순서대로 한 단계씩 살펴보겠습니다.
1. 이미지 구성 살펴보기
2. 리소스 자르기 : 9 그리드 (9 grid)
3. 9 그리드 리소스 활용 (유니티 UI - Sliced Sprite)
1. 이미지 구성 살펴보기
예전에 만들어 두었던 단순한 팝업창으로 UI 리소스를 만들어 보겠습니다.
여기서 리소스로 만들어 볼 이미지는 팝업창의 배경 이미지입니다.
이 팝업창의 배경 이미지는 다음과 같이 구성되어 있음을 확인합니다.
1 맨 아래 깔리는 배경 이미지 1개
2 중간 내용 영역에 깔리는 어두운 이미지 1개
이렇게 이미지 리소스를 적절히 분리하여 따로 만들고 게임 엔진에서 조립하는 방식으로 UI를 만듭니다. 여기서는 이 중에서 1번 이미지를 리소스로 만들어 보겠습니다.
2. 리소스 자르기 : 9 그리드 (9 grid)
UI 이미지를 리소스화하는 대표적인 방법으로 9 그리드(9 Grid)라는 방법이 있습니다.
이미지를 가로로 3등분, 세로로 3등분 했을 때 상단 왼쪽, 상단 오른쪽, 하단 왼쪽, 하단 오른쪽 영역의 이미지만 크기와 형태가 보존되고, 나머지 영역은 최대한 작게 만들어서 가로/세로로 늘려서 처리하는 것입니다. 이런 기준으로 이미지를 나누면 총 9개의 사각형으로 구성되기 되기 때문에 9 그리드라고 부릅니다.
9 그리드 방식으로 리소스를 절약하려면 크기와 형태가 보존되는 꾸밈 요소를 넣을 수 있는 영역은 각 모서리 쪽의 4개 영역뿐이고, 나머지 영역에는 되도록 넣지 않아야 한다는 것입니다. 크기와 형태를 보존해야 하는 영역이 커지는 만큼 리소스의 크기도 커지기 때문입니다.
예를 들어 팝업창 배경의 전체 모양을 아무 기준 없이 불규칙하게 만들었다면 9그리드 방식으로 이미지를 줄일 수 없으니 리소스로서는 적절하지 않습니다. 디자인을 표현하려면 커다란 원본 이미지를 그대로 사용해야 하니 절약할 수 없기 때문입니다. 하나의 게임을 만들기 위해 제작해야 하는 UI가 적어도 수백 개는 족히 되는데, 모든 UI 이미지를 원본 그대로 쓴다면 게임을 실행시킬 수 없을지도 모릅니다.
리소스를 절약하는 것은 최적화를 담당하는 프로그래머들에게도 민감한 이슈이지만, 리소스 크기를 최대한 줄이는 것이 디자이너 입장에서도 더 예쁜 디자인을 많이 만들어 넣을 수 있는 방법임을 기억합시다. 9그리드의 이해하면 UI를 어떻게 디자인하는 것이 리소스 절약에 효과적일지 알 수 있습니다.
다시 본론으로 돌아가서, 팝업창의 배경 이미지를 다시 살펴보겠습니다. 세로 방향으로 그라데이션이 들어가 있는데, 그라데이션 영역도 1/2 ~ 1/4 정도로 적절히 크기를 줄인 후, 원하는 만큼 늘려서 사용할 수 있습니다. 엔진상에서 픽셀과 픽셀 사이에 적절한 중간색을 찾아 보정해 주기 때문에 자연스럽게 처리됩니다.
다음과 같이 작업합니다.
step.1 상단 왼쪽과 오른쪽, 하단 왼쪽과 오른쪽의 늘어나지 않는 영역 크기를 정하고 가이드라인 기능으로 표시해 둡니다.
step.2 세로로 늘어나는 영역 즉, 그라데이션 영역을 잘라서 새 레이어로 만듭니다. (선택툴로 선택 > 우클릭 > Layer Via Cut)
step.3 Ctrl+T를 눌러 잘라둔 이미지 영역을 선택한 상태에서 상단 메뉴를 보면 [Interpolation]이라는 옵션이 표시됩니다. 여기서 [Nearest Neighbor]를 선택한 후 이미지 크기를 줄이겠습니다. [Nearest Neighbor]는 이미지 크기를 키우거나 줄이더라도 픽셀을 날카롭고 깔끔하게 유지하는 옵션으로 UI 리소스를 제작할 때 편리합니다. (기본값은 Bicubic이고 이미지 가장자리를 부드럽게 처리하는 옵션(안티알리아싱)이기 때문이 이미지 크기를 변경하면 외곽의 1-2 픽셀 정도가 뿌옇게 처리됩니다. Nearest Neighbor를 UI 이미지 리소스를 만들 때에만 사용하고 평소에는 Bicubic를 사용하는 것이 좋습니다.)
step.4 그라데이션 영역을 세로 방향으로 1/3 정도 크기로 적절히 줄입니다.
step.5 가로 방향으로는 그라데이션이 없으므로 4픽셀 정도만 남기고 지우고 가장자리 부분을 끌어다 붙여서 정리하겠습니다.
크기와 형태가 보존되어야 하는 영역을 제외하고 다 줄였더니 이미지의 크기가 매우 작아졌습니다. 적절한 위치에 png 포맷으로 저장해 두겠습니다. 파일 이름은 Common_WindowBG처럼 나중에도 알아보기 쉽게 짓습니다.
다른 UI 이미지들도 9그리드를 염두에 두고 만들었다면 모두 이런 식으로 줄일 수 있습니다.
3. 9 그리드 리소스 활용 (유니티 UI - Sliced Sprite)
앞서 만든 9 그리드 이미지를 테스트해 봅시다. 여기서는 유니티 엔진을 사용해서 만드는 방법을 설명하지만 9 그리드 이미지는 대부분의 다른 게임 엔진에서도 사용할 수 있으니 개념을 잘 이해하고 활용하기 바랍니다.
유니티 엔진을 켜고, 2D Sprite라는 패키지가 추가되어 있는지 확인합니다. 최신 버전의 경우 기본 포함되어 있고, 예전 버전이라면 직접 추가해야 합니다.
상단 메뉴 Window > Package Manager를 선택하여 패키지 매니저를 열고, 상단 왼쪽 Package를 눌러 Unity Registry를 선택합니다. 조금 기다리면 목록에 많은 내용이 뜹니다. 모두 엔진의 추가 기능인 패키지들입니다.
이 중에서 2D Sprite를 선택하고 Install을 눌러 설치합니다.
프로젝트 리소스 폴더 안에 적당한 위치에 미리 만들어 둔 UI 이미지들을 복사해 넣습니다.
\Resources\GUI\Sprites\GUI_Common
모든 이미지를 다중 선택한 후, Texture Type을 Sprite (2D and UI)로 설정합니다. 그리고 앞서 만든 팝업창 배경 이미지를 선택하고 인스펙터에서 스프라이트 에디터(Sprite Editor)를 열어봅니다.
스프라이트 에디터 오른쪽 아래 패널에서 4개의 Border 크기를 리소스 이미지를 만들 때 정했던 크기와 같은 값으로 입력하고(1), 우측 상단에 Apply를 눌러 저장합니다(2).
L : left (왼쪽 고정 영역 크기)
R : right (오른쪽 고정 영역 크기)
T : top (위쪽 고정 영역 크기)
B : bottom (아래쪽 고정 영역 크기)
UI에 적용해 보겠습니다.
작업 영역에서 하이어라키 패널(Hierarchy)에서 우클릭 > UI > Image 를 선택해 이미지 오브젝트를 추가한 후 적당한 크기로 만들고 앞서 만든 이미지를 적용합니다.
원하는 모습대로 보이지 않습니다. 다음과 같이 Image Type을 Sliced 로 변경하겠습니다. 앞서 스프라이트 에디터에서 크기를 설정하여 분할(Slice)한 형태를 활용하겠다는 뜻입니다.
이제 원하는 모습으로 보입니다. 또한 이미지 크기를 줄이거나 늘려보아도 이미지가 깨지거나 왜곡되지 않고 깨끗하게 유지되는 것을 볼 수 있습니다.
UI 작업의 기본 중의 기본이라 할 수 있는 9 그리드에 대해 알아보았습니다.
다음에는 9 그리드 방식으로 해결할 수 없는 이미지들은 어떻게 리소스화할 수 있는지 살펴보도록 하겠습니다.
