WEBVTT

00:00:02.154 --> 00:00:04.883
사용자는 UI 엘리먼트인
[Scroll Rect]를 이용해

00:00:04.883 --> 00:00:06.883
수평 및/또는 수직 축을 따라 또 다른

00:00:06.883 --> 00:00:09.607
UI 엘리먼트를 이동시킬 수 있습니다

00:00:10.397 --> 00:00:12.397
이것은 버튼 리스트나 대형 텍스트 블록

00:00:12.397 --> 00:00:14.911
등과 같은, 대형 이미지 또는 다른

00:00:14.911 --> 00:00:16.911
UI 엘리먼트의 패널입니다

00:00:18.074 --> 00:00:20.074
[Scroll Rect]는 마스크 엘리먼트와

00:00:20.074 --> 00:00:22.074
함께 가장 자주 사용하며

00:00:23.057 --> 00:00:25.939
스크롤바와 함께 완벽하게 작동합니다

00:00:26.729 --> 00:00:29.275
이 단원에서는 마스크와
스크롤바에 대해 간략히

00:00:29.275 --> 00:00:30.723
살펴볼 것입니다

00:00:31.347 --> 00:00:33.347
마스크와 스크롤바 관련 상세 정보를

00:00:33.347 --> 00:00:36.959
확인하려면 아래 링크의 정보를 참조하십시오

00:00:37.629 --> 00:00:39.269
[Scroll Rect]를 생성하려면

00:00:39.269 --> 00:00:41.269
캔버스의 자식인 게임 오브젝트에

00:00:41.269 --> 00:00:44.000
[Scroll Rect] 스크립트를 추가합니다

00:00:44.624 --> 00:00:46.624
모든 UI 엘리먼트와 마찬가지로

00:00:46.624 --> 00:00:48.624
[Scroll Rect]도 캔버스의 자식이어야 합니다

00:00:49.538 --> 00:00:51.538
[Scroll Rect] 스크립트를 게임 오브젝트에

00:00:51.538 --> 00:00:55.866
추가하는 한 가지 방법은 [Add Component]

00:00:57.056 --> 00:00:59.056
- [UI] - [Scroll Rect]를 이용하는

00:01:00.067 --> 00:01:01.376
것입니다

00:01:02.180 --> 00:01:04.472
이 예제의 경우, 게임 오브젝트의 이름을

00:01:04.472 --> 00:01:07.134
Scroll View로 바꾸겠습니다

00:01:08.574 --> 00:01:10.851
[Content]는 [Scroll Rect]가 제어하는

00:01:10.851 --> 00:01:14.028
UI 엘리먼트의 [Rect
Transform]의 참조입니다

00:01:14.680 --> 00:01:16.610
가령 [Scroll Rect]보다 훨씬 큰

00:01:16.610 --> 00:01:18.513
이미지 등이 이에 속합니다

00:01:18.513 --> 00:01:21.124
콘텐트를, 이 경우 대형 이미지를

00:01:21.124 --> 00:01:22.601
[Scroll Rect]의

00:01:22.601 --> 00:01:25.482
콘텐트 속성과 연관시킵니다

00:01:26.286 --> 00:01:29.847
재생 모드에서 이 콘텐트는
완전히 스크롤 가능합니다

00:01:31.714 --> 00:01:34.704
[Scroll Rect]는 일반적으로
마스크 엘리먼트와 함께 사용합니다

00:01:35.467 --> 00:01:38.016
[Scroll Rect]와 함께 마스크
엘리먼트를 사용하려면

00:01:38.016 --> 00:01:40.016
우선 이미지 스크립트를 마스크가 사용할

00:01:40.016 --> 00:01:42.016
게임 오브젝트에 추가합니다

00:01:43.607 --> 00:01:45.966
그리고 마스크 스크립트를 추가합니다

00:01:50.957 --> 00:01:52.957
그러면 마스크 엘리먼트는 이미지를 이용해

00:01:52.957 --> 00:01:54.684
마스크를 생성합니다

00:01:55.088 --> 00:01:58.082
특정 이미지는 이미지 스크립트에서
필요 없기 때문이죠

00:01:58.734 --> 00:02:00.609
하지만 마스크 형태를 추가로 제어하기

00:02:00.609 --> 00:02:02.609
위해 이미지를 추가할 수 있습니다

00:02:04.670 --> 00:02:07.573
이미지 및 마스크 엘리먼트 관련
상세 정보를 확인하려면

00:02:07.573 --> 00:02:09.905
아래 링크의 정보를 참조하십시오

00:02:10.681 --> 00:02:13.112
[Horizontal]과 [Vertical]을
사용하면 이 축들에서

00:02:13.112 --> 00:02:14.681
스크롤이 가능합니다

00:02:15.336 --> 00:02:17.670
한 축에서 스크롤을 비활성화하려면

00:02:17.670 --> 00:02:20.143
해당 축의 속성을 [false]로 설정합니다

00:02:21.040 --> 00:02:23.818
[Movement Type]은 스크롤 모드를 규정합니다

00:02:24.580 --> 00:02:26.580
스크롤 모드는 [Movement Type] 팝업 메뉴로

00:02:26.580 --> 00:02:28.580
선택할 수 있습니다

00:02:29.342 --> 00:02:32.955
[Unrestricted]는 스크롤
이동의 제약을 없애줍니다

00:02:33.538 --> 00:02:35.538
이 모드는 흔히 선택하는 모드는 아니며

00:02:35.538 --> 00:02:37.538
추가 방법을 이용하지 않고도

00:02:37.538 --> 00:02:39.049
복구할 수 없는 방식으로

00:02:39.049 --> 00:02:41.919
콘텐트를 제거할 수 있습니다

00:02:42.364 --> 00:02:44.780
하지만 이 모드는 특정 상황에서는

00:02:44.780 --> 00:02:47.305
유용합니다

00:02:47.902 --> 00:02:49.722
[Elastic]이나 [Clamped]를

00:02:49.722 --> 00:02:51.303
[Movement Type]으로 사용하는 경우

00:02:51.303 --> 00:02:54.137
콘텐트는 스크롤 가능한
축에서 [Scroll Rect]의

00:02:54.137 --> 00:02:56.137
경계를 벗어날 수 없습니다

00:02:57.038 --> 00:02:58.430
이 두 가지 모드에서

00:02:58.430 --> 00:03:00.136
콘텐트를 스크롤하려면

00:03:00.136 --> 00:03:02.136
콘텐트의 [Rect Transform]이
[Scroll Rect]의

00:03:02.136 --> 00:03:05.131
[Rect Transform]보다 커야 합니다

00:03:05.949 --> 00:03:07.949
콘텐트의 [Rect Transform]이
[Scroll Rect]의

00:03:07.949 --> 00:03:11.113
[Rect Transform]보다 작으면

00:03:11.113 --> 00:03:13.911
해당 축에서 스크롤할 수 없습니다

00:03:14.732 --> 00:03:17.708
이 두 가지 모드 중 하나로
콘텐트의 위치를 정할 때는

00:03:17.708 --> 00:03:19.708
[Scroll Rect]의 경계 안에서

00:03:19.708 --> 00:03:22.237
시작하는 것이 가장 좋습니다

00:03:22.237 --> 00:03:24.237
아니면 원하지 않은 동작이
발생할 수도 있습니다

00:03:24.237 --> 00:03:26.237
[Rect Transform]이 콘텐트를 경계 안으로

00:03:26.237 --> 00:03:28.444
되돌려 놓으려 하기 때문입니다

00:03:29.414 --> 00:03:31.848
[Elastic] 동작 형식을 사용하는 경우

00:03:31.848 --> 00:03:33.848
콘텐트가 [Scroll Rect]의 경계에 도달하면

00:03:33.848 --> 00:03:35.848
바운스됩니다

00:03:37.453 --> 00:03:39.453
바운스 양은 [Elasticity] 속성으로

00:03:39.453 --> 00:03:41.453
설정합니다

00:03:43.030 --> 00:03:45.030
[Clamped] 동작 형식을 사용하는 경우

00:03:45.030 --> 00:03:47.030
콘텐트가 경계에 도달해도 바운스되지 않으며

00:03:47.030 --> 00:03:49.517
스크롤만 중단됩니다

00:03:53.549 --> 00:03:55.549
[Inertia]는 드래그 후 포인터를

00:03:55.549 --> 00:03:57.549
릴리스할 때 콘텐트가
글라이드를 계속할 것인지

00:03:57.549 --> 00:03:59.549
정의합니다

00:04:00.477 --> 00:04:02.477
[Inertia]가 [False]이면 콘텐트는

00:04:02.477 --> 00:04:04.477
드래그될 때만 이동합니다

00:04:05.060 --> 00:04:07.060
[Inertia]를 [True]로 설정하면

00:04:07.060 --> 00:04:09.060
포인트가 드래그를 종료한 후에도 콘텐트는

00:04:09.060 --> 00:04:10.644
계속 글라이드됩니다

00:04:11.394 --> 00:04:13.394
콘텐트가 글라이드를 멈추는 시간은

00:04:13.394 --> 00:04:16.748
[Deceleration Rate] 속성이 결정합니다

00:04:17.248 --> 00:04:19.248
[Deceleration Rate]이 0이면

00:04:19.248 --> 00:04:21.248
글라이드는 즉시 중단됩니다

00:04:22.190 --> 00:04:24.190
값이 1이면 글라이드 속도가

00:04:24.190 --> 00:04:26.190
줄어들지 않습니다

00:04:26.690 --> 00:04:28.690
[Horizontal] 및 [Vertical] 스크롤바는

00:04:28.690 --> 00:04:32.271
잠재적인 스크롤바 엘리먼트에
대한 옵션 참조입니다

00:04:32.992 --> 00:04:35.351
[Scroll Rect]로 스크롤바를 이용하려면

00:04:35.351 --> 00:04:38.056
필요한 스크롤바를 생성하고

00:04:40.089 --> 00:04:41.581
위치를 정한 후

00:04:42.468 --> 00:04:44.468
스크롤바와 [Scroll Rect]의 속성을

00:04:44.468 --> 00:04:46.468
연관시키면 됩니다

00:04:49.413 --> 00:04:51.413
그러면 자동으로 작동합니다

00:04:51.913 --> 00:04:54.867
스크롤바와 설정법 관련
추가 정보를 확인하려면

00:04:54.867 --> 00:04:57.584
아래 링크의 정보를 참조하십시오