[유니티 기초] UI 편 - Scroll View 의 기본 구조

이번 글에서는 Scroll View 에 대해 다뤄보겠습니다. Scroll View 는 게임에서 스테이지 선택, 캐릭터 선택, 인벤토리, 스킬 목록 등 아주 다양한 곳에서 활용될 수 있기 때문에 사용법을 꼭 익혀 두시는 게 좋을 것 같습니다. Scroll View의 원리를 제대로 이해하고 싶으시다면 Rect Transform 의 Anchor 속성에 대한 이해가 필요합니다. 필요하신 분은 여기를 참고해 주세요.

 

우선 아래 그림과 같은 경로를 통해 Scroll View 를 하나 만들어 줍니다.

 

 

Scroll View 구조

Scroll View를 만들고 작시 노드를 펼쳐 보면 다음과 같은 구조로 되어 있습니다.

 

먼저 가장 상위 노드인 Scroll View 오브젝트에는 Image 컴포넌트와 ScrollRect 컴포넌트로 구성되어 있습니다.

 

Image 컴포넌트는 Scroll View 의 배경입니다. Image 편에서 설명한 것과 같이 Source Image 를 변경하면 Scroll Rect의 배경이 해당 이미지로 채워집니다.

 

여기서는 중요한 ScrollRect 컴포넌트에 대해 자세히 알아보도록 하겠습니다. Inspector 창을 보면 ScrollRect 컴포넌트에 많은 속성들이 있습니다.

 

 

▶ Content : Scroll View에 들어갈 아이템들의 부모 객체를 설정해 줍니다. 기본은 맨 위에 있는 Scroll View 의 구조 중 3번째에 있는 Content 객체가 설정되어 있습니다.

 

▶ Horizontal: 수평(↔) 스크롤 가능 여부를 선택합니다.

▶ Vertical : 수직(↕) 스크롤 가능 여부를 선택합니다.

▶ Movement Type : Unrestricted, Elastic, Clamped 3가지 종류가 있습니다.

    ▷ Unrestricted : Scroll View 영역에 제한이 없어집니다.

    ▷ Elastic : Scroll View 의 영역이 Content 객체의 크기로 제한되지만 끝 쪽으로 갔을 때 튕겨집니다.

    ▷ Clamped : Scroll View 의 영역이 정확히 Content 객체의 크기로 제한됩니다.

 

▶ Inertia : 스크롤시 관성 적용 여부를 설정합니다. 관성이 설정되면 스크롤한 속도에 따라 스크롤을 멈춘 후 일정부분 더 움직이게 됩니다.

    ▷ Deceleration Rate : 관성의 감속 비율입니다. 0 이면 Intertia 를 설정하지 않은 것과 같고 1 이면 아주 살짝만 움직여도 끝까지 스크롤됩니다.

 

▶ Scroll Sensitivity : 스크롤 민감도입니다.

 

▶ Viewport : Scroll View 의 Viewport 객체를 설정해 줍니다. Viewport 란 Scroll View 에서 실제로 보여지는 영역을 의미합니다. 기본은 맨 위에 있는 Scroll View 구조 중 두 번째 객체인 Viewport 객체가 설정되어 있습니다.

 

▶ Horizon Scrollbar : 수평 스크롤바의 객체를 설정합니다. 

    ▷ Visibility : 스크롤바를 어떻게 보여줄지 설정합니다.

        ≫ Permanent : 항상 보이는 상태입니다.

        ≫ Auto Hide : 스크롤이 필요 없으면 감춥니다.

        ≫ Auto Hide and Expand Viewport : 스크롤이 필요 없으면 자동으로 감춥니다. Viewport 의 크기가 스크롤바 표시부분 만큼 자동으로 늘어나거나 줄어듭니다.

 

▶ Vertical Scrollbar : 수직 스크롤바의 객체를 설정합니다.

 

▶ OnValueChanged 이벤트 : 스크롤 위치가 변할 때 발생하는 이벤트입니다.

 

다소 복잡해 보이는 설정이지만 실 사용에 있어서 특별한 경우가 아니라면 이 부분을 수정할 일은 많지 않습니다. 개인적으로는 게임에서 사용할 때 스크롤바가 아예 안보이도록 하는 경우가 더 많아서 Horizon Scrollbar 와 Vertical Scrollbar 에 연결된 객체만 None 으로 변경해주고 사용합니다.

 

여기까지 Scroll View UI 에 대해 알아보았습니다. 그런데 이것만 가지고는 이것을 어떻게 사용하고 활용할 것인지 처음 접하시는 분들은 감이 잘 안 올 수 있습니다. 다음 글에서는 Scroll View 의 실제 사용법에 대해 예제와 함께 진행하도록 하겠습니다.