핵심 정리
text
앵커가 기준점
피벗이 회전/스케일 중심
Canvas Scaler가 해상도 대응 규칙구조 이해
- UGUI 배치 문제의 대부분은 사실
RectTransform을Transform처럼 생각해서 생깁니다. UI는 월드 좌표보다 부모 rect 안에서의 상대 기준이 더 중요합니다. - anchor는 부모의 어느 지점을 기준으로 붙을지를 정하고, pivot은 자신이 회전/확대/축소될 때 어느 지점을 중심으로 삼을지를 정합니다. 즉 anchor는 "어디에 붙는가", pivot은 "어디를 중심으로 움직이는가"라고 생각하면 이해가 쉽습니다.
- stretch anchor를 쓰면 부모 크기에 따라 UI가 늘어나거나 줄어듭니다. 전체 배경, 상하단 바, safe area 대응처럼 화면 비율 변화에 적응해야 하는 요소에서 자주 사용합니다.
Canvas Scaler는 레퍼런스 해상도 기준으로 UI를 어떻게 스케일할지 정합니다. 같은 레이아웃이라도Scale With Screen Size설정과 Match 값에 따라 체감 결과가 크게 달라집니다.- 그래서 UI가 해상도마다 깨질 때는 개별 오브젝트 좌표를 만지기 전에 anchor, stretch, pivot, Canvas Scaler 순으로 점검하는 편이 더 빠릅니다.
체크포인트
| 상황 | 적합한 선택 |
|---|---|
| UI가 부모 모서리에 고정돼야 함 | anchor를 해당 모서리로 설정 |
| 부모 크기에 따라 늘어나야 하는 배경/바 | stretch anchor (상하좌우 모두 설정) |
| 해상도가 달라도 같은 비율로 보이게 | Canvas Scaler → Scale With Screen Size |
| 해상도마다 UI 위치가 다르게 보임 | anchored position 전에 anchor/pivot 먼저 확인 |
| 판단 포인트 | 먼저 볼 값 | 이유 |
|---|---|---|
| 붙는 기준점이 어딘가 | anchorMin, anchorMax | 부모 기준 위치가 먼저 정해져야 함 |
| 회전·확대 중심이 어딘가 | pivot | 같은 anchor라도 pivot에 따라 체감 위치가 달라짐 |
| 해상도 대응 방식이 뭔가 | Canvas Scaler mode | 레이아웃이 같아도 스케일 기준이 다르면 결과가 달라짐 |
| 늘어나야 하는가, 고정돼야 하는가 | stretch 여부와 sizeDelta | stretch 상태에서 sizeDelta만 만지면 의도가 흐려짐 |
주의할 점
UI 위치가 어긋날 때 anchored position 숫자만 억지로 맞추면 해상도 하나에서만 맞고 다른 비율에서 다시 깨집니다. anchor와 stretch가 의도에 맞는지 먼저 확인하세요.
text
// ❌ anchor 설정 없이 position만 조정 → 해상도마다 다른 위치
RectTransform.anchoredPosition = new Vector2(50, -30);
// 1920x1080 → OK, 1280x720 → 위치 어긋남
// ✅ anchor로 기준 먼저 잡기
우하단 고정 버튼:
anchor min = (1, 0), anchor max = (1, 0)
pivot = (1, 0) ← 자신의 우하단 모서리 기준
anchoredPosition = (-20, 20) ← 모서리에서 안쪽으로 20px 여백
전체 배경 stretch:
anchor min = (0, 0), anchor max = (1, 1) ← 부모 전체에 맞춤
left/right/top/bottom = 0Canvas Scaler를 기본값처럼 두고 레퍼런스 해상도와 Match 값을 점검하지 않으면, 에디터 게임 뷰에서는 맞는데 실제 기기 비율에서 UI가 과하게 커지거나 눌려 보일 수 있습니다.
text
// ❌ 모바일 세로 UI인데 Match가 가로 기준에 치우침
Canvas Scaler
UI Scale Mode = Scale With Screen Size
Reference Resolution = 1920 x 1080
Match = 0.0 ← width 위주
// 19.5:9 세로 화면에서 버튼 여백이 예상보다 좁아짐
// ✅ 실제 타깃 비율에 맞춰 기준점 먼저 정하기
Canvas Scaler
UI Scale Mode = Scale With Screen Size
Reference Resolution = 1080 x 1920
Match = 0.5 ← width/height 균형참고 링크
3 sources