글 너무 오랜만에 써서 어떻게 써야할지 계속 쳐다만 보면서 고민중
왜 오랜만인가 - 그동안 올림픽 보고 게임 하면서 지내느라 .. 국가대표 선수들의 경기 하나하나 너무 멋졌어요!
어쨌든 이 글에선 일정 간격으로 UI 오브젝트(이미지, 버튼 등)를 배치하는 방법에 대해 설명합니다.
Layout Group이라는 컴포넌트를 사용합니다~
레이아웃 그룹에도 종류가 여럿 있는데, 각각 전부 설명합니다.
근데 그닥 크게 다른 건 아니라 전체 설명을 먼저 하고 나머지에 대해서 쓰는걸로...
0. 준비
이 글에서는 대충 만든 이 7개의 이미지를 가지고 설명합니다. 구별을 위해 각각 숫자를 붙여줬습니다!
예시는 이미지지만, 위에서도 말했듯이 UI 오브젝트라면 큰 무리 없이 가능합니다.
위 이미지는 그냥 눈대중으로 간격을 맞춘 것입니다. 그래 보이죠?
사실 오브젝트의 갯수가 많지 않다면 캔버스 크기를 적당히 계산해서 하기도 어렵진 않은데요...
오브젝트 수가 많거나, 추가 될 여지가 있다거나 하면 이것도 상당히 귀찮은 작업이죠...
그럴 때 레이아웃그룹을 쓰면 훨씬 손이 덜 가고 쉬워집니다!
1. 레이아웃 그룹 컴포넌트 추가
빈 오브젝트를 만들어서, 정렬하고 싶은 오브젝트들을 전부 빈 오브젝트의 자식으로 넣어줍니다.
이 때 주의할 점! 정렬하고싶은 순서에 맞춰서 넣어주셔야 합니다!
그러고나서 빈 오브젝트에 Layout Group 컴포넌트를 추가합니다.
Grid - 행렬 배치
Horizontal - 수평(가로)으로 정렬
Vertical - 수직(세로)으로 정렬
여기서 원하는 걸 선택합시다.
이 설명에서는 Horizontal Layout Group을 썼습니다! 다른 레이아웃과의 차이에 대한 것은 아래에 나옵니다.
Horizontal Layout Group을 추가하면 바로 이런 모양이 됩니다.
레이아웃 그룹 컴포넌트를 포함한 빈 오브젝트의 크기나 위치, 피봇 등을 조절해주면 됩니다.
레이아웃 그룹은 해당 컴포넌트를 가진 오브젝트의 범위 안에서 정렬을 하는 것이 기본이기 때문에,
오브젝트의 크기가 모든 자식 오브젝트의 크기보다 크면, 그에 맞춰서 자동으로 여백을 만들어냅니다.
(기본으로 설정되어있는 속성 기준입니다. 관련 속성을 바꾸면 이것도 바뀝니다!)
왼쪽처럼 오브젝트를 패널처럼 만들었을 경우, 캔버스 크기(이 경우 가로 값)가
모든 자식 오브젝트의 가로 합보다 커서 이미지처럼 여백이 생겼습니다!
이제 좀 더 자세한 설정을 하기 위해, 레이아웃 그룹의 각 속성에 대해 살펴보겠습니다.
2. 레이아웃 그룹 설정
레이아웃 그룹 컴포넌트의 속성을 대강 살펴보자면 이런 느낌
Padding - 상위 오브젝트의 모서리 부분에 여백을 얼마나 줄 건지
Spacing - 각 하위 오브젝트들 사이의 여백을 얼마나 줄 건지
Child Alignment - 정렬되는 하위 오브젝트들을 상위 오브젝트의 어디에 위치하게 할 건지
Control Child Size - 상위 오브젝트 공간이 남거나 모자랄 때, 하위 오브젝트들의 크기를 조절해 딱 맞출 건지
Use Child Scale - 하위 오브젝트들의 Scale 값을 정렬에 적용할 건지
Child Force Expand - 상위 오브젝트 공간에 맞춰 자동으로 하위 오브젝트 간격을 설정할 건지 (이것)
이제 하나하나 자세히 보겠습니다. 예시는 이번에도 Horizontal 기준이고,
다른 경우에 대해선 더 아래에서 설명합니다. 그래도 기본적인 건 같습니다.
순서를 조금 .. 차례로 읽었을 때 이해하기 쉬운 순으로 해뒀으니,
특정 항목으로 향하려면 책갈피를 적극적으로 활용하세요!
2-1. Child Alignment
쉽게 말해 상위 오브젝트의 어디에 맞춰 정렬을 할 건지... 입니다.
가령 이런 기능은 스프레드 시트 등에서도 곧잘 볼 수 있습니다. 바로 이것!
텍스트를 왼쪽, 가운데, 오른쪽 정렬 할 건지 ... 셀의 위쪽, 중앙, 아래쪽 중 어디에 둘 건지...
이런 것을 설정하는 것과 완전히 같다고 보시면 됩니다.
항목 선택지도 이 3/3의 경우의 수를 모두 조합한 것과 똑같습니다.
그래서 간단히 세 가지의 예시만을 들고와봤습니다.
이 설정은 상위 오브젝트에 따라 정렬하는 것이기 때문에, 상위 오브젝트의 크기를 잘 확인해주세요.
예를 들어 상위 오브젝트의 높이를 줄인 다음 위쪽 정렬을 하면 아래와 같은 느낌이 되겠죠.
응용하기 나름이므로 원하는 결과를 위해 잘 맞춰 봅시다.
2-2. Child Force Expand
기본으로 켜져있는 옵션입니다~
상위 오브젝트 공간에 맞춰 자동으로 하위 오브젝트 간격을 설정할 건지 정할 수 있습니다.
두 경우 모두 다른 것 건드리지 않고, 정렬과 확장만 설정한 것입니다!
Expand를 켜면 저렇게 자동으로 사이 여백이 설정되고, 끄면 여백을 자동으로 설정하지 않습니다.
이 속성을 이용해서 이런 식으로도 응용할 수 있습니다.
정해진 크기의 Scroll View와 함께 사용할 때 이렇게 해서 패딩과 함께 사용하면 편리합니다!
다만 이 속성으로 만들어진 자동 여백은 맨 마지막 오브젝트의 뒤에도 생기기 때문에,
그만큼 상위 오브젝트의 크기를 고려해주셔야 합니다.
2-3. Spacing
자동 여백보다 넓은 여백을 설정하고 싶거나, 정확한 수치의 여백을 원하시는 분께 추천! (?)
급하게 만들어온 조잡한 테두리 (...)
어쨌든 이 이미지는 왼쪽 중앙 정렬에, Child Force Expand 옵션을 꺼준 상태입니다.
이 상황에서 Spacing에 원하는 값을 입력해주면, 알아서 각 오브젝트들이 해당 여백을 따릅니다.
여백 값에는 마이너스 값을 입력할 수도 있어서 자유로운 조절이 가능합니다.
Expand 옵션을 켜준 상태에서도 여백을 지정할 수 있는데,
지정한 여백 값이 상위 오브젝트를 넘어갈만큼 커지면 그 옵션이 켜져있나 꺼져있나 차이가 없습니다.
또 같은 상황에서는 왼쪽, 가운데, 오른쪽 정렬이 의미가 없어지기도 하는데,
이 때 "크윽! 난 가운데 정렬을 하고싶어!" 라면 상위 오브젝트의 크기를 키워주면 되고,
크기를 유지해야 할 경우 Padding으로 모서리 부분에 여백을 주면 됩니다.
2-4. Padding
상하좌우에 여백을 넣을 수 있는 기능이 패딩입니다.
여기서 적용한 수치는 오로지! 모서리에만 적용되며, 오브젝트 간 여백은 Spacing에서 조절합니다.
왼쪽은 상위 오브젝트의 높이를 좀 줄인 상태에서 Expand 옵션을 켜고, 중앙정렬을 한 것입니다.
오른쪽은 패딩에 왼쪽 50, 위쪽 50을 준 거예요. 모서리 부분에 여백이 생겨났죠?
그런 것입니다.
패딩은 기본적으로 상위 오브젝트 안에서 여백을 주려고 노력합니다.
위에서도 Expand 옵션이 켜져서 생긴 여백을 먼저 없애서, 여백이 줄어든 걸 볼 수 있습니다.
다만 입력한 값이 모든 여백 크기를 합한 것보다 클 경우 밀려나기 시작합니다. 위의 "위쪽 여백"처럼요.
위에서 설명한 Expand 옵션으로 생긴, 맨 마지막 오브젝트 뒤의 여백 상황에서는
왼쪽에 패딩 값을 주면 어느정도 해결이 되겠죠~
2-5. Control Child Size
여기 깔끔하게 중앙정렬된 오브젝트들이 있습니다. (다큐멘터리처럼 말함!)
보시면 아시겠지만, 상위 오브젝트에 공간이 엄청 많이 남았죠.
이 때! 이 남은 공간을 없애고 싶을 때 컨트롤 사이즈 옵션을 사용합니다. 단 한 치의 여백도 허용하지 않겠다!
각각의 옵션을 활성화시켜주면, 너비 또는 높이의 여백이 전부 메꿔집니다.
물론 둘 다도 가능합니다!
다만 부모자식 구조를 보시면 아시겠지만, 크기가 조절되는 것은
레이아웃 그룹 컴포넌트를 가진 상위 오브젝트의, 1단계 자식 오브젝트입니다.
제 구조의 경우, Image (1) (파란색)은 커졌지만 Image_white (하얀색)하고 Text는 크기가 그대로죠.
이 설정을 켜주면 상위 오브젝트의 크기에 따라 자동으로 자식 오브젝트의 크기가 조절됩니다.
다만 이 옵션을 활성화하면 자식 오브젝트에서 직접 크기를 수정하기가 불가능해집니다.
옵션을 켜고 가서 확인해보시면 너비 혹은 높이의 입력 칸이 막혀있는 것을 보실 수 있습니다.
이 경우 조절되는 것은 Scale 값이 아니라 실질적인 Width, Height 값입니다.
또 한 번 활성화하면 크기를 바꿔버리는 식으로 적용되므로,
원래 크기로 돌리기 위해서는 Ctrl + Z로 실행취소를 하거나, 옵션을 비활성화한 뒤 직접 수정해주시면 됩니다.
2-6. Use Child Scale
정렬하려는 오브젝트의 Scale X, Y 값이 1이 아닐 때 쓸 수 있는 설정입니다.
UI 특성상 X, Y만 영향을 주고받고, Z는 전혀! 아무 소용도 없습니다.
위 이미지는 왼쪽 위 정렬 상태에서 3번의 스케일을 X, Y 각각 1.5로 변경한 뒤
Expand 옵션의 활성화 여부에 따라서 캡쳐를 한 것인데요 ...
보시면 아시겠지만, Expand 옵션이 켜져 있을 때엔 3번 양 옆의 여백이 좁아보이죠.
그리고 Expand 옵션을 끄면 무려! 3번이 다른 번호와 겹쳐버리는 참사가 일어납니다.
이럴 때 사용하는 것이 Use Child Scale 옵션입니다!
똑같이 확장옵션을 켠 것 / 끈 것입니다. 다만 이 상황에서는 스케일 옵션(Widht만)을 켜줬습니다.
왼쪽은 여백이 좀 넉넉해지고, 오른쪽은 딱 맞게 맞춰진게 보이시나요!
그러나 왼쪽의 경우 확장옵션을 켜도 여백이 균일하진 않습니다.
3번을 기준으로 왼쪽의 여백은 다른 여백과 다르지 않지만, 오른쪽은 다른 여백의 1.5배 정도 되어보이죠.
실제로 스케일을 조절한 오브젝트 다음에 오는 여백은 스케일 값을 따라갑니다.
X스케일이 2라면 다른 여백의 2배가 되는 식.
그래서 여백을 주면서 스케일을 유지하고 싶을 때는, Spacing을 활용해주시는게 낫습니다.
Spacing으로 주어지는 여백도 이 옵션을 사용하느냐 마느냐에 따라 차이가 있습니다.
이 이미지들은 확장옵션을 모두 켠 상태에서 Spacing으로 여백을 50 준 상황입니다.
왼쪽은 스케일 옵션을 꺼뒀는데, 실제로 3의 앞뒤 여백이 좀 좁죠. 여백을 줘도 이렇습니다.
이 옵션을 끄면 유니티에게 3은 여전히 Scale X, Y가 모두 1인 셈입니다.
그런데 스케일 옵션을 켠 오른쪽 이미지를 보면 여백이 다른 여백과 똑같은 크기로 적용되어있죠!
이런 식으로 사용하시면 됩니다.
Height 옵션은 이런 상황에서 쓰면 좋습니다.
스케일을 조절한 오브젝트가 상위 오브젝트의 바깥으로 빠져나가지 않게 하고 싶은데,
피봇이 .5, .5인 경우 당연히 빠져나갈 수 밖에 없습니다.
이 때 Use Child Scale 의 Height 옵션을 켜 주면 이렇게 딱 맞게 조절됩니다!
다만! 주의해주셔야 할 점은, 이 때엔 Expand - Height 옵션을 꺼주셔야 이렇게 나옵니다.
위쪽은 안 꺼도 그냥저냥 잘 나오는데 아래쪽은 그러지 않으면 이.. 이게 뭐야? 상태가 됩니다.
왼쪽 이미지는 왼쪽 위 정렬에서 확장 옵션을 모두 끄고, 스케일 옵션의 Width, Height를 켠 것입니다.
오른쪽은 왼쪽 아래 정렬, 확장 옵션을 모두 끄고, 스케일 옵션의 Height만 켠 것입니다.
물론 피봇을 조절해주시는 것도 방법이 될 수 있지만 귀찮으니까요. (찡긋!)
이 설정은 하위 오브젝트 중 몇몇이 다른 스케일을 갖고 있을 때도 쓸 수 있지만,
모두 일정 배율로 스케일이 조절되었을 때도 물론 사용 가능합니다~
3. Vertical Layout Group
수직 레이아웃 그룹은 말 그대로 자식 오브젝트들을 수직으로 정렬합니다.
이 부분에서 대부분의 세부 조절은 수평의 역으로 설정해줘야 깔끔해집니다.
Expand 옵션의 Width를 켜는 게 아니라 Height를 켜야 한다거나...
예를 들어 오른쪽 이미지는 오른쪽 중앙 정렬을 한 것인데요, 이 경우 Use Child Scale을 모두 켜주고,
Expand 옵션의 Width만 켜고 Height를 끄던 Horizontal과는 달리 Width를 끄고 Height를 켜야 합니다.
수평과 수직이라는 차이가 있는 것이니 하나를 잘 쓰시면 나머지도 쉽습니다!
4. Grid Layout Group
그리드 레이아웃 그룹은 수평, 수직과는 조금 다릅니다.
애초에 한 방향으로 정렬하는 수평, 수직과 차이가 있을 수 밖에 없죠. 그리드는 칸칸이 정렬합니다.
그리드 레이아웃 그룹에서는 프로퍼티의 차이가 조금 있습니다. 다른것만 짚고 넘어가겠습니다~
Cell Size - 오브젝트를 둘 칸 크기
Spacing - 똑같은 개념이지만, X, Y축을 설정 가능합니다.
Start Corner - 1번이 시작할 지점
Start Axis - 가로로 먼저 증가할것인지 세로로 먼저 증가할것인지
Constraint - 행또는 열 수를 특정 값으로 고정할건지
4-1. Cell Size
오브젝트를 정렬할 때, 한 칸의 크기를 몇으로 할 지 정할 수 있습니다.
기본값은 100×100이고, 값을 늘리거나 줄이면 바로 아래 자식의 Width와 Height가 입력값으로 조정됩니다.
이런 식. 이 이미지는 X와 Y 모두 150으로 설정한 것입니다.
하얀 부분은 전과 같은 크기고, 바로 아래 자식인 겉 테두리 부분만 커졌습니다.
4-2. Spacing
같은 개념입니다. 하지만 그리드이기 때문에, X와 Y를 개별 설정할 수 있습니다.
위 이미지는 X와 Y에 150을 입력한 것입니다.
4-3. Start Corner
1번 오브젝트가 어디에서 시작하는지 정할 수 있습니다.
우리는 만화책을 왼쪽에서 오른쪽으로 읽지만, 일본 만화책의 경우 오른쪽에서 왼쪽으로 읽는 것처럼요.
위에서 시작할건지, 아래에서 시작할건지도 정할 수 있어서,
일반적인 숫자 패드(아래에서 시작)나 전화기의 숫자 패드(위에서 시작) 같은 차이를 만들 수 있습니다.
4-4. Start Axis
숫자가 증감하는 방향이 수평이 우선인지, 수직이 우선인지 정할 수 있습니다.
수평 방향을 선택할 경우, 시작 지점이 왼쪽이냐 오른쪽이냐에 따라서
→ 방향으로 증가하는지, 아니면 ← 방향으로 증가하는지도 다르게 나옵니다.
수직 방향을 선택할 경우, 반대의 경우로 시작 지점이 위냐 아래냐에 따라
↑ 방향으로 증가하는지, 아니면 ↓ 방향으로 증가하는지가 달라지고요.
4-5. Constraint
행 또는 열의 수를 지정한 값으로 강제할 건지, 아니면 유동적으로 할건지 정할 수 있습니다.
기본 옵션은 Flexible, 유동적입니다.
유동적 옵션을 켜두면 셀 사이즈와 스페이싱, 패딩 등을 계산해서
가급적 상위 오브젝트의 영역 안에 모든 오브젝트를 넣을 수 있도록 행렬이 조절됩니다.
패딩이나 스페이싱을 만져보시면 쉽게 확인하실 수 있습니다~
그런데 Fixed Column, Fixed Row Count 옵션! 각각 행(가로), 열(세로)의 수를 고정할 수 있습니다.
이걸 설정하게 되면 상위 오브젝트의 크기를 신경쓰지 않고,
정해진 수의 행 또는 열로 배치하는 데에 우선을 둡니다.
그리고 당연하지만, 정렬할 오브젝트가 행과 열의 수의 배수가 아닐 경우엔
남은 칸은 빈 칸으로 처리됩니다. 위 이미지처럼요!
길었다.
올림픽 폐막하는 날에 쓰기 시작했는데 .. 이제 완성하다니..
열심히 썼습니다.. ....... 이거 블로그가 점점 내가 기억하기 위한 메모용이 아니게 되어버리고있어...
하여튼 이렇게 된 거 많이 써주십시오
내 블로그 링크 막 카톡으로도 돌아다니던데 잘 써주셔서 영광스럽습니다
댓글