[Unity] Unity ScrollRect에서 사용할 수 있는 동적 List 구현하기

유니티를 다루다보면 스크롤이 가능한 List를 구현해야 할 때가 있다.

ScrollRect의 공식 튜토리얼을 살펴보면 이미지를 스크롤 하는 방법이 동영상으로 설명되어 있다.

길이가 고정되어 있는 리스트는 동영상에 나오는 기본 기능들을 숙지하면 충분히 구현할 수 있다.

그렇지만 실행중에 그 길이가 가변적으로 변하는 동적 리스트를 구현하고자 할때는 ScrollRect는 물론이고 다른 UGUI 컴포넌트들의 이해도 필요하다.

Movement Type을  Unrestricted로 할 경우 ScrollRect는 아무것도 신경쓰지 않고 그냥 스크롤을 하게 된다.

하지만 다른 두 타입의 경우에 ScrollRect는 Content로 등록된 RectTransform의 위치와 자기 자신의 위치를 비교하여 Content의 위치가 범위를 벗어났을 경우 더 이상 스크롤을 하지 못하도록 해 준다.

(Viewport를 이용할 경우 Viewport를 기준으로 계산하게 된다. 굳이 Viewport를 사용할 필요가 없다면 넣지 않아도 충분히 동작하니 비워두자...)

그렇기 때문에 Content 하위에 아무리 많은 오브젝트를 리스트처럼 넣어놓아도 Content 자체의 크기가 늘어나지 않는다면 ScrollRect는 기대했던 동작을 하지 않는다.

그러므로 동적 리스트를 만들기 위해서는 Content의 RectTransform 사이즈를 리스트의 전체 크기에 맞춰서 변경해 주어야 한다. 이 때에 필요한 것이 바로 Content Size Fitter 컴포넌트이다. 이 컴포넌트는 보통 Horizontal, Vertical, Grid Layout Group과 함께 사용하는데 이들은 하위에 있는 자식 오브젝트들을 각자 속성에 맞게 정렬해준다.

Content Size Fitter는 자기 자신의 크기를 이 레이아웃 컴포넌트가 정렬시킨 하위 오브젝트들의 총 크기로 덮어씌운다. Vertical Layout Group의 경우에는 Vertical Fit을, Horizontal Layout Group의 경우에는 Horizontal Fit을 사용하여 동적으로 변경될 부분의 길이를 자동으로 맞춰준다. 여기서 Layout Group의 Padding이나 Spacing의 값도 물론 함께 계산된다.

컨텐츠의 값이 동적으로 변화할 때 신경써야 할 부분은 Pivot값을 설정하는 부분이다. Layout에 자식 오브젝트를 넣을 때 이 Pivot값을 기준으로 늘어날 방향이 정해지게 된다.

기본 값으로 (0.5, 0.5)가 지정되어 있는데 이때에는 중심을 기준으로 위아래 혹은 양옆으로 늘어나게 된다. 위를 고정하고 아래로 늘어나는 경우에는 (0.5, 1), 왼쪽을 고정하고 오른쪽으로 늘어나는 경우에는 (0, 0.5)를 이용하면 된다.

자식 오브젝트의 크기에 따라 사이즈가 변경되는 Content가 완성되었다면, ScrollRect가 자동으로 크기를 계산하여 딱 맞는 스크롤을 할 수 있도록 해준다.