유니티 UI로 3D 게임 정지 메뉴 만들기! 초보자도 쉽게 따라하는 꿀팁 대방출

유니티에서 세로 레이아웃 그룹으로 멋진 일시정지 메뉴 만들기!

자, 오늘은 유니티에서 3D 화면 위에 멋진 일시정지 메뉴를 만드는 방법을 알아볼 거야. '세로 레이아웃 그룹'이라는 걸 사용할 건데, 이게 뭐냐면 여러 개의 UI 요소들을 위에서 아래로, 또는 아래에서 위로 차곡차곡 쌓아주는 역할을 해.

1. UI 캔버스 만들기

먼저 UI를 보여줄 캔버스를 만들어야 해.

1. Hierarchy 창에서 마우스 오른쪽 버튼을 누르고 UI > Canvas를 선택해.
2. 캔버스를 만들었으면, 이제 화면 크기에 맞춰서 UI 크기를 조절해 줄 거야.
   • Canvas를 선택하고 Inspector 창에서 Canvas Scaler 컴포넌트를 찾아.
   • UI Scale Mode를 Scale With Screen Size로 바꾸고, Reference Resolution을 3840 (가로) x 2160 (세로)으로 설정해. 이건 4K 해상도를 기준으로 하겠다는 뜻이야.

2. 일시정지 메뉴 담을 빈 오브젝트 만들기

이제 일시정지 메뉴에 들어갈 내용들을 담을 빈 오브젝트를 만들자.

1. 만든 Canvas 위에서 마우스 오른쪽 버튼을 누르고 Create Empty를 선택해.
2. 이 오브젝트 이름을 Pause Menu라고 바꿔줘.
3. 화면을 더 잘 보기 위해 Scene 창 상단에 있는 2D 버튼을 누르고, F 키를 눌러서 Pause Menu 오브젝트에 집중해 보자.

3. 세로 레이아웃 그룹 붙이기

이제 Pause Menu 오브젝트에 세로로 UI 요소들을 정렬해 줄 Vertical Layout Group 컴포넌트를 붙일 거야.

1. Pause Menu 오브젝트를 선택하고 Inspector 창에서 Add Component 버튼을 눌러.
2. 검색창에 Vertical Layout Group이라고 치고 선택해.

4. 버튼 만들기 (맛보기)

세로 레이아웃 그룹이 어떻게 작동하는지 보기 위해 임시 버튼을 몇 개 만들어 볼게.

1. Pause Menu 오브젝트 위에서 마우스 오른쪽 버튼을 누르고 UI > Image를 선택해.
2. 이 이미지의 색깔을 파란색으로 바꿔서 잘 보이게 하자.
3. 이 이미지 오브젝트를 Ctrl + D를 눌러서 몇 개 복사해 봐.
4. 이제 Pause Menu 오브젝트를 선택하면, 복사한 이미지들이 위에서부터 아래로 자동으로 정렬되는 걸 볼 수 있을 거야!
   • Vertical Layout Group 컴포넌트에서 Child Alignment를 바꿔보면 버튼들이 어디에 정렬될지 바꿀 수 있어. (예: Middle Center로 하면 가운데 정렬돼.)
   • Control Child Size에서 Width와 Height를 체크하면, 버튼들이 Pause Menu 오브젝트의 가로세로를 꽉 채우게 돼.
   • Padding 메뉴에서 Spacing 값을 조절하면 버튼들 사이에 간격을 줄 수 있어.

5. 진짜 버튼 만들기 (Prefab 활용)

이제 진짜 멋진 버튼을 만들어 볼 건데, 일일이 만드는 것보다 미리 만들어진 버튼 Prefab을 가져와서 사용하는 게 훨씬 편해.

1. Pause Menu 오브젝트를 선택하고, Add Component를 눌러 Image 컴포넌트를 삭제해. (아까 맛보기로 만든 이미지들은 이제 필요 없어.)
2. 유니티 에셋 스토어에서 받은 'Interface Modern Menus' 팩에 있는 버튼 Prefab을 가져올 거야. (없으면 직접 버튼을 만들어도 돼.)
   • Assets 폴더에서 Interface Modern Menus > Prefabs > Buttons로 가서 button_menu_basic_01 같은 버튼 Prefab을 Pause Menu 오브젝트 아래로 드래그해서 넣어.
3. 가져온 버튼 Prefab을 선택하고, Inspector 창에서 Image 컴포넌트를 삭제해. (이 버튼 Prefab에 이미 애니메이션 같은 게 있어서 충돌할 수 있거든.)
4. 이제 버튼 Prefab의 크기를 조절해서 Pause Menu 오브젝트에 꽉 차게 만들어 줘.
5. 버튼 Prefab의 Hierarchy를 열어서 Label 부분을 찾고, 텍스트를 Resume으로 바꿔줘. 폰트 크기도 키워주자.
6. 이 버튼 Prefab의 이름을 Button Resume으로 바꿔주고, 아까 맛보기로 만들었던 이미지들은 삭제해.
7. Button Resume을 Ctrl + D로 복사해서 4개 더 만들고, 각각 Button Options, Button Quit 등으로 이름을 바꿔줘.

6. 제목과 뒤 배경 추가하기

이제 일시정지 메뉴에 제목과 뒤 배경을 추가해 보자.

1. Pause Menu 오브젝트 아래에 Panel Modern Menus pop-up 1 같은 패널 Prefab을 드래그해서 넣어.
2. 이 패널이 세로 레이아웃 그룹에 영향을 받지 않도록 Add Component를 눌러 Layout Element 컴포넌트를 추가하고, Ignore Layout 체크박스를 선택해 줘.
3. 패널의 앵커를 Stretch로 설정하고, 위치 값을 0으로 맞춰서 화면을 꽉 채우게 해.
4. 패널 Prefab을 Unpack해서 내용을 수정할 수 있게 만들고, 필요 없는 Content 부분을 삭제해.
5. 이제 Pause Menu 오브젝트를 선택하고 Vertical Layout Group 컴포넌트에서 Padding 값을 조절해서 버튼들과 패널 사이에 간격을 좀 더 예쁘게 만들어 줘.
6. 마지막으로 제목을 추가할 거야. Pause Menu 오브젝트 위에서 마우스 오른쪽 버튼을 누르고 UI > Text - TextMeshPro를 선택해.
7. 이 텍스트 오브젝트에도 Layout Element 컴포넌트를 추가하고 Ignore Layout을 체크해 줘.
8. 텍스트가 화면 상단에 꽉 차도록 크기와 위치를 조절하고, 텍스트 내용을 Paused로 바꿔줘.
9. 폰트도 'Modern Menus' 팩에 있는 걸로 바꿔주고, 폰트 스타일을 대문자로, 폰트 크기를 키워줘.
10. 텍스트를 가로세로 가운데 정렬하면 끝!

7. 확인하기

이제 게임을 실행해서 일시정지 메뉴가 잘 나오는지, 버튼들이 제대로 작동하는지 확인해 보자. Pause Menu 오브젝트의 크기를 조절하면서 UI가 화면 크기에 맞춰 잘 늘어나는지도 확인해 봐.

이렇게 하면 세로 레이아웃 그룹을 이용해서 멋진 일시정지 메뉴를 쉽게 만들 수 있어! 혹시 더 궁금한 점이 있다면 댓글로 남겨줘!