brunch

You can make anything
by writing

C.S.Lewis

by Lawn Mar 16. 2024

[HIG] Page controls

페이지 탐색에 도움을 주는 컨트롤

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

Introduction

페이지 컨트롤(page control)은 인디케이터(indicator) 이미지를 가로나 세로로 나열하여 표시하며, 이 나열된 행(row)은 각각의 일차원적인 목록(flat list)에 대한 페이지를 나타냅니다.

인디케이터(indicator)에서 스크롤이 되는 행(row)은 사용자가 원하는 페이지를 찾기 위해 목록을 탐색하는 데 도움이 됩니다. 페이지 컨트롤(page control)은 페이지의 수를 자유롭게 표시할 수 있으므로, 사용자가 정의하는 목록(list)을 만들어야 하는 상황에서 특히 유용합니다.

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

기본적으로 페이지 컨트롤(page control)은 작은 인디케이터(indicator)인 점(dot)이 모여 만들어졌으며, 이를 통해 사용 가능한 페이지들을 나타냅니다. 그중 하나의 점(dot)은 현재의 페이지를 나타냅니다. 이 점(dot)들은 시각적으로 항상 동일한 간격 간의 거리에 위치해 있으며, 화면에 너무 많이 표시되면 잘립니다.

Best Practices

페이지 컨트롤(page controls)을 사용하여 정렬되어 있는 페이지들의 목록(list) 간의 이동을 나타냅니다. 페이지 컨트롤(page controls)은 계층적이거나 순서가 없는 페이지간의 관계를 나타내지 않습니다. 그래서 더 복잡한 탐색(navigation)을 제공해야 하는 경우에는 사이드바(sidebar) 또는 분할 화면(split view)을 대신 사용하는 것이 좋습니다.

페이지 컨트롤(page controls)을 화면 하단 중앙에 배치합니다. 사용자가 페이지 컨트롤(page controls)의 위치를 항상 인지할 수 있도록 수평으로 하여 화면 하단 중앙에 배치합니다. 페이지 컨트롤(page controls)을 통해 페이지 수를 자유롭게 설정할 수 있지만 너무 많은 페이지를 표시하지 않도록 하는 것이 좋습니다.

페이지 컨트롤(page controls)에서 10개가 넘는 점(dot)들을 통해 한눈에 세기 어렵게 만드는 것은 지양하는 것이 좋습니다. 앱이 동등한 위치에 10페이지 이상을 표시해야 하는 경우, 그리드와 같은 다른 배열을 사용하여 순차적이지 않은 방법으로 탐색이 가능하도록 하는 것이 좋습니다.

Customizing indicators

기본적으로 페이지 컨트롤(page controls)은 모든 인디케이터(Indicator)에서 시스템에서 제공한 점(dot) 모양의 이미지를 사용하지만, 사용자가 특정 페이지를 식별하는 데 도움이 되는 고유한 이미지를 표시할 수도 있습니다. 예를 들어 날씨(Weather) 앱은 현재 위치의 페이지와 구분할 수 있도록 ‘location.fill’ 기호를 사용합니다.

앱이나 게임의 퀄리티를 향상하기 위해 인디케이터(Indicator)의 기본 이미지를 사용자 지정 할 수 있으며 특정 페이지에 대해서 다른 이미지를 제공할 수도 있습니다. 개발자 가이드라인은 preferredIndicatorImage 와 setIndicatorImage(_:forPage:)를 참고하세요.

역자설명 : 사용자 정의한 다양한 모양의 인디케이터(Indicator) 예시입니다.

사용자 지정한 인디케이터(Indicator)의 이미지가 단순하고 명확한지 확인합니다. 복잡한 모양을 피하고 필요 없는 공백이나 텍스트, 안쪽에 오는 라인을 포함하지 않는 것이 좋습니다. 이러한 구체적인 디자인은 아이콘을 매우 작은 크기로 만들어 가독성이 떨어지게 만들 수 있습니다. 간단한 SF Symbols을 인디케이터(Indicator)로 사용하거나, 자신만의 아이콘을 디자인하는 것을 고려해 보세요. 자세한 내용은 icons를 참고하세요.

페이지 컨트롤(page controls)에서 전체적으로 동일한 의미를 강조해야 하는 경우에, 기본 인디케이터(Indicator) 이미지를 사용자 정의하는 것이 좋습니다. 예를 들어, 모든 페이지에 책갈피가 있는 경우 bookmark.fill 기호를 기본 인디케이터 이미지로 사용할 수 있습니다.

한 페이지 컨트롤(page controls)에서 세 개 이상의 다른 인디케이터(Indicator) 이미지를 사용하지 않도록 하는 것이 좋습니다. 페이지 컨트롤(page controls)의 목록(list) 중 날씨(Weather) 앱의 ‘현재 위치(current-location)’ 페이지와 같이 특별한 의미가 있는 페이지가 하나 있으면 고유한 인디케이터(Indicator) 이미지를 제공하여 페이지를 쉽게 찾을 수 있습니다. 반면, 여러 개의 고유한 이미지를 사용하여 몇 개의 중요한 페이지를 표시하는 페이지 컨트롤은(page controls) 사람들이 각 이미지의 의미를 기억해야 하기 때문에 사용하기에 어려움이 있습니다. 두 가지 이상의 인디케이터(Indicator) 이미지를 표시하면 각 이미지가 선명한 경우에도 지저분하고 성의 없는 디자인처럼 보이는 경향이 있습니다.

인디케이터(Indicator) 이미지에 색을 채우지 않는 것이 좋습니다. 사용자 지정 색상을 사용하면, 화면과 페이지 컨트롤(page controls)의 대비가 감소되어 사용자들이 페이지 인디케이터(Indicator)를 식별하기 어려울 수 있습니다. 페이지 컨트롤(page controls)을 사용하기 쉽고, 다양한 콘텍스트에서 보기 좋게 표시하려면 시스템에서 인디케이터(Indicator) 색상을 자동으로 설정하도록 고려하세요.

Platform considerations

No additional considerations for watchOS. Not supported in macOS.

iOS, iPadOS

페이지 컨트롤(page controls)은 인디케이터(Indicator)의 모양을 조정하여 목록(list)에 대한 자세한 정보를 제공할 수 있습니다. 예를 들어, 컨트롤은 사용자가 목록에서 페이지의 상대적 위치를 추정할 수 있도록 현재 페이지의 인디케이터(Indicator)를 강조 표시합니다. 표시하는 공간에 비해 인디케이터(Indicator)가 많이 있는 경우, 페이지 컨트롤(page controls)은 양쪽의 인디케이터(Indicator)를 축소하여 더 많은 페이지를 사용할 수 있음을 나타낼 수 있습니다.

사용자는 탭을 누르거나 스크러빙(scrubbing)을 통해 페이지 컨트롤(page controls)과 상호 작용합니다. 페이지 인디케이터(Indicator)의 앞이나 뒤의 면을 탭 하면, 다음 페이지 또는 이전 페이지가 나타납니다. 스크러빙(scrubbing)은 페이지를 차례대로 보여주고, 페이지 컨트롤(page controls)의 맨 앞 또는 맨 뒤의 가장자리를 스크럽 하면 사용자가 첫 번째 또는 마지막 페이지에 빠르게 도달할 수 있습니다.

역자설명 : 스크러빙(scrubbing)이란, ‘문지르는 동작’으로 스크롤링(Scrolling)과 유사한 기능입니다.

DEVELOPER NOTE : API에서 탭핑(tapping)은 별개의 상호작용인 반면에, 스크러빙(scrubbing)은 지속적인 상호작용입니다. 가이드라인 UIPageControl.InteractionState을 참고하세요.

스크러빙(scrubbing)하는 동안 페이지 전환을 활성화하지 않는 것이 좋습니다. 사람들은 매우 빠르게 스크럽 할 수 있으며, 모든 페이지 전환에 스크롤 애니메이션을 사용하면 애플리케이션이 지연되고, 순간적인 시각적 번쩍임으로 인해 산만한 경험을 제공할 수 있습니다. 애니메이션을 통한 스크롤 전환은 탭핑(tapping)에만 사용하는 것이 좋습니다.

페이지 컨트롤(page controls)은 배경과 인디케이터(Indicator)의 시각적 대비를 주기 위해 반투명하고 둥근 직사각형 배경 모양을 포함할 수 있습니다. 다음 배경 스타일 중 하나를 선택할 수 있습니다:

자동(Automatic) - 사용자가 컨트롤과 상호 작용할 때만 배경을 표시합니다. UI의 탐색요소 중 페이지 컨트롤(page controls)이 가장 근본적인 탐색 요소가 아닌 경우 이 유형을 사용합니다.

눈에 띄는(Prominent) - 항상 배경을 표시합니다. UI의 탐색요소 중 페이지 컨트롤(page controls)이 가장 근본적인 탐색 요소인 경우 이 유형을 사용합니다.

최소(Minimal) - 배경을 표시하지 않습니다. 목록(list)에서 현재 페이지의 위치를 표시할 필요가 있지만, 스크러빙 중 시각적 피드백을 제공할 필요가 없는 경우 이 유형을 사용합니다.

개발자 가이드라인은 backgroundStyle을 참고하세요.

최소(Minimal) 배경 스타일을 사용할 때는 스크러버(scruber)를 지원하지 않도록 합니다. 최소(Minimal) 배경 스타일은 스크러빙(scrubbing)하는 동안 시각적 피드백을 제공하지 않습니다. 사용자가 앱에서 페이지 목록(list)을 스크럽하도록 하려면 자동(Automatic) 또는 눈에 띄는(Prominent) 배경 스타일을 사용합니다.

tvOS

풀 스크린 페이지(full-screen pages) 모음에서 페이지 컨트롤(page controls)을 사용합니다. 페이지 컨트롤(page controls)은 내용이 많고 계층이 같은 여러 페이지가 전체 화면 환경에서 작동하도록 설계되었습니다. 풀 스크린(full-screen)에 추가적인 컨트롤을 포함하면 페이지 간을 이동하는 동안 화면에서 포커스를 유지하기가 어렵습니다.

visionOS

비전 OS에서 페이지 컨트롤은 사용 가능한 페이지를 나타내며 현재 페이지를 표시하지만 사람들이 페이지와 상호 작용하지는 않습니다.

watchOS

watchOS에서 페이지 컨트롤은 가로 방향의 탭 전환일 경우 화면 하단에 표시하거나 세로 방향 탭 보기를 표시하는 경우 디지털 크라운 옆에 표시할 수 있습니다. 세로 탭 보기를 사용하는 경우 페이지 표시기(page indicator)는 현재 페이지 및 페이지 세트 내에서 탐색의 현재 위치를 표시합니다. 페이지 컨트롤(page control)은 페이지의 콘텐츠를 스크롤하는 것과 다른 페이지로 스크롤하는 것 사이를 전환합니다.

세로 방향 탭 보기를 사용하여 여러 보기를 뚜렷하고 목적에 맞는 페이지로 분리하세요. 목적에 맞는 페이지를 그룹화하고, 사람들이 디지털 크라운을 사용하여 페이지를 스크롤할 수 있도록 하세요. watchOS에서는 이 디자인이 가로 방향 페이지 전환 방법이나 여러 단계의 계층적 탐색보다 더 효과적입니다.

개별 콘텐츠를 단일 화면 높이로 제한하는 것도 고려해 보세요. 이러한 방법을 통해 각 페이지가 명확하고 뚜렷한 목적을 달성하도록 유도하고 보다 한눈에 보기 좋은 디자인을 만들 수 있습니다. 가변 높이 페이지(variable-height pages)는 신중하게 사용하고 가능하면 앱 디자인에서 고정 높이 페이지(fixed-height pages)를 사용하세요.