UI 비법서 (1)

 

당신의 레이아웃에 딱맞는 Content Size Fitter

 

 

작성 기준 버전 :: 2018.3 -2019.4

 

[이 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다]

 

UI를 제작할 때, 보기 좋은 레이아웃을 만들어 내는 일은 매우 어렵다. 어렵사리 보기 좋은 레이아웃을 만들어 냈다고 해도 UI에 들어가는 내용의 크기가 바뀔 수 있는 상황이라면 정해진 텍스트나 이미지 등의 콘텐츠가 정해진 레이아웃을 벗어나는 경우가 쉽게 발생한다.

이러한 유동적인 상황에 대처하는 UI를 만드는 것은 이전까지는 스크립트에서 일일이 처리해야하는 번거로움이 있었다. 그런 번거로움을 해소하기 위한 기능으로 유니티는 콘텐츠 사이즈 피터(Content Size Fitter)라는 컴포넌트를 지원한다. 이 컴포넌트를 이용해서 콘텐츠의 크기에 따라 자유롭게 변화하는 UI를 제작하는 방법에 대해서 알아보도록 하자.

 

 

콘텐츠 사이즈 피터(Content Size Fitter)

 

콘텐츠 사이즈 피터는 단어 그대로 컴포넌트가 붙어있는 오브젝트의 크기를 내용물, 콘텐츠의 크기에 맞게 만들어주는 역할을 한다.

 

 

콘텐츠 사이즈 피터 컴포넌트를 게임 오브젝트에 추가하는 방법은 위의 이미지처럼 씬에서 Add Component 버튼을 누르고 "Content"를 검색해서 나오는 Content Size Fitter 컴포넌트를 선택하는 것이다.

 

 

콘텐츠 사이즈 피터를 사용하지 않으면 위의 이미지처럼 내용이 UI의 사이즈보다 커지면 옵션에 따라 뒷 부분이 잘리거나 영역을 넘어가서 표시되는 바람에 다른 UI를 침범하는 문제가 발생한다.

 

 

콘텐츠 사이즈 피터를 사용하면 전과 다르게 UI의 사이즈가 텍스트의 내용에 따라 자동으로 변하는 것을 확인할 수 있다.

 

 

추가된 콘텐츠 사이즈 피터는 인스펙터 뷰에서 위의 이미지와 같은 모습으로 보이며, Horizental Fit과 Vertical Fit라는 두 가지 프로퍼티를 설정할 수 있다.

 

선택 가능한 옵션으로는 Unconstrained, Min Size, Preferred Size 이렇게 세 가지가 있다. Unconstrained는 UI의 크기를 콘텐츠에 맞추지 않는 옵션으로 UI의 크기를 직접 맞추거나 고정된 크기를 사용해야 하는 경우 사용하면 되는 옵션이다. Min Size는 레이아웃 요소의 최소 크기를 기준으로 UI의 크기를 맞추는 옵션인데, 이 옵션의 경우에는 단독으로 사용되는 경우는 거의 없고 Layout group 계열의 컴포넌트와 함께 주로 사용된다. 마지막으로 Preferred Size 옵션은 기본적인 콘텐츠의 크기에 따라 UI의 크기를 맞추는 옵션으로 위의 예시 이미지처럼 텍스트나 이미지에 단독으로 콘텐츠 사이즈 피터를 사용하는 경우에 주로 사용된다.

 

 

 

 

 

콘텐츠 사이즈 피터와 피봇

 

콘텐츠 사이즈 피터로 인해 Rect Transform의 크기가 변경될 때는 UI의 피벗을 중심으로 조정되기 때문에, 피벗을 사용해서 UI의 크기가 조정되는 방향을 조절할 수 있다. 위의 이미지 중에서 콘텐트 사이즈 피터를 붙인 gif를 보면 피벗이 UI의 중심에 있어서 피벗을 중심으로 양 쪽 방향을 향해서 UI가 커지는 것을 볼 수 있다.

 

 

위의 이미지를 보면 X Pivot을 0으로 변경해서 UI의 피봇을 가장 좌측으로 옮긴 결과, UI의 트랜스폼이 왼쪽에서 오른쪽으로 확장되는 것을 볼 수 있다.

 

 

콘텐츠 사이즈 피터와 스크롤 뷰(Content Size Fitter & Scroll View)

 

콘텐츠 사이즈 피터를 가장 잘 응용할 수 있는 부분은 바로 스크롤 뷰이다. 이전에 스크롤 뷰에 대해서 설명했던 글에서는 스크롤 뷰에 들어가는 내용에 따라서 Content 오브젝트의 크기를 맞춰주는 방법을 스크립트로 설명했지만 콘텐츠 사이즈 피터를 사용하면 스크립트를 작성하지 않고도 훨씬 편하게 Content 오브젝트의 크기를 맞출 수 있다.

 

이제 콘텐츠 사이즈 피터를 사용해서 스크롤 뷰의 Content의 크기를 조절하는 방법을 알아보자.

 

 

우선 (200, 200) 사이즈의 스크롤 뷰를 생성한다.

 

 

 

그리고 스크롤 뷰의 Content 오브젝트 아래에 (150, 50) 사이즈의 이미지를 하나 만들어주자.

 

 

콘텐츠 사이즈 피터가 없는 상태에서 플레이 버튼을 눌러서 실행해보면 스크롤 뷰의 크기는 이미지의 크기나 갯수에 상관없이 동작하는 것을 확인할 수 있다.

 

다음에는 이 스크롤 뷰에 콘텐츠 사이즈 피터를 적용해보자.

 

 

우선 아이템들이 들어갈 Content 오브젝트를 선택하고 여기에 오브젝트들을 자동으로 정렬해주는 Vertical Layout Group 컴포넌트를 추가한다.

 

원하는 정렬 방법에 따라 Grid Layout Group이나 Horizontal Layout Group을 사용해도 된다. 각 프로퍼티의 값은 보기 좋아보이는 값을 찾아서 입력하도록 하자. 이 예시에서는 위 아래의 패딩을 10씩 주고 각 아이템 간의 간격을 5로 설정했다. 그리고 아이템의 정렬은 상단 중앙으로 설정했다.

 

그 다음에 내용물에 따라 오브젝트의 크기를 조정해주는 콘텐츠 사이즈 피터 컴포넌트를 추가한 뒤에 사용한 Layout Group에 맞게 Fit 옵션을 Min Size로 변경한다.

 

 

스크롤 뷰에 콘텐츠 사이즈 피터와 레이아웃 그룹을 적용하고 플레이를 해보면 아이템이 추가/제거됨에 따라서 자연스럽게 내부 Content의 크기가 늘어나서 스크롤이 가능하게 되는 것을 확인할 수 있다.

 

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

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

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

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

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

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

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

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

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

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

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

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의 크기를 조절할 수 있다.

 

 

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

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

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

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

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

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

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

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

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

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

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

+ Recent posts