유니티UI에서 UI를 만들고 인스팩터(Inspector)을 확인해보면 랙트 트랜스폼(Rect Transform)이 추가된 것을 알 수 있습니다.
랙트 트랜스폼에는 앵커 프리셋(Anchor Presets)이라는 것이 있습니다.
(참고 : 유니티 매뉴얼 - 기본적인 레이아웃 )
UI가 유동적으로 배치되야 할 때(여러 해상도에 대응한다든가 하는 상황) 어떻게 배치돼야 하는지를 설정하는 값입니다.
이 포스팅에서는 앵커 프리셋을 어떻게 다루고 사용하는지 알아보겠습니다.
1. 앵커를 찾아라!
UI 패널(GameObject > UI > Panel)을 하나 생성합니다.
생성된 패널의 인스팩터를 확인하면 랙트 트랜스폼이 있습니다.
랙트 트랜스폼의 첫줄 왼쪽에 상자가 있습니다.
이것이 앵커 프리셋입니다.
씬(Scene)화면에서는 4개의 앵커로 앵커 프리셋의 상태를 알 수 있습니다.
아래는 앵커 프리셋이 'stretch stretch'로 설정되었을 때 앵커의 위치입니다.
앵커는 마우스로 옮길 수 있습니다. (각각 옮기는 것도 가능하고 따로따로 옮기는 것도 가능합니다.)
마우스로 임의로 설정하면 해당 앵커 프리셋은 'custom'으로 변경됩니다.
2. 앵커 프리셋 인터페이스 활용하기
앵커 프리셋을 클릭하면 어떻게 설정할지 인터페이스가 표시됩니다.
원하는 정의를 찾아 클릭하면 됩니다.
시프트(Shift)와 알트(Alt)를 조합하면 더 다양한 설정이 가능합니다.
시프트(Shift)키 : 피벗(pivot), Also set pivot
알트(Alt)키 : 포지션(Position), Also set position
시프트와 알트를 누르고 있으면 아이콘의 모양도 바뀌게 됩니다.
2-1. 피벗(pivot)
피벗은 선택한 UI의 위치를 정하는 기준점입니다.
피벗을 수정하려면 툴의 기준점을 피벗으로 설정해야 합니다.
기준점이 피벗이 되면 씬(Scene)화면에서 피벗이 활성화되고 마우스로 피벗 위치를 바꿀 수 있습니다.
피벗 위치에 따라서 랙트 트랜스폼의 상대 위치가 달라집니다.
피벗을 수정하여 원하는 기준점으로 사용할 수 있다는 것이죠.
2-2. 포지션(Position)
포지션은 오브젝트의 위치나 크기를 설정하는 방법을 지정합니다.
'stretch'옵션은 해당 요소를 자동으로 화면 크기에 비례하도록 해줍니다.
나머지는 요소 자체의 위치를 지정하는 역할이 됩니다.
3. 앵커 프리셋에 따른 동작
앵커 프리셋을 어떻게 설정했느냐에 따라 어떻게 동작하는지 확인해 봅시다.
4개의 버튼을 만들고 각각 다음과 같이 설정했습니다.
이제 버튼들이 있는 공간의 크기를 바꿔봅시다.
앵커 프리셋 설정에 따라 위치나 크기가 변경되는 것을 알 수 있습니다.
마무리
테스트 프로젝트 : github - dang-gun/UnitySamples/UI_AnchorPresets
프로젝트 파일 :
요즘은 웬만해서는 크로스 플랫폼이 기본이라 데스크톱이나 핸드폰의 해상도와 상관없이 최적화 되도록 UI를 구성하는 것이 좋습니다.
그런 면에서 앵커는 유니티에서 UI를 다루기 위한 기초라고 할 수 있습니다.
앵커를 활용하여 다양한 해상도에서 최적화된 UI를 구성해 봅시다.
