2025.03.14 (금)

📍오늘의 학습 키워드

• Unity 숙련 주차 - 팀 프로젝트
  • Title UI 작업
    • 버튼 애니메이션
    • 스크롤뷰
  • 트러블슈팅

📍학습 내용

• 버튼 애니메이션

  • 포탈 느낌을 내고싶었기 때문에 UI 디자인은 다음 사진을 참고했다.
    

  1. 버튼 컴포넌트 추가

  2. 버튼의 자식으로 있는 텍스트에 각 메뉴 이름을 써준다.

  3. 버튼의 transition을 Animation으로 변경해준다. 👉 관련 TIL 링크

  4. Auto Generate Animation 버튼을 클릭

  

  5. 클릭하면 애니메이터와 애니메이션이 자동으로 생성된다.

  

  6. 마우스를 올렸을 때 효과를 주고 싶은 것이므로 Hightghted 애니메이션을 다음과 같이 설정해주었다. (Add Property를 하나하나 설정해주면 귀찮았겠지만 빨간색 녹화 버튼을 누르면 수정한 프로퍼티가 자동으로 추가되므로 이걸 잘 이용하면 편하다)

  7. 마우스가 떨어질 때도 정확히 반대의 애니메이션을 넣어주고 싶었는데, 자동으로 만들어지는 상태로는 잘 구현되지 않아 Exit라는 애니메이션을 만들어 다음과 같이 추가로 만들어주었다. (상태가 nomal이 되면 해당 화살표를 타고 Exit 애니메이션을 실행한다.)
  8. 나온 결과물 :
  

• 스크롤뷰

  • 버튼을 누르면 나타날 UI를 배치하는데, 수없이 만들어질 세이브 파일들을 저 화면에 다 욱여넣는 건 무리라고 생각했음.

  • 그래서 유니티에서 스크롤 UI를 만드는 방법을 찾아서 적용했다.

    • 참고 블로그 👉 Unity UGUI 스크롤뷰(ScrollView) 사용법 간단 정리

  • Movement Type (이동 유형)

    • Unrestricted : 콘텐츠가 제한 없이 이동 (끝없는 스크롤 가능)
    • Elastic : 콘텐츠가 끝에 닿으면 튕기는 효과
    • Clamped : 콘텐츠가 끝에 닿으면 더 이상 이동하지 않음

  • Visibility (스크롤바 표시 옵션)

    • Permanent : 항상 표시
    • Auto Hide : 사용하지 않을 때 숨김
    • Auto Hide And Expand Viewport : 사용하지 않을 때 숨기고 Viewport 크기 확장

  • 위와 같이 설정을 하고 나온 결과물은 다음과 같다:
    

    • 세로 스크롤만 필요했기 때문에 Vertical 만 체크하고
    • 목록의 끝에서 휠을 굴리면 탄성 효과가 나오길 원했기 때문에 Elastic 으로 설정했다.
    • 목록이 동적으로 늘어나기를 원했기 때문에 Auto Hide And Expand Viewport 으로 설정했다.

📍겪은 어려움

• 메뉴 버튼을 못 찾아오는 현상 발생

  

  • OnValidate를 통해 코드로 Button 컴포넌트를 등록해주었는데, 딱히 잘못된 부분이 없어보임에도 버튼을 찾아오지 못했다. (각 메뉴들 또한 버튼 컴포넌트가 잘 붙어있었다.)
  • 시도1:
    • Find로 자식 오브젝트를 찾아올 수 있는 걸로 알고 있지만, 혹시나 잘못 알고 있는 걸지도 모른다는 생각이 들어 손자까지 찾을 수 있는 메서드를 따로 만들어 실행해보았다.
    • 손자까지 찾을 수 있는 메서드 (Utill.cs) :
    • 결과 : 여전히 찾아오지 못했다.
  • 시도2:
    • 혹시 문자열로 찾아오기 때문에 문자가 생기는건가 싶어 transform.GetChild(index)를 통해 찾아오도록 코드를 변경함
    • 결과 : 여전히 못 찾아옴...
  • 진짜 원인:
    • 문득 내가 어제 버튼과 문의 상호작용을 구현하며 버튼에 붙여줄 클래스명을 Button으로 했다는 사실이 기억났다.
    • 아니나 다를까 using문에도 UnityEngine.UI가 포함되어있지 않았다.
    • 즉, GetComponent는 우리가 아는 일반적인 버튼 컴포넌트가 아닌 내가 만든 클래스 Button이 붙은 녀석을 찾고 있었기 때문에 메뉴들을 찾지 못하고 인스펙터창에 None을 띄운 것.
    • 해결방법 : Button 클래스의 이름을 TriggerButton으로 바꿔주었더니 잘 돌아갔다.

📍회고 및 반성

• 앞으로 클래스 명을 정할 때에는 기존 컴포넌트와 겹치지 않는지 확인하고 짓는 습관을 들여야 할 것 같다...
• 팀 프로젝트에 들어가고 바빠지면서 TIL에 소홀해진 것 같다. 완벽하지 않아도 되고, 그냥 메모장처럼 간단히 쓴 내용이어도 좋으니 꾸준히 올리려고 노력할 것! 완성도에 집착하지 말자!