내일배움캠프 Unity - TIL : 25.03.13

오늘 학습한 내용

1) 화면 전환 효과를 위한 CanvasGroup 활용

 

기존에는 SetActive(false) 또는 Animator를 활용하여 화면 전환 효과를 구현했지만, CanvasGroup을 사용하면 더욱 간단하고 효과적으로 페이드인/페이드아웃을 적용할 수 있다는 것을 학습하였습니다.

 

방법:

• UI의 Panel에 CanvasGroup 컴포넌트를 추가
• alpha 값을 조절하여 투명도를 변경
• blocksRaycasts와 interactable을 활용하여 클릭 이벤트 및 인터랙션 제어

적용 예시 (코루틴 활용)

IEnumerator Fade(CanvasGroup canvasGroup, float targetAlpha, float duration)
{
    float startAlpha = canvasGroup.alpha;
    float time = 0f;

    while (time < duration)
    {
        time += Time.deltaTime;
        canvasGroup.alpha = Mathf.Lerp(startAlpha, targetAlpha, time / duration);
        yield return null;
    }

    canvasGroup.alpha = targetAlpha;
}

2) 기존 방식과의 비교

방법	장점	단점
SetActive(false)	즉시 사라짐	전환 효과 없이 갑자기 사라짐
Animator	애니메이션 활용 가능	별도의 애니메이션 파일 필요
CanvasGroup	코드 한 줄로 투명도 조절 가능, 부드러운 전환 가능	UI 요소별로 CanvasGroup 필요

---

새롭게 알게 된 점

• CanvasGroup을 사용하면 부드러운 UI 전환을 쉽게 구현할 수 있음.
• alpha 값 조절만으로 자연스러운 페이드 효과를 만들 수 있음.
• blocksRaycasts와 interactable을 활용하여 UI 클릭 이벤트까지 세밀하게 조정 가능.
• 불필요한 애니메이션 파일을 줄이고, 코드만으로 효과를 구현할 수 있어 효율적.