[Unity/UI] 유니티 UI 이미지 좌우 반전 방법

0. 서론

게임을 플레이할 때 UI를 보면, 이렇게 좌우 방향과 같이 똑같은 이미지를 좌우 반전으로 사용하는 경우가 있다.

• 예시
  

이런 경우에서는 좌우 방향에 대한 리소스를 따로 만드는 것보다 하나의 리소스를 만든 후, 좌우 반전하여 쓰는 것이 좋다.

1. UI/이미지 좌우 반전 방법

좌우 반전의 방법 자체는 간단하다. 크게 방식은 두 가지가 있다.

1.1 이미지 회전

Rect Transform - Rotation의 Y축을 180도로 회전하는 방법이다.

1.2 스케일을 -1로 조정

Rect Transform - Scale의 X축을 -1로 설정하는 방법이다.

2. 두 방식의 차이점과 장단점

2.1 Rotation 방식의 특징

1. 실제 회전이 적용되어 앞 뒤 개념이 생기므로, 셰이더/라이팅 등의 영향이 발생할 수 있음.

이전에 2D 개인 프로젝트에서 진행한 경우에서도, Rotation을 직접 건드리는 경우에서는 생각보다 문제가 잘 발생하는 것을 경험한 바가 있음. UI뿐만 아니라 2D 게임 제작 시에도, Rotation을 직접 조작하면 캐릭터 좌우 이동이나, Flip 시에 의도치 않은 동작이 발생할 수 있다.

2. World Space 캔버스나 3D 상황에서 Rotation을 통한 좌우 반전 시 티가 나는 경우가 발생함.

특히 Backface Culling으로 뒷면이 제거되었을 경우에 UI가 정상 출력되지 않는 경우가 발생할 수 있으며, Raycast가 꼬일 가능성이 존재함.

3. 사용해야 하는 특수한 경우 - 이미지 회전 애니메이션이 적용해야 하는 경우

예를 들어 카드 플립 애니메이션 같은 경우에는 Rotation을 통해 자연스럽게 연출하는 방식이 좋을 수 있음.

2.2 Scale 반전 방식의 특징

1. 렌더링 좌표계를 반전시키는 방식으로, Rotation 변경 방식보다 안정적

Rotation이 직접 변경되는 방식이 아니며, Backface Culling 으로 인한 UI 출력 문제가 발생하지 않음. 또한 성능적인 부분에서도 부담이 거의 없음.

2. 간혹 Layout Group나 Anchor가 꼬일 수 있음.

3. 결론

단순 좌우 반전의 경우에는 Scale을 조정하는 것이 좋음. 연출이 필요한 경우에서는 Rotation 조정을 하는 것이 좋음.