게임 UI는 그림처럼 보이지만 실제로는 엔진에 들어가 조립되는 부품입니다. 그래서 포토샵에서도 예쁘게 그리는 것만큼 '잘라 쓰기 좋게' 만드는 것이 중요합니다. 게임 UI 작업을 처음 할 때 알아야 할 포토샵 설정과 리소스 정리 방법을 정리합니다.

캔버스와 기본 설정

UI 작업은 대상 기기의 화면 비율과 해상도를 기준으로 캔버스를 잡습니다. 팀마다 기준 해상도가 있으므로 먼저 확인하고, 없다면 주요 출시 기기의 비율로 정한 뒤 다른 비율에서 어떻게 늘어나는지 함께 검토합니다. 색상 모드는 RGB, 단위는 픽셀로 둡니다.

• 안내선과 격자: 화면 가장자리 여백과 버튼 간격을 맞추는 기준선을 미리 만들어 둡니다.
• 안전 영역: 휴대폰 노치나 둥근 모서리에 가려지는 부분을 표시해 중요한 버튼이 들어가지 않게 합니다.
• 아트보드: 로비, 인벤토리, 상점처럼 화면별로 아트보드를 나누면 한 파일에서 여러 화면을 비교하기 쉽습니다.

수정에 강한 파일 만들기

UI는 기획 변경으로 버튼 크기나 문구가 바뀌는 일이 잦습니다. 그래서 확대·축소해도 깨지지 않는 방식으로 만드는 것이 기본입니다.

글자는 가능하면 이미지에 굽지 않고 엔진의 텍스트 기능으로 넣습니다. 다국어 출시나 문구 수정 때 이미지를 다시 만들 필요가 없어지기 때문입니다.

9분할(9-slice) 리소스 이해하기

버튼이나 창 배경은 크기가 여러 가지로 쓰입니다. 이때 이미지를 아홉 칸으로 나눠 모서리는 그대로 두고 가운데와 변만 늘리는 방식을 9분할이라고 합니다. 이렇게 하면 작은 이미지 한 장으로 다양한 크기의 창을 만들 수 있어 용량도 아낄 수 있습니다.

1. 모서리 장식은 네 귀퉁이에만 몰아 두고, 변과 가운데는 늘어나도 어색하지 않은 단색이나 단순한 패턴으로 만듭니다.
2. 늘어나는 영역에는 그라데이션이나 큰 무늬를 넣지 않습니다. 늘리면 무늬가 뭉개집니다.
3. 엔진에서 어느 픽셀부터 늘릴지 표시할 수 있도록 개발자에게 모서리 크기를 함께 전달합니다.

리소스 내보내기와 전달

• 내보내기 기능(파일 > 내보내기)이나 레이어별 내보내기를 활용해 PNG로 뽑습니다. 투명 배경이 필요한 리소스는 알파 채널을 유지합니다.
• 아이콘처럼 같은 크기가 반복되는 리소스는 크기를 통일하고 여백 규칙을 정해 둡니다.
• 눌림, 비활성 등 버튼 상태별 이미지를 빠짐없이 준비합니다. 한 상태만 만들고 넘기면 개발 단계에서 다시 요청이 옵니다.
• 최종 화면 시안과 잘라 낸 리소스, 크기·간격 정보를 함께 전달하면 엔진 조립 단계의 오차가 줄어듭니다.

파일 이름도 리소스의 일부입니다. 화면 이름, 요소 종류, 상태를 순서대로 붙이는 규칙(예: shop_btn_buy_pressed)을 정해 두면 리소스가 수백 개로 늘어나도 찾고 교체하기 쉽습니다. 신입 포트폴리오에서도 이런 정리 습관은 실무 이해도를 보여 주는 요소가 됩니다.

UI 디자인은 그리기 이상의 일

게임 UI는 정보가 많은 화면에서 플레이어가 무엇을 먼저 봐야 하는지 정리하는 일입니다. 포토샵 기술과 함께 기존 게임 화면을 분석해 버튼 위치, 정보 우선순위, 화면 이동 흐름을 따라 그려 보는 연습을 하면 작업의 이유를 설명할 수 있는 디자이너가 됩니다.

SBS아카데미게임학원 컨셉캐릭터(게임원화) 과정은 포토샵 채색과 디자인 베리에이션, 포트폴리오 시트 구성을 다루어 UI 리소스에 필요한 포토샵 표현력을 기르는 데 연결됩니다. UI를 본격적으로 준비한다면 게임UIUX 과정도 함께 살펴보면 좋습니다.

자주 묻는 질문