layout group의 종류 3가지 실무 적합활용이 궁금합니다.

SSSO

投稿した質問数 1

0

안녕하세요, 인프런 AI 인턴입니다.

SSSO님, Unity UI의 세 가지 Layout Group은 “자식 UI를 어떤 방향과 규칙으로 배치할 것인가”에 따라 선택하시면 됩니다.

1. Horizontal Layout Group

자식 UI를 가로 방향으로 한 줄에 배치할 때 사용합니다.

예시는 다음과 같습니다.

• 상단 네비게이션 메뉴
  
• 인벤토리의 아이템 슬롯
  
• 체력, 마나, 경험치 등의 상태 표시줄
  
• 버튼이 가로로 나열된 팝업창
  
• 플레이어 파티원 목록
  
• 캐릭터 스탯 한 줄 표시
  
• 상점의 가격, 재화 아이콘, 구매 버튼 배치
  
• 채팅 메시지에서 프로필 이미지와 텍스트를 가로 배치
  

예를 들어 상점 아이템 하나를 다음과 같이 구성할 수 있습니다.

[아이템 아이콘] [아이템 이름] [가격] [구매 버튼]

이 구조의 최상위 오브젝트에 Horizontal Layout Group을 적용하면 각 요소의 크기나 간격을 자동으로 관리할 수 있습니다.

특히 아이템 이름의 길이가 달라지거나 구매 버튼의 위치를 항상 오른쪽에 유지해야 할 때 유용합니다.

ShopItem
└─ Horizontal Layout Group
   ├─ ItemIcon
   ├─ ItemName
   ├─ Price
   └─ BuyButton

여기서 Layout Element를 함께 사용하면 특정 요소에 우선순위를 줄 수 있습니다.

예를 들어 아이템 이름에 Flexible Width를 주면 아이템 이름이 남은 공간을 차지하고, 아이콘과 가격 및 버튼은 고정된 크기로 유지할 수 있습니다.

2. Vertical Layout Group

자식 UI를 세로 방향으로 쌓을 때 사용합니다.

예시는 다음과 같습니다.

• 설정 메뉴
  
• 옵션 목록
  
• 퀘스트 목록
  
• 대화 선택지
  
• 우편함 목록
  
• 스킬 설명 패널
  
• 여러 줄로 구성된 팝업창
  
• 채팅 메시지 목록
  
• 튜토리얼 단계 목록
  
• 게임 결과 화면의 항목 목록
  

예를 들어 설정창은 다음과 같이 구성할 수 있습니다.

SettingsPanel
└─ Vertical Layout Group
   ├─ SoundOption
   ├─ GraphicOption
   ├─ ControlOption
   └─ LanguageOption

각 옵션의 높이가 다르거나 옵션이 추가 및 삭제되더라도 Vertical Layout Group이 자동으로 위에서 아래로 배치해 줍니다.

Vertical Layout Group은 단순히 텍스트를 반복해서 표시하는 용도가 아니라, “행 단위의 UI 목록”을 만드는 데 많이 사용합니다.

예를 들어 하나의 설정 항목을 다음처럼 구성할 수 있습니다.

SoundOption
└─ Horizontal Layout Group
   ├─ Label
   └─ Slider

그리고 여러 개의 SoundOption, GraphicOption, ControlOption을 부모의 Vertical Layout Group 안에 넣는 방식입니다.

즉, 실무에서는 Layout Group을 중첩해서 사용하는 경우가 매우 많습니다.

SettingsPanel
└─ Vertical Layout Group
   ├─ SoundOption
   │  └─ Horizontal Layout Group
   │     ├─ Label
   │     └─ Slider
   ├─ GraphicOption
   │  └─ Horizontal Layout Group
   │     ├─ Label
   │     └─ Dropdown
   └─ ControlOption
      └─ Horizontal Layout Group
         ├─ Label
         └─ Button

3. Grid Layout Group

자식 UI를 행과 열이 있는 격자 형태로 배치할 때 사용합니다.

예시는 다음과 같습니다.

• 인벤토리
  
• 캐릭터 선택 화면
  
• 스킬 목록
  
• 업적 목록
  
• 카드 목록
  
• 아이템 도감
  
• 스킨 선택 화면
  
• 갤러리
  
• 맵 선택 화면
  

예를 들어 아이템 슬롯을 일정한 크기로 여러 칸 배치하는 경우에는 Grid Layout Group이 적합합니다.

InventoryPanel
└─ Grid Layout Group
   ├─ ItemSlot
   ├─ ItemSlot
   ├─ ItemSlot
   ├─ ItemSlot
   └─ ItemSlot

Grid Layout Group은 모든 자식 요소를 동일한 셀 크기와 간격으로 배치하는 데 강점이 있습니다.

Grid Layout Group만 사용하면 안 되는 이유

Grid Layout Group은 모든 항목을 격자 셀에 맞추는 방식입니다.

따라서 다음과 같은 상황에서는 불편할 수 있습니다.

• 요소마다 크기가 다른 경우
  
• 텍스트 길이에 따라 너비가 달라져야 하는 경우
  
• 특정 요소만 남은 공간을 차지해야 하는 경우
  
• 버튼이나 슬라이더를 오른쪽에 고정해야 하는 경우
  
• 세로 목록 안에 가로로 구성된 행이 필요한 경우
  
• 항목별 높이가 서로 다른 경우
  

예를 들어 아래와 같은 설정 UI는 Grid Layout Group보다 Vertical Layout Group과 Horizontal Layout Group의 조합이 더 적합합니다.

[음량]       [슬라이더]
[해상도]     [드롭다운]
[전체 화면]  [토글]

각 행의 내부 구조는 가로 배치이고, 여러 행은 세로로 배치되어 있기 때문입니다.

Grid Layout Group으로 구현할 수도 있지만, 각 열의 크기와 정렬을 억지로 맞춰야 하므로 유지보수가 어려워질 수 있습니다.

Horizontal Layout Group과 Vertical Layout Group을 응용하는 구조

1. 리스트 아이템 구성

세로로 목록을 만들고 각 목록의 내부는 가로로 구성하는 형태입니다.

QuestList
└─ Vertical Layout Group
   ├─ QuestItem
   │  └─ Horizontal Layout Group
   │     ├─ QuestIcon
   │     ├─ QuestInfo
   │     └─ Reward
   ├─ QuestItem
   └─ QuestItem

퀘스트 목록, 우편함, 상점 목록, 파티원 목록에서 자주 사용하는 구조입니다.

2. 캐릭터 스탯 창

StatsPanel
└─ Vertical Layout Group
   ├─ StatRow
   │  └─ Horizontal Layout Group
   │     ├─ Icon
   │     ├─ StatName
   │     └─ StatValue
   ├─ StatRow
   └─ StatRow

각 스탯 행은 가로로 구성하고, 여러 스탯 행은 세로로 쌓습니다.

3. 채팅 UI

채팅창 전체는 Vertical Layout Group으로 구성하고, 각각의 채팅 메시지는 Horizontal Layout Group으로 만들 수 있습니다.

ChatContent
└─ Vertical Layout Group
   ├─ ChatMessage
   │  └─ Horizontal Layout Group
   │     ├─ ProfileImage
   │     └─ MessageBubble
   ├─ ChatMessage
   └─ ChatMessage

메시지 내용에 따라 말풍선의 높이가 달라져야 한다면 Content Size Fitter와 함께 사용할 수 있습니다.

다만 채팅처럼 항목이 많이 생성되는 UI에서는 성능을 위해 오브젝트 풀링을 함께 고려하는 것이 좋습니다.

4. 버튼과 아이콘을 함께 배치하는 메뉴

MenuPanel
└─ Vertical Layout Group
   ├─ MenuButton
   │  └─ Horizontal Layout Group
   │     ├─ MenuIcon
   │     ├─ MenuText
   │     └─ ArrowIcon
   ├─ MenuButton
   └─ MenuButton

메뉴 항목의 텍스트 길이가 달라도 아이콘, 텍스트, 화살표의 위치를 일정하게 유지할 수 있습니다.

5. 카드형 UI

카드 전체는 Vertical Layout Group으로 구성하고, 카드 내부의 제목 영역이나 정보 영역은 Horizontal Layout Group으로 구성할 수 있습니다.

CharacterCard
└─ Vertical Layout Group
   ├─ Header
   │  └─ Horizontal Layout Group
   │     ├─ CharacterName
   │     └─ Level
   ├─ CharacterImage
   └─ Footer
      └─ Horizontal Layout Group
         ├─ Health
         ├─ Attack
         └─ Defense

캐릭터 선택창, 장비 정보창, 상품 카드 등에 활용할 수 있습니다.

세 가지 Layout Group의 선택 기준

간단하게 정리하면 다음과 같습니다.

Grid Layout Group
→ 동일한 크기의 요소를 행과 열로 배치할 때

Horizontal Layout Group
→ 요소를 한 줄의 가로 구조로 배치할 때

Vertical Layout Group
→ 요소를 한 줄씩 세로 목록으로 배치할 때

실무에서는 하나만 사용하는 것보다 다음과 같이 조합하는 경우가 많습니다.

전체 목록: Vertical Layout Group
각 항목 내부: Horizontal Layout Group
각 항목 안의 작은 아이콘 목록: Grid Layout Group

예를 들어 인벤토리에서도 단순히 아이템 슬롯만 격자로 배치하는 것이 아니라, 다음처럼 구성할 수 있습니다.

InventoryWindow
└─ Vertical Layout Group
   ├─ Header
   │  └─ Horizontal Layout Group
   │     ├─ Title
   │     ├─ SortButton
   │     └─ CloseButton
   ├─ GridArea
   │  └─ Grid Layout Group
   │     ├─ ItemSlot
   │     ├─ ItemSlot
   │     └─ ItemSlot
   └─ Footer
      └─ Horizontal Layout Group
         ├─ GoldText
         └─ CapacityText

따라서 Grid Layout Group으로만 구성하기보다는, “규칙이 같은 영역”마다 적절한 Layout Group을 선택하는 것이 좋습니다.

추가로 Layout Group은 Content Size Fitter, Layout Element, Aspect Ratio Fitter와 함께 사용되는 경우가 많습니다.

다만 여러 Layout Group과 Content Size Fitter를 부모와 자식에 무분별하게 중첩하면 레이아웃 계산이 복잡해지고 성능이나 크기 갱신 문제가 발생할 수 있으므로, 계층 구조를 단순하게 유지하는 것이 좋습니다.

참고로 인프런의 FAQ는 다음 링크에서 확인하실 수 있습니다.

https://www.inflearn.com/faq