피그마는 웹과 앱 디자인 툴로 알려져 있지만, 게임 UI 현장에서도 화면 구조를 잡고 흐름을 검토하는 용도로 쓰는 팀이 늘고 있습니다. 브라우저에서 여러 사람이 같은 파일을 동시에 볼 수 있어 기획자와 디자이너의 소통이 빨라지기 때문입니다. 게임 UI 설계에 피그마를 어떻게 활용하는지 정리합니다.

게임 UI 작업에서 피그마의 자리

게임 UI 작업은 대략 '화면 구조 설계 → 비주얼 디자인 → 리소스 제작 → 엔진 조립' 순서로 진행됩니다. 피그마는 주로 앞 단계인 구조 설계와 흐름 검토에 강합니다. 화려한 질감이나 판타지풍 장식이 들어간 최종 리소스는 포토샵으로 만드는 경우가 많고, 실제 화면은 게임 엔진의 UI 시스템으로 조립합니다.

와이어프레임으로 정보 우선순위 정하기

와이어프레임은 색과 장식을 뺀 화면 설계도입니다. 게임 화면은 정보가 많기 때문에 무엇을 크게, 무엇을 작게 보여 줄지 먼저 정해야 합니다. 예를 들어 인벤토리 화면이라면 아이템 목록, 선택한 아이템의 정보, 장착·판매 버튼, 정렬 기능의 위치를 박스로 배치하고 손가락이 닿기 쉬운 위치인지 검토합니다.

• 기기 비율별 프레임을 만들어 화면이 넓어지거나 좁아질 때 요소가 어떻게 배치될지 미리 확인합니다.
• 휴대폰을 두 손으로 쥐었을 때 엄지가 닿는 범위를 고려해 자주 누르는 버튼을 배치합니다.
• 실제 게임 데이터처럼 긴 아이템 이름, 큰 숫자를 넣어 보며 글자가 넘치지 않는지 확인합니다.

컴포넌트와 오토 레이아웃

컴포넌트는 버튼, 아이템 슬롯, 탭처럼 반복되는 요소를 원본 하나로 관리하는 기능입니다. 원본을 고치면 모든 화면의 복사본이 함께 바뀝니다. 베리언트를 쓰면 기본, 눌림, 비활성, 선택됨 같은 상태를 하나의 컴포넌트 안에 묶을 수 있어 버튼 상태 누락을 막는 데 도움이 됩니다.

오토 레이아웃은 내용에 따라 크기와 간격이 자동으로 조정되게 하는 기능입니다. 보상 목록에 아이템이 세 개일 때와 다섯 개일 때 간격이 저절로 맞춰지므로, 엔진에서 구현할 때의 레이아웃 규칙을 미리 시험해 볼 수 있습니다. 엔진의 UI 레이아웃 기능과 개념이 비슷해 개발자와 대화하기도 수월합니다.

프로토타입으로 흐름 검증하기

1. 로비, 상점, 상품 상세, 구매 확인, 구매 완료처럼 하나의 흐름에 필요한 화면을 모두 만듭니다.
2. 버튼마다 클릭 시 이동할 화면을 연결하고, 팝업은 겹쳐 나타나도록 설정합니다.
3. 휴대폰에서 프로토타입을 열어 실제로 눌러 보며 몇 번 만에 목적지에 도착하는지 셉니다.
4. 뒤로 가기, 취소, 재화 부족 같은 예외 상황 화면이 빠지지 않았는지 확인합니다.

이 과정은 시스템 기획자의 UI 흐름도와 짝을 이룹니다. 기획 문서의 흐름을 프로토타입으로 직접 눌러 보면 문서로는 보이지 않던 불편함이 드러납니다.

개발자와 협업할 때

• 화면마다 요소 이름을 엔진 오브젝트 이름 규칙과 맞추면 구현 단계의 혼선이 줄어듭니다.
• 여백, 글자 크기, 색 값은 스타일과 변수로 정리해 두면 개발자가 수치를 그대로 가져갈 수 있습니다.
• 코멘트 기능으로 화면 위에 직접 질문과 수정 요청을 남기면 메신저보다 맥락이 분명해집니다.

피그마는 도구일 뿐, 좋은 게임 UI는 장르와 플레이어 행동에 대한 이해에서 나옵니다. SBS아카데미게임학원 게임UIUX 과정은 기존 게임 UI 분석, 모작을 통한 레이아웃 이해, 창작 UI 제작과 포트폴리오까지 단계적으로 진행해 UI 설계의 기본 소양을 쌓을 수 있습니다.

자주 묻는 질문