[HIG] Components - Scroll views

https://developer.apple.com/design/human-interface-guidelines/scroll-views

Scroll views

스크롤 뷰를 사용하면 콘텐츠를 가로 또는 세로로 이동하여 뷰의 바운더리보다 더 큰 콘텐츠를 볼 수 있도록 할 수 있습니다!

 

스크롤 뷰의 예시

스크롤 뷰 자체적으로는 appearance가 없다.

그러나, 액션에 대한 추가적인 정보를 제공하는 반투명한 스크롤 막대 또는 인디케이터를 보여줄 수 있다.

인디케이터의 위치는 콘텐츠의 visible portion이 시작, 중간 또는 끝에 가까운지 여부를 나타낸다.

인디케이터의 높이는 뷰에서 스크롤할 수 있는 콘텐츠의 총 양을 알려주며, 인디케이터가 짧을수록 스크롤할 콘텐츠가 많다는 의미이다.

 

Best practices

• 디폴트 스크롤 제스쳐와 키보드 단축키를 제공하자
  • 사람드은 시스템의 스크롤 동작에 익숙해져 있으며 모든 곳에서 동일하게 동작하길 기대한다.
  • 뷰에 대한 커스텀 스크롤을 만든 경우, 스크롤 바가 사람들이 기대하는 탄력적으로 동작해야 한다.
• 콘텐츠를 스크롤 할 수 있는 경우 명확하게 표시해야 한다.
  • 스크롤 바가 항상 표시되는 것은 아니기 때문에 콘텐츠가 뷰 너머로 확장되는 경우 이를 명확하게 표시하자
  • 예를 들어 뷰 가장자리에 콘텐츠의 일부가 표시되면 해당 방향에 더 많은 콘텐츠가 있음을 나타낸다.
  • 대부분의 사람들은 즉시 뷰를 스크롤하여 추가적인 콘텐츠가 있는지 확인하지만, 주의를 끌 수 있도록 배려하자

하단에 콘텐츠 일부를 표시하여 가로 스크롤이 가능한 것을 암시

 

• 스크롤 뷰를 같은 방향의 다른 스크롤 뷰 안에 넣지 말자!!
  • 이렇게 하면 제어하기 어렵고 예측할 수 없는 인터페이스가 만들어진다.
  • 당연히 가로 스크롤 뷰를 세로 스크롤 뷰 안에 배치하거나 그 반대의 경우는 괜찮다.
• 콘텐츠에 적합하다면 page-by-page 스크롤링을 지원하는 것을 고려하자 (페이징)
  • 몇몇 상황에서는 사람들이 계속 스크롤하는 대신 상호 작용당 정해진 양의 콘텐츠를 스크롤하는 것을 선호한다.
  • 대부분의 플랫폼에서 이러한 페이지의 크기(일반적으로 뷰의 현재 높이 또는 너비)를 정의하고 한 번에 한 페이지씩 스크롤하는 상호 작용을 정의할 수 있다.
  • 페이지별로 스크롤하는 동안 컨텍스트를 유지하기 위해 텍스트 한 줄, 상형문자(glyphs) 행 또는 picture의 일부와 같은 겹침 단위를 정의하고 페이지 크기에서 해당 단위를 뺄 수 있습니다.
  • 개발자 가이드 : isPagingEnabled
• 어떤 경우에는 자동으로 스크롤하여 사람들이 제자리를 찾을 수 있도록 도와줄 수 있다.
  • 거의 모든 스크롤은 사용자가 직접 시작하지만, 관련 콘텐츠가 더 이상 보이지 않을 때 같은 경우 자동 스크롤이 유용할 수 있다.
  • 자동 스크롤 예시
    • 앱은 콘텐츠를 선택하거나 현재 숨겨진 영역에 insertion point를 배치하는 작업을 수행한다. 예를 들어, 사람들이 검색하는 텍스트를 찾으면 콘텐츠를 스크롤하여 새 선택 항목을 표시한다. (command+f로 단어 검색 시 자동 스크롤)
    • 사람들이 현재 보이지 않는 위치에서 정보를 입력하는 경우. 예를 들어, insertion point(커서 위치를 말하는 듯)가 한 페이지에 있고 사람들이 다른 페이지로 이동하는 경우, 데이트를 입력하기 시작하자마자 insertion point로 스크롤을 다시 이동합니다.
    • 사람들이 선택을 하는 동안 포인터가 뷰의 가장자리를 지나갈 때, 포인터가 이동하는 방향으로 스크롤하여 포인터를 따라갑니다. (맥os에서 마우스를 말하는 듯 합니다.)
    • 사람들은 무언가를 선택하고 새 위치로 스크롤한 후 선택 항목에 대한 작업을 수행합니다. 이 경우 선택 항목이 표시될 때까지 스크롤한 다음 작업을 수행합니다.
  • 이러한 모든 경우에 사람들이 컨텍스트를 파악할 수 있도록 필요한 만큼만 콘텐츠를 자동 스크롤하자
    • 선택 항목의 일부가 표시되는 경우 전체 항목을 스크롤하여 볼 필요는 없다.
• 줌 기능을 제공하는 경우 적절한 최대 및 최소 배율 값을 설정하자.
  • 예를 들어, 단일 문자가 화면을 꽉 채울 때까지 텍스트를 확대하는 것은 일반적으로 의미가 없다.

 

Platform consideration

iOS, iPadOS

• 일반적으로 화면당 하나의 스크롤 뷰를 제공하자
  • 사람들은 스크롤할 때 큰 스와이프 제스처를 주로 사용하기 때문에 같은 화면에서 인접한 스크롤 뷰와 상호 작용하는 것을 피하기 어렵다. (스크롤 뷰가 여러개일 때 의도하지 않은 스크롤 뷰가 스크롤 되는 문제 발생)
  • 한 화면에 2개 이상의 스크롤 뷰를 넣어야 한다면 서로 다른 방향으로 스크롤하도록 하자
• 스크롤 뷰가 page-by-page 모드일 때 페이지 컨트롤을 표시하는 것을 고려하자!
  • 페이지 컨트롤은 사용 가능한 페이지, 화면 또는 기타 콘텐츠의 수를 표시하고 현재 어떤 페이지가 표시되고 있는지 나타낸다.
  • 스크롤 뷰와 함께 페이지 컨트롤을 보여주는 경우 사람들이 중복 컨트롤로 혼동하지 않도록 스크롤 인디케이터를 같은 축에 표시하지 말자

스크롤 뷰과 페이지 컨트롤을 넣은 모습 (아이폰 날씨앱)