UI Toolkit: Scrollviews

만약 화면 공간이 부족하지만 여전히 많은 콘텐츠를 보여줘야 한다면, ScrollView가 그 문제를 해결해 줍니다.

이는 보이는 영역을 잘라내고(clips) 사용자가 나머지 부분을 스크롤할 수 있게 해줍니다. 왼쪽 데모에서 어떻게 작동하는지 살펴보겠습니다.

여기에는 너무 많은 자식 요소들을 가진 고정 높이 컨테이너가 있습니다. 오버플로우 처리가 없기 때문에 콘텐츠가 경계를 넘어 흘러넘칩니다. 오른쪽은 완전히 동일한 콘텐츠이지만 ScrollView로 감싸져 있습니다.

이제 모든 것이 정의된 영역 안에 머무르며 스크롤 가능해집니다. 두 UI 간에는 다른 점이 없습니다. 요소도, 스타일도 같습니다. 단지 컨테이너만 다릅니다.

ScrollView는 보이는 영역 밖에 있는 것은 무엇이든 잘라냅니다. 콘텐츠가 너무 커지면 자동으로 스크롤바를 추가합니다. 레이아웃 오버플로우 컨테이너라고 생각하시면 됩니다.

하지만 주의할 점은 ScrollView가 콘텐츠를 가상화(virtualize)하지 않는다는 것입니다. 모든 항목이 자체적인 시각적 요소(visual element)를 갖기 때문에, 만약 대규모 데이터 세트를 표시하려면 대신 ListView를 사용해야 합니다.

ScrollView는 인벤토리, 메뉴, 또는 레벨 선택 화면과 같이 수동으로 구축된 UI에 가장 적합합니다. 제한된 수의 항목을 관리하는 것들이죠.

UXML에서 내부적으로 무슨 일이 일어나는지 살펴보겠습니다. 요소들은 ScrollView에 직접 추가되는 것이 아니라, 그 콘텐츠 컨테이너(content container) 안으로 들어갑니다. 내부적으로 ScrollView는 뷰포트(viewport), 콘텐츠 컨테이너, 그리고 1개 또는 2개의 스크롤러(Scrollers)를 가지고 있습니다. 실제로 움직이는 것은 이 콘텐츠 컨테이너입니다.

UI Builder가 이를 자동으로 처리하지만, 구조를 이해하면 디버깅이 훨씬 쉬워집니다. 스크롤은 레이아웃이 완료된 후에 나타나며, 두 가지 조건이 충족되어야 합니다. 첫째, 콘텐츠가 보이는 영역보다 커야 하거나 둘째, ScrollView 또는 그 부모 중 하나가 경계가 지정된 크기(bounded size)를 가져야 합니다.

레이아웃이 모든 것을 담도록 확장되면 스크롤할 것이 아무것도 없습니다. 오버플로우가 없다는 것은 스크롤링이 없다는 뜻입니다. 이것은 흔한 실수(gotcha)입니다. 만약 스크롤바가 나타나지 않으면, 레이아웃을 확인해 보세요. 이것은 경계가 지정되지 않은 ScrollView의 예시입니다.

만약 콘텐츠 컨테이너에 요소를 추가하면, 넘치는(overflowing) 대신 단순히 이 요소들이 복제될 것입니다. ScrollView는 아무것도 뷰포트를 초과하지 않기 때문에 그 내용물에 맞춰 확장됩니다. 스크롤링이 활성화되는 일은 없습니다. 여기 또 다른 사례가 있습니다. ScrollView 내부의 항목들은 flex grow로 설정되어 있습니다. 콘텐츠 컨테이너에 더 많은 항목을 추가하여 무슨 일이 발생하는지 볼 수 있습니다. 이 항목들은 컨테이너 크기를 초과하는 대신, 그 공간을 채우도록 늘어납니다. 이는 오버플로우도 없고 스크롤바도 없다는 것을 의미합니다. 만약 스크롤 뷰에 뭔가 이상하다고 느껴진다면, 해결된(resolved) 크기들을 검사해 보세요. 컨테이너가 콘텐츠와 함께 커지거나, 콘텐츠가 절대 뷰포트보다 커지지 않는 경우, 스크롤바를 얻을 수 없습니다. 또한 인스펙터에서 ScrollView가 어떻게 스크롤할지 선택할 수도 있습니다. 스크롤 방향을 세로(vertical), 가로(horizontal) 또는 둘 다로 설정할 수 있습니다. 대부분의 레이아웃은 세로로 스크롤하지만, 가로 스크롤링은 갤러리나 캐러셀 스타일 UI에 잘 작동합니다. 단지 그 방향으로 콘텐츠 크기가 뷰포트를 초과하는지 확인하기만 하면 됩니다. ScrollView는 내부 파트들을 위해 내장된 USS 클래스를 포함하고 있습니다. 계층 구조에서 회색으로 표시되어 있더라도, 여전히 스타일을 지정할 수 있습니다. 전체 USS 클래스 선택자 목록은 문서를에서 찾을 수 있으며, UI Builder 안에서도 확인할 수 있습니다. 예를 들어, 계층 구조의 요소들을 확장하면 스크롤바가 어떻게 구성되어 있는지 알 수 있습니다. 이는 트랙(track)과 드래그 가능한 핸들(draggable handle)을 포함한 여러 요소로 이루어져 있습니다. USS에서 이러한 파트들을 대상으로 지정하여 모양을 사용자 정의할 수 있습니다. 스타일 시트에 클래스 선택자를 생성하기만 하면 됩니다. 하지만 직접 스타일을 지정할 때는 주의해야 합니다. 문서의 모든 ScrollView에 영향을 미치기 때문입니다. 변경 사항을 제한하려면 먼저 ScrollView에 사용자 정의 클래스를 추가하세요. 여기서는 특정 ScrollView를 위한 선택자를 만들고, 그 다음 자손 선택자(descendant selectors)를 사용합니다. 사용자 정의 클래스 뒤에 내부 USS 클래스를 사용하면 하나의 ScrollView 내에서 스타일링 범위를 지정할 수 있습니다. 그리고 완성입니다. ScrollViews는 레이아웃 오버플로우를 관리하는 데 도움을 줍니다.

다만 기억해야 할 것은 콘텐츠가 뷰포트를 초과하고 컨테이너가 경계 지어져야 한다는 것입니다. 만약 대규모 데이터 세트(large data sets)를 다루고 있다면, 대신 ListView를 사용하는 것을 고려해 보고 다음 영상을 확인해 보세요. UI Toolkit 및 ScrollViews에 대해 더 알고 싶다면 설명란의 링크를 따라가 보시고 공식 문서에서도 더 많은 세부 정보를 찾을 수 있습니다. 시청해 주셔서 감사합니다.