[Unity] 상하 스크롤뷰 만들기

오늘은 유니티에서 상하 스크롤뷰를 만들어 볼 것이다.

그냥 스크롤뷰를 만드는 건 어렵지 않지만, 우리의 목표는 스크롤뷰 안의 콘텐츠가 자동정렬 되록 하는 것!

어렵지 않으니 따라해보자!

 

1. Scroll이라는 새로운 Scene을 하나 만들어주자.

 

2. UI > Canvas를 만들어주자.

 

3. Canvas 위에 배경이 될 Panel 하나를 올려주자.

 

4. Panel 위에 Text(TMP)를 올려 제목도 하나 써주자.

 

여기까지 진행한 결과는 다음과 같다.

 

 

5. 이제 Panel 위에 Scroll View를 하나 만들어준 후 아래와 같이 크기와 위치를 적당히 조절해준다.

 

 

6. 우리는 상하 스크롤뷰를 만들 것이므로 Hierarchy 창에서 Scrollbar Horizontal을 삭제한다.

   Scroll View의 Inspector 창에서도 Scroll Rect > Horizontal을 체크 해제한다.

 

 

7. Scrollbar Vertical의 길이를 적당히 조절해준다.

 

 

8. 이제 스크롤뷰 안에 들어갈 콘텐츠를 Scroll View > Viewport > Content 안에 넣어주면 된다.

   나는 그냥 아무 이미지를 생성해서 넣어주었다.

 

 

9. Scroll View > Viewport > Content의 Inspector에서 Add Component 버튼을 눌러 Grid Layout Group을 추가해준다.

   이는 스크롤뷰의 콘텐츠들이 자동으로 정렬되도록 한다.

   Cell Size의 X값과 Y값을 조정해 각 콘텐츠의 크기를 설정한다.

   Spacing의 X값과 Y값을 조정해 각 콘텐츠 사이의 간격을 설정한다.

   가운데 정렬을 하고 싶다면 Child Alignment를 Upper Center로 설정하면 된다.

 

 

    콘텐츠가 자동정렬되는지 확인하기 위해 콘텐츠를 추가해보자!

 

Content에 이미지를 네 개 더 추가하였는데, 이미지들이 자동정렬되고 Scroll View 범위 밖을 벗어나는 이미지는 보이지 않음을 확인할 수 있다.

 

10. Scroll View > Viewport > Content의 Inspector에서 Add Component 버튼을 눌러 Content Size Fitter를 추가해준다.

    이는 스크롤뷰의 콘텐츠들의 크기와 개수에 따라 스크롤바의 크기를 자동으로 적절하게 조정해준다.

    우리는 세로 스크롤뷰를 만들 것이므로 Vertical Fit만 Preferred Size로 설정해준다.

스크롤바의 길이가 적당히 조절된 것을 확인할 수 있다.

 

결과 확인!

 

마우스 스크롤로 위-아래 이동중인데 너무 느리다.. 속도를 높여야겠다..

 

Scroll View의 Inspector 창에서 Scroll Sensitivity를 높여준다!

 

 

결과 확인!!

 

훨씬 더 자연스러운 스크롤이 가능해졌다.

 

여기까지 유니티 스크롤뷰 만들기 끝~!