[Game Dev] 게임 UI의 단위와 역할

About this offer

게임 UI는 이미지나 버튼 같은 작은 요소부터 메인 화면, 인벤토리, HUD처럼 큰 묶음까지 다양한 단위가 있음 UI 단위를 구분하는 기준 구성 규모: 기본 요소인지, 여러 요소를 묶은 영역인지, 화면 전체인지 사용 역할: 조작, 상태 표시, 알림, 확인 등 어떤 목적을 가지는지 표시, 상호작용 방식: 다른 UI 위에 겹치는지, 뒤쪽 UI의 조작을 제한하는지 주의 사항 프로젝트와 팀에 따라 다를 수 있음 모든 단위가 하나의 엄격한 계층을 이루는 것은 아님 예를 들면 HUD는 사용 목적을 나타내며 내부에 Panel, Widget, Control 등이 포함될 수 있음 이 글에서는 UI의 구성과 역할을 설명하기 위해 용어를 구분하며, 엔진이나 프레임워크의 공식 타입 분류와는 다를 수 있음 (Unreal UMG에서는 Text, Button도 Widget으로 봄) UI 단위 정리 Element - 기본 구성 요소 이 글에서는 이미지, 텍스트, 구분선처럼 UI를 구성하는 기본적인 시각 요소를 Element로 구분함 다른 UI 단위를 구성하는 재료로 사용됨 배경 이미지 아이콘 이름, 수량 텍스트 구분선 등 Element 하나가 독립적인 기능을 가질 필요는 없음 모든 Element를 별도의 재사용 단위로 분리할 필요는 없음 예: Unity에서 아이템 슬롯 Prefab을 구성하는 Element(아이템 이름 Text, 아이템 아이콘 Image)들을 별도의 Prefab으로 만들 필요 없음 특정 화면에서만 사용하는 장식이나 문구는 해당 화면 내부에서 관리해도 됨 Control - 사용자 입력 요소 사용자의 조작을 받아 명령이나 값 변경을 전달하는 UI 클릭, 선택, 드래그, 문자 입력 등의 상호작용을 담당 Button, Toggle, Slider, Dropdown, Input Field 등 Control은 여러 Element로 구성될 수 있음 Button: 배경 Image + 버튼 문구 Text + 아이콘 Image Slider: 손잡이 Image + 채움 영역 Image + 트랙 Image 외형뿐 아니라 상호작용 상태도 고려해야 함 기본 상태 눌린 상태 선택, 체크 상태 포커스 상태 상호작용 불가 상태 등 여러 곳에서 동일한 외형과 동작을 사용하는 경우 독립적인 재사용 단위로 분리할 수 있음 예: 공통 확인 버튼, 닫기 버튼, 설정용 토글 Widget - 작은 기능 단위 여러 Element나 Control을 묶어 하나의 기능 또는 정보를 표현하는 단위 다른 화면에서 재사용하기 좋은 구성 단위 CurrencyDisplay: 재화 아이콘 + 보유량 ItemSlot: 아이템 아이콘 + 수량 + 선택 표시 HealthBar: 체력 게이지 + 현재 체력 SkillSlot: 스킬 버튼 + 쿨타임 + 사용 불가 표시 QuestEntry: 퀘스트 이름 + 진행도 + 상태 표시 구체적인 역할에 따라 ItemSlot, QuestEntry, CurrencyDisplay처럼 이름을 붙이기도 함 표시할 데이터를 전달받아 자신의 영역을 갱신하도록 구성할 수 있음 재사용뿐 아니라 기능별 책임 분리와 유지보수를 위해 구성할 수도 있음 외부에서 재사용하기 쉽도록 책임 범위를 작게 유지하는 편이 좋음 Widget은 프레임워크에 따라 Button이나 Text까지 포함하는 넓은 용어로 사용되기도 함 Panel - 관련 기능을 모은 영역 관련된 정보와 조작 기능을 하나의 구역으로 묶은 단위 화면 전체 또는 화면 일부를 차지할 수 있음 항상 표시하거나 필요할 때만 열고 닫을 수 있음 예시 ProfilePanel 닉네임, 레벨, 경험치 EquipmentPanel 장비 슬롯, 장비 능력치 ItemDetailPanel 아이템 이름, 설명, 능력치, 장착 버튼 인벤토리 화면에서는 아이템 목록 영역과 상세 정보 영역을 각각 Panel로 나눌 수도 있음 Screen / Page - 화면 단위 사용자가 하나의 화면으로 인식하는 큰 단위 여러 Panel, Widget, Control을 포함 화면 진입, 이탈과 전환의 기준으로 사용 예시 MainScreen: 메인 화면 ShopScreen: 상점 화면 InventoryScreen: 인벤토리 화면 ResultScreen: 결과 화면 Screen 수준에서 다음과 같은 흐름을 관리할 수 있음 화면에 진입할 때 필요한 정보 표시 하위 Panel 사이의 선택 상태 전달 다른 화면으로 이동하는 요청 전달 화면을 벗어날 때 입력과 이벤트 연결 정리 이러한 흐름은 Screen에 직접 구현하거나, Presenter·Controller·Flow 등 별도 객체에서 조율할 수 있음 Screen과 Page는 프로젝트에 따라 비슷하게 사용되거나, Screen 내부의 전환 영역을 Page라고 구분하기도 함 Screen 하나가 엔진의 Scene이나 Level 하나와 반드시 대응되는 것은 아님 Popup / Dialog - 임시 표시 단위 현재 화면을 유지하면서 추가 정보나 선택지를 제공하는 UI 일반적으로 기존 화면 위에 임시로 표시됨 Popup 보상이나 추가 정보, 부가 기능을 표시하는 창 예: 보상 팝업, 설정 팝업 Dialog 사용자의 확인이나 선택을 요청하는 창 예: 구매 확인, 게임 종료 확인 모든 임시 창을 Popup이라 부르기도 함 Popup / Dialog는 뒤쪽 UI와의 상호작용 허용 여부에 따라 Modal과 Modeless로 구분할 수 있음 Modal 닫거나 응답하기 전까지 뒤쪽 UI와의 상호작용을 제한 예: 구매 확인창 Modeless 표시된 상태에서도 뒤쪽 UI와 상호작용 가능 예: 이동하면서 확인할 수 있는 정보창 여러 창이 겹치면 입력 우선순위, 닫기 순서, 포커스 복귀도 고려해야 함 HUD - 플레이 중 정보와 조작 Heads-Up Display의 약자 게임을 플레이하면서 필요한 상태 정보를 제공하는 UI 모바일에서는 전투 버튼이나 가상 조이스틱 같은 조작 UI를 함께 묶기도 함 대표적인 구성 체력, 마나 점수, 남은 시간 현재 웨이브 미니맵 탄약 수 스킬 버튼, 쿨타임 HUD는 크기보다 플레이 중 사용한다는 목적에 따른 분류 플레이 영역을 지나치게 가리지 않아야 함 중요한 정보를 빠르게 읽고 조작할 수 있어야 함 Overlay - 다른 UI 위에 겹치는 표시 화면이나 다른 UI 위에 겹쳐 표시하는 단위 또는 레이어 화면 전환, 로딩 표시, 입력 차단 등에 사용 예시 LoadingOverlay 로딩 상태와 진행 정보 표시 FadeOverlay 화면 전환 시 밝아지거나 어두워지는 효과 DimOverlay 뒤쪽 화면을 어둡게 표시 InputBlocker 뒤쪽 UI로 전달되는 입력 차단 화면 전체 또는 일부를 덮을 수 있음 표시 순서와 입력 처리 순서를 고려해야 함 Popup을 Overlay 레이어에 배치할 수도 있음 Toast / Tooltip - 알림과 보충 설명 Toast 짧은 메시지를 전달하고 일정 시간이 지나면 사라지는 알림 일반적으로 사용자의 응답을 요구하지 않음 예시 "저장되었습니다" "골드가 부족합니다" "아이템을 획득했습니다" 여러 알림이 연속해서 발생한다면 표시 개수, 대기열, 중복 메시지 처리 등을 정할 수 있음 Tooltip 특정 UI 요소나 대상에 대한 보충 설명 대상과 연결된 문맥을 제공 예시 아이템 능력치 스킬 효과 상태 효과 설명 표시 방식 PC: 마우스 올리기, 키보드 포커스 Mobile: 터치, 길게 누르기 화면 밖으로 잘리지 않도록 표시 위치를 조절하고, 설명 대상과의 관계가 명확하게 보이도록 배치하는 것이 중요 재사용 단위를 나누는 기준 UI를 분리할 때 이름이나 크기뿐 아니라 재사용성과 책임 범위를 고려해야 함 아래 이유들이 어느 정도 충족된다면 프리팹이나 재사용 컴포넌트로 분리할 수 있음 여러 화면에서 반복 사용되는지 확인 버튼 공통 디자인을 한 번에 수정해야 하는지 목록 항목처럼 반복 생성되는지 아이템 슬롯 독립적으로 열고 닫는지 별도로 관리할 만큼 기능과 책임이 명확한지