Unity IMGUI 사용자 인터페이스(UI) 생성 가이드
소개
Unity의 Immediate Mode GUI(IMGUI)를 사용하여 게임의 사용자 인터페이스를 만들 수 있습니다. IMGUI는 두 가지 레이아웃 모드, 즉 고정 레이아웃과 자동 레이아웃을 지원하여 UI 요소의 배치를 효율적으로 수행할 수 있도록 돕습니다.
레이아웃 모드
IMGUI 시스템은 두 가지 모드를 제공합니다: - 고정 레이아웃: 사전에 정의된 위치에 UI 요소를 배치합니다. - 자동 레이아웃: UI 요소의 수를 모르는 경우 유용합니다. 컨트롤 함수 호출 시 GUI 대신 GUILayout을 사용해 자동으로 배치됩니다.
사용 예:
void OnGUI () {
// 고정 레이아웃
GUI.Button(new Rect(25, 25, 100, 30), "고정 레이아웃 버튼");
// 자동 레이아웃
GUILayout.Button("자동 레이아웃 버튼");
}
컨트롤 정렬
컨트롤의 배치 및 그룹화 방법은 사용 중인 레이아웃 모드에 따라 다릅니다. - 고정 레이아웃 모드: GUI.BeginGroup()과 GUI.EndGroup()을 사용하여 그룹을 정의합니다. - 자동 레이아웃 모드: GUILayout.BeginArea(), GUILayout.BeginHorizontal(), GUILayout.BeginVertical()와 같은 함수를 사용하여 컨트롤 그룹화가 가능합니다.
고정 레이아웃 - 그룹 사용 예
void OnGUI () {
// 화면 중앙에 그룹을 만듭니다.
GUI.BeginGroup(new Rect(Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
GUI.Box(new Rect(0, 0, 100, 100), "그룹 위치");
GUI.Button(new Rect(10, 40, 80, 30), "클릭하세요");
GUI.EndGroup ();
}
자동 레이아웃 - 영역
자동 레이아웃에서 영역은 UI 요소를 배치할 위치를 설정하는 용도로 사용됩니다. 컨트롤은 지정된 영역의 왼쪽 상단에서부터 배치됩니다.
영역 사용 예
void OnGUI () {
GUILayout.Button("영역 밖에 있는 버튼");
GUILayout.BeginArea(new Rect(Screen.width / 2, Screen.height / 2, 300, 300));
GUILayout.Button("영역 안에 있는 버튼");
GUILayout.EndArea ();
}
가로 및 세로 그룹
자동 레이아웃에서는 수평 및 수직 그룹을 사용할 수 있어, 여러 컨트롤을 쉽게 배치할 수 있습니다.
가로 및 세로 그룹 사용 예
void OnGUI() {
GUILayout.BeginArea(new Rect(0, 0, 200, 60));
GUILayout.BeginHorizontal();
if (GUILayout.RepeatButton("버튼 증가")) {
// 로직
}
GUILayout.BeginVertical();
GUILayout.Box("슬라이더 값: ");
// 슬라이더 코드
GUILayout.EndVertical();
GUILayout.EndHorizontal();
GUILayout.EndArea();
}
GUILayoutOptions 사용
GUILayoutOptions을 사용하여 UI 컨트롤의 크기를 조정할 수 있습니다. 예를 들어, 버튼의 너비를 특정 값으로 설정할 수 있습니다.
GUILayoutOptions 사용 예
void OnGUI() {
GUILayout.BeginArea(new Rect(100, 50, Screen.width - 200, Screen.height - 100));
GUILayout.Button("보통 자동 레이아웃 버튼");
GUILayout.Button("너비 오버라이딩", GUILayout.Width(95));
GUILayout.EndArea();
}
결론
Unity의 IMGUI를 사용하면 강력하고 유연한 UI 디자인이 가능합니다. 위의 예제를 참고하여 더욱 복잡한 UI를 만들기 위해 다양한 컨트롤 및 배치 방식을 조합해보세요.