[유니티 UI] Anchors(앵커)에 대해 알아보자!

유니티 Anchors란?

유니티에서 UI 요소(버튼, 텍스트, 이미지 등)들은 모두 Rect Transform 컴포넌트를 가지고 있습니다. 이 Rect Transform은 3D 오브젝트의 Transform과 달리, UI 요소의 위치, 크기, 회전, 스케일을 2D 직사각형 공간 안에서 조절하는 역할을 합니다.

이 Rect Transform에서 가장 중요한 개념 중 하나가 바로 Anchors(앵커) 입니다.

Anchors는 "기준점" 이라고 생각하시면 됩니다. 어떤 UI 요소를 부모(Parent) UI 요소 또는 Canvas 내에서 어느 위치에 고정시킬지 결정하는 기준점이죠.

Anchors의 작동 방식

Anchors는 씬 뷰(Scene View)에서 UI 요소를 선택했을 때 나타나는 네 개의 작은 삼각형 모양 핸들로 시각화됩니다. 이 네 개의 핸들은 Anchor Min (좌측 하단) 과 Anchor Max (우측 상단) 두 개의 점으로 정의됩니다.

• Anchor Min (0,0): 부모 컨테이너의 좌측 하단에 해당합니다.
• Anchor Max (1,1): 부모 컨테이너의 우측 상단에 해당합니다.

이 0에서 1 사이의 값은 부모 Rect Transform의 크기에 대한 비율을 나타냅니다. 예를 들어, Anchor Min (0,0)과 Anchor Max (1,1)은 UI 요소가 부모의 좌측 하단부터 우측 상단까지 부모와 같은 크기로 늘어나도록 설정된 것입니다.

Anchors를 활용하는 방법 (가장 중요!)

Anchors는 크게 두 가지 방식으로 사용됩니다.

1. UI 요소의 위치 고정:
   • 만약 네 개의 앵커 핸들이 한 점에 모여 있다면, 해당 UI 요소는 그 앵커가 위치한 부모의 특정 위치에 고정됩니다.
   • 예를 들어, 앵커를 부모의 중앙에 두면, UI 요소는 항상 부모의 중앙에 위치하게 됩니다. 화면 해상도가 변하더라도 중앙에 유지되죠.
   • 이때 UI 요소의 Pos X, Pos Y 값은 앵커를 기준으로 한 상대적인 위치를 나타냅니다.
2. UI 요소의 크기 조절 및 확장 (Stretch):
   • 만약 네 개의 앵커 핸들이 떨어져 있다면, 해당 UI 요소는 앵커 사이의 공간을 기준으로 크기가 조절됩니다.
   • 이 경우 Rect Transform 인스펙터에서는 Pos X, Pos Y, Width, Height 대신 Left, Right, Top, Bottom 값이 나타납니다.
   • Left, Right, Top, Bottom은 각 앵커로부터 UI 요소의 가장자리까지의 거리(여백) 를 의미합니다.
   • 예를 들어, 앵커를 부모의 좌측 끝과 우측 끝에 각각 배치하고 Left, Right 값을 설정하면, 부모의 가로 크기가 변해도 UI 요소는 앵커와의 여백을 유지하며 가로로 함께 늘어나거나 줄어들게 됩니다. 이것이 바로 반응형 UI의 핵심입니다!

Anchor Presets (앵커 프리셋)

유니티는 자주 사용되는 앵커 설정들을 Rect Transform 컴포넌트의 앵커 아이콘 클릭을 통해 프리셋으로 제공합니다. 이 프리셋을 활용하면 수동으로 앵커를 조절하는 것보다 훨씬 편리하게 UI를 배치할 수 있습니다.

• 가운데 (Middle-Center): UI 요소가 부모의 중앙에 고정됩니다.
• 상단 중앙 (Top-Center): UI 요소가 부모의 상단 중앙에 고정됩니다.
• 좌측 하단 (Bottom-Left): UI 요소가 부모의 좌측 하단에 고정됩니다.
• 전체 확장 (Stretch): UI 요소가 부모의 크기와 동일하게 늘어나거나 줄어듭니다. (가장 많이 사용되는 반응형 설정)

Anchors와 Pivot의 관계 (자주 헷갈리는 부분!)

• Anchor (앵커): UI 요소의 위치를 부모(Parent) 기준으로 어디에 고정할지 결정하는 "기준점"
• Pivot (피벗): 해당 UI 요소의 회전 및 스케일의 중심점이자, UI 요소 자체의 Pos X, Pos Y가 계산되는 "기준점"

즉, Pos X, Pos Y는 앵커에서부터 피벗까지의 거리를 의미합니다.

실제 조작 팁:

• 그냥 클릭: 앵커 위치만 변경됩니다.
• Alt + 클릭: 앵커 위치와 함께 UI 요소의 실제 위치도 앵커 위치로 이동합니다. (가장 많이 사용)
• Shift + 클릭: 앵커 위치와 함께 UI 요소의 피벗도 앵커 위치로 변경됩니다.
• Alt + Shift + 클릭: 앵커, 피벗, UI 요소의 실제 위치 모두 앵커 위치로 한 번에 이동합니다.

왜 Anchors가 중요할까요? (반응형 UI)

현대의 게임은 다양한 해상도의 모니터, 태블릿, 스마트폰에서 실행됩니다. 앵커를 제대로 활용하지 않으면, 특정 해상도에서 UI가 화면 밖으로 벗어나거나, 너무 작거나 커져서 사용자 경험을 해칠 수 있습니다.

앵커를 사용하면:

• 화면 해상도에 따라 UI가 자동으로 조정됩니다.
• 부모 UI 요소의 크기가 변해도 자식 UI 요소가 의도한 대로 배치됩니다.
• 일관된 UI 레이아웃을 유지할 수 있습니다.

반응형 UI구현 예시

1. 전체 화면을 채우는 배경 이미지 / 패널

가장 기본적인 예시이자, 모든 UI의 기본이 되는 배치입니다.

• 목표: 화면 해상도가 변해도 항상 Canvas 전체를 꽉 채우는 배경 이미지 또는 패널을 만들고 싶다.
• Anchors 설정:
  • Rect Transform의 앵커 프리셋에서 'Stretch (전체 확장)' 옵션을 선택합니다. (Shift+Alt 누른 채로 클릭)
  • 그러면 앵커 핸들이 부모(Canvas)의 네 모서리에 분리되어 위치합니다.
  • Left, Right, Top, Bottom 값이 각각 0으로 설정되어 있는지 확인합니다. (간혹 패딩을 위해 약간의 값을 줄 수도 있습니다.)
• 결과: 어떤 해상도에서든 배경 이미지가 화면 전체를 꽉 채우게 됩니다. 스마트폰, 태블릿, PC 모니터 등 어디에서 실행해도 항상 완벽한 배경이 됩니다.

2. 화면 특정 모서리에 고정되는 UI (예: 미니맵, 점수판, 조이스틱)

게임에서 미니맵이나 점수판, 캐릭터 상태 바 등은 보통 화면의 특정 모서리에 고정되어 있죠.

• 목표: 화면 우측 상단에 미니맵을 항상 같은 위치에 배치하고 싶다.
• Anchors 설정:
  • Rect Transform의 앵커 프리셋에서 'Top-Right (우측 상단)' 옵션을 선택합니다. (Shift+Alt 누른 채로 클릭)
  • 그러면 앵커 핸들이 부모의 우측 상단에 모여 위치합니다.
  • 이제 Pos X와 Pos Y 값을 조절하여 미니맵이 우측 상단 모서리로부터 얼마나 떨어져 있을지 결정합니다. 예를 들어, Pos X = -50, Pos Y = -50 이면 우측에서 50px, 상단에서 50px 떨어진 곳에 배치됩니다.
  • Width와 Height로 미니맵의 크기를 설정합니다.
• 결과: 화면 해상도가 변하더라도 미니맵은 항상 우측 상단으로부터 동일한 거리를 유지하며 배치됩니다. 화면이 커지든 작아지든 미니맵의 위치와 크기는 일관되게 유지됩니다. 좌측 상단, 좌측 하단, 우측 하단 등 다른 모서리도 같은 방식으로 적용할 수 있습니다.

3. 화면 중앙에 위치하는 팝업 창 / 버튼

메인 메뉴의 시작 버튼, 게임 오버 시 나타나는 재시작 팝업 등은 보통 화면 중앙에 위치합니다.

• 목표: 화면 중앙에 항상 위치하는 게임 시작 버튼을 만들고 싶다.
• Anchors 설정:
  • Rect Transform의 앵커 프리셋에서 'Middle-Center (중앙)' 옵션을 선택합니다. (Shift+Alt 누른 채로 클릭)
  • 앵커 핸들이 부모의 중앙에 모여 위치합니다.
  • Pos X와 Pos Y를 0으로 설정하면 버튼의 피벗이 Canvas의 정중앙에 위치하게 됩니다.
  • Width와 Height로 버튼의 크기를 설정합니다.
• 결과: 어떤 해상도에서든 버튼은 항상 화면의 정중앙에 위치하게 됩니다.

4. 가로 또는 세로로 늘어나는 UI 요소 (예: 진행 바, 스크롤 뷰)

상대적인 크기에 따라 늘어나야 하는 UI 요소에 유용합니다.

• 목표: 캐릭터의 HP 바를 만들고 싶은데, 화면 가로 길이에 비례하여 항상 일정한 비율의 너비를 차지하고 싶다.
• Anchors 설정:
  • Rect Transform의 앵커 프리셋에서 'Stretch (전체 확장)' 중 가로 방향으로만 늘어나는 (Left-Stretch, Right-Stretch) 옵션을 선택합니다. (Alt를 누른 채로 앵커 아이콘을 클릭하여 직접 조절할 수도 있습니다.)
  • 앵커 핸들이 부모의 좌측과 우측 끝에 수직으로 분리되어 위치합니다.
  • Left, Right 값으로 부모의 양쪽 가장자리로부터의 여백을 설정합니다.
  • Height는 고정하고, Top 또는 Bottom 값으로 세로 위치를 조절합니다. (또는 앵커를 한 점에 모으고 Pos Y를 조절할 수도 있습니다.)
• 결과: 화면 가로 해상도가 변하면 HP 바도 그에 맞춰서 가로로 늘어나거나 줄어들지만, 좌우 여백은 항상 일정하게 유지됩니다. 세로 방향으로 늘어나야 하는 스크롤 뷰 등도 유사하게 적용할 수 있습니다.

5. 비율을 유지하며 화면에 맞게 조절되는 UI (예: 캐릭터 초상화, 영상 플레이어)

특정 비율(Aspect Ratio)을 유지하면서 화면 크기에 따라 조절되어야 하는 경우입니다. Aspect Ratio Fitter 컴포넌트와 함께 사용하면 더욱 강력합니다.

• 목표: 게임의 인트로 영상 플레이어를 만들고 싶은데, 항상 16:9 비율을 유지하면서 화면에 최대한 크게 표시되고 싶다.
• Anchors 설정:
  • Rect Transform의 앵커를 'Stretch (전체 확장)' 으로 설정하고 Left, Right, Top, Bottom을 모두 0으로 설정합니다.
  • 여기에 Aspect Ratio Fitter 컴포넌트를 추가합니다.
  • Aspect Mode를 Fit In Parent 또는 Envelope Parent로 설정하고 Aspect Ratio를 16/9 (또는 1.777...)로 설정합니다.
• 결과: 영상 플레이어는 부모(Canvas)의 크기 변화에 따라 유연하게 조절되면서도, 항상 16:9의 화면 비율을 유지합니다. 화면의 가로가 너무 길거나 세로가 너무 길 경우, 여백이 생기더라도 영상 자체는 왜곡되지 않습니다.