brunch

You can make anything
by writing

C.S.Lewis

by Lawn Black Apr 10. 2024

[HIG] Gauges

범위의 값을 표시하는 게이지

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

Introduction

게이지(gauge)에는 범위의 값 내의 특정 수치가 표시됩니다.

게이지에는 범위의 현재 값을 표시하는 것 외에도 범위 자체에 대한 더 많은 콘텍스트를 제공할 수 있습니다. 예를 들어 온도 게이지에서는 텍스트를 사용하여 범위의 최고 온도와 최저 온도를 식별하고 변화하는 값을 시각적으로 강조하는 색상 스펙트럼을 표시할 수 있습니다.

Anatomy

게이지에서는 원형(circular) 또는 선형(linear) 경로(path)를 사용하여 값의 범위를 나타내며, 현재 값을 경로상의 특정 지점에 표시(mapping)합니다. 표준 게이지(standard gauge)에는 현재 값을 표시하는 표시기(indicator)가 표시되고, 용량 게이지(capacity gauge)는 용량의 값을 표시하는 채우기가 표시됩니다.

표준 및 용량 스타일의 원형 및 선형 게이지도 watchOS 컴플리케이션과 유사한 방식으로 정보를 보여줄 수 있습니다. 액세서리라고 하는 이 스타일은 iOS 잠금 화면 위젯과 컴플리케이션의 스타일과 유사한 모든 환경에서 잘 동작합니다.

역자설명 : 아래 예시는 watchOS의 컴플리케이션에 적용된 원형 게이지의 예시입니다.

출처 : Apple Developer

NOTE : macOS는 게이지 외에도 게이지와 유사한 시각적 스타일을 가진 레벨 표시기를 지원합니다. 자세한 내용은 macOS를 참조하세요.

Best practices

현재 값과 양쪽 끝에 위치한 값을 설명하는 간결한 레이블을 함께 보여주세요. 게이지 모든 스타일이 레이블을 표시하지는 않지만 VoiceOver는 보이는 레이블을 읽어주므로 화면을 보지 않고도 시각 장애를 가진 사용자들이 게이지를 이해하는 데 도움을 줄 수 있습니다.

게이지의 목적을 전달하는 데 도움이 되도록 경로(path)를 그러데이션으로 채우는 것을 고려해 보세요. 예를 들어 온도 게이지에는 빨간색에서 파란색까지 다양한 색상을 사용하여 뜨거운 온도에서 차가운 온도를 보여줄 수 있습니다.

Platform considerations

No additional considerations for iOS, iPadOS, visionOS, or watchOS. Not supported in tvOS.

macOS

macOS에서는 범위 내에서 특정 수치를 표시하는 레벨 표시기(level indicator)가 있습니다. 용량, 등급 또는 관련성을 전달하도록 레벨 표시기를 구성할 수 있습니다.

용량 스타일은 불연속형 또는 연속형 값을 나타낼 수 있습니다.

Continuous(연속)

연속형(continuous). 현재 값을 나타내는 실선 막대로 채워지는 가로 반투명 트랙입니다.

Discrete(불연속)

불연속형(discrete). 동일한 크기의 직사각형 세그먼트로 구성된 개별 세그먼트의 가로 행입니다. 세그먼트의 수는 전체 용량과 일치하며, 세그먼트는 현재 값을 나타내는 색상으로 부분적으로 채워지지 않고 완전히 채워집니다.

범위가 큰 게이지의 경우 연속형 스타일을 사용하는 것이 좋습니다. 값 범위가 크면 불연속형 용량 표시기의 세그먼트가 너무 작아져서 시각적으로 좋지 않을 수 있습니다.

범위의 중요한 부분을 사람들에게 시각적으로 보여주기 위해 색상을 변경하는 것이 좋습니다. 기본적인 용량 표시기 스타일의 색상은 모두 녹색입니다. 앱에 필요한 경우 현재 값의 수준에 따라(매우 낮음, 매우 높음 또는 평균) 색상을 다르게 보여줄 수 있습니다. 전체 표시기의 색상을 변경하거나 아래 그림과 같이 계층화된 스타일을 사용하여 하나의 표시기에 여러 색상의 시퀀스를 표시할 수 있습니다.

평가 스타일(rating indicator)을 사용하여 사람들이 순위를 매기는 데 도움이 되는 가이드라인은 평가 표시기(Rating indicators)를 참고하세요.

거의 사용되지는 않지만 관련성 스타일(relevance style)은 음영 처리된 가로 막대를 사용하여 관련성을 전달할 수 있습니다. 예를 들어 검색 결과 목록에 관련성 표시기를 표시하여 사람들이 여러 항목을 정렬하거나 비교할 때 결과가 관련된 정보를 시각화할 수 있도록 도울 수 있습니다.