[Unity][UI Builder] 그림(아이콘)과 텍스트(라벨)가 둘 다 있는 버튼 만들기

 

요새 네이버 블로그를 부활시켰는데, 거기서만 개발 관련 내용을 포스팅하자니 아쉬웠다. 대부분의 개발자는 구글에 검색을 하는데, 내가 포스팅한 내용이 검색에 노출이 되지 않으면 도움이 안될수도 있겠다 싶어서 티스토리 블로그도 냅다 팠다. 근데 플랫폼만 두 개인거지 내용은 복붙하는 식으로 하거나, 아니면 티스토리에서 먼저 작성하고 네이버 블로그에 링크를 올리는 식으로 할 것 같다.

일단 이번에는 네이버 블로그에서 먼저 작성했으니 링크부터 붙이고 본다.

https://blog.naver.com/PostView.nhn?blogId=hotsunchip&logNo=222858417753

[Unity][UI Builder] 그림(아이콘)과 텍스트(라벨)가 둘 다 있는 버튼 만들기

 

그래도 본문은 긁어왔다. 아래처럼 버튼 아이콘 밑에 라벨이 위치한 버튼을 만드는 것이 목표이다. 흠... 구글 검색 유입을 높이려면 냅다 영어로 설명해야하나 싶긴 한데 핵심 단어만 영어로 써두면 알아서 잘 검색해주지 않을까 싶다. 뭐 그래도 쭈글쭈글하게 적자면 Unity Button with label under icon, Button with both label and icon, Button with text under the image... 요정도만 적을까... 근데 사실 배치만 바꾸면 아이콘 옆에 텍스트가 들어가는 버튼도 같은 원리기 때문에... Icon next to text inside a button, Button with text next to icon도 적어야겠다... 헤헤...

Unity Button with Label below Button Icon

웹 개발을 할 때는 쉽게 뚝딱뚝딱 만들었던 것 같은데, 유니티에서는 애를 좀 먹었다.

Unity Builder의 기본 Button은 이미지를 배경으로 넣을 수 있는데, 여기에 텍스트를 입력 시 그림 위에 글자가 올라간다.

 

결론은 간단하다. Button 안에 아이콘을 Background Image로 가지는 VisualElement와 버튼의 이름을 Text로 가지는 Label을 넣어 배치하는 것이다. (다른 방법이 있다면 댓글로 알려주세요!) 클릭 이벤트 핸들러는 버튼에 달고, hover이나 active 됐을 때 자식 요소들 즉 VisualElement와 Label의 스타일을 바꾸어주는 식으로 접근했다. 버튼을 하나만 만들 것이 아니라면, 편의를 위해 uss의 클래스를 작성하는 것을 추천한다. 사실 이렇게 구구절절 설명을 적는 것보다 코드를 읽는 게 더 도움이 되는 걸 알기에 코드도 첨부한다. 일단 한 단계씩 차례로 가보자.

 

1. UI Builder에서 Button 만들기

먼저 UI Builder에서 아래와 같은 구조를 가진 버튼을 만들어준다. GeneralBtn은 나중에 이벤트 핸들러를 달아주기 위한 이름이고, 우리가 지금 봐야할 것은 안에 속해있는 BtnIcon과 BtnLabel이다. uss selector에 대해서 곧 말할 거긴 한데, VisualElement에 클래스를 설정하거나 이름을 설정하는 두 가지 식별 방법 중에서, 나는 Hiearchy 상에서 한 눈에 알아볼 수 있도록 이름을 사용하였다. UI 개발의 초입이라 그런진 모르겠는데 두 방법 사이에 성능 차이는 미미하게 느껴져서, 본인이 선호하는 방법으로 진행하면 될 것 같다.

Button Hiearchy

2. uss (Style Sheet) 작성하기

UI Builder Window

이제 UI Builder 창의 좌측 상단에 있는 StyleSheets 탭의 + 버튼을 눌러 새로운 uss 파일을 생성해주자. 이제 위에서 만든 버튼에 클래스를 적용시키고 uss selector을 이용해서 스타일을 지정해줌으로써 우리가 목표한 버튼 모양을 만들 것이다. uss selector에 대한 자세한 내용은 아래의 unity 공식 매뉴얼을 참고하자. 모를 때 보면 무슨 소리인지 모르겠지만 알고 보면 정말 다 적혀있는 마법의 매뉴얼이다. 이전에 css를 다뤄본 적이 있는 사람이라면 이미 알고 있을 것이다.

 

보고 오셨는가? 이제 코드를 작성해보겠다. 만드는 세세한 과정을 하나하나 캡쳐해서 정리하면 블로그 활동을 길게 못할 것 같기도 하고, 다들 코드 한번 읽어보면 아하! 무릎을 탁 칠 걸 알기에 아래에 코드를 첨부한다.

/* uss 파일 */
.setting-btn {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10%;
    margin: 0;
    padding: 8px;
    border-width: 0;
    background-color: rgba(250, 250, 250, 0);
    transition-duration: 0.25s;
    transition-timing-function: ease-out-back;
}

.setting-btn:hover {
    background-color: rgba(250, 250, 250, 0.22);
}

.setting-btn #BtnLabel {
    -unity-font-style: bold;
    font-size: var(--font-tiny, 8px);
    -unity-text-align: middle-center;
    color: var(--off-white);
    margin: 0;
    padding: 0;
}

.setting-btn #BtnIcon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 2px;
    padding: 0;
    border-width: 0;
    -unity-background-scale-mode: scale-to-fit;
}

 

헷 사실 uss는 읽어봐도 모를 것이다. 이건 본인이 만들 버튼의 위치나 배치에 따라 달라지므로 적당히 잘 차용해서 쓰길 바란다. 작업을 쉽게하는 방법은, UI Builder의 좌측 상단 StyleSheets 탭에, + 옆에 있는 공간에 생성하고 싶은 클래스 이름을 쳐서 새 클래스를 만든 뒤, 요소에 일단은 적용시킨 다음 우측 Inspector 창에서 설정을 하나씩 바꿔가면서 변하는 걸 확인하는 것이다.

(코드에서 보이는 transition 관련 속성이나, 속성값으로 들어간 var()에 대해서는 추후 포스팅 예정으로, 지금은 신경쓰지 않고 넘어가자.)

 

여튼 이렇게 작성하고 나면, .setting-btn을 버튼(예시의 경우에는 GeneralBtn)에 적용시켜준다. UI Builder에서 좌측 상단에 생기는 태그를 드래그앤드롭 방식으로 요소에 넣어주면 된다. 그럼 자동으로 자식 중에서 BtnLabel과 BtnIcon이라는 이름을 가진 요소에 우리가 위에서 작성한 스타일이 적용된다.

 

3. Event Handler 연결하기

이제 C# 스크립트를 하나 만들어서 Button에 핸들러를 연결시켜 클릭 이벤트가 발생했을 때 처리를 해줄 것이다. 기존의 UI Button에서 이벤트를 다루는 것과는 조금 달라서 이것 또한 추후 포스팅으로 다뤄볼 예정이다. 여기서는 간단하게 핵심 코드만 적어보겠다.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class MainMenu {
    [SerializeField] private UIDocument m_UIDocument;

    public Button generalBtn;

    void Start() {
        var rootElement = m_UIDocument.rootVisualElement;

        // connect visual elements with variables
        generalBtn = rootElement.Q<Button>("GeneralBtn");
        // connect handler with visual elements
        generalBtn.clickable.clicked += OnClickGeneralBtn;
    }
    
    private void OnClickGeneralBtn() {
        Debug.Log("click btn");
    }

 

 

정리를 하면 할수록 정리가 필요해보이는 내용이 가지를 쳐서, 한 주제에 대해 어디까지 정리해야 할지 가늠이 안된다. 실제로 이 글만 해도 untiy에서 vector 형식(svg 형식)으로 아이콘을 Import하는 방법이나, UI Document를 생성하고 UI Builder을 통해 만든 Visual Tree Asset(uxml 파일)을 적용시키는 방법, 버튼 클릭 이벤트를 처리하는 방법이나 여러 버튼을 인덱싱해서 사용하기 위해 핸들러에 해당 인덱스를 넘기는 방법, 버튼을 클릭했을 때 색이 바뀐 채로 유지되게 하는 방법, custom property 라고 해서 변수를 통해 스타일을 조작하는 방법과 메뉴를 클릭했을 때 트랜지션을 넣는 방법 등등의 내용을 생략하고 작성하였다. 이제 방금 말한 것들을 찬찬히 하나씩 정리해가야지!

 

끗!