[Unity3D] UGUI - ScrollView 사용법

ScrollView 사용법

 

작성 기준 버전 :: 5.4 - 2019.4

 

 

게임에서 UI 창보다 크거나 많은 내용이 들어가는 콘텐츠를 UI 안에 담기 위해서 사용하는 방법은 여러가지가 있다. 그 중에 대표적인 방법이 바로 버튼 같은 것을 이용해서 페이지를 넘기는 것이고 또 하나는 스크롤을 이용해 UI 내에서 이동하면서 볼 수 있는 스크롤 뷰이다. 이 두 가지의 방법 중에서 어떤 것을 사용할 것인지 결정하는 차이점은 내 개인적인 생각이지만 바로 '연속성'이라는 것이다.

 

UI에 들어가는 콘텐츠가 연속적이지 않고 흐름이 끊어져도 상관 없다면 페이지 방식을 사용하는 것이 좋고, 들어가는 콘텐츠가 커다란 하나의 것이거나 연속적인 면이 중요해서 연결되어져야 한다면 스크롤 뷰 방식이 적당할 것이다.

 

이런 스크롤 뷰 방식은 스스로 직접 구현하려면 상당히 귀찮은 면이 많겠지만 유니티 엔진의 UGUI에서는 이미 스크롤 뷰를 지원하고 있다. 그래서 간단한 클릭 몇 번만으로도 스크롤 뷰를 뚝딱하고 만들 수 있다.

 

 

Hierachy 뷰에서 우클릭을 UI 메뉴에서 Scroll View를 선택하면 스크롤 뷰가 생성된다.

 

 

스크린샷과 같은 형태로 스크롤 뷰가 생성되는데 내용을 하나씩 살펴보자면.

 

Scroll View :: 우리가 생성한 스크롤 뷰

Viewport :: 표시하고자 하는 콘텐츠가 보여질 곳

Content :: 표시하고자 하는 내용물

Scrollbar Horizontal :: 수평 스크롤바

Scrollbar Vertical :: 수직 스크롤바

 

를 나타낸다. 스크롤 뷰를 원하는 형태로 수정하기 위해서는 Hierachy에서 Scroll View를 선택하고 Inspector 창을 보면 스크롤 뷰에 대한 옵션을 볼 수 있다.

 

 

스크롤 뷰의 옵션들은 Scroll Rect라는 Component에 대부분 포함되어 있다.

 

Horizontal :: 스크롤 뷰의 수평 이동을 허용할 것인가?

Vertical :: 스크롤 뷰의 수직 이동을 허용할 것인가?

Movement Type :: 스크롤 이동 타입(세 가지가 있다.)

Unrestricted - 콘텐츠가 스크롤 밖으로 나가도 조금도 제한하지 않는다.

Elastic - 콘텐츠가 스크롤 밖으로 나가면 정해놓은 값(Elasticity)만큼의 속도로 스크롤 뷰 안으로 돌아온다.

Clamped - 콘텐츠가 스크롤 밖으로 나가지 못하게 완전히 제한한다.

Inertia :: 관성. 이 값을 켜두면 스크롤을 끌다가 놓으면 바로 정지하지 않고 끌던 속도가 점점 감소하며 멈춘다.

Scroll Sensitivity :: 스크롤 민감도

Horizontal Scrollbar :: 수평 스크롤바

Visibility - 스크롤바가 보이는 방식(항상 보이는 방식인지 콘텐츠의 크기에 따라 보이는 방식인지를 설정할 수 있다.)

(수직 스크롤바 역시 같은 내용이다.)

 

이 다음으로 다뤄야하는 내용은 바로 콘텐츠이다.

 

 

바로 뷰포트 밑에 있는 Content 라는 게임 오브젝트인데, UI에서 보여주고자 하는 내용들은 모두 이 Content 오브젝트의 자식 오브젝트로 배치해야한다. 그리고 이 Content의 크기에 따라 스크롤 뷰의 크기가 결정된다. 그리고 초기 상태는 top, stretch 상태로 설정되어서 크기 값이 Right, Height로 되어있는데 좀더 직관적인 값인 Width, Height로 보기 위해서 top, left 상태로 바꿔주는 것을 추천한다.

 

 

현재 설정된 Width 583, Height 300이라는 크기를 Scene에서 보면 아래와 같은 크기이다.

 

 

게임을 제작할때 필요한 스크롤 뷰의 크기에 맞춰서 잘 조절해 주어야 한다. 다만 고정된 크기의 스크롤 뷰라면 Inspector 창에서 크기를 직접 조절해도 상관은 없지만 만약 아이템의 갯수와 같은 요소를 통해서 보여져야하는 스크롤 뷰의 크기가 달라져야 한다면 스크립트를 통해서 Content의 크기를 조절하는 방법도 알아둬야 한다.

 

우선 스크롤 뷰를 쉽게 가져오기 위해서 스크롤 뷰를 가진 오브젝트에 스크립트를 추가한다.

 

 

 

 

그리고 추가한 스크립트를 통해 다음과 같은 코드를 작성하면 된다.

 

ScrollView의 Content 크기를 조절하는 스크립트

using UnityEngine;
using UnityEngine.UI;   // UI와 관련된 스크립트 작업을 위해서 추가해 주어야 한다.
using System.Collections;

public class ScrollViewPractice : MonoBehaviour
{
    // 스크롤 뷰와 관련된 수정을 하기 위해 가지고 있는 변수
    ScrollRect scrollRect;

    // Use this for initialization
    void Start ()
    {
        scrollRect = GetComponent<ScrollRect>();    // 게임 오브젝트가 가지고 있는 ScrollRect를 가져온다.

    }
   
    void SetContentSize()
    {
        float width = 100.0f;
        float height = 100.0f;
        // scrollRect.content를 통해서 Hierachy 뷰에서 봤던 Viewport 밑의 Content 게임 오브젝트에 접근할 수 있다.
        // 그리고 sizeDelta 값을 통해서 Content의 높이와 넓이를 수정할 수 있다.
        scrollRect.content.sizeDelta = new Vector2(width, height);
    }
}

 

위의 코드를 적절히 응용하면 아이템 개수에 따라, 혹은 원하는 크기로 Content의 크기를 조절할 수 있다.

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

에셋스토어

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

[투네이션]

-

[Patreon]

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

[디스코드 채널]

Join the 베르의 게임 개발 채널 Discord Server!