유니티 넷플릭스 스타일UI - ScrollrectEx 응용

 

 

유니티를 이용한 프로젝트에서 화면의 크기보다 많은 공간을 필요로 하는 콘텐츠를 만들 때가 있다. 이럴때 주로 Scrollrect UI를 이용하여 페이지를 넘기며 정보를 확인할 수 있게 구성한다. 그 대표적인 예로 넷플릭스가 있는데, 넷플릭스는 스크롤을 위, 아래로 내리면서 콘텐츠가 담긴 그룹들을 선택할 수 있고, 해당 그룹에서 좌,우로 스크롤하면서 그 그룹에 속한 콘텐츠들을 확인하고 선택할 수 있다.

​

하지만 유니티에서 기본적으로 제공하는 Scrollrect UI를 이용하면 넷플릭스와 같은 UI를 구현할 수가 없다. 기본적으로 마우스에서 발생하는 이벤트는 캔버스에서 가장 위에있는 오브젝트가 독차지하기 때문이다. 즉, 부모 오브젝트가 상하로 스크롤 가능하게 설정되었고, 그 안에 있는 자식 오브젝트가 좌우로 스크롤 할 수 있을 때 자식 오브젝트에서 상하로 스크롤을 올려봤자 그 이벤트는 좌우로만 이동할 수 있는 자식 오브젝트가 독차지하여 결국 마우스 이벤트는 아무런 기능도 실행시키지 못하고 사라지게 된다.

​

이런 경우에 자식 오브젝트의 이벤트를 부모 오브젝트에 공유한다면 자식 오브젝트에서 상하로 스크롤을 하면 부모 오브젝트가 위아래로 스크롤되는, 위 영상과 같은 UI를 구성할 수 있다. 이것을 진행하는 방법은 스크립트에 'Scroll rect'컴포넌트를 상속받아서 몇몇 함수를 변경시켜주면 되는데, 이러한 작업을 수행한 소스코드가 오늘 소개할 'Scroll Rect'이다. 자세한 소개와 소스코드는 아래 링크에서 첨부하였습니다.

​

 

 

참고

Assets/unity-ui-extensions/Scripts/Utilities/ScrollRectEx.cs · 9b96f95f13d7b965131da8d0222542ec77c8c124 · covinga / scripting-