[HIG] Scroll views

고라니·2024년 3월 27일
0

HIG

목록 보기
10/11

Scroll views

스크롤 뷰는 iOS나 다른 플랫폼에서 매우 자주 사용되는 UI요소 중 하나다.
이는 사용자가 화면 크기보다 큰 콘텐츠를 스크롤하여 볼 수 있도록 하여 많은 종류의 애플리케이션에서 콘텐츠를 효과적으로 표시하는데 도움이 된다.

스크롤 뷰 자체는 표시되지 않지만 일반적으로 텍스트, 이미지 또는 다른 뷰들을 담고 있다.
사용자가 제스처를 사용하여 스크롤할 수 있다.
스크롤 뷰에는 스크롤 인디케이터가 포함되어 있는 경우가 많고 이는 현재 위치와 스크롤된 양을 시각적으로 확인할 수 있도록 도와준다.

Best paractices

  • 기본 스크롤 제스처와 키보드 단축키를 지원해라
    : 사용자들은 이미 기본 시스템 스크롤에 익숙하다. 터치 기반 장치는 손가락을 사용하여 위아래로 스크롤 하고, 키보드를 사용할 경우 위아래 단축키를 사용한다. 사용자 지정 스크롤을 사용할 때는 탄성 동작을 사용하는 것을 권장한다.

  • 콘텐츠가 스크롤 가능한지 명확하게 만들어라
    : 스크롤 인디케이터는 항상 보이는건 아니기 때문에 뷰를 벗어나는 콘텐츠 즉 스크롤이 가능한 경우 이를 명확하게 만드는것이 도움이 된다.

  • 같은 방향의 스크롤 뷰 내에 다른 스크롤 뷰를 넣지 말아라.
    : 같은 방향의 중첩된 스크롤 뷰는 제어하기 여렵고 예측할 수 없는 인터페이스를 만들게 될 수 있다. 하지만 스크롤 뷰 내에 수직으로 동작하는 스크롤뷰는 괜찮다.

  • 콘텐츠에 적합한 경우 페이지별 스크롤을 지원하는것을 고려해라.
    : 일부 상황에서는 지속적으로 스크롤하는 대신 상호작용당 고정된 콘텐츠를 스크롤 하는 것을 선호할 수 있다.
    사실 처음엔 이해가 안됐는데 책 앱을 생각하면 이해가 쉽다. 한권을 계속해서 스크롤 하는것보단 고정된 크기를 가진 한 페이지 분량까지만 스크롤 하고 다음 내용은 다음 페이지들에서 표현하는게 좋을 수 있다.

  • 일부 경우에는 사람들이 자리를 찾을 수 있도록 자동으로 스크롤 해라.
    : 대부분 스크롤은 사용자가 시작하지만, 적절한 콘텐츠가 더 이상 보이지 않을 때 자동 스크롤이 도움이 될 수 있다.
    아래는 자동 스크롤이 도움이 되는 경우다.
    - 사용자가 검색 중인 텍스트를 찾을 때와 같이 앱이 현재 숨겨져 있는 영역에서 컨텐츠를 선택하거나 삽입 지정을 설정하는 작업을 수행할 때 새로운 선택을 화면에 표시하기 위해 스크롤
    - 현재 보이지 않는 위치에 정보를 입력하기 시작할 때 텍스트 입력을 시작하면 입력 지점으로 스크롤
    - 포인터가 선택을 만드는 동안 부의 가장자리를 지날 때. 포인터를 따라 움직여 포인터가 움직이는 방향으로 스크롤
    - 선택을 만들고 선택을 수행하기 전에 새로운 위치로 스크롤하는 경우. 작업을 수행하기 전에 선택이 보이도록 스크롤

자동 스크롤을 지원할 때 컨텍스트를 유지할 수 있을 정도만 스크롤되게 해야한다. 예를 들어 선택의 일부가 보이는 경우 스크롤할 필요 없다.

  • 확대 축소를 지원하는 경우 적절한 최대 및 축척 값을 설정해라.
    : 예를 들어 텍스트를 화면에 하나의 문자만 보일정도로 확대하는 것은 의미가 없을것이다.

이 가이드는 스크롤뷰와 관련하여 최적화 하는 방법을 알려주고 있다. 이러한 경험은 사용자 경험을 향상시키고 일관된 사용자 인터페이스를 제공하는데 도움이 된다.

Platform considerations

iOS, iPadOS

  • 일반적으로 하나의 화면당 하나의 스크롤 뷰를 표시해라.
    : 사용자들은 스크롤 할 때 종종 큰 스와이프 동작을 수행하는데, 동일한 화면에 여러 스크롤뷰가 있다면 의도하지 않은 스크롤 뷰의 상호작용이 발생하게 되기 때문이다. 만약 하나의 뷰에 두 개의 스크롤 뷰를 배치해야 하는 경우라면 서로 다른 방향으로 스크롤 하도록 고려하는것이 좋다.

  • page-by-page mode 에서 스크롤 뷰가 있는 경우 페이지 컨트롤을 표시하는 것을 고려해라.
    : 페이지 별로 보여주어야 하는 경우 페에지 컨트롤러와 페이지 컨트롤러 인디케이터를 사용하고 스크롤 뷰와 동일한 축에 인디케이터를 표시하라는 내용인것 같은데 맞겠지~

macOS

macOS에서는 스크롤 뷰를 일반적으로 '스크롤 바'라고 한다.

  • 레이아웃에서 스크롤바를 고려해라.
    : 사용자는 스크롤 바를 필요할 때만 표시 되도록, 항상 표시되도록, 크기 조절 등등 설정이 가능함을 인지하고 레이아웃을 설정하라는 의미인듯

  • 일시적인 스크롤 바가 표시될 때 창 콘텐츠를 이동하지 않는다.
    : 스크롤바를 숨기는 경우 사용하려고 할 때 나타나는데 이 점을 고려하지 않고 콘텐츠를 표시하면 나타날 때 마다 콘텐츠가 영향을 받아 이동될 수 있음을 말하는 것 같다. 그리고 이런 작동은 사용자를 혼란스럽게 한다.

  • 스크롤 바와 함께 컨트롤을 인라인으로 배치하지 않는다.
    : 이렇게 설정하면 사용자가 일시적으로 설정했을 때도 스크롤 바가 나타날 수 있다.

  • 필요한 경우, 패널에 작은 미니 스크롤 바를 사용해라.
    : 공간이 제한되었을 때 다른 창과 공존해야하는 패널에 작은 스크롤 바를 사용할 수 있다.

profile
🍎 무럭무럭

0개의 댓글