brunch

You can make anything
by writing

C.S.Lewis

by Lawn Jan 13. 2023

[HIG] Charting data

명확한 정보를 전달하는 차트

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


Introduction


차트에 데이터를 표시하면 명확하고 정보를 전달하는 데 도움이 될 수 있습니다.


사람들이 많은 텍스트를 읽고 해석할 필요 없이 차트를 제공하면 복잡한 정보를 효과적으로 전달할 수 있습니다. 인터페이스에 차트를 표현해 사용자에게 시각적인 흥미와 특징을 표현할 수 있습니다. 차트를 만드는 데 사용하는 구성 요소에 대해 알아보려면 Charts를 참고하세요.


차트는 한 눈에 볼 수 있는 정보를 단순한 그래픽으로 제공하는 것 부터 사람들이 다양한 관점에서 데이터를 탐색하도록 할 수 있습니다. 차트를 사용해 사용자들은 다음과 같이 데이터 기반 작업을 할 수 있습니다.


과거 또는 예측 값을 기반으로 추세 분석

시간에 따라 변하는 프로세스, 시스템 또는 수량의 현재 상태 시각화

여러 범주의 데이터를 비교하여 다른 항목 또는 다른 시간에 동일한 항목 평가


모든 데이터 세트를 차트에 표시할 필요는 없습니다. 데이터에 대한 정보를 전달하거나 데이터를 분석할 필요가 없는 경우 스크롤, 검색 및 정렬 목록이나 테이블과 같은 방식으로 데이터를 제공하는 것을 고려하세요.


Best Practice


데이터 세트에 대한 중요한 정보를 강조하고 싶을 때 차트를 사용하세요. 차트는 시각적으로 눈에 잘 띄기 때문에 사람들의 관심을 끌 수 있습니다. 사람들이 중요한 데이터에서 무엇을 알 수 있는지 명확하게 차트를 통해 전달하세요.


사람들이 추가적인 세부 정보를 원할 때 선택할 수 있도록 단순한 차트를 제공하세요. 가능한 한 많은 데이터를 차트에 담으려 하지 마세요. 데이터가 너무 많으면 시각적으로 좋지 않고, 사용하기 어려워 전달하려는 관계 및 정보가 전달되지 못할 수 있습니다. 데이터가 많거나 기능이 많은 경우 사람들에게 단계적으로 데이터를 보여줄 수 있는 방법을 제공하세요. 예를 들어 사람들의 관심사에 따라 다양한 세부 정보 또는 하위 데이이터를 보여줄 수 있습니다. 사람들이 대화형 차트(interactive chart)를 사용하는 방법을 쉽게 알 수 있게 이전보다 더 많은 기능이 포함된 여러 버전의 차트를 제공할 수 있습니다.


앱에서 모든 차트에 사람들이 액세스할 수 있어야 합니다. 차트는 그래픽 표현과 시각적 설명을 통해 데이터를 시각적으로 전달합니다. 그렇기 때문에 장애를 가진 사람들을 위해 접근성 기능을 모두 제공해야 합니다. 가이드는 Enhancing the accessibility of a chart을 참고하세요.


Designing effective charts


일반적으로 기본 차트 유형을 사용하는 것이 좋습니다. 사람들은 막대 차트 및 선 차트와 같은 일반적인 차트에 익숙합니다. 따라서 기본 차트 유형을 앱에 사용하면 사람들이 더 쉽게 이해할 수 있습니다. 가이드는 지침은 Charts를 참고하세요.


새로운 방식으로 데이터를 보여주는 차트의 경우 사람들이 차트를 쉽게 이해하고 알 수 있게 해야합니다. 예를 들어, Watch가 iPhone과 페어링되면서 보여주는 활동 링은 애니메이션을 통해 어떤 링이 해당 데이터를 표현하는지를 쉽게 알려줍니다.


여러 수준과 관점에서 데이터를 확인해 사용자의 사용 경험을 향상시킬 수 있는 방법을 찾으세요. 예를 들어 거시적인 관점에서 데이터를 보면 총계나 평균과 같이 사람들이 관심을 가질 만한 높은 수준의 정보를 요약하는 것에 도움을 줍니다. 중간 수준의 관점에서는 사람들이 데이터의 하위 집합을 식별하는 데 도움이 되는 방법을 찾을 수 있습니다. 또한 사용자의 개별 데이터를 통해 특정 값이나 항목의 데이터를 제공받는 사용자 경혐을 향상 시킬 수 있습니다. 사람들이 다양한 관점에서 차트를 보는 데 도움이 되는 정보를 표시하세요.

차트를 설명하는 텍스트를 추가해 사람들의 이해를 돕습니다. 설명, 텍스트 제목, 부제 및 주석은 차트에서 가장 중요한 정보를 강조할 수 있습니다. 또한 차트를 요약할 수 있는 간략한 텍스트를 표시하면, 필수적인 정보를 사람들은 한 눈에 파악할 수 있습니다. 예를 들어 날씨 앱에서는 24시간 동안 날씨 예보 목록 위에 "시간 별 일기 예보"와 같이 지금 사람들에게 필요한 정보를 요약한 텍스트를 표시합니다. 설명이 포함된 제목이나 요약틀 통해 사용자의 차트 접근성을 높일 수 있습니다.


역자설명 : 하단의 날씨 앱처럼 데이터를 요약한 텍스트를 포함합니다.

차트의 기능, 포커스 및 세부 수준에 맞게 차트의 크기를 맞추세요. 일반적으로 차트는 사람들이 세부 정보를 쉽게 볼 수 있을 만큼 커야하고, 제공하려는 기능을 사용할 수 있어야 합니다. 예를 들어 레이블 및 주석과 같은 차트의 세부 정보와 설명 텍스트를 사용자가 쉽게 읽을 수 있도록 하되, 사용자가 차트의 범위를 변경하거나 다른 방식으로 데이터를 조사할 수 있도록 충분한 공간을 제공해야 할 수도 있습니다. 한편, 작은 사이즈의 차트를 사용하여 개별 항목에 대한 정보를 한눈에 볼 수 있도록 제공하거나 사용자가 다른 보기에서 표시할 수 있는 더 큰 버전의 차트의 스냅샷 또는 미리 보기를 제공할 수 있습니다.


여러 차트에 걸쳐 일관성을 유지하고 차이점을 강조해야 할 경우에만 차이를 두세요. 앱의 여러 차트가 비슷한 데이터를 제공하는 경우 일반적으로 각 차트에 대해 다른 유형이나 스타일을 사용하지 않습니다. 또한 앱의 차트에 대해 일관적인 시각적 접근 방식을 사용하면 다른 차트를 볼 때 쉽게 이해할 수 있습니다. 차트 간의 차이를 강조해야 하는 경우에만 다른 차트 유형과 스타일을 사용하는 것을 고려해 보세요.


동일한 데이터를 제공하는 여러 차트 간에 연속성을 유지해야 합니다. 여러 차트를 사용하여 사람들이 서로 다른 관점에서 하나의 데이터 세트를 탐색할 수 있도록 지원하는 경우, 하나의 차트 유형과 일관된 색상, 주석, 레이아웃 및 설명 텍스트를 사용하여 데이터 세트가 동일하게 유지되어야 합니다. 예를 들어, 건강 추세(Health Trends) 앱의 화면에는 특정 시각적 스타일을 사용하여 계단 오르기 또는 휴식 심박수와 같은 최근 추세를 보여주는 작은 차트가 표시됩니다. 사람들이 차트를 선택하여 해당 데이터를 확장해서 볼 때 차트는 동일한 스타일, 색상, 마크 및 주석을 사용해야 합니다.


역자설명 : 하단의 이미지가 건강 추세(Health Trends)앱의 차트입니다.

Platform considerations


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


Resources


Related

Charts


Developer documentation

Swift Charts


Videos

Design app experiences with charts WWDC22

Design an effective chart WWDC22

Hello Swift Charts WWDC22


Changelog            

September 23, 2022 New page.
작가의 이전글 [HIG] Accessing private data
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari