brunch

You can make anything
by writing

C.S.Lewis

by Lawn Feb 15. 2023

[HIG] Charts

데이터를 그래픽으로 쉽게 전달하는 차트

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

Introduction

차트를 사용하면 데이터를 그래픽으로 쉽게 전달할 수 있습니다.

효과적인 차트는 데이터셋의 몇 가지 주요 정보를 강조 표시하여 인사이트를 얻고 의사결정을 내리는데 도움을 줍니다. 예를 들어, 차트를 사용하여 다음과 같은 작업을 수행할 수 있습니다.

기상 조건이 사람들의 계획에 어떤 영향을 미치는지 알아보기

주가 분석을 통해 과거 실적 파악 및 동향 파악

피트니스 데이터를 검토하여 진척 상황을 모니터링하고 새로운 목표를 설정

사용자 경험을 향상하기 위한 차트 설계에 대한 자세한 내용은 Charting data을 참고하세요. 개발자 가이드라인은 Creating a chart using Swift Charts를 참고하세요.

Anatomy

차트는 데이터 집합의 값을 보여주고, 이에 대한 정보를 전달하는 여러 그래픽 요소로 구성됩니다.

마크(mark)는 데이터 값을 시각적으로 표현한 것입니다. 하나 이상의 일련의 데이터 값을 제공하고 각 값을 마크(mark)에 할당하여 차트를 만듭니다. 사람들에게 보여줄 차트 스타일(예 : 막대 차트, 꺾은선형 차트 또는 산점도)을 선택하려면 막대, 선 또는 점과 같은 마크(mark)의 스타일을 선택해야 합니다(자세한 내용은 Marks 참고). 차트에 개별 데이터 값을 표시하는 작업을 플로팅(plotting)이라고 하며 마크가 포함된 영역을 플롯(plot) 영역이라고 합니다.

값을 나타내기 위한 마크(mark) 스타일은 숫자, 날짜 또는 카테고리와 같은 데이터 값을 위치, 색상 또는 높이와 같은 시각적인 속성을 사용합니다. 예를 들어 막대 마크(mark)는 높이를 사용하여 값의 크기를 나타내고 위치를 사용하여 값이 발생한 시간을 나타낼 수 있습니다.

사람들에게 차트의 시각적 특성을 쉽게 이해시키기 위한 사용자 맥락을 제공하기 위해 몇 가지 다른 형식의 설명문을 제공할 수 있습니다.

축을 사용하여 마크(mark)로 표시되는 데이터가 무엇인지 알려줄 수 있습니다. 다양한 차트는 플롯(plot) 영역의 가장자리에 한 쌍의 축(하나는 가로 및 하나는 세로)을 표시하며 각 축은 시간, 양 또는 카테고리와 같은 변수를 나타냅니다.

축(axis)에는 0, 50% 및 100%와 같이 축(axis)을 따라 중요한 값의 위치를 시각적으로 찾는 데 도움이 되는 눈금이 표시됩니다. 차트는 축(axis) 근처에 표시되지 않은 데이터 값을 사람들이 쉽게 알 수 있도록 플롯(plot) 영역을 가로지르는 눈금선을 표시합니다.

또한 중요한 정보를 강조하고, 사람들이 차트를 쉽게 이해할 수 있는 몇 가지 방법이 있습니다. 예를 들어 손쉬운 사용 기능을 사용하는 사람들을 위해 축(axis), 격자선(grid lines), 눈금(ticks) 또는 마크(mark)와 같은 요소의 이름을 정하는 레이블과 차트를 설명하는 접근성 레이블(accessibility label)을 제공할 수 있습니다. 차트의 사용자 맥락 및 세부 정보를 표시하기 위해 설명이 포함된 제목, 부제 및 주석을 만들 수 있습니다. 필요한 경우 카테고리를 나타내기 위해 색상이나 모양을 사용하는 것과 같이 마크(mark)의 위치와 관련되지 않은 차트 속성을 설명하는 카테고리를 만들 수도 있습니다.

명확하고 정확한 설명은 차트를 보다 이해하기 쉽게 만듭니다. 차트의 접근성을 개선하는 추가 방법에 대해 알아보려면 차트의 Enhancing the accessibility of a chart을 참고하세요.

Marks

데이터에 대해 전달하려는 정보를 기반으로 마크(mark)의 스타일을 선택하세요. 가장 익숙한 마크(mark) 유형은 막대(bar), 선(line) 및 점(point)입니다. 이러한 마크(mark) 유형 및 다른 마크(mark)에 대한 개발자 가이드라인은 Swift Charts를 참고하세요.

막대(bar)는 사람들이 다양한 카테고리의 값을 비교하거나 상대적 비율을 보는 데 도움이 되는 차트에서 사용하는 것이 좋습니다. 시간이 지남에 따라 변하는 데이터를 사용하는 차트의 경우 막대 차트를 사용하면 각 값들의 변화와 합계를 쉽게 알 수 있습니다.(예 : 하루에 걸은 총 걸음 수와 같은 합계)

선(line)은 시간 경과에 따라 변화하는 값을 잘 보여줍니다. 꺾은선형 차트에서 선은 하나의 데이터 계열에 있는 모든 데이터 값을 연결합니다. 선의 기울기는 데이터 값 사이의 변화의 크기를 나타내며 사람들이 전반적인 추세를 파악하는 데 도움을 줍니다.

포인트(point)는 개별 데이터 값을 시각적으로 구별되는 마크(mark)로 표시하는 데 도움이 됩니다. 포인트의 집합은 데이터의 두 가지 서로 다른 속성이 어떻게 관련되어 있는지 보여주며, 사용자가 개별 데이터 값을 검사하고 특이치(outliers) 및 군집(clusters)을 식별하는데 도움이 됩니다.

차트를 명확하게 보여주고 싶은 경우 마크(mark)의 여러 스타일을 함께 사용하는 것을 고려해 보세요. 예를 들어, 시간 경과에 따른 변경 사항을 보여주기 위해 선 차트를 사용하는 경우 선 위에 점 마크를 추가하여 개별 데이터를 강조할 수 있습니다. 점과 선을 함께 보여주면 사람들이 전체적인 추세 및 개별적인 데이터 값에 더욱 집중할 수 있습니다.

Axes

차트의 의미에 따라 고정 축 또는 동적 축을 사용합니다. 고정 범위에서는 축의 상한과 하한이 변하지 않는 반면 동적 범위에서는 상한과 하한이 현재 데이터에 따라 변경될 수 있습니다. 가지고 있는 데이터 값에 대해 최솟값과 최댓값을 통해 사람들에게 뜻을 전달해야 하는 경우 고정 범위를 사용하는 것이 좋습니다. 예를 들어, 배터리의 충전량을 보여주는 차트의 경우 최솟값이 0%(완전히 비어 있음), 최댓값이 100%(완전히 가득 찼음)으로 충전량을 나타냅니다.

반대로 사용 가능한 데이터 값이 크게 바뀔 수 있고, 그래프의 영역을 채우고 싶으면 동적 범위를 사용하는 것이 좋습니다. 예를 들어, 상태 앱의 차트에서 Y 축 범위의 상한은 특정 기간 동안 가장 많은 값이 최대 상한이 됩니다.

마크(mark)의 스타일 및 차트 사용량을 기준으로 하한 값을 결정하세요. 예를 들어 Y 축의 하한에 0을 사용하면 막대 차트가 잘 작동할 수 있습니다. 이렇게 하면 사람들이 막대의 상대적인 높이를 시각적으로 비교하여 값을 쉽게 추정할 수 있기 때문입니다. 하지만 하한을 0을 사용하는 것은 때때로 값들 사이에 중요한 차이를 더 알아보기 어렵게 만들 수수도 있습니다. 예를 들어, 하한에 항상 0을 사용하는 심박수 차트는 0에서 멀리 떨어진 범위에서 차이가 발생하기 때문에 휴식 중의 심박수와 활동 중인 심박수의 차이를 보기 어려울 수 있습니다.

사람들은 축의 눈금 및 격자선에서 익숙한 값을 보기 원합니다. 예를 들어, 0, 5, 10 등과 같은 숫자를 사용하는 경우 사람들은 각 눈금 값이 이전 값에 5를 더한 값인 것을 한눈에 알 수 있습니다. 반대로 1, 6, 11 등과 같은 수열은 사람들에게 익숙하지 않기 때문에 사람들은 규칙에 대해 고민해야 하는 수고가 발생합니다.

그리드 선과 레이블의 모양을 차트의 사용에 맞게 적절히 조정합니다. 너무 많은 격자선은 시각적으로 사람들의 주의를 분산시킬 수 있습니다. 너무 적은 격자선을 사용하면 사람들이 값을 추정하기 어렵게 만들 수 있습니다. 이러한 격자선의 적절한 사용과 시각적 가중치를 결정하는 데 도움이 되도록 인터페이스의 차트 콘텍스트, 지원하는 상호 작용 및 차트를 사용하는 것을 고려해 보세요. 예를 들어, 사람들이 차트의 개별 데이터의 정확한 포인트를 확인하기를 원하는 경우 데이터가 시각적으로 두드러지도록 더 적은 그리드 선과 밝은 레이블 색상을 사용할 수 있습니다.

Descriptive content

사람들이 차트를 보기 전에 차트를 이해하는 데 도움이 되는 설명문을 작성하세요. 차트의 목적과 기능을 설명하는 많은 정보와 제목 그리고 레이블을 제공하면 사람들이 세부 사항을 살펴보고 검토하기 전에 필요한 맥락을 제공할 수 있습니다. 이러한 방식으로 사용 경험을 제공하는 것은 VoiceOver 사용자와 특정한 장애가 있는 사용자에게 중요합니다. 사용자가 차트의 목적과 메시지를 이해하기 위해 설명문을 참고하기 때문입니다.

차트의 중요한 메시지를 요약 설명해 모두가 이해하기 쉽게 만드세요. 차트를 사용하는 주된 이유는 중요한 메시지와 뒷받침하는 데이터를 사용자에게 보여주는 것이지만, 사람들이 빠르게 중요한 정보를 알 수 있게 요약하는 것이 중요합니다. 예를 들어 날씨는 다음 시간의 예상 강수량을 간결하게 설명하는 제목과 부제를 제공하여 사람들이 차트의 세부 사항을 검토하지 않고도 중요한 정보를 쉽게 이해할 수 있도록 합니다.

Best practices

다양한 차트 요소의 상대적 중요성을 전달하는 일관된 시각적 계층 구조를 잘 만드는 것이 좋습니다. 잘 설정된 시각적 계층 구조를 통해 데이터를 읽는데 방해하지 않고, 중요한 데이터를 잘 보여줄 수 있는 좋은 사용자 경험을 제공할 수 있습니다.

콤팩트(compact)한 환경에서는 플롯(plot) 영역의 너비를 최대화하여 사람들이 편안하게 차트를 확인할 수 있는 충분한 공간을 제공하세요. 중요한 데이터가 주어진 너비에 잘 맞도록 세로축의 레이블은 명확하고 짧아야 합니다. 만약 중요한 정보를 가리지 않는다면, 차트의 다른 영역에 단위를 표시하고, 카테고리와 같은 더 긴 축 레이블을 그림 영역 안에 배치하는 것을 고려해 볼 수 있습니다.

사람들이 앱의 모든 차트에 쉽게 접근할 수 있어야 합니다. 인포그래픽과 마찬가지로 차트는 모든 사람들이 쉽고 편하게 그 내용을 이해할 수 있어야 합니다. 예를 들어 사람들이 화면을 보지 않고도 정보를 얻고 탐색할 수 있도록 화면 콘텐츠를 설명하는 VoiceOver를 지원하는 것은 필수입니다.(VoiceOver에 대한 자세한 내용은 Vision 참고하세요). 차트의 구성 요소를 설명하는 접근성 레이블(accessibility labels)을 제공하는 것 외에도 오디오 그래프를 사용하여 VoiceOver 사용자 경험을 향상할 수 있습니다. 오디오 그래프(Audio Graphs)는 차트의 데이터 값과 추세를 설명하는 일정한 톤으로 VoiceOver에 차트 정보를 제공합니다. 또한 추가적인 사용자 맥락을 제공하는 수준 높은 요약 텍스트를 제공할 수 있습니다. 가이드는 Enhancing the accessibility of a chart를 참고하세요.

사람들이 필요할 때 데이터와 상호 작용할 수 있도록 하고, 중요한 정보를 보여주기 위해 상호 작용할 필요는 없습니다. 예를 들어 사람들은 주식차트에서 시간 경과에 따른 변화에 관심이 많기 때문에 차트는 하루, 3개월 또는 5년과 같이 사람들이 원하는 기간 동안의 변화를 나타내는 선 그래프를 보여줍니다. 또한 사람들이 추가적인 세부 정보를 원하는 경우 선 그래프의 수직 표시기를 드래그하여 선택한 시간의 값을 표시할 수 있습니다.

누구나 쉽게 차트를 사용할 수 있도록 하세요. 차트의 마크(mark)가 너무 작으면 장애를 가진 사람들이 손이나 포인터로 차트를 사용하기 어려울 수 있습니다. 이 경우 선택 영역을 확장해서 전체 플롯(plot) 영역에 포함되도록 하여 사람들이 스크러빙을 통해 다양한 값을 볼 수 있도록 하세요.

키보드 명령(전체 키보드 액세스 포함) 또는 스위치 제어를 사용할 때 대화형 차트를 쉽게 탐색할 수 있게 하세요. 기본적으로 이러한 입력 방식은 데이터 파일의 값 시퀀스와 같이 선형 시퀀스로 개별 화면 요소를 방문하는 경향이 있습니다. 차트에서 커스텀 내비게이션(custom navigation)을 제공하려는 경우 다음과 같은 두 가지 방법을 사용할 수 있습니다.

접근성 API(accessibilityRespondsToUserInteraction(_:))를 사용해 차트 정보를 통해 논리적이고 예측 가능한 경로를 지정하는 것입니다. 예를 들어 사람들이 앞뒤로 이동하는 대신 X축을 따라 탐색하도록 할 수 있습니다.

사람들이 모든 개별 데이터 포인트를 탐색하는 대신 값의 하위 집합 간에 초점을 이동할 수 있도록 하는 것입니다. 이 방법은 매우 큰 데이터 세트를 제공해야 하는 경우 사용하면 좋습니다.

이러한 커스텀 내비게이션(custom navigation)은 VoiceOver 사용 경험을 향상할 수 있습니다. 가이드라인은 Accessibility > Navigation을 참고하세요.

사람들이 차트의 중요한 변경 사항을 알 수 있도록 하는 것이 좋습니다. 예를 들어 마크(mark)나 축(axis)이 변경될 때 사람들이 변경사항을 알지 못하면 차트를 잘못 이해할 수도 있습니다. 변경 사항을 사람들에게 애니메이션을 통해 알려주면 일반적은 사람들은 쉽게 알 수 있지만 VoiceOver 사용자와 애니메이션을 사용하지 않는 사람들도 변경 사항을 알 수 있도록 여러 방법으로 변경 사항을 알려줘야 합니다. 개발자 가이드라인은 UIAccessibility.Notification (UIKit) 또는 NSAccessibility.Notification (AppKit)를 참고하세요.

차트를 주변 인터페이스 요소와 정렬시키는 것이 좋습니다. 예를 들어 차트를 다른 요소와 함께 왼쪽 정렬 시키는 것이 좋습니다. 차트에서 깔끔한 인터페이스를 제공하는 또 다른 방법은 각 세로 격자선의 레이블을 뒤쪽에 표시하는 것입니다. 눈금 레이블이 차트의 앞쪽 가장자리를 지나서 보이지 않도록 Y축을 차트의 뒤쪽으로 이동하는 것도 고려해 볼 수 있습니다. 또한 동떨어져 보이는 레이블이 있는 경우 눈금을 사용하는 것이 좋습니다.

Color

차트에서 적절한 색상을 사용하면 정보를 명확하게 보여주고, 브랜드를 연상시키며 시각적 연속성을 제공하는 데 도움이 될 수 있습니다. 모든 사람이 쉽게 이해할 수 있는 색을 사용하는 방법은 Inclusive color를 참고하세요.

서로 다른 데이터를 구분하거나 중요한 정보를 보여주기 위한 방법으로 색상만 사용하지 마세요. 차트에서 색상을 적절하게 사용하면 데이터의 차이와 주요 세부 정보를 사용자에게 더욱 잘 보여줄 수 있지만, 장애를 가진 사람들에겐 불편함을 줄 수 있기에 색상 말고 다른 방법을 제공해야 합니다. 예를 들어 하단의 예시처럼 패턴이나 모양을 통해 정보를 전달하는 것이 좋습니다.

인접한 색상 사이에 시각적 구분선을 추가해 이해를 돕습니다. 예를 들어 행 또는 열에 하단의 예시처럼 누적 막대형 차트에서 각 마크(mark)에 다른 색상을 사용해 구분합니다. 이때 마크(mark) 사이에 구분선을 추가하면 사람들 차트를 이해하는데 도움을 줄 수 있습니다.

Enhancing the accessibility of a chart

Swift 차트를 사용하여 차트를 만들면 해당 값을 설명하는 각 마크(또는 마크 그룹)에 대한 기본 접근성 요소 외에도 오디오 그래프(Audio Graphs)의 기본 구현을 얻게 됩니다.

오디오 그래프를 사용하여 VoiceOver 사용자에게 차트에 대한 자세한 정보를 제공하는 것을 고려해 보세요. 사람들이 차트의 목적과 주요 기능을 이해하는 데 도움이 되도록 VoiceOver가 말하는 차트 제목과 설명을 요약해 Swift 차트가 제공하는 기본 오디오 그래프를 커스텀할 수 있습니다. 오디오 그래프를 사용하지 않는 경우 차트의 구조와 용도에 대한 개요를 제공해야 합니다. 예를 들어 차트의 유형(예: 막대 또는 선)을 사용자들이 이해하고 각 축이 무엇을 나타내는지 알려주기 위해 위쪽 및 아래쪽 축 경계와 같은 세부 정보를 설명해야 합니다.

IMPORTANT : 이미지를 설명하는 하나의 접근성 레이블만 있으면 되는 이미지와 달리 차트는 중요하거나 사용자와 상호작용하는 요소에 대한 접근성 레이블이 필요합니다. 차트의 목적과 마크의 범위 및 밀도에 따라 해당 마크에 접근성 레이블을 제공하는 것이 필요한지 또는 그룹을 이루는 마크를 설명하는 것이 사용자의 경험을 향상할 수 있는지 고려해봐야 합니다. 경우에 따라 단일 접근성 레이블을 사용하는 것이 좋을 수 있습니다.

차트의 목적에 맞는 접근성 레이블(accessibility labels)을 작성합니다. 예를 들어, 지도는 경로에서 고도를 나타내는 개별 막대를 사용해서 자전거 경로상의 고도 변화를 보여줍니다. 차트의 목적은 사람들에게 경로상 고도를 알려주는 것이 아닌 전체 경로에서의 고도의 변화를 보여주는 것입니다. 그렇기 때문에 지도는 막대 그룹의 고도 변화를 설명하는 접근성 레이블을 제공하며 막대별로 접근성 레이블(accessibility labels)을 제공하지 않습니다. 반대로 건강 앱은 사용기간에 대한 실제 걸음 수를 사람들에게 알려주는 것이기 때문에 차트의 각 막대에 대해 접근성 레이블(accessibility labels)을 제공합니다.

다음 고려사항을 통해 차트에 대한 접근성 레이블(accessibility labels)을 작성하는 데 도움이 될 수 있습니다.

명확성(clarity)과 포괄성(comprehensiveness)을 우선시하세요. 일반적으로 데이터에 대한 날짜, 위치 등 사람들이 데이터를 이해하는 데 도움이 되는 맥락을 함께 제공하지 않는 한 단순한 데이터만 보여주는 것은 좋지 않습니다. 오디오 그래프 또는 축의 이름과 같이 사람들이 데이터를 쉽게 이해할 수 있는 맥락을 함께 제공하세요.

주관적인 용어 사용을 지양하세요. 빠르게(rapidly), 점진적(gradually)으로, 거의(almost)와 같은 주관적인 단어는 데이터에 대한 주관적인 해석이 담길 수 있습니다.

모호한 형식과 약어를 피함으로써 데이터를 더욱 명확히 설명세요. 예를 들어 "6월 6일"을 사용하는 것이 "6/6"을 사용하는 것보다 더 명확하고 좋습니다. 마찬가지로 "60분" 또는 "60미터"라고 철자를 쓰는 것이 "60m"이라는 약어를 사용하는 것보다 더 명확합니다.

차트의 형태가 아닌 차트가 보여주고자 하는 것이 무엇인지 설명하세요. 서로 다른 두 데이터를 시각적으로 구분할 수 있도록 빨간색과 파란색을 사용하는 차트에서 각 데이터가 무엇을 나타내는지 쉽게 이해할 수 있는 접근성 레이블을 만드는 것은 중요하지만, 데이터를 나타내는 색상까지 설명하면 불필요한 정보가 추가되고 산만해질 수 있습니다.

특정 축을 설명할 때 앱 전체에서 일관적이게 설명하세요. 예를 들어 항상 X축을 먼저 언급하면 사람들이 차트의 설명에서 어떤 설명이 X축에 관련된 정보인지 쉽게 알 수 있습니다.

보조 기술(assistive technologies)에서 축 및 눈금의 텍스트 레이블을 숨기는 것이 좋습니다. 축 및 눈금 레이블을 통해 사람들은 차트의 추세를 시각적으로 이해하고, 마크 값을 빠르게 알 수 있습니다. 하지만 VoiceOver 사용자는 접근성 레이블 및 오디오 그래프를 통해 표시 값 및 추세 정보를 얻을 수 있으므로 일반적으로 표시되는 레이블이 필요하지 않습니다.

Platform considerations

No additional considerations for iOS, iPadOS, macOS, or tvOS

watchOS

일반적으로 watchOS 앱에서 복잡한 차트 상호 작용을 요구하지 마세요. 가능한 한 사람들에게 유용한 정보를 한눈에 보여주고 간단한 상호작용이 가능하게 하는 것이 좋습니다. 다른 플랫폼에서도 앱을 제공하는 경우 자세한 정보와 더 많은 차트의 사용자 상호작용은 해당 앱에서 하는 것이 좋습니다. 예를 들어, watchOS의 심박수는 단순히 당일의 사용자 심박수 데이터를 보여주는 반면, iPhone의 건강 앱은 여러 기간 동안의 심박수 데이터를 보여주고, 사람들은 추가적으로 개별 마크를 확인할 수 있습니다.