--- title: "앵커는 화면이 늘어날 때 어디에 붙어 있을지 정한다" description: "같은 Pos X 60 이 앵커에 따라 왼쪽에서 60 이 되기도, 가운데에서 60 이 되기도 합니다. RectTransform 의 앵커와 피벗을 Figma 컨스트레인트와 나란히 놓고 봅니다." author: "유니얼" pubDate: 2026-09-10 category: "game-dev/unity/ui" tags: ["Unity", "UI", "uGUI"] canonical: https://blog.unialgames.com/posts/unity-ui-rect-transform-anchor/ --- 시안대로 만든 화면을 가로가 긴 폰에서 켜 봅니다. 오른쪽 위에 있어야 할 설정 버튼이 화면 가운데쯤에 떠 있습니다. 배경은 양옆이 비어 있고, 상단 바는 화면 끝까지 닿지 않습니다. **대부분 앵커 때문입니다.** 위치를 숫자로 맞춰도, 그 숫자를 **어디서부터 쟀는지** 가 틀리면 화면 크기가 바뀌는 순간 어긋납니다. ## RectTransform 은 사각형이다 Unity 에서 일반 오브젝트는 **Transform** 으로 위치, 회전, 크기(Scale)를 가집니다. UI 요소는 그 대신 **RectTransform** 을 씁니다. Transform 이 가진 것에 **너비와 높이** 가 더 붙어 있습니다. 그래서 UI 는 크기를 두 가지로 바꿀 수 있습니다. | | Width, Height | Scale | | --- | --- | --- | | 바뀌는 것 | 사각형 자체의 크기 | 그려진 결과를 확대, 축소 | | 9-slice 테두리 두께 | 그대로 | 같이 두꺼워짐 | | 안에 든 글자 크기 | 그대로 | 같이 커짐 | | 쓰는 곳 | **레이아웃** | 누를 때 살짝 작아지는 연출, 등장 애니메이션 | 씬 뷰에서 사각형 모서리를 끌면 Unity 는 Scale 이 아니라 Width 와 Height 를 바꿉니다. **화면에 맞춰 크기를 정하는 일은 Width 와 Height 로 합니다.** Scale 로 맞춰 두면 테두리와 글자까지 같이 늘어나서 시안과 달라집니다. ## Pos X 60 은 어디서부터 60 인가 Figma 에서 X 60 은 부모 프레임의 **왼쪽 위 모서리** 에서 60 입니다. 기준이 늘 같습니다. Unity 의 Pos X 는 기준이 요소마다 다릅니다. 두 개의 점이 정합니다. - **앵커(Anchor):** 부모 사각형 위의 기준점. 부모 너비의 0 에서 1 사이 비율로 적습니다. 0 이 왼쪽, 0.5 가 가운데, 1 이 오른쪽입니다 - **피벗(Pivot):** 내 사각형 위의 기준점. 역시 내 크기의 0 에서 1 사이 비율입니다 **Pos 는 앵커에서 피벗까지의 거리** 입니다.

숫자는 같고 기준이 다릅니다. 인스펙터의 Pos X 만 보고는 버튼이 어디 있는지 알 수 없습니다.

하나 더 다른 것이 있습니다. **Y 방향이 반대입니다.** Figma 는 아래로 갈수록 Y 가 커지고, Unity 는 **위로 갈수록 커집니다.** 앵커도 0 이 아래, 1 이 위입니다. 시안에서 "위에서 40" 인 요소를 위쪽 앵커에 붙이고 피벗도 위에 두면, Unity 에서는 Pos Y 가 -40 이 됩니다. ## 앵커는 부모가 커질 때 붙잡는 자리다 앵커가 기준점이라는 것만으로는 왜 중요한지 잘 안 보입니다. **부모 크기가 바뀔 때** 차이가 드러납니다. 상단 바에 버튼 셋이 있습니다. 뒤로 가기는 왼쪽 위, 제목은 가운데 위, 설정은 오른쪽 위에 앵커를 두었습니다. 화면이 가로로 길어지면 이렇게 됩니다.

세 버튼 모두 Pos 숫자는 그대로입니다. 앵커가 따라간 만큼 버튼이 따라갑니다.

설정 버튼을 **왼쪽 위 앵커** 에 두고 Pos X 만 크게 줘서 오른쪽에 붙여 두었다면, 기준 화면에서는 똑같이 보이지만 긴 화면에서는 가운데쯤에 남습니다. 처음에 본 증상이 이것입니다. **기준 화면에서는 틀린 앵커가 드러나지 않습니다.** ## 앵커를 벌리면 크기가 따라 늘어난다 앵커는 사실 점 하나가 아니라 **두 개** 입니다. 왼쪽 아래를 붙잡는 Min, 오른쪽 위를 붙잡는 Max 입니다. 지금까지는 둘을 한 자리에 겹쳐 두었습니다. **둘을 벌리면** 요소가 두 앵커 사이에 걸쳐 늘어납니다. 가로로 벌리면 인스펙터 칸이 바뀝니다. Pos X 와 Width 가 사라지고 **Left 와 Right** 가 나옵니다. 세로로 벌리면 Pos Y 와 Height 대신 **Top 과 Bottom** 이 나옵니다. 네 칸 모두 **앵커에서 안쪽으로 들어온 거리** 입니다. 크기가 아니라 여백을 적는 셈입니다.

앵커 둘이 부모 양끝에 붙어 있으니 바는 여백 16 을 지키며 늘어납니다.

벌린 앵커는 이런 곳에 씁니다. - **화면 끝까지 닿아야 하는 것:** 상단 바, 하단 탭, 풀스크린 딤, 배경 - **비율로 차지해야 하는 것:** 앵커를 0.1 과 0.9 에 두고 Left, Right 를 0 으로 두면 부모 너비의 80퍼센트를 늘 차지합니다 부모를 가득 채우는 요소는 앵커를 (0, 0) 과 (1, 1) 로 벌리고 네 칸을 전부 0 으로 둡니다. 배경과 딤은 대부분 이 설정입니다. ## Figma 컨스트레인트와 나란히 놓기 Figma 의 **Constraints** 가 정확히 같은 일을 합니다. 프레임 크기가 바뀔 때 요소가 무엇을 붙잡을지 정합니다. 그래서 일대일로 옮겨집니다. | Figma 가로 컨스트레인트 | Unity 앵커 Min X / Max X | 인스펙터 칸 | | --- | --- | --- | | Left | 0 / 0 | Pos X, Width | | Right | 1 / 1 | Pos X, Width | | Center | 0.5 / 0.5 | Pos X, Width | | Left and right | 0 / 1 | Left, Right | | Scale | 요소 양끝의 비율 (예: 0.2 / 0.6) | Left, Right 를 0 | 세로도 같습니다. Top 은 1 / 1, Bottom 은 0 / 0, Top and bottom 은 0 / 1 입니다. (Unity 는 아래가 0 입니다.) **시안에 컨스트레인트를 제대로 걸어 두면 그 자체가 앵커 명세** 가 됩니다. Figma 에서 프레임 크기를 늘려 보고 요소가 원하는 대로 따라오는지 확인하는 것만으로, Unity 에서 어긋날 자리를 미리 찾을 수 있습니다. ## 피벗은 무엇을 중심으로 돌고 자라는가 Unity 문서는 피벗을 이렇게 설명합니다. **회전, 크기 변경, Scale 이 모두 피벗을 중심으로 일어납니다.** 크기가 바뀔 때를 보면 차이가 분명합니다. 같은 박스의 너비를 늘려 보면 피벗에 따라 자라는 방향이 다릅니다.

피벗은 크기가 바뀌어도 제자리에 있습니다. 나머지가 피벗에서 멀어지는 쪽으로 자랍니다.

그래서 피벗은 **내용이 늘어나는 방향** 을 보고 정합니다. | 요소 | 피벗 | 이유 | | --- | --- | --- | | 캐릭터 머리 위 말풍선 | 아래 가운데 (0.5, 0) | 글이 길어지면 위로 자라야 머리를 안 가립니다 | | 왼쪽에서 차오르는 게이지 | 왼쪽 (0, 0.5) | 오른쪽으로만 늘어납니다 | | 오른쪽 위 알림 목록 | 오른쪽 위 (1, 1) | 항목이 늘면 아래와 왼쪽으로 펼쳐집니다 | | 가운데서 커지며 뜨는 팝업 | 가운데 (0.5, 0.5) | Scale 연출의 중심이 가운데여야 합니다 | 인스펙터에서 피벗을 바꾸면 Pos 숫자가 같이 바뀝니다. **Unity 가 화면상의 위치를 지키려고 Pos 를 맞춰 준 것** 이니 놀라지 않아도 됩니다. RectTransform 오른쪽 위의 **R (Raw edit mode)** 버튼을 켜면 이 보정을 하지 않습니다. 그때는 Pos 숫자가 그대로인 대신 요소가 화면에서 움직입니다. ## 앵커 프리셋 앵커 숫자를 직접 치는 일은 드뭅니다. **앵커 프리셋** 에서 고릅니다. RectTransform 왼쪽 위의 네모 아이콘이 프리셋 버튼입니다. 아이콘 **위에 가로 설정, 왼쪽에 세로 설정** 이 글자로 적혀 있어서 지금 상태를 바로 읽을 수 있습니다. 위에 center, 왼쪽에 stretch 라고 적혀 있으면 가로는 가운데에 붙어 있고 세로는 벌어져 있다는 뜻입니다. 그래서 옆 칸도 가로는 **Pos X, Width**, 세로는 **Top, Bottom** 으로 섞여 나옵니다. 아이콘을 누르면 이런 표가 열립니다.

Unity 의 앵커 프리셋 창을 옮겨 그렸습니다. 칸마다 바깥 네모가 부모, 안쪽 네모가 요소입니다.

읽는 법은 단순합니다. - **칸 하나가 가로 하나와 세로 하나의 조합** 입니다. 오른쪽 위에 붙는 설정 버튼이면 top 줄의 right 칸입니다 - **맨 위 줄은 가로만, 맨 왼쪽 칸은 세로만** 바꿉니다. 한쪽 방향은 이미 맞춰 두었을 때 씁니다 - **stretch 는 앵커를 벌린 것** 입니다. 가로 stretch 면 Left, Right 가, 세로 stretch 면 Top, Bottom 이 나옵니다 - **오른쪽 아래 칸** 은 가로세로 모두 stretch 라서 부모를 꽉 채우는 앵커입니다 ### Shift 와 Alt 창 위에 **Shift: Also set pivot, Alt: Also set position** 이라고 적혀 있습니다. 누른 채로 칸을 고르면 앵커 말고도 더 바꿔 줍니다.

같은 top · right 칸을 네 가지 방법으로 골랐습니다. 모서리에 붙일 때는 Shift 와 Alt 를 같이 누릅니다.

- **그냥 누르면 앵커만** 바뀝니다. 요소는 화면상 제자리에 있고, Pos 숫자만 새 앵커 기준으로 다시 계산됩니다 - **Shift** 를 누르면 **피벗도** 그 칸의 자리로 옮깁니다. top · right 면 피벗이 요소의 오른쪽 위로 갑니다 - **Alt** 를 누르면 **위치도** 옮깁니다. 요소의 가장자리를 앵커에 붙입니다. top · right 면 요소의 오른쪽 위 모서리가 부모의 오른쪽 위 모서리에 닿고, center 면 요소의 가운데가 붙습니다 Alt 만 눌러도 겉보기에는 모서리에 딱 붙습니다. **차이는 피벗에 남습니다.** Alt 만 누르면 피벗이 가운데에 남아 있어서, 44 × 22 버튼이라면 Pos 가 **(-22, -11)** 처럼 크기의 절반 값이 됩니다. 나중에 버튼 글자가 길어져 너비가 늘면 양쪽으로 자라니 **오른쪽이 부모 밖으로 나갑니다.** Shift 까지 같이 누르면 피벗이 오른쪽 위로 가서 Pos 가 **(0, 0)** 이 되고, 너비가 늘어도 왼쪽으로만 자랍니다. **모서리에 붙이는 요소는 Shift 와 Alt 를 같이** 누르는 것이 기본입니다. stretch 칸에서 Alt 를 누르면 여백이 전부 0 이 됩니다. 그래서 **Shift 와 Alt 를 누른 채 오른쪽 아래 칸** 을 고르면 부모를 꽉 채우는 설정이 한 번에 끝납니다. 배경과 딤을 깔 때 제일 자주 쓰는 조합입니다. ## 시안을 넘길 때 적어 주면 좋은 것 | 적어 줄 것 | 무엇이 정해지나 | | --- | --- | | 요소가 **화면 어느 모서리나 가장자리에 붙어 있는지** | 앵커 | | 화면이 넓어질 때 **늘어나는 것과 그대로인 것** | 앵커를 벌릴지 | | **모서리에서 떨어진 여백** (위에서 40, 오른쪽에서 24) | Pos 또는 Left, Right, Top, Bottom | | 내용이 늘어날 때 **어느 방향으로 자라는지** | 피벗 | | 크기가 바뀌는 연출의 **중심** | 피벗 | 이 표의 위 세 줄은 Figma 컨스트레인트를 걸어 두는 것으로 대부분 전달됩니다. 아래 두 줄은 컨스트레인트에 없는 정보라 따로 적어 줘야 합니다. ## 정리 - UI 는 RectTransform 을 쓰고, 레이아웃 크기는 **Scale 이 아니라 Width, Height** 로 정합니다 - **Pos 는 앵커에서 피벗까지의 거리** 입니다. 같은 숫자라도 앵커가 다르면 다른 자리입니다 - Unity 는 **위로 갈수록 Y 가 커집니다.** Figma 와 반대입니다 - 앵커는 부모 크기가 바뀔 때 붙잡는 자리입니다. 틀린 앵커는 기준 화면에서는 안 보이고 다른 비율에서 드러납니다 - 앵커를 벌리면 크기 대신 **여백을 적고**, 요소는 부모를 따라 늘어납니다 - Figma 컨스트레인트와 Unity 앵커는 일대일로 옮겨집니다 - 피벗은 **회전, 크기, Scale 의 중심** 이고, 내용이 자라는 방향을 보고 정합니다