[Unity] 유니티 버튼 추가 방법

 


게임을 만들 때 유저가 직접 조작해야 하는 필수 UI가 있습니다.

가장 기본이 되는 요소는 바로 버튼이지요

버튼은 메뉴 이동, 게임 시작, 캐릭터 행동과 같은 조작에 활용됩니다.

유니티에 버튼을 추가하고 기능 연결까지 쉽게 알아볼 예정인데요

천천히 그러면 알아보도록 하겠습니다.


버튼 추가 기본 개념

캔버스 확인



  • UI 버튼은 반드시 Canvas 안에 존재해야 화면에 표시됩니다.
  • Hierarchy → Create → UI → Button을 선택하면 자동으로 Canvas와 Envet System이 생성됩니다.

버튼(Button) 구조

  • Button 오브젝트
  • Text 자식 오브젝트(버튼 안에 글씨 표시)
  • Button 컴포넌트에는 OnClick() 이벤트 슬롯이 있어 기능을 연결할 수 있습니다.

버튼 위치 조정

  • RectTransform을 사용해 화면 원하는 위치에 배치할 수 있습니다.
  • Anchor, Pivot, Pos X/Y 값을 활용하면 해상도에 따라 버튼 위치가 변하지 않도록 설정할 수 있습니다.

버튼 기능 연결하기


Project 우클릭 > Create > Scripting > Empty C# Script를 선택해 주세요
Visual Studio를 실행한 다음 아래 코드를 추가해 주세요

using UnityEngine;

public class ButtonTest : MonoBehaviour
{
    public void PrintMessage()
    {
        Debug.Log("버튼이 눌렸습니다!");
    }
}




테스트할 버튼을 생성한 뒤에 UIController라는 빈 오브젝트를 만들고 여기에 스크립트를 추가해 주세요. 스크립트 추가는 드래그해서 올려놓으면 이미지처럼 추가됩니다.
그리고 Btn Add Score에 방금 만든 UI 버튼을 추가해 주세요


그리고 빈 GameOBject를 만들고 ButtonTest.cs를 추가해 주세요
버튼 오브젝트 > Inspector > Button 컴포넌트 > OnClick() 연결해 주세요
버튼 클릭 > ButtonTest 스크립트가 있는 오브젝트를 드래그 > 함수 선택 > ButtonTest>PrintMessage를 설정해 줍니다.




그럼 씬을 실행시키고 버튼을 눌렀을 때 "버튼이 눌렸습니다." 메시지가 표시됩니다.
그럼 정리해 보도록 하겠습니다.

  • 유니티에서 버튼은 어디에 추가될까요?
    • 버튼은 UI 요소 중 하나이므로 반드시 캔버스(Canvas) 안에 생성됩니다.
    • 만약 캔버스가 없다면 버튼을 생성할 때 자동으로 캔버스와 이벤트 시스템이 생성됩니다.
    • 따라서 버튼을 추가할 때 항상 캔버스를 먼저 확인하는 것이 좋습니다.
    • UI 전체를 정리하기 위해 전용 Canvas를 여러 개 두기도 합니다.
  • 버튼 텍스트를 변경하려면 어떻게 해야 할까요?
    • 버튼 텍스트를 펼치면 자식으로 Text 오브젝트가 있습니다.
    • 이곳에서 원하는 문구로 변경하면 버튼에 표시됩니다.
    • 최근 Unity 버전에서는 TextMeshPro를 사용하는 경우가 많으며, 가독성이 더 좋습니다.
    • 따라서 버튼 글씨를 자주 수정한다면 TextMeshPro를 활용하는 것이 좋습니다.
  • 버튼 색상을 바꾸려면 어떻게 설정해야 하나요?
    • 버튼의 색상은 Button 컴포넌트의 ColorBlock 속성에서 변경할 수 있습니다.
    • Normal, Highlighted, Pressed, Disabled 상태별로 색상을 다르게 지정할 수 있습니다.
    • 이를 활용하면 버튼이 눌릴 때 색이 바뀌는 효과를 쉽게 줄 수 있습니다.
    • 프로젝트 전체에서 같은 디자인을 유지하려면 프리팹으로 관리하는 것이 좋습니다.
  • 버튼을 누를 때 이미지가 바뀌게 할 수 있을까요?
    • 버튼에는 Transition 속성이 있어 기본적으로 Color Tint로 설정됩니다.
    • 이를 SpriteSwap으로 바꾸면 버튼 상태에 따라 다른 이미지를 적용할 수 있습니다.
    • 평상시에는 흰색 버튼, 클릭 시에는 파란 버튼으로 변경할 수 있습니다.
    • 이런 방식은 UI/UX 개선에 효과적일 수 있습니다.
  • 버튼을 눌렀을 때 소리를 넣으려면 어떻게 해야 하나요?
    • 버튼 오디오에 오디오 소스를 연결해 주면 됩니다.
    • 빈 오브젝트에 AudioSource를 추가하고, 클릭 사운드를 등록한 뒤 버튼 OnClick 이벤트에 Play()를 연결합니다.
    • 이렇게 하면 버튼을 누를 때마다 소리가 재생되도록 할 수 있습니다.
    • 사운드는 UI 피드백에 큰 도움이 되므로 적극적으로 활용하는 것이 좋습니다.
  • 여러 개의 버튼을 한 스크립트로 관리할 수 있을까요?
    • 버튼 컴포넌트를 가져와 AddListener로 이벤트를 등록할 수 있습니다.
    • button.onClick.AddListener(MyFunction); 형태로 여러 버튼을 같은 스크립트에서 제어할 수 있습니다.
    • 이렇게 하면 유지 보수가 쉬워지고 버튼 수가 많을 때 효율적으로 관리할 수 있습니다.
  • 버튼이 클릭 되지 않는 경우는 왜 그런 걸까요?
    • 대부분 캔버스의 Render Mode가 잘못 설정됐거나 버튼이 다른 UI에 가려져 있는 경우가 많습니다.
    • EventSystem이 없는 경우에도 버튼이 작동하지 않습니다.
    • 버튼이 눌리지 않는다면 EventSystem과 캔버스 설정을 먼저 확인하는 것이 중요합니다.
  • 비활성화된 버튼을 어떻게 만들 수 있나요?
    • 버튼의 Interactable 속성을 체크 해제하면 비활성화된 버튼이 됩니다.
    • 이 경우 버튼 색상이 회색으로 바뀌고 클릭할 수 없게 됩니다.
    • 게임 진행 상황에 따라 버튼 활성/비활성 상태를 조정하면 더 나은 UX를 제공할 수 있습니다.
  • 버튼을 눌렀을 때 씬(Scene) 이동이 가능할까요?
    • SceneManager.LoadScene("씬이름") OnClick 이벤트에 연결하면 됩니다.
    • 단, using UnityEngine.SceneManagement; 네임 스페이스를 반드시 추가해야 합니다.
    • 메뉴 화면에서 게임 화면으로 이동할 때 자주 활용되는 방식입니다.
  • 버튼 크기를 조절하려면 어떻게 해야 할까요?
    • 버튼 크기는 RectTransform에서 Width와 Height를 조정하면 됩니다.
    • 또한 앵커(Anchor)를 적절히 설정해 두면 해상도가 달라져도 버튼 크기가 유지됩니다.
    • 반응형 UI를 고려한다면 CanvasScaler 설정도 함께 조정하는 것이 좋습니다.
  • 버튼 위치가 화면 해상도에 따라 달라지는데 해결 방법이 있을까요?
    • Anchor를 올바르게 설정하면 해상도에 따라 버튼 위치가 고정됩니다.
    • 예를 들어, 오른쪽 하단 고정 버튼을 만들고 싶다면 Anchor를 Right-Bottom으로 지정하면 됩니다.
    • 이는 모바일 UI 개발에서 매우 중요한 부분입니다.
  • 버튼 클릭 시 여러 함수를 동시에 실행할 수 있을까요?
    • OnClick 이벤트에 여러 개의 함수를 추가할 수 있습니다.
    • 버튼을 누를 대 음악 재생과 화면 전환을 동시에 실행할 수 있습니다.
    • 실행 순서가 중요한 경우에는 하나의 함수 안에서 순차적으로 처리하는 것이 더 안전합니다.
  • 버튼 글씨 대신 아이콘을 넣을 수 있을까요?
    • 버튼의 자식 오브젝트에 Image를 넣고 원하는 아이콘을 삽입하면 됩니다.
    • 텍스트 대신 이미지가 표시되는 버튼을 쉽게 만들 수 있습니다.
    • 보통 설정 아이콘, 홈 버튼 아이콘 같은 경우에 활용됩니다.
  • 버튼이 눌린 상태를 유지하려면 어떻게 해야 할까요?
    • 기본 버튼은 토글처럼 상태를 유지하지 않습니다.
    • 상태 유지가 필요하다면 Toggle을 사용하는 것이 더 좋을 수 있습니다.
    • 스크립트를 작성해 버튼 클릭 시 상태 변수를 저장하고 색상이나 이미지를 바꿔주는 방식으로 구현할 수 있습니다.
  • 버튼 클릭 이벤트를 코드로만 등록할 수 있을까요?
    • button.onClick.AddListener(MyFunction); 코드를 사용하면 Inspector에서 이벤트를 등록하지 않고도 기능을 연결할 수 있습니다.
    • 많은 버튼을 동적으로 생성하는 경우 코드 방식이 더 유용합니다.
  • 버튼 클릭 시 텍스트를 바꾸는 방법은 무엇일까요?
    • OnClick 이벤트에 연결된 함수에서 Text 컴포넌트의 text 속성을 변경하면 됩니다.
    • myText.text = "새로운 문구" 처럼 코드를 작성하면 됩니다.
    • 이는 UI 상태 변화를 즉시 보여줄 때 자주 활용됩니다.
  • 버튼이 눌렸는지 감지하는 다른 방법이 있을까요?
    • EventTrigger 컴포넌트를 사용하면 버튼 클릭만 아니라 PointerEnter, PonterExit 같은 다양한 이벤트를 감지할 수 있습니다.
    • 이렇게 하면 마우스를 올렸을 때 색을 바꾸거나, 누른 상태를 따로 처리할 수 있습니다.
  • 버튼에 단축키를 연결할 수 있을까요?
    • Update() 함수에서 Input.GetKeyDown(KeyCode.X) 같은 조건을 추가한 다음 버튼 함수를 호출하면 됩니다.
    • "스페이스 바 = 버튼 클릭" 기능을 추가하는 것도 됩니다.
    • PC 게임에서 단축키 UI를 구현할 때 유용한 기능입니다.
  • 버튼이 UI 최상단에 보이도록 하려면 어떻게 해야 할까요?
    • Hierarchy에서 버튼 오브젝트를 맨 위로 올리면 됩니다.
    • Canvas의 SortOrder를 조정하면 다른 Canvas보다 위에 표시할 수 있습니다.
    • UI가 겹치는 경우에는 항상 정렬 순서를 확인해야 합니다.
  • 모바일에서 버튼이 잘 눌리지 않는 경우는 어떻게 해야 할까요?
    • 버튼 크기가 너무 작거나 Ratcast Target이 올바르게 설정되지 않은 경우가 있을 수 있습니다.
    • CanvasScaler가 올바르게 설정되어야 기기 해상도에 맞게 버튼이 표시됩니다.
    • 모바일 테스트를 꼭 병행하는 것이 좋습니다.

유니티에서 버튼을 추가하고, 기능과 연결하는 방법을 간단하게 알아봤습니다.
버튼은 가장 기본적인 UI 요소지만, 잘 활용하면 게임의 조작성을 크게 향상 시킬 수 있습니다.
캔버스 구조, OnClick 이벤트, Inspector와 코드 등록 방식까지 이해하면
다양한 UI를 자유롭게 구현할 수 있습니다.
프로젝트에 버튼을 적용하면서 복습해 보시면 더욱 빠르게 이해하실 수 있을 거예요
읽어주셔서 감사합니다.
추가로 궁금하신 내용이 있으시다면 하단의 링크를 참고해 주세요


[Unity] 유니티 오브젝트 생성과 삭제 스크립트

[Unity] 유니티 카메라 기본 설정과 이동 방법

[Unity] 유니티 충돌(Collision) 감지하는 방법

이 블로그의 인기 게시물

[Notion] 노션 기본 템플릿 5가지 소개와 활용 팁

이미지
  노션 초보자를 위해 쉽게 활용할 수 있는 기본 템플릿 5가지를 추천합니다. 할 일 관리, 회의 노트, 독서 기록 등 누구나 쉽게 따라 할 수 있는 방법을 소개합니다. 노션, 템플릿 부터 시작해보세요 노션(Notion)을 처음 접하셨을까요? 너무 복잡하거나 어려울 것 같다고 느낄 수 있습니다. 그렇다면 기본 템플릿부터 활용해 보는 게 좋습니다. 노션에는 이미 기존에 만들어진 기본 템플릿이 있어서 클릭 몇 번만으로 멋진 페이지를 만들 수 있습니다. 이 글을 통해서 가장 유용하고 많이 쓰이는 노션 템플릿 5가지와 함께, 어떻게 활용하면 좋은지 알아보겠습니다. 하단에 보이는 Tamplates를 클릭해 주면 템플릿이 모여 있는 페이지로 이동합니다. 그러면 여기서 먼저 To-Do List를 입력하고 추가해 보도록 하겠습니다. 자 검색했더니 이렇게 다양한 To-do list 항목이 나옵니다. 저는 이 중에서 오른쪽 위에 있는 템플릿을 선택했습니다. Free는 무료로 이용할 수 있는 템플릿이고 가격이 적혀있는 템플릿은 결제를 통해 추가할 수 있는 템플릿입니다. 자 그러면 이렇게 Weekly Plan으로 To-do list가 추가된 걸 확인할 수 있습니다. 쉽게 추가가 되고 바로 페이지에 추가되니깐 쉽게 활용할 수 있습니다. 같은 방법으로 다른 템플릿도 추가해 보도록 하겠습니다. 주간 일정 관리 독서 목록 회의 기록 목표 설정 자 가장 위에 부터 '할 일 목록', '주간 일정 관리', '독서 목록', '회의 기록', '목표 설정' 총 다섯 가지의 템플릿을 추가해봤습니다. 추가된 템플릿을 아이콘 등을 추가하거나 섹션을 다시 나누는 등의 기능을 활용해서 자유롭게 사용할 수 있습니다. 또한 추가된 템플릿은 다른 페이지와 연결할 수 있기 때문에 연동해서 쓸 수도 있습니다. 일단 간단하게 활용할 수 있는 노션 템플릿 5종만 먼저 소개했습니다. 처음 노션을 시작할 때 복잡하게 느껴질 수 있지만 기본 템플릿을 활용...
자세한 내용 보기

[Blender] 블렌더 속도 2배! 꼭 알아야 할 단축키와 설정 팁

이미지
  쉽게 배우는 블렌더 단축키, 커스터마이징 블렌더는 디자인과 애니메이션 거기에 영상 편집까지 가능하게 해주는 무료 프로그램입니다. 하지만 효율성이 떨어진다면 작업 시간이 매우 오래 걸릴 수 있습니다. 그렇기 때문에 효율성을 극대화시켜줄 단축키를 알아보도록 하겠습니다. 블렌더 단축키? 저도 처음에는 그랬습니다. 단축키를 많이 모르다보니 모든걸 마우스로 해결하려고 했었습니다. 하지만 그렇게 작업을 하다 보면 효율이 떨어지고 속도도 떨어집니다. 그런데 단축키를 알고 나서 효율이 급격하게 늘어나더라고요 그래서 전달해드리려고 합니다. 효율을 극대화 시켜줄 블렌더 단축키와 커스터마이징을 알아볼게요 크기 초기화 Alt + S 회전 초기화 Alt + R 위치 초기화 Alt + G 크기 조절 S 오브젝트 회전 R 오브젝트 이동 G 위에서 간략하게 단축키를 눌렀을 때 어떻게 조작이 가능한지 설명했는데요 다시 정리하겠습니다. 이동(G): 오브젝트를 원하는 위치로 이동 시킬 수 있습니다. 회전(R): 오브젝트를 원하는 각도로 회전 시킬 수 있습니다. 스케일 조정(S) 오브젝트를 원하는 크기로 키우거나 줄일 수 있습니다. 위치 초기화(Alt + G): 이동 시킨 오브젝트의 위치를 초기화 합니다. 회전 초기화(Alt + R): 회전 시킨 오브젝트의 회전을 초기화 합니다. 크기 초기화(Alt + S): 키우거나 줄인 오브젝트의 스케일을 초기화 합니다. 그 다음은 카메라 조작에 대한 단축키 입니다. 숫자키 1 ~ 0 숫자키를 이용하면 오브젝트가 보여지는 카메라의 각도를 조정할 수 있습니다. 1번부터 0번까지 원하는 카메라 방향대로 오브젝트를 볼 수 있습니다. 하지만 이때 노트북에서 넘버 패드가 없는 경우, 텐키리스 키보드를 사용할 때 설정이 필요합니다. 텐키리스 키보드를 사용하는 경우 Edit -> Preferences -> Input -> Emulate Nupad 옵션을 켜야 숫자키를 눌렀을 때 카메라를 회전 시킬 수 있습니다. 간단하게 몇 개 더 알아보도록 하...
자세한 내용 보기

[Blender] 블렌더 미러 모디파이어(Mirror Modifier) 활용법

이미지
Blender에서 미러 모디파이어(Mirror Modifier)를 활용하여 좌우 대칭 모델을 빠르고 정확하게 만드는 방법!! 3D 모델링을 하다 보면 양쪽이 똑같은 형태가 있습니다. 예시를 들어보도록 하겠습니다. 사람 얼굴, 동물의 뿔, 건축물의 좌우 대칭 등 이런 구조들을 자주 만들거나 활용하게 되는데요 이런 작업을 직접 수작업으로 하다 보면 시간이 굉장히 오래 걸립니다. 그렇기 때문에 오늘 알아볼 미러 모디파이어(Mirror Modifier)를 활용해야하는건데요 이 그대로 한쪽을 만들면 반대쪽이 자동으로 복사되기 때문에, 작업 시간은 반으로 정확도는 두 배로 올라가게 됩니다. 우리는 이 글을 통해서 Blender 미러 모디파이어의 기본 사용법부터 실전 활용까지 차근차근 알아볼 예정입니다. 미러 모디파이어가 뭘까요? 미러 모디파이어는 위에서 언급했듯이 한쪽 면을 기준으로 반사된 복사본을 자동으로 생성하는 기능입니다. 블렌더의 기본 모디파이어 중 하나인데요. X, Y, Z축 중 원하는 축을 중심으로 대칭이 만들어집니다. 자 일단 원래 처음에 있던 큐브는 삭제하고 Shitf + A 단축키를 눌러서 평평한 Plane 하나를 추가해 줬습니다. 그리고 우측에 렌치 모양을 눌러서 'Add Modifier'를 클릭한 후 Mirror를 검색해서 추가했습니다. 자 기본적으로 X축 대칭이 적용됩니다. 위의 이미지와 비교해 보면 X축뿐 아니라 Y, Z축까지 활성화한 상태인 게 보이시죠? 일반적으로는 X축만 활성화 한 상태로 활용합니다. 자 그럼 Edit Mode로 들어가서 한쪽 면만 들어볼게요 그럼 어떻게 될까요? 자 한쪽 면만 들어올리는데 반대쪽 면도 같이 올라오는 게 보이시죠? 간단하게 살펴보면 미러 모디파이어는 이렇게 활용할 수 있습니다. 추가로 알아볼 내용은 오브젝트 중심으로 맞추는건데요 미러 축은 오브젝트 중심점(Origin)을 기준으로 작동합니다. Shift + S -> Cursor to World Origin Ctrl + A -> Set O...
자세한 내용 보기