brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 21. 2024

[HIG] Scroll views

콘텐츠를 이동하는 스크롤 뷰

본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.

Introduction

스크롤 뷰(scroll view)를 사용하면 콘텐츠를 세로 또는 가로로 이동하여 뷰의 경계보다 큰 콘텐츠를 볼 수 있습니다.

스크롤 뷰(scroll view) 자체는 표시되지 않지만 사람들이 뷰의 콘텐츠를 스크롤면 나타나는 반투명 스크롤 표시기(indicator)를 표시할 수 있습니다. 스크롤 표시기(indicator)의 모양과 동작은 플랫폼마다 다를 수 있지만 모든 표시기는 스크롤 동작에 대한 시각적 피드백을 제공합니다. 예를 들어 iOS, iPadOS, macOS, visionOS 및 watchOS에서는 표시기(indicator)가 현재 표시된 콘텐츠가 뷰의 시작, 중간 또는 끝에 있는지 여부를 표시합니다.

역자설명 : 인디케이터(indicator)는 어떤 기능을 수행하기 위해 ‘표시하는 역할’을 하는 컴포넌트를 말합니다.

Best practices

기본 스크롤 제스처와 키보드 단축키를 지원하세요. 사람들은 시스템 전체의 스크롤 동작에 익숙해져 있으며 모든 곳에서 동작하기를 기대합니다. 뷰에 대한 사용자 지정 스크롤을 사용하는 경우 스크롤 표시기(scroll bar)가 사람들이 예상하는 동작을 수행하는지 확인하는 것이 좋습니다.

콘텐츠를 스크롤할 수 있는 시기를 명확히 보여주는 것이 좋습니다. 스크롤 표시기(scroll bar)가 항상 표시되는 것은 아니므로 콘텐츠가 뷰를 넘어 확장될 때 이를 명확하게 표시하는 것이 좋습니다. 예를 들어 뷰 가장자리에 콘텐츠의 일부를 표시하면 해당 방향에 더 많은 콘텐츠가 있음을 나타냅니다. 대부분의 사람들은 뷰를 스크롤하여 추가 콘텐츠가 있는지 확인하지만, 스크롤 뷰(scroll view)를 표시하여 주의를 끄는 것이 좋습니다.

스크롤 뷰를 같은 방향의 다른 스크롤 뷰 안에 넣지 않도록 하세요. 방향이 같은 스크롤 뷰를 중첩하면 제어하기 어려운 예측할 수 없는 인터페이스가 만들어질 수 있습니다. 그러나 가로 스크롤 뷰를 세로 스크롤 뷰 안에 배치하는 것은 괜찮습니다(또는 그 반대의 경우도 마찬가지).

콘텐츠에 적합한 경우 페이지 단위 스크롤(page-by-page scrolling)을 지원하는 것이 좋습니다. 어떤 상황에서는 사람들이 계속 스크롤하는 것보다 상호 작용할 때마다 고정된 양의 콘텐츠를 스크롤하기를 원합니다. 대부분의 플랫폼에서 이러한 페이지의 크기(일반적으로 뷰의 현재 높이 또는 너비)를 정의하고 한 번에 한 페이지씩 스크롤하는 상호 작용을 정의할 수 있습니다. 페이지별로 스크롤하는 동안 컨텍스트를 유지하기 위해 텍스트 줄, 글리프 행 또는 사진의 일부 등의 콘텐츠가 겹치는 단위를 찾아 페이지 크기에 따라 단위를 제외할 수 있습니다. 개발자 가이드라인은 PagingScrollTargetBehavior를 참고하세요.

경우에 따라 사람들이 자신의 위치를 찾을 수 있도록 자동으로 스크롤하는 경우도 있습니다. 거의 모든 스크롤은 사용자가 시작하지만, 관련 콘텐츠가 더 이상 보이지 않을 때와 같이 자동 스크롤이 도움이 될 수 있습니다:

앱은 현재 화면 영역 안에 콘텐츠를 선택하거나 삽입할 수 있게 하는 보이지 않는 지점들을 배치합니다. 예를 들어, 앱에서 사람들이 찾고 있는 텍스트를 스크롤하여 새 항목(new selection)을 선택할 수 있도록 표시합니다.

사람들은 정보를 입력할 때, 현재 보이지 않는 위치에 정보를 입력할 수 있습니다. 예를 들어, 정보를 삽입하는 지점이 어느 한 페이지에 있는데 사용자가 다른 페이지로 이동하는 경우, 입력을 시작하는 순간 정보를 삽입하는 지점으로 다시 스크롤합니다.

사용자가 선택 영역을 지정하는 동안에, 포인터(pointer)가 화면 가장자리를 지나 이동합니다. 이 경우 스크롤은 방향은 포인터(pointer)가 이동하는 방향으로 스크롤하여 포인터를 따릅니다.

사용자는 항목을 선택하기 전에, 선택할 항목을 지정하고 새 위치로 스크롤합니다. 이 경우 작업을 수행하기 전 선택 영역이 화면 안에 표시될 때까지 스크롤합니다.

역자설명 : 아래 예시는 항목을 선택한 화면 (Screen with item selection)입니다.

모든 경우에 사용자가 맥락을 유지할 수 있도록 콘텐츠를 필요한 만큼만 자동으로 스크롤합니다. 예를 들어 선택 영역의 일부가 보이는 경우, 선택한 전체의 영역이 시야에 들어오도록 스크롤할 필요가 없습니다.

확대/축소를 활성화하는 경우 적절한 최대 및 최소 배율 값을 설정합니다. 예를 들어 화면에 문자 하나가 가득 찰 때까지 텍스트를 확대하는 것은 대부분의 상황에서 의미가 없습니다.

Platform considerations

iOS, iPadOS

일반적으로 화면당 하나의 스크롤 뷰(scroll view)를 표시합니다. 사람들은 스크롤할 때 종종 스와이프 제스처를 크게 취하며, 같은 화면 안에서 인접한 스크롤 뷰(scroll view)와 상호 작용하는 것을 피하기 어려울 수 있습니다. 한 화면에 두 개의 스크롤 뷰를 배치해야 하는 경우, 한 가지의 제스처가 두 화면 모두에 영향을 미치지 않도록 다른 방향으로 스크롤할 수 있도록 허용하는 것이 좋습니다. 예를 들어 iPhone이 세로 방향이기 때문에 Stocks 앱은 가로로 스크롤합니다. 이를 통해 회사별 정보 위에 수직 스크롤뷰를 제공하여 주가를 표시합니다.

스크롤 뷰(scroll view)가 페이지별 모드(page-by-page mode) 일 때 페이지 컨트롤을 표시하는 것이 좋습니다. 페이지 컨트롤(Page controls)은 얼마큼의 페이지, 화면 또는 기타 콘텐츠 묶음이 사용 가능한지 보여주며, 현재 보이는 인디케이터(indicator)를 표시합니다. 예를 들어, 날씨 앱은 페이지 컨트롤을 사용하여 사용자의 위치 간 이동을 저장하여 나타냅니다. 스크롤 뷰(scroll view)가 있는 페이지 컨트롤을 표시하는 경우, 사람들이 동일한 축에서 혼동하지 않을 수 있도록 스크롤 인디케이터(indicator)를 사용불가능 하도록 하는 것이 좋습니다.

macOS

macOS에서는 스크롤 표시기를 일반적으로 스크롤 막대라고 합니다.

레이아웃에서 스크롤 막대(scroll bar)에 대해 설명합니다. 기본적으로 스크롤 막대(scroll bar)는 사용자가 있는 화면과 상호 작용할 때만 나타나지만, 일반 설정의 설정(setting in General settings)을 통해 항상 나타나도록 만들 수 있습니다. 일부의 입력 장치 또한 스크롤 막대(scroll bar)가 항상 표시되도록 합니다. 필요한 경우에는 중요한 인터페이스 요소가 스크롤 막대(scroll bar) 아래에 나타나지 않도록 화면의 레이아웃을 조정합니다. 스크롤 막대(scroll bar) 트랙의 두께는 15포인트(기본 크기(regular size)) 또는 11포인트(소형 또는 더 작은 크기(small or mini size))입니다.

일시적인 스크롤 막대(transient scroll bar)가 나타날 때는 창 콘텐츠를 이동하지 마세요. 스크롤 막대(scroll bar)가 나타날 때마다 콘텐츠를 계속 이동하면 방향을 잃을 수 있습니다.

스크롤 막대(scroll bar)와 인라인으로 컨트롤을 배치하지 마세요. 이렇게 하면 사용자가 일시적으로 표시되도록 설정한 경우에도 스크롤 막대가 표시될 수 있습니다.

필요한 경우 패널에 작은 스크롤 막대(small scroll bar) 또는 미니 스크롤 막대(mini scroll bar)를 사용하세요. 공간이 협소한 경우 다른 창과 공존해야 하는 패널에 더 작은 스크롤 막대를 사용할 수 있습니다. 이러한 패널의 모든 컨트롤에는 동일한 크기를 사용해야 합니다.

tvOS

화면을 스크롤할 수 있지만, 스크롤 막대(scroll bar)가 있는 별개의 개체로 취급되지는 않습니다. 대신 콘텐츠가 화면의 크기를 벗어날 경우 시스템은 자동으로 인터페이스를 초점에 맞게 스크롤하여 콘텐츠 계속 볼 수 있도록 합니다.

visionOS

비전 OS에서는 스크롤 표시기(scroll indicator)의 크기가 작고 고정되어 있어 사용자가 큰 움직임 없이도 편하게 스크롤할 수 있습니다. 사용자가 쉽게 찾을 수 있도록 스크롤 표시기(scroll indicator)는 항상 창을 기준으로 예측 가능한 위치에 표시되며, 세로 스크롤 시에는 세로 중앙에, 가로 스크롤 시에는 창 하단 가장자리에 가로 중앙에 표시됩니다.

사용자가 원하는 방향으로 콘텐츠를 스와이프하기 시작하면 스크롤 표시기(scroll indicator)가 창 가장자리에 표시되어 제스처의 효과를 시각적으로 강조하고 콘텐츠의 현재 위치와 전체 길이에 대한 피드백을 제공합니다. 사용자가 스크롤 표시기(scroll indicator)를 보고 드래그 제스처를 시작하면 표시기(indicator)를 통해 콘텐츠의 위치 대신 스크롤 속도를 조작할 수 있는 조그 바 환경을 구현할 수 있습니다. 이 환경에서 스크롤 표시기(scroll indicator)는 제스처를 조금씩 조정할 때 속도가 빨라지거나 느려지는 눈금 표시를 표시하여 사용자가 스크롤 속도를 정밀하게 제어할 수 있도록 시각적 피드백을 제공합니다.

필요한 경우 스크롤 표시기(scroll indicator)의 크기를 고려하세요. 표시기(indicator)의 전체 크기는 작지만 iOS의 동일한 컴포넌트보다 약간 두껍습니다. 콘텐츠에 좁은 여백을 사용하는 경우 스크롤 표시기(scroll indicator)가 콘텐츠와 겹치지 않도록 여백을 늘리는 것을 고려하세요.

watchOS

세로로 스크롤이 가능한 콘텐츠가 적합합니다. 사람들은 디지털 크라운을 사용하여 Apple Watch에서 앱을 탐색하는 데 익숙합니다. 앱에 단일 목록 또는 콘텐츠가 포함되어 있는 경우 앱의 콘텐츠가 디스플레이 높이보다 클 때 디지털 크라운을 회전하면 세로로 스크롤될 수 있게 하세요.

탭 보기(tab views)를 사용하여 페이지별 스크롤(page-by-page scrolling)을 제공하세요. watchOS는 탭 보기(tab views)를 페이지로 표시합니다. 탭 보기(tab views)를 세로 스택에 배치하면 사람들이 디지털 크라운을 회전하여 전체 화면 콘텐츠 페이지를 세로로 이동할 수 있습니다. 시스템은 디지털 크라운 옆에 페이지 표시기(scroll indicator)를 표시하여 현재 페이지 및 페이지 세트 내에서 콘텐츠의 현재 위치를 표시합니다. 가이드라인은 Tab views를 참고하세요.

역자설명 : 디지털 크라운(Digital Crown)은 애플 워치의 측면에 있는 회전 버튼입니다.

콘텐츠를 보여줄 때는 개별 페이지의 콘텐츠를 화면의 단일 높이로 제한하는 것이 좋습니다. 각 페이지의 목적을 명확히 하여 보다 한눈에 보기 쉬운 디자인을 만드는 것이 좋습니다. 그러나 앱에 화면의 높이보다 긴 콘텐츠가 있는 경우에 페이지 표시기가 스크롤 표시기로 확장되므로 사용자는 디지털 크라운을 사용하여 짧은 페이지 사이를 탐색하고 긴 페이지의 콘텐츠를 스크롤할 수 있습니다. 높이가 변하는 페이지를 신중하게 사용하고 가능하면 고정 높이 페이지 뒤에 배치하세요.