유니티 UI 버튼 쉽게 만들기!! 디자인 종류도 많다구?!

코드멍멍이(Joonieboy)·2022년 6월 21일
1
post-thumbnail

📌 진~짜! 쉽게 유니티 버튼 구현?!


게임이나 앱을 개발할 때는 거의 999.999% UI를 제작하는데, 생각보다 내 주위에 간단한 UI를 만들지 못했던 사람들이 많았어!! 하지만, 정작 나도 유니티를 처음 했을 때는 오브젝트를 움직이는 것 보다 UI가 제일 어려워서 많이 헤매었거든...ㅋㅋㅋ 아마 가장 큰 이유가 생각보다 A부터 Z까지 상세하게 알려주는 자료가 없어서 그랬던게 아닐까? 싶더라고!! 그래서 내가 만들었다!!😁

🔷 읽기 전에 [💖] 눌러줄거징...???*

🔶 버튼은 진~짜 쉽지만 너무 중요해!!


일단, 쉽게 버튼을 만들기 전에, 버튼이 얼마나 중요한지 알려줘야 될 것 같아!! 버튼은 사용자 혹은 플레이어와 소통을 하는 하나의 수단이야. 물론 소통이 아닌 게임을 하는 메인 버튼이 될 수도 있어! 버튼의 생김새, 이펙트, 효과음 등에 따라서 사용자가 버튼에 대해서 얼마나 잘 이해할 수 있는지 알아야 해!💡

이러한 이유에 의해서 그런건지는 모르겠지만, 유니티 3D에는 다양한 버튼을 만들 수 있게 툴이 제작되었다구!! 우리가 로직을 하나 하나 다 짜야할 필요가 없다는 점에서 너무 간편한 기능이지?! 시간도 절약되고, 생각보다 다양해서 선택할 수 있는 선택지가 많아!! 물론, 디자인까지 가능하지~✨

🔶 그래서 버튼 종류가 뭐가 있냐구?!


종류만 보았을 때, 총 4가지야!!
Transition : None, Color Tint, Sprite Swap, Animation

  • None : 버튼의 상호작용 표현이 아무것도 나타나지 않아!! 즉, 버튼에 마우스를 올려놔도, 클릭해서 누르고 있어도, 누르고 나서도 아무런 효과가 나타나지 않는다고 보면 되겠어~🤔
  • Color Tint : 대부분의 버튼 상호작용 표현을 색으로 표현을 하는거야!! 가~장 흔하게 사용하는 종류고, 개발자의 입맛에 맞게 바꿀 수 있다는게 큰 장점!! 단점으로는 색맹이 있는 분들은 알아보기 힘들 수 있다는점...ㅠㅠ😂
  • Sprite Swap : 이건 Color Tint와 비슷한데, 색으로 상호작용을 표현하는 것이 아니라 Button Image를 교체하여 표현하는거지!! 버튼에 마우스를 올려놨거나 클릭했을 때 등 다양한 상호작용 표현이 가능해~💥
  • Animation : 이걸 다루는 것은 조금 까다로울 수 있어~ 일단, 어떤 기능인지에 대하여 설명만 할게! 이름과 같게 버튼을 눌렀을 때, 버튼 상호작용 표현에 맞는 애니메이션을 실행하는거야! 즉, 버튼 클릭 -> 버튼이 사이즈가 커졌다가 원상복귀 혹은 버튼이 도망가는 연출 등 다양한 애니메이션 연출이 가능해!! 사용할 줄만 안다면, 가장 화려한 상호작용 표현이라고 생각해!!😊

🔶 버튼 클릭 시, 상호작용은 어떻게?!


  • 버튼을 클릭했을 때, 다음 페이지로 넘어가는거?
  • 버튼을 클릭했을 때, 게임이 시작 및 재시작 되는거?
  • 버튼을 클릭했을 때, 영상을 플레이 하는거?

이러한 상호작용들은 On Click() 컴포넌트에서 가능해!! 하지만, 오늘은 상호작용까지 만들기에는 상당히 많은 양이 될 것 같아서, 게시물을 나눌게!! 한 번에 너무 긴 글을 보게 된다면, 집중력도 흐트러지고 지칠 수도 있으니깐~ 차근차근 진행해보자!!!🙇‍♂️

🔶 유니티 UI 버튼을 제작해보자!!


  1. 유니티 하이어라키(Hierachy)에서 '+'를 클릭하고, UI -> Button을 눌러봐!! 그러면 하이어라키 창에 Canvas 내에 버튼이 구성되어 있고, EventSystem이 생성될거야~ 이 이벤트 시스템이 있기 때문에 버튼을 클릭하는 등의 상호작용이 가능해!! 그래서 절대로 삭제하면 안 돼!!❗❗
  2. 나 처럼 Scene 창에 Button이 있다면, 버튼 생성 성공!! 유니티 UI 버튼 만들기 업청 쉽지?! "....어라...?! 근데 왜 Game 창에는 안보여요???" 라고 의문이 들겠지? 그 이유는 Main Camera가 촬영하고 있는 곳에 Button이 벗어났기 때문이야~ 그러면 Button만 Main Camera가 촬영하고 있는 곳으로 이동해주면 되겠지?👀
  3. 버튼을 옮겼더니 이제 Game 창에서 Button이 보이지?! 근데 저기 왼쪽의 Scene 창에 하얀 테투리가 보일거야, 각 꼭지점에는 파란색 점이 보일거고! 그게 뭔지 궁금할 수도 있어. 그건 Canvas !! 쉽게 생각해보자? 우리가 그림을 그릴 때에도 Canvas 위에 그림을 그리지? UI도 똑같아~ Canvas 위에 버튼, 이미지, 텍스트 등 다양하게 꾸미는거라고 생각하면 돼~😍
  • 참고로 Canvas도 다양한 기능이 있는데, 이건 다음번에 다루도록 할게!! 생각보다 설명해야 할 기능들이 많거든...!! 하지만, 절~대 어렵지 않으니까 걱정말라구!!
  1. 위에서 설명했던 유니티 UI 버튼 상호작용 표현 방법들 중 하나인 "Color Tint"를 활용한거야!! 어때? 단순히 색만 바꿨을 뿐인데, 새로운 느낌이 들지 않아?? 만약 너가 디자인 감각이 있다면, 멋진 컬러풀 UI를 만들 수 있을거야!!🐱‍👓

🔷 끝까지 시간내서 읽어줘서 너무 고마워!! 다음에도 좋은 글 쓰도록 노력할게!!

하트💕 눌러주고, 댓글 하나 남겨주면 큰 힘이 될거같아!! 고마워~😊

profile
#유니티개발자 #게임 #인플루언서 #ENFJ

0개의 댓글