앵커는 화면이 늘어날 때 어디에 붙어 있을지 정한다

시안대로 만든 화면을 가로가 긴 폰에서 켜 봅니다. 오른쪽 위에 있어야 할 설정 버튼이 화면 가운데쯤에 떠 있습니다. 배경은 양옆이 비어 있고, 상단 바는 화면 끝까지 닿지 않습니다.

대부분 앵커 때문입니다. 위치를 숫자로 맞춰도, 그 숫자를 어디서부터 쟀는지 가 틀리면 화면 크기가 바뀌는 순간 어긋납니다.

RectTransform 은 사각형이다

Unity 에서 일반 오브젝트는 Transform 으로 위치, 회전, 크기(Scale)를 가집니다. UI 요소는 그 대신 RectTransform 을 씁니다. Transform 이 가진 것에 너비와 높이 가 더 붙어 있습니다.

그래서 UI 는 크기를 두 가지로 바꿀 수 있습니다.

씬 뷰에서 사각형 모서리를 끌면 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 는 앵커에서 피벗까지의 거리 입니다.

하나 더 다른 것이 있습니다. Y 방향이 반대입니다. Figma 는 아래로 갈수록 Y 가 커지고, Unity 는 위로 갈수록 커집니다. 앵커도 0 이 아래, 1 이 위입니다. 시안에서 “위에서 40” 인 요소를 위쪽 앵커에 붙이고 피벗도 위에 두면, Unity 에서는 Pos Y 가 -40 이 됩니다.

앵커는 부모가 커질 때 붙잡는 자리다

앵커가 기준점이라는 것만으로는 왜 중요한지 잘 안 보입니다. 부모 크기가 바뀔 때 차이가 드러납니다.

상단 바에 버튼 셋이 있습니다. 뒤로 가기는 왼쪽 위, 제목은 가운데 위, 설정은 오른쪽 위에 앵커를 두었습니다. 화면이 가로로 길어지면 이렇게 됩니다.

설정 버튼을 왼쪽 위 앵커 에 두고 Pos X 만 크게 줘서 오른쪽에 붙여 두었다면, 기준 화면에서는 똑같이 보이지만 긴 화면에서는 가운데쯤에 남습니다. 처음에 본 증상이 이것입니다. 기준 화면에서는 틀린 앵커가 드러나지 않습니다.

앵커를 벌리면 크기가 따라 늘어난다

앵커는 사실 점 하나가 아니라 두 개 입니다. 왼쪽 아래를 붙잡는 Min, 오른쪽 위를 붙잡는 Max 입니다. 지금까지는 둘을 한 자리에 겹쳐 두었습니다. 둘을 벌리면 요소가 두 앵커 사이에 걸쳐 늘어납니다.

가로로 벌리면 인스펙터 칸이 바뀝니다. Pos X 와 Width 가 사라지고 Left 와 Right 가 나옵니다. 세로로 벌리면 Pos Y 와 Height 대신 Top 과 Bottom 이 나옵니다. 네 칸 모두 앵커에서 안쪽으로 들어온 거리 입니다. 크기가 아니라 여백을 적는 셈입니다.

벌린 앵커는 이런 곳에 씁니다.

• 화면 끝까지 닿아야 하는 것: 상단 바, 하단 탭, 풀스크린 딤, 배경
• 비율로 차지해야 하는 것: 앵커를 0.1 과 0.9 에 두고 Left, Right 를 0 으로 두면 부모 너비의 80퍼센트를 늘 차지합니다

부모를 가득 채우는 요소는 앵커를 (0, 0) 과 (1, 1) 로 벌리고 네 칸을 전부 0 으로 둡니다. 배경과 딤은 대부분 이 설정입니다.

Figma 컨스트레인트와 나란히 놓기

Figma 의 Constraints 가 정확히 같은 일을 합니다. 프레임 크기가 바뀔 때 요소가 무엇을 붙잡을지 정합니다. 그래서 일대일로 옮겨집니다.

세로도 같습니다. Top 은 1 / 1, Bottom 은 0 / 0, Top and bottom 은 0 / 1 입니다. (Unity 는 아래가 0 입니다.)

시안에 컨스트레인트를 제대로 걸어 두면 그 자체가 앵커 명세 가 됩니다. Figma 에서 프레임 크기를 늘려 보고 요소가 원하는 대로 따라오는지 확인하는 것만으로, Unity 에서 어긋날 자리를 미리 찾을 수 있습니다.

피벗은 무엇을 중심으로 돌고 자라는가

Unity 문서는 피벗을 이렇게 설명합니다. 회전, 크기 변경, Scale 이 모두 피벗을 중심으로 일어납니다.

크기가 바뀔 때를 보면 차이가 분명합니다. 같은 박스의 너비를 늘려 보면 피벗에 따라 자라는 방향이 다릅니다.

그래서 피벗은 내용이 늘어나는 방향 을 보고 정합니다.

인스펙터에서 피벗을 바꾸면 Pos 숫자가 같이 바뀝니다. Unity 가 화면상의 위치를 지키려고 Pos 를 맞춰 준 것 이니 놀라지 않아도 됩니다. RectTransform 오른쪽 위의 R (Raw edit mode) 버튼을 켜면 이 보정을 하지 않습니다. 그때는 Pos 숫자가 그대로인 대신 요소가 화면에서 움직입니다.

앵커 프리셋

앵커 숫자를 직접 치는 일은 드뭅니다. 앵커 프리셋 에서 고릅니다.

RectTransform 왼쪽 위의 네모 아이콘이 프리셋 버튼입니다. 아이콘 위에 가로 설정, 왼쪽에 세로 설정 이 글자로 적혀 있어서 지금 상태를 바로 읽을 수 있습니다. 위에 center, 왼쪽에 stretch 라고 적혀 있으면 가로는 가운데에 붙어 있고 세로는 벌어져 있다는 뜻입니다. 그래서 옆 칸도 가로는 Pos X, Width, 세로는 Top, Bottom 으로 섞여 나옵니다.

아이콘을 누르면 이런 표가 열립니다.

읽는 법은 단순합니다.

• 칸 하나가 가로 하나와 세로 하나의 조합 입니다. 오른쪽 위에 붙는 설정 버튼이면 top 줄의 right 칸입니다
• 맨 위 줄은 가로만, 맨 왼쪽 칸은 세로만 바꿉니다. 한쪽 방향은 이미 맞춰 두었을 때 씁니다
• stretch 는 앵커를 벌린 것 입니다. 가로 stretch 면 Left, Right 가, 세로 stretch 면 Top, Bottom 이 나옵니다
• 오른쪽 아래 칸 은 가로세로 모두 stretch 라서 부모를 꽉 채우는 앵커입니다

Shift 와 Alt

창 위에 Shift: Also set pivot, Alt: Also set position 이라고 적혀 있습니다. 누른 채로 칸을 고르면 앵커 말고도 더 바꿔 줍니다.

• 그냥 누르면 앵커만 바뀝니다. 요소는 화면상 제자리에 있고, 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 를 누른 채 오른쪽 아래 칸 을 고르면 부모를 꽉 채우는 설정이 한 번에 끝납니다. 배경과 딤을 깔 때 제일 자주 쓰는 조합입니다.

시안을 넘길 때 적어 주면 좋은 것

이 표의 위 세 줄은 Figma 컨스트레인트를 걸어 두는 것으로 대부분 전달됩니다. 아래 두 줄은 컨스트레인트에 없는 정보라 따로 적어 줘야 합니다.

정리

• UI 는 RectTransform 을 쓰고, 레이아웃 크기는 Scale 이 아니라 Width, Height 로 정합니다
• Pos 는 앵커에서 피벗까지의 거리 입니다. 같은 숫자라도 앵커가 다르면 다른 자리입니다
• Unity 는 위로 갈수록 Y 가 커집니다. Figma 와 반대입니다
• 앵커는 부모 크기가 바뀔 때 붙잡는 자리입니다. 틀린 앵커는 기준 화면에서는 안 보이고 다른 비율에서 드러납니다
• 앵커를 벌리면 크기 대신 여백을 적고, 요소는 부모를 따라 늘어납니다
• Figma 컨스트레인트와 Unity 앵커는 일대일로 옮겨집니다
• 피벗은 회전, 크기, Scale 의 중심 이고, 내용이 자라는 방향을 보고 정합니다