[요약] [WWDC22] 차트를 통한 앱 경험 설계

본 글은 공부를 위한 비디오의 요약 및 리뷰이며, 가급적 링크를 눌러 비디오를 시청하는 것을 추천드립니다. 😃

Design app experiences with charts - WWDC22 - Videos - Apple Developer

 

1️⃣ Apple은 차트를 활용해 제품을 향상한다.

◼ 건강 앱은 우리 몸의 이해를 돕는 데, 피트니스 앱은 계속 활동하도록, 날씨 앱은 하루를 계획할 수 있도록 차트를 사용한다.
◼ 잘 디자인된 차트는 텍스트로는 전달하기 힘든 미묘한 데이터를 보여줄 수 있다.
◼ 차트는 유용할 뿐 아니라 앱의 개성과 UI의 시각적 흥미로움을 더해준다.

차트로 좋은 경험을 구축하기 위해서는 차트를 언제, 어떻게, 디자인 시스템에서 사용할지 세 가지를 고려해야 한다.

 

2️⃣ 언제 사용할지

◼ 차트가 정보를 더 잘 전달하는 일반적인 경우
Change: 과거의 값이나 예측된 값을 보여줄 때
Proportion: 목표까지의 진척도를 보여줄 때
comparison: 항목이나 범주를 비교할 때

◼ 핵심정보가 차트에 집중돼야 한다

 

3️⃣ 어떻게 사용할지

◼ 차트는 그 내용을 설명하는 텍스트와 동반돼야 하며 따로 읽어도 유익해야 한다.
(최근 30일간 팬케이크 판매량은 12% 증가한 1,234개입니다)
→ 설명을 더욱 의미 있게 하며 특히 익숙하지 않은 데이터에 효과적이다.

◼ 다른 관점에서의 세부 사항들을 포함하기.
→ 중간값, 시간대, 개별 데이터에 집중하는 등 같은 차트여도 더 거시적이거나 미시적인 정보에 집중할 수 있다.

◼ 차트의 기능이 많아질수록 크기도 커지기 마련이다.
작은 차트는 정적인 경향이 있다. Watch 컴플리케이션이나 주식 앱의 반복되는 섬네일 차트, 건강 앱의 추세가 좋은 예시다. 이러한 차트는 주로 미리보기로 사용되기 때문에 격자 선이나 라벨, 상호작용이 필요 없다.
큰 차트는 세부사항과 상호작용이 있어야 사용자가 어림짐작하기 쉽고, 시간 범위를 변경할 수 있는 기능은 탐색에 유용하다.
차트의 복잡성을 단계적으로 공개하자. 사용자가 그들의 관심과 일치하는 수준의 정보를 선택할 수 있도록 한다. 이때 두 차트 간에 값, 상태, 맥락을 보존하고 연속성을 유지하며 이어져야 한다.

 

4️⃣ 차트 디자인 시스템

◼ 익숙한 양식을 사용하기
포괄적인 차트가 되도록 일반적인 차트에서 시작하십시오. Bar Chart, Line Chart와 달리 Scatter plot은 덜 일반적이다.

◼ 차이는 중요하다
같은 형식의 차트를 사용하면, 텍스트의 변화는 쉽게 간과되므로 추가적인 변화가 필요하다. → 각각 구별되는 색상을 사용하는 것이 좋은 방법이다.

 

---

 

얼마 전 차트를 디자인할 일이 있었다. 바 차트를 중복적으로 사용하면서 다른 정보를 표시해야 했는데, 다른 색상으로 디자인하는 것의 중요성을 "텍스트의 변화는 쉽게 간과되므로"라고 말한 부분이 인상 깊었다. 사용자는 눈에 띄는 것만을 훑어보므로, 가벼운 텍스트는 사용자가 읽지 않을 것을 고려해서 대충 봐도 다른 차트임을 알 수 있도록 디자인해야 한다.  

또 요즘 운동에 미쳐있어서 피트니스 어플을 숨 쉬듯 들어가는데 (ㅎㅎ) 영상에서 예시를 iOS 건강, 피트니스, 워치 어플로 들어줘서 이해가 잘 갔다.