유니티 UI 버튼, 슬라이더, 텍스트 구성 실습

유니티 UI 버튼, 슬라이더, 텍스트 구성 실습

여러분, 게임 속에서 버튼 하나 눌렀을 뿐인데 캐릭터가 움직이고, 슬라이더를 조절하자마자 화면이 변하는 그 짜릿한 순간 느껴본 적 있으신가요?

안녕하세요! 저는 최근에 유니티(Unity)로 작은 미니게임을 만들면서 UI 버튼, 슬라이더, 텍스트를 활용해봤는데요. 사실 처음에는 “이거 어렵지 않을까?” 하는 두려움이 있었어요. 그런데 막상 하나씩 실습해보니까 생각보다 간단하면서도, 결과물이 금방 눈에 보이니까 재미가 배가되더라구요. 이번 글에서는 제가 직접 경험한 실습 과정을 바탕으로, 초보자도 따라 할 수 있는 버튼과 슬라이더, 그리고 텍스트 UI 구성 방법을 소개하려 합니다.

목차

유니티 UI 기본 개요 버튼(Button) 실습: 이벤트 연결하기 슬라이더(Slider) 실습: 값 변화 처리 텍스트(Text) 실습: 실시간 출력 버튼 + 슬라이더 + 텍스트 조합 활용 자주 겪는 문제와 팁

유니티 UI 기본 개요

유니티의 UI 시스템은 Canvas라는 영역 위에 여러 가지 UI 요소를 배치하는 방식으로 작동합니다. 버튼, 슬라이더, 텍스트 같은 기본 컴포넌트들은 게임 오브젝트 형태로 존재하고, 각각 이벤트를 연결하거나 값을 업데이트하는 방식으로 동작합니다. 저도 처음에는 UI와 스크립트 연결 과정이 헷갈렸는데, 핵심은 “UI → 스크립트 → 게임 동작” 이 흐름을 이해하는 것이더라구요. 이 기본 구조를 익혀두면, 다양한 UI 조합도 쉽게 구현할 수 있습니다.

버튼(Button) 실습: 이벤트 연결하기

버튼은 가장 기본적인 UI 요소로, 특정 액션을 트리거할 때 사용됩니다. 유니티 에디터에서 Button을 추가하고, OnClick 이벤트에 함수를 연결하면 클릭 시 원하는 동작을 실행할 수 있습니다. 저는 처음 실습할 때 버튼을 눌렀을 때 텍스트가 변하도록 설정했는데, 단순하지만 결과를 바로 확인할 수 있어서 성취감이 크더라구요.

구성 요소	설명	예시
Button 컴포넌트	UI 상호작용 트리거	Start 버튼
OnClick 이벤트	클릭 시 실행할 함수 연결	게임 시작 함수 호출
Text UI	버튼 라벨 표시	“Play”

반응형

슬라이더(Slider) 실습: 값 변화 처리

슬라이더는 음량 조절, 진행도 표시, 수치 입력 등에 자주 사용됩니다. 유니티에서는 Slider 값을 가져와서 텍스트로 표시하거나, 다른 오브젝트의 속성에 적용할 수 있습니다. 예를 들어 음량 조절 슬라이더를 만들어서 오디오 소스 볼륨에 바로 반영하는 식이죠. 아래는 제가 실습하면서 느낀 핵심 단계들입니다.

1. 슬라이더 UI를 Canvas에 추가한다.
2. 최소값과 최대값을 설정한다.
3. OnValueChanged 이벤트에 함수를 연결한다.
4. 연결된 함수에서 값 변화를 처리한다.

텍스트(Text) 실습: 실시간 출력

UI에서 텍스트는 단순히 글자를 표시하는 것 이상으로 중요한 역할을 합니다. 게임 내 상태 메시지, 점수 표시, 설정 값 출력 등 다양한 곳에 쓰이죠. 제가 했던 간단한 실습은 슬라이더의 값을 텍스트에 실시간으로 표시하는 거였는데요. Slider.value를 가져와 Text.text 속성에 반영하면 바로 해결됩니다. 눈으로 바로 값이 바뀌는 걸 보니 확실히 동적인 UI 느낌이 나더군요.

버튼 + 슬라이더 + 텍스트 조합 활용

이제 버튼, 슬라이더, 텍스트를 각각 따로 실습해봤으니, 이들을 조합해 하나의 작은 기능을 만들어볼 수 있습니다. 예를 들어, 버튼을 눌렀을 때 슬라이더의 현재 값을 텍스트로 출력하거나, 특정 설정을 저장하는 UI를 만들 수 있죠. 아래 테이블은 제가 실습한 간단한 조합 예시입니다.

UI 요소	역할	예시 동작
버튼	액션 트리거	현재 슬라이더 값 출력
슬라이더	값 입력	0~100 사이 수치 조절
텍스트	결과 표시	“현재 값: 75”

자주 겪는 문제와 팁

실습을 하다 보면 몇 가지 흔히 겪는 문제들이 있습니다. 저도 처음에 헤맸던 부분인데, 미리 알고 있으면 시간을 많이 절약할 수 있어요. 아래 팁들을 참고해 보세요.

• 버튼 이벤트가 동작하지 않으면, 함수가 public인지 확인하기
• 슬라이더 값 반영이 안 되면 OnValueChanged 이벤트 연결 여부 확인하기
• 텍스트 업데이트가 느리다면 Update() 대신 이벤트 기반으로 처리하기

Q 버튼 클릭 이벤트가 동작하지 않아요

대부분 함수가 public으로 선언되지 않았거나, OnClick 이벤트에 함수가 올바르게 연결되지 않은 경우가 많습니다. 함수 접근 제한자를 확인해 보세요.

Q 슬라이더 값이 실시간으로 반영되지 않아요

OnValueChanged 이벤트에 함수가 연결되어 있는지 확인하세요. 연결이 안 되면 값 변화가 반영되지 않습니다.

Q 텍스트가 업데이트될 때 딜레이가 있어요

Update()에서 값을 매번 갱신하는 대신, 이벤트 기반으로 텍스트를 갱신하면 딜레이 없이 매끄럽게 작동합니다.

Q 버튼, 슬라이더, 텍스트를 조합해서 뭘 만들 수 있나요?

예를 들어, 슬라이더로 볼륨을 조절하고 버튼으로 저장하기, 그리고 텍스트로 현재 볼륨 값을 표시하는 설정 메뉴를 만들 수 있습니다.

Q UI 요소가 화면에 안 보여요

Canvas가 비활성화 되어 있거나, 카메라 설정 문제일 수 있습니다. Canvas Render Mode와 카메라 위치를 확인해 보세요.

Q UI 크기가 기기에 따라 달라져요

Canvas Scaler를 이용해 화면 크기에 맞게 UI를 자동으로 조정할 수 있습니다. 특히 모바일 개발에서는 필수 설정이에요.

이번 실습을 하면서 저는 버튼 하나에도 다양한 가능성이 숨어 있다는 걸 다시 느꼈어요. 단순히 누르는 동작 같지만, 이벤트 연결만으로 게임에 큰 변화를 줄 수 있더라구요. 슬라이더는 그 자체로 직관적이고, 텍스트는 정보를 전달하는 핵심 수단이죠. 세 가지를 조합하면 생각보다 다양한 UI를 구현할 수 있다는 게 정말 흥미로웠습니다. 여러분도 직접 유니티를 열어 놓고 작은 실습부터 해보세요. 하다 보면 “어? 이거 생각보다 재밌네?” 하는 순간이 분명히 올 거예요. 완벽할 필요도 없고, 하나씩 차근차근 경험을 쌓는 게 가장 중요합니다. 혹시 여러분이 만든 UI 예제나 실습 경험이 있다면 댓글로 나눠주시면 저도 참고하고 싶어요!