A scroll view lets people view content that’s larger than the view’s boundaries by moving the content vertically or horizontally.
스크롤 뷰는 사람들이 뷰의 경계보다 큰 콘텐츠를 세로 또는 가로로 움직여서 볼 수 있게 해줍니다.
The scroll view itself has no appearance, but it can display a translucent scroll indicator that typically appears after people begin scrolling the view’s content. Although the appearance and behavior of scroll indicators can vary per platform, all indicators provide visual feedback about the scrolling action. For example, in iOS, iPadOS, macOS, visionOS, and watchOS, the indicator shows whether the currently visible content is near the beginning, middle, or end of the view.
스크롤 뷰 자체는 별도의 외형이 없지만, 사용자가 뷰의 콘텐츠를 스크롤하기 시작하면 나타나는 반투명한 스크롤 지시기를 표시할 수 있습니다. 플랫폼에 따라 스크롤 지시기의 외형과 동작이 다를 수 있지만, 모든 지시기는 스크롤 동작에 대한 시각적 피드백을 제공합니다. 예를 들어, iOS, iPadOS, macOS, visionOS, watchOS에서는 지시기가 현재 보이는 콘텐츠가 뷰의 시작 부분, 중간, 또는 끝 부분 근처에 있는지를 나타냅니다.
→ 반투명한 스크롤 지시기로 스크롤 뷰를 설명한다. 인디케이터의 위치와 길이로 스크롤해야할 콘텐츠의 양을 예상해볼 수 있다.
Support default scrolling gestures and keyboard shortcuts. People are accustomed to the systemwide scrolling behavior and expect it to work everywhere. If you build custom scrolling for a view, make sure your scroll bars use the elastic behavior that people expect.
기본 스크롤 제스처와 키보드 단축키를 지원하세요. 사람들은 시스템 전반의 스크롤 동작에 익숙하며 이것이 모든 곳에서 작동되기를 기대합니다. 만약 여러분이 뷰를 위해 맞춤형 스크롤 기능을 만들 때에는, 스크롤 바가 사람들이 기대하는 탄력적인 동작을 사용하도록 확실히 해주세요.
→ 기본적으로 제공되는, 사용자들이 예상 가능하고 익숙한 스크롤 제스쳐와 키보드 단축키를 제공해라.
역자 첨언
Make it apparent when content is scrollable. Because scroll bars aren’t always visible, it can be helpful to make it obvious when content extends beyond the view. For example, displaying partial content at the edge of a view indicates that there’s more content in that direction. Although most people immediately try scrolling a view to discover if additional content is available, it’s considerate to draw their attention to it.
콘텐츠가 스크롤 가능하다는 것을 분명히 보여주세요. 스크롤 바가 항상 보이지 않기 때문에, 콘텐츠가 뷰를 넘어서 확장될 때 이것을 분명하게 드러내는 것이 도움이 될 수 있습니다. 예를 들어, 뷰의 가장자리에 일부 콘텐츠를 부분적으로 표시하면 그 방향으로 더 많은 콘텐츠가 있다는 것을 나타낼 수 있습니다. 대부분의 사람들은 추가 콘텐츠가 있는지 확인하기 위해 뷰를 스크롤해보려고 하지만, 그들의 주의를 끌어 그것을 알려주는 것이 배려 깊은 행동입니다.
→ 사용자가 스크롤을 해야한다는 것을 예상할 수 있도록, 스크롤 해야하는 뷰의 가장자리 쪽에 일부 컨텐츠를 잘리듯이 부분적으로 보여줘라.
Avoid putting a scroll view inside another scroll view with the same orientation. Nesting scroll views that have the same orientation can create an unpredictable interface that’s difficult to control. It’s alright to place a horizontal scroll view inside a vertical scroll view (or vice versa), however.
같은 방향을 가진 스크롤 뷰 안에 다른 스크롤 뷰를 넣는 것은 피하세요. 같은 방향의 스크롤 뷰를 중첩하면 예측하기 어렵고 제어하기 힘든 인터페이스가 생성될 수 있습니다. 하지만, 수평 스크롤 뷰를 수직 스크롤 뷰 안에 넣는 것(또는 그 반대)은 괜찮습니다.
→ 어떠한 방향을 가진 스크롤 뷰 안에 그와 동일한 방향을 가진 스크롤 뷰를 넣기보다, 서로 다른 스크롤 뷰를 종속하는 UI로 제공하라.
역자 첨언
Consider supporting page-by-page scrolling if it makes sense for your content. In some situations, people appreciate scrolling by a fixed amount of content per interaction instead of scrolling continuously. On most platforms, you can define the size of such a page — typically the current height or width of the view — and define an interaction that scrolls one page at a time. To help maintain context during page-by-page scrolling, you can define a unit of overlap, such as a line of text, a row of glyphs, or part of a picture, and subtract the unit from the page size.
만약 여러분의 콘텐츠에 맞다면 페이지별 스크롤을 지원하는 것을 고려하세요. 어떤 상황에서는 사람들이 연속적으로 스크롤하는 것이 아니라 한 번의 상호 작용에 고정된 양의 콘텐츠를 스크롤하는 것을 선호합니다. 대부분의 플랫폼에서는 이러한 '페이지'의 크기를 정의할 수 있습니다 — 일반적으로는 현재 뷰의 높이나 너비 — 그리고 한 번에 한 페이지씩 스크롤하는 상호 작용을 정의할 수 있습니다. 페이지별 스크롤을 할 때 맥락을 유지하는데 도움을 주기 위해, 텍스트의 한 줄, 글리프의 한 행, 또는 그림의 일부와 같은 중복 단위를 정의하고 페이지 크기에서 이 단위를 빼서 설정할 수 있습니다.
→ 너무 많은 양의 콘텐츠를 다룰 때 하나의 스크롤로 제공하기보다, 페이지별로 끊어서 스크롤을 제공하라. 그리고 사용자가 콘텐츠의 맥락에 대한 이해를 유지할 수 있도록 각 페이지 처음과 끝에 중복되는 콘텐츠를 함께 제공하라.
역자 첨언
In some cases, scroll automatically to help people find their place. Although people initiate almost all scrolling, automatic scrolling can be helpful when relevant content is no longer in view, such as when:
어떤 경우에는 사람들이 자리를 찾을 수 있도록 자동으로 스크롤하는 기능을 제공하세요. 거의 모든 스크롤은 사람들이 직접 시작하지만, 관련 콘텐츠가 더 이상 보이지 않을 때 자동 스크롤이 도움이 될 수 있습니다. 예를 들어:
•
Your app performs an operation that selects content or places the insertion point in an area that’s currently hidden. For example, when your app locates text that people are searching for, scroll the content to bring the new selection into view.
•
여러분의 앱이 내용을 선택하거나 삽입 포인트를 현재 숨겨져 있는 영역에 놓는 작업을 수행하는 경우가 있습니다. 예를 들어, 사용자가 찾고 있는 텍스트를 앱이 찾아낸 경우, 새로 선택된 내용이 보이도록 내용을 스크롤하세요.
역자 첨언
•
People start entering information in a location that’s not currently visible. For example, if the insertion point is on one page and people navigate to another page, scroll back to the insertion point as soon as they begin to enter data.
•
사용자가 현재 보이지 않는 위치에 정보를 입력하기 시작합니다. 예를 들어, 삽입 포인트가 한 페이지에 있고 사용자가 다른 페이지로 이동한 경우, 데이터 입력을 시작하는 즉시 삽입 포인트로 다시 스크롤하세요.
역자 첨언
•
The pointer moves past the edge of the view while people are making a selection. In this case, follow the pointer by scrolling in the direction it moves.
•
사용자가 선택을 하는 동안 포인터가 뷰의 가장자리를 넘어갑니다. 이 경우, 포인터의 움직임 방향으로 스크롤하며 포인터를 따라가세요.
역자 첨언
•
People select something and scroll to a new location before acting on the selection. In this case, scroll until the selection is in view before performing the operation.
•
사용자가 무언가를 선택하고 선택한 항목을 실행하기 전에 새로운 위치로 스크롤합니다. 이 경우, 작업을 수행하기 전에 선택한 내용이 보이도록 스크롤하세요.
In all cases, automatically scroll the content only as much as necessary to help people retain context. For example, if part of a selection is visible, you don’t need to scroll the entire selection into view.
모든 경우에 있어서, 콘텐츠를 자동으로 스크롤할 때는 사용자가 맥락을 유지할 수 있도록 필요한 만큼만 스크롤하세요. 예를 들어, 선택된 내용의 일부가 이미 보인다면, 전체 선택 내용을 보이도록 스크롤할 필요는 없습니다.
If you support zoom, set appropriate maximum and minimum scale values. For example, zooming in on text until a single character fills the screen doesn’t make sense in most situations.
확대/축소 기능을 지원한다면, 적절한 최대 및 최소 스케일 값을 설정하세요. 예를 들어, 텍스트를 확대하여 단일 문자가 화면을 채우도록 하는 것은 대부분의 상황에서 말이 되지 않습니다.
In general, display one scroll view per screen. People often make large swipe gestures when scrolling, and it can be hard to avoid interacting with a neighboring scroll view on the same screen. If you need to put two scroll views on one screen, consider allowing them to scroll in different directions so one gesture is less likely to affect both views. For example, when iPhone is in portrait orientation, the Stocks app shows stock quotes that scroll vertically above company-specific information that scrolls horizontally.
일반적으로 한 화면에 하나의 스크롤 뷰를 표시하세요. 사람들은 스크롤을 할 때 큰 스와이프 동작을 자주 사용하며, 이는 같은 화면에 있는 인접한 스크롤 뷰와 상호 작용하는 것을 피하기 어렵게 만들 수 있습니다. 한 화면에 두 개의 스크롤 뷰를 두어야 하는 경우, 서로 다른 방향으로 스크롤할 수 있도록 고려하세요. 그래야 한 번의 제스처로 두 뷰가 모두 영향을 받을 확률이 줄어듭니다. 예를 들어, iPhone이 세로 모드일 때 주식 앱은 세로로 스크롤되는 주식 시세를 보여주고 그 아래에는 회사별 정보를 가로로 스크롤할 수 있습니다.
역자 첨언
Consider showing a page control when a scroll view is in page-by-page mode. Page controls show how many pages, screens, or other chunks of content are available and indicates which one is currently visible. For example, Weather uses a page control to indicate movement between people’s saved locations. If you show a page control with a scroll view, don’t show the scrolling indicator on the same axis to avoid confusing people with redundant controls.
스크롤 뷰가 페이지별 모드일 때 페이지 컨트롤을 표시하는 것을 고려하세요. 페이지 컨트롤은 사용 가능한 페이지, 화면 또는 다른 콘텐츠 조각이 몇 개인지 보여주고 현재 어떤 것이 보이는지 표시합니다. 예를 들어, 날씨 앱은 사람들이 저장한 위치 사이를 이동할 때 페이지 컨트롤을 사용하여 이를 나타냅니다. 스크롤 뷰와 페이지 컨트롤을 함께 사용하는 경우, 혼란을 피하기 위해 같은 축에서 스크롤 인디케이터를 표시하지 마세요.
역자 첨언
In macOS, a scroll indicator is commonly called a scroll bar.
macOS에서는 스크롤 지시기를 일반적으로 스크롤 바라고 부릅니다.
Account for scroll bars in your layout. By default, scroll bars appear only when people interact with views that contain them, but people can use a setting in General settings to make them appear all the time. Some input devices also cause scroll bars to display all the time. If necessary, adjust the layout of your window so important interface elements don’t appear beneath scroll bars. The scroll bar track has a thickness of 15 points (regular size) or 11 points (small or mini size).
레이아웃에서 스크롤 바를 고려하세요. 기본적으로 스크롤 바는 사람들이 그것을 포함하는 뷰와 상호 작용할 때만 나타나지만, '일반' 설정에서 사람들이 항상 나타나게 설정할 수 있습니다. 일부 입력 장치도 스크롤 바를 항상 표시하게 만듭니다. 필요하다면 창의 레이아웃을 조정하여 중요한 인터페이스 요소가 스크롤 바 아래에 나타나지 않도록 하세요. 스크롤 바 트랙의 두께는 15 포인트(기본 크기) 또는 11 포인트(작은 또는 미니 크기)입니다.
역자 첨언
Avoid moving window content when transient scroll bars appear. Constantly shifting content every time scroll bars appear can be disorienting.
일시적으로 나타나는 스크롤 바가 등장할 때 창의 콘텐츠를 움직이지 마세요. 스크롤 바가 나타날 때마다 콘텐츠가 지속적으로 움직이면 사용자가 혼란스러워할 수 있습니다.
→ 스크롤 바가 나타날 때 콘텐츠의 위치를 고정시켜 콘텐츠가 스크롤 바의 등장에 영향을 받지 않도록 설계해 사용자가 혼란스러워하지 않도록 해야 한다.
역자 첨언
Avoid placing controls inline with a scroll bar. Doing this can cause the bar to appear even when people set it to be transient.
스크롤 바와 일직선상에 컨트롤을 배치하지 마세요. 이렇게 하면 사용자가 스크롤 바를 일시적으로만 나타나도록 설정해두었더라도 스크롤 바가 계속 나타나게 될 수 있습니다.
역자 첨언
If necessary, use small or mini scroll bars in a panel. When space is tight, you can use smaller scroll bars in panels that need to coexist with other windows. Be sure to use the same size for all controls in such a panel.
필요하다면 패널에서 작은 또는 미니 스크롤 바를 사용하세요. 공간이 부족할 때 다른 창과 공존해야 하는 패널에서는 작은 스크롤 바를 사용할 수 있습니다. 이러한 패널의 모든 컨트롤은 동일한 크기를 사용해야 합니다.
Views in tvOS can scroll, but they aren’t treated as distinct objects with scroll bars. Instead, when content exceeds the size of the screen, the system automatically scrolls the interface to keep focused items visible.
tvOS에서 뷰는 스크롤할 수 있지만, 스크롤 바와 같은 별도의 객체로 취급되지 않습니다. 대신 콘텐츠의 크기가 화면 크기를 초과하면 시스템이 자동으로 인터페이스를 스크롤하여 초점이 맞춰진 항목이 보이도록 합니다.
In visionOS, the scroll indicator has a small, fixed size to help communicate that people can scroll efficiently without making large movements. To make it easy to find, the scroll indicator always appears in a predictable location with respect to the window: vertically centered at the trailing edge during vertical scrolling and horizontally centered at the window’s bottom edge during horizontal scrolling.
visionOS에서 스크롤 지시기는 작고 고정된 크기를 가지고 있어, 사람들이 큰 동작 없이도 효율적으로 스크롤할 수 있음을 알려줍니다. 찾기 쉽도록 스크롤 지시기는 창에 대해 예측 가능한 위치에 항상 나타납니다: 세로 스크롤 시 창의 뒤쪽 가장자리에 수직으로 중앙에 위치하고, 가로 스크롤 시 창의 하단 가장자리에 수평으로 중앙에 위치합니다.
When people begin swiping content in the direction they want it to scroll, the scroll indicator appears at the window’s edge, visually reinforcing the effect of their gesture and providing feedback about the content’s current position and overall length. When people look at the scroll indicator and begin a drag gesture, the indicator enables a jog bar experience that lets people manipulate the scrolling speed instead of the content’s position. In this experience, the scroll indicator reveals tick marks that speed up or slow down as people make small adjustments to their gesture, providing visual feedback that helps people precisely control scrolling acceleration.
사람들이 원하는 방향으로 콘텐츠를 스와이프하기 시작하면, 스크롤 지시기가 창의 가장자리에 나타나며, 그들의 제스처의 효과를 시각적으로 강화하고 콘텐츠의 현재 위치와 전체 길이에 대한 피드백을 제공합니다. 사람들이 스크롤 지시기를 보고 드래그 제스처를 시작하면, 지시기는 조깅 바 경험을 가능하게 하여 사람들이 콘텐츠의 위치가 아닌 스크롤 속도를 조작할 수 있도록 합니다. 이 경험에서 스크롤 지시기는 사람들이 제스처를 조금씩 조정함에 따라 빨라지거나 느려지는 눈금을 보여주어, 스크롤 가속을 정확하게 제어하는 데 도움이 되는 시각적 피드백을 제공합니다.
If necessary, account for the size of the scroll indicator. Although the indicator’s overall size is small, it’s a little thicker than the same component in iOS. If your content uses tight margins, consider increasing them to prevent the scroll indicator from overlapping the content.
필요한 경우, 스크롤 지시기의 크기를 고려하세요. 지시기의 전체 크기는 작지만, iOS의 동일한 구성 요소보다 약간 두껍습니다. 콘텐츠가 좁은 여백을 사용하는 경우, 스크롤 지시기가 콘텐츠와 겹치지 않도록 여백을 늘리는 것을 고려하세요.
Prefer vertical scrolling content. People can use the Digital Crown to navigate to and within apps on Apple Watch. If your app contains a single list or content view, rotating the Digital Crown scrolls vertically when your app’s content is taller than the height of the display.
세로 스크롤 콘텐츠를 선호하세요. 사람들은 Apple Watch에서 Digital Crown을 사용하여 앱 내에서 탐색하고 앱으로 이동할 수 있습니다. 앱에 단일 리스트나 콘텐츠 뷰가 포함되어 있는 경우, 앱의 콘텐츠가 디스플레이 높이보다 더 길면 Digital Crown을 돌려서 세로로 스크롤할 수 있습니다.
Use tab views to provide page-by-page scrolling. watchOS displays tab views as pages. If you place tab views in a vertical stack, people can rotate the Digital Crown to move vertically through full-screen pages of content. In this scenario, the system displays a page indicator next to the Digital Crown that shows people where they are in the content, both within the current page and within a set of pages. For guidance, see Tab views.
페이지별로 스크롤하는 기능을 제공하기 위해 탭 뷰를 사용하세요. watchOS는 탭 뷰를 페이지로 표시합니다. 탭 뷰를 세로 스택에 배치하면, 사람들은 디지털 크라운을 돌려 전체 화면 페이지의 콘텐츠를 세로로 이동할 수 있습니다. 이 경우, 시스템은 디지털 크라운 옆에 페이지 지시기를 표시하여, 사람들이 현재 페이지와 페이지 세트 내에서 어디에 있는지 보여줍니다. 자세한 지침은 '탭 뷰'를 참조하세요.
역자 첨언
When displaying paged content, consider limiting the content of an individual page to a single screen height. Embracing this constraint clarifies the purpose of each page, helping you create a more glanceable design. However, if your app has long pages, people can still use the Digital Crown both to navigate between shorter pages and to scroll content in a longer page because the page indicator expands into a scroll indicator when necessary. Use variable-height pages judiciously and place them after fixed-height pages when possible.
페이지로 나뉜 콘텐츠를 표시할 때, 각 페이지의 내용을 하나의 화면 높이로 제한하는 것을 고려하세요. 이 제한을 받아들이면 각 페이지의 목적이 명확해지고, 더 한눈에 파악하기 쉬운 디자인을 만들 수 있습니다. 그러나 앱에 긴 페이지가 있는 경우에도, 필요할 때 페이지 지시기가 스크롤 지시기로 확장되기 때문에 사람들은 디지털 크라운을 사용하여 짧은 페이지 간에 탐색하거나 긴 페이지의 콘텐츠를 스크롤할 수 있습니다. 가변 높이의 페이지를 신중하게 사용하고 가능하다면 고정 높이 페이지 뒤에 배치하세요.
Change Log
작성 날짜 | 작성자 | 수정사항 |
2023/10/30 | 예나 | 초기 번역 |
2023/12/17 | 예나 | 2차 수정 |
2023/12/22 | 예나 | 배포 |