Today I Learned - Day 20 [스크롤뷰]

이번에는 스크롤뷰를 다뤄볼까 한다. 다만, 간단하게 다루진 않고, 구성 요소끼리 뜯어볼 예정이다.

때문에 사용법 보다는 구성 방식을 서술하는 방식으로 진행되리라고 생각한다.

그런 의미에서 조금 깊게 들어가게 될 것 같다.

 

스크롤뷰의 구성 요소

프로젝트 창에서 우측 마우스 버튼으로 생성 가능한 스크롤뷰는 기본적으로 Scroll Rect 컴포넌트와 Mask 컴포넌트의 조합으로 구성된다. 그리고 여기에 편의성을 위해서 Layout Group을 추가로 조합하기도 한다.

이 때, Scroll Rect는 최상위 객체로, 그 하위로 Mask를 지닌 객체를 넣은 뒤, Mask를 지닌 객체의 하위로 Layout Group을 지닌 객체를 넣는 식으로 구성한다.

그렇다면, '왜 그렇게 구성하는 가'를 살펴보기 위해서, 각 요소 별로 정리해 보자.

 

Scroll Rect

간단하게 말하면, 특정 입력을 이용해서 지정된 객체의 transform을 이동시킬 수 있는 컴포넌트로, Viewport가 표시될 영역의 기준 크기에 해당하고, Content가 이동시킬 내용에 해당한다.

이 Content와 Viewpor 사이의 크기 및 위치 관계를 Scrollbar를 통해서 표시하거나 제어할 수 있는 요소도 함께 가지고 있다.

 

이외에도 Momement Type을 통해서 조작 방식도 설정 가능하고, Inertia를 이용, 스크롤의 끝을 어떻게 처리할지를 정하는 것도 가능하다.

스크롤 감도도 조절 가능한 등, '스크롤'에 집중한 형식의 컴포넌트.

 

다만, content 항목을 ViewPort 기준으로 이동시키는 거라서, content로 지정된 인스턴스가 하위 인스턴스들의 표시 영역 보다 작다면 스크롤이 제대로 되지 않는다. 작업할 때 주의하도록 하자.

 

또한, '표시 영역 제한' 기능이 없다. 그렇기 때문에 하단의 Mask 컴포넌트를 함께 쓰는 것이다.

 

Mask

이미지를 함께 표시한 부분에서 알 수 있듯이, 하위 오브젝트 중에서 현재 이미지와 겹치는 범위만 표시하는 컴포넌트다.

이 때문에 이미지 컴포넌트가 반드시 같이 동반되어야 하며, 그 이미지의 종류에 따라서 '표시 영역의 형태'가 달라진다.

 

오른쪽 마우스 메뉴에서 만들 수 있는 기본 형태에서는 'UIMask'라는 이미지가 들어가 있는데, 그냥 해당 면적을 모두 표시하는 것이라고 봐도 무방하다.

 

다만, 이쪽도 난점은 있는데, 표시되지 않는 인스턴스들은 활성화 된 채로 표시에 제한이 걸리는 것일 뿐이라는 점이다.

때문에 대량의 항목을 제어할 때에는 비활성화나 풀을 이용한 최적화 작업이 반드시 동반되어야 한다.

 

Layout Group

기본 형태에는 포함되어 있지 않지만, 편의성을 위해서 자주 추가되는 컴포넌트.

하위 인스턴스들을 자동으로 정렬해 주면서 해당 인스턴스의 크기도 자동으로 늘리고 줄이는 역할을 한다.

 

• Vertical Layout Group [세로 정렬]
• Horizontal Layout Group [가로 정렬]
• Grid Layout Group [2차원 정렬]

이렇게 3종이 존재하니, 원하는 배치 방식에 따라서 선택하여 사용하면 된다.

 

 

 

이 셋을 함께 사용하면, Scroll Rect가 Content를 이동시키면 Mask가 Content의 일부 만 보이게끔 하면서 Layout Group이 Content의 하위 인스턴스들을 정리하는, 통상적으로 쓰이는 스크롤뷰가 된다.

다만, 스크롤뷰로만 제한되어 있는 기능인 것은 아니기 때문에, 이를 응용해서 다른 기능을 만들어 볼 수도 있을 것이다.

특히 Mask는 다양한 곳에서 꽤 잘 쓰이는 것으로 알고 있다.

이러한 점을 고려해서 다양한 시스템을 구상해 보는 것도 유익할 것이다.