차트로 앱 경험 디자인

안녕하세요 Human Interface 팀의 디자이너인 Nicholas Felton입니다 차트를 이용해 좋은 앱 경험을 구성하는 법에 대해 말씀드릴게요 차트는 복잡한 정보를 전달하는 좋은 방법입니다 Apple에서는 전체적으로 차트를 활용해 제품을 향상시키죠

건강 앱은 우리 몸의 이해를 돕는 데 차트를 사용하고 피트니스 앱은 차트를 통해 계속 활동하도록 해줍니다 그리고 날씨 앱은 차트로 하루를 계획하도록 도와줍니다

개발자들도 차트를 좋아한다는 것을 잘 알고 있으며 Strava의 상세한 운동 분석부터 Duolingo의 재밌는 진행상황 차트까지 모든 범주에서 영감을 주는 예시를 보았습니다 차트는 모든 곳에서 찾을 수 있고 잘 디자인된 차트는 텍스트로는 전달하기 힘든 미묘한 데이터를 보여줄 수 있죠 차트는 유용할 뿐만 아니라 앱의 개성과 UI의 시각적 흥미로움을 더해줍니다

차트가 어떻게 앱을 개선시키는지 팬케이크를 파는 푸드 트럭 주인을 위한 앱을 함께 살펴보겠습니다 앱에는 현재 주문을 위한 탭과 최근 거래를 보여주는 탭이 있습니다 이는 판매량을 추적하는 데 좋지만 이 정보는 더 유용해질 수 있습니다 올해 우리는 Apple 기기를 위한 차트를 그 어느 때 보다 쉽게 만들도록 해주는 프레임워크인 Swift Charts를 소개합니다 이번 섹션에서는 Apple에서 차트를 이용한 경험을 디자인할 때 따르는 원칙을 공유하겠습니다 이 개념들을 더 정보 전달력이 좋은 푸드 트럭 앱의 와이어프레임으로 만들어보겠습니다 차트로 좋은 경험을 구축하기 위해 차트를 언제 사용할지 어떻게 사용할지 차트 디자인 시스템에서 서로 어떻게 연계시킬지 세 가지를 고려해야 합니다 먼저 앱에서 차트를 언제 사용할지 보겠습니다 다음은 차트가 정보를 더 잘 전달하는 몇 가지 일반적인 경우입니다 과거의 값이나 예측된 값을 보여줄 때 차트는 데이터의 변화를 생생하게 보여줍니다

전체의 일부를 시각화할 때 차트를 사용해 완료된 정도나 목표까지의 진척도 혹은 미진척 부분을 표현할 수 있습니다

항목이나 범주를 비교할 때 차트로 값들을 쉽게 평가할 수 있죠

이러한 접근이 여러분의 앱에 적절한지 결정하려면 먼저 경험에 무엇이 필요한지 고려해보세요 여러분의 앱의 핵심 목표 달성에 차트가 어떻게 도움이 될까요? 적절히 사용되면 차트는 집중도를 높입니다 앱 제작자로서 여러분들은 다양한 것들을 시각화할 수 있지만 가장 중요한 정보만 차트로 표현돼야 합니다 차트는 앱의 사용자에게 강력한 요소로 여러분이 이해시키고자 하는 정보에 집중시킵니다 푸드 트럭 앱의 목적은 앱으로 사업 운영을 개선하는 것입니다 거래 목록을 차트를 이용해 실행 가능한 정보로 만들 수 있다면 푸드 트럭 주인은 이 개선 사항을 반길 것입니다 푸드 트럭 주인에게 도움이 될 주요 정보는 다음과 같습니다 최근 판매량 인기있는 제품 그리고 최적의 때와 장소입니다

앱을 구상할 때 여러분이 제공하고자 하는 경험에 핵심적인 정보가 차트에 집중돼야 함을 명심하세요 이제 전달하고자 하는 바를 정했으니 차트로 어떻게 전달할지 살펴보죠

최근 판매량을 나타내기 위해서는 시간에 따라 변하는 차트가 적절합니다 한 가지 방법은 최근 30일 동안 일일 판매량을 막대 차트로 보여주는 것입니다 축 라벨을 추가하기 전에 차트가 무엇을 나타내는지 설명이 필요합니다

'최근 30일간 판매량'과 같은 제목은 차트 요소의 라벨이 되지만 그 이상을 전달하지 않습니다 보이는 정보를 어떻게 요약할 수 있을까요?

차트는 그 내용을 설명하는 텍스트와 동반돼야 하며 따로 읽어도 유익해야 합니다 팬케이크의 총 판매량을 추가하면 제목이 자동 설명으로 전환되죠 이제 세부 정보는 차트에서 확인할 수 있고 주요 정보는 텍스트로 빠르게 알 수 있습니다

차트가 직관적이지 않으면 '최근 30일간 팬케이크의 총 판매량은 1,234개 입니다'와 같이 제목을 완전한 문장으로 만들어 이해를 도울 수 있습니다

차트를 구성하는 다른 방법은 제목에서 '최근 30일간 팬케이크 판매량은 12% 증가한 1,234개입니다'와 같이 데이터를 해석하는 것입니다 이렇게 하면 최근 판매량이 많거나 적은지 혹은 증가하거나 감소하는지 알고 싶은 사람에게 도움이 됩니다 이런 방법으로 설명을 더욱 의미 있게 하며 특히 익숙하지 않은 데이터에 효과적입니다

이러한 방법들은 모두 차트를 설명하는 좋은 방법이지만 이와 같은 개요는 데이터를 설명하는 한 가지 방법일 뿐입니다 이 거래들의 이해를 돕기 위해 어떤 방법이 더 있을까요?

다른 관점에서의 세부 사항들을 포함하는 방법이 있습니다 데이터를 요약하는 것도 중요하지만 더 큰 범주에서 보거나 개별 기록을 강조하면 차트를 다각화할 수 있습니다 다음은 고려해 볼 수 있는 몇 가지 방법입니다 거시적인 관점에서 총합이나 평균으로 데이터를 설명할 수 있습니다 중간 규모의 관점에서는 데이터의 서브셋을 볼 수 있습니다 주중, 주말을 비교하거나 시간대에 따른 변화를 보는 것과 같이 주로 시간에 기반한 것입니다 아니면 팬케이크 스타일이나 판매한 도시에 따라 구분해 볼 수 있습니다

미시적인 관점에서 개별 데이터에 집중해볼 수 있죠 마지막 거래나 최대 판매량은 차트에서 보일 수 있는 중요한 소규모 세부 사항입니다

데이터 셋을 유심히 관찰할수록 더 자세한 정보가 나타납니다 이러한 관점들은 푸드 트럭 주인들의 재고 관리나 판매 장소 선정에 유용할 수 있습니다 이러한 세부 사항을 이용해 최근 판매량차트를 보강하면 더 유용할 것입니다 이를 위해 차트 아래에 탭할 수 있는 행들을 추가할 수 있습니다 각 행들에 요약 통계를 제공하고 행을 선택하면 이에 맞게 차트가 업데이트 됩니다 일 평균 판매량이나 주말과 주중의 차이 판매량이 제일 높은 날을 보여줄 수 있습니다 이런 오버레이는 매우 유용하지만 이만큼의 정보를 효과적으로 전달하기 위해서는 넓은 화면이 필요합니다

차트의 기능이 많아질수록 크기도 커지기 마련입니다 작은 차트는 정적인 경향이 있습니다 Watch 컴플리케이션이나 주식 앱의 반복되는 섬네일 차트 건강 앱의 추세가 좋은 예시입니다 정적 차트는 독립적으로 있는 경우가 드물고 보통 다른 보기에서 더 큰 차트에 대한 미리보기인 경우가 많죠 보통 정적 차트들은 작고 누르면 추가적인 세부 정보를 확인할 수 있을 것으로 기대되므로 격자 선이나 라벨, 상호작용이 필요 없습니다 주식이나 건강 앱의 차트와 같이 상호작용이 되는 차트는 큰 경향이 있으며 더 많은 세부 사항을 포함합니다 상호작용이 되는 차트는 보통 가로로 꽉 차 있지만 세로로는 아닙니다 축 선과 라벨을 추가해 값을 어림할 수 있도록 해야 하죠

이 정도 크기의 차트는 정확한 값을 보려면 상호작용이 있는 것이 좋습니다 또한 시간 범위를 변경할 수 있는 기능은 탐색에 유용합니다

차트가 크고 상호작용이 많으면 세로 공간이 많이 필요하지만 데이터를 면밀히 조사할 수 있습니다 차트가 더 강력해짐에 따라 추가 기능을 조금씩 점진적으로 늘려 가는 것이 중요합니다 차트의 복잡성을 단계적으로 공개해서 사용자가 그들의 관심과 일치하는 수준의 정보를 선택할 수 있도록 합니다

작은 정적 차트를 탐색 계층의 상부에 위치시켜서 차트의 확장된 버전을 보는 방법을 제안하세요

같은 차트의 두 버전 사이에 링크를 만들 때 두 차트 간에 값, 상태, 맥락을 보존하고 연속성을 유지하며 이어져야 합니다

누군가 차트에 관심을 가지면 그는 이미 본 것에 대해 더 보기를 원한다는 사실을 명심하세요 이는 차트가 모양을 유지해야 하며 이전 보기에 나타난 숫자들도 값을 유지해야 함을 의미합니다

정보를 추가할 수는 있지만 다른 것을 보여주는 것은 불만이나 혼란을 야기할 수도 있습니다

다양한 사이즈의 차트의 기능을 생각해보기 위해 푸드 트럭 앱으로 다시 가서 계획한 차트를 어디에 둘 지 결정해 보죠 현재는 주문하는 탭과 판매 이력을 보여주는 탭 두 탭이 있습니다 이 기록을 시각화 하기 위해 이 보기에 차트를 추가하는 것이 적당해 보입니다

탭의 내용을 지우고 판매 기록을 '전체 판매 보기'라는 탐색 요소의 안으로 옮깁니다 이제 차트를 그릴 수 있는 잘 보이는 공간이 생겼습니다 결과적으로 정적 차트를 이용해 사용자가 데이터를 직접 훑어보고 더 볼지 직접 결정하게 하는 것이 적절해 보입니다

이 차트는 최근 판매량을 보여주는 정적 차트입니다 이 차트를 탭 하면 상호작용이 되는 차트로 확장됩니다 이제 완전한 최근 판매량 경험이 생겼습니다 이 상호작용이 되는 차트는 30일 간, 1년 간 보기 등 상세한 분석과 탭할 수 있는 요약 통계를 지원합니다

여러분의 앱에서 작업할 때 차트는 내용을 안내하고 주요 전달 사항을 제공할 설명이 필요하며 데이터의 세부 사항들은 차트를 풍부하게 해주고 앱 안에서 차트 복잡도를 점진적 상향해야 함을 명심하세요

이제 차트 디자인 시스템을 보죠 여러분의 앱이 하나 이상의 차트를 포함한다면 이미 차트 디자인 시스템을 만든 것입니다 여러 개의 차트를 계획 중이라면 다음의 몇 가지를 명심해두세요

익숙한 양식을 사용하기 포괄적인 차트가 되도록 일반적인 스타일에서 시작하십시오 누군가 비슷한 차트를 이미 사용했다면 그들은 여러분의 차트를 이해할 가능성이 더 높습니다 막대 차트와 선 차트는 많은 사람들이 보다 일반적으로 접하고 사용하는 형태이지만 산포도는 덜 일반적이고 올바르게 해석하기 위해 추가 지침이 필요할 수 있습니다 독특한 것을 시도하려면 여기 활동 앱에 보이는 흐름과 같이 명확하게 소개돼야 합니다 먼저 활동 링이 먼저 소개되고 서로 분리돼 움직이기, 운동하기 일어서기 요소를 보여줍니다

새 양식은 앱의 부가적 내용보다 중심 내용을 담는 것이 이상적이죠 새로운 차트에 나타난 중요성은 사람들이 이해하고 탐구하도록 장려합니다

보조적인 차트를 만들면 중요성이 덜 전달되므로 익숙한 양식이 더 중요합니다

다음으로 차이가 중요합니다 차트 간의 변화는 무언가 변경되었음을 의미합니다 이를 똑같은 최근 판매량 차트 두 개로 보여드리겠습니다 다양한 정보를 전달하기 위해 우측 차트를 천천히 업데이트하고 이러한 차이점을 보이기 위해 디자인이 어떻게 바뀌는지 보죠 먼저 오른쪽 차트의 시간 범위를 바꾸겠습니다 최근 30일간 판매량 대신 12개월간 판매량을 보여줍니다 설명을 바꾸고 12개월 데이터를 보여주도록 차트를 업데이트합니다 이 수정은 아주 작은 변경만 필요합니다 오른쪽 차트에 나타난 데이터의 종류를 바꾸고자 한다면 설명을 바꾸는 것 만으로는 충분하지 않을 것입니다 텍스트의 변화는 쉽게 간과되므로 추가적인 변화가 필요합니다 두 차트에 각각 구별되는 색상을 사용하는 것이 좋은 방법입니다 이제 두 차트가 다르다는 점을 쉽게 알아차릴 수 있습니다 이러한 차이를 만들면 사용자가 설명을 읽을 확률이 조금 더 올라갑니다

마지막으로 오른쪽 차트를 업데이트하여 12개월 동안의 월별 일간 판매량의 범위를 표시하겠습니다 이 경우에는 설명과 데이터가 표현되는 방식 모두 바뀌어야 합니다

이 변경을 뚜렷이 강조하기 위해 막대의 스타일을 변경하는 것이 좋겠습니다 이제 오른쪽 차트는 다른 주제, 다른 시간 범위 다른 값을 전달합니다 두 디자인은 이러한 차이점이 확실히 보이도록 의도적으로 구별됩니다 이러한 원칙을 푸드 트럭 앱에 필요한 다른 두 차트에도 적용할 수 있습니다

최근 판매량을 보완하기 위해 가장 인기있는 팬케이크 스타일에 대한 차트를 하나 더 추가해보겠습니다 이를 위해 가장 많이 쓰이는 방법은 각 팬케이크별 상대적 판매량을 비교하는 것입니다 최근 30일 전체가 대상이므로 팬케이크 스타일 별 인기를 비교하기 위해서는 막대가 하나만 있으면 됩니다

이 막대를 분리하면 막대들의 크기를 더 명확히 비교 가능하지만 이렇게 하면 시계열 차트와 비슷해 보입니다

막대를 가로로 만들어 최근 판매량 차트와 구분점을 강조할 수 있습니다

가로 방향으로 하면 세로로 긴 상세 페이지를 만들지 않고 요약 차트에서도 충분히 막대를 길게 보여줄 수 있습니다 이 미리보기에선 최상위 스타일에 집중하기 위해 라벨을 생략했지만

상세 보기엔 각 막대에 라벨이 있고 상대적인 값도 볼 수 있죠

마지막 차트에서는 요일별로 트럭이 운영되는 두 도시의 매출을 보여주겠습니다 이를 위해 특수한 것을 해야 합니다 이 차트의 내용은 요일별 판매량입니다 이 경우 각 요일별 데이터를 봐야 합니다 이 차트는 최근 30일간 요일별 평균 판매량입니다 푸드트럭은 쿠퍼티노와 샌프란시스코에서 운영되므로 각 위치에 맞게 이 막대들을 분리해야 합니다 마지막으로 이 막대를 선으로 바꿔 일별 변화에 집중시킵니다 이 차트에 대한 설명과 데이터 요약을 포함해 판매 탭에 추가합니다 여기서 최근 30일간 최고 판매량은 일요일의 샌프란시스코의 값이죠 이어지는 상세 페이지는 앱에 추가할 마지막 차트입니다 두 선에 대한 키를 포함한 상세 정보와 추가적인 상호작용을 제공합니다

이제 팬케이크 푸드 트럭 앱에 추가할 차트들을 모두 그렸습니다 차트를 이용해 최근 판매량 인기있는 품목과 최고 매출 요일 및 장소를 표시하면 이 앱의 유용성이 극적으로 증가합니다

앱에서 작업할 때 익숙한 차트 양식으로 이해를 돕고 차트 간의 의도적인 차이를 만들어 더 쉽게 해석되도록 만들어야 함을 명심하세요 이번 발표에서는 차트를 사용할 때 어떻게 사용할지 차트 디자인 시스템에서 타 차트와 어떻게 연계시킬지 알아봤습니다 이러한 원칙을 적용하면 여러분의 앱에서 데이터를 더 명확하고 매력적으로 전달할 수 있습니다 차트 디자인에 대해 더 배우시려면 '효과적인 차트 디자인하기' 세션을 보시면 좋으며 Swift Charts에 대한 개요는 '안녕, Swift Charts' 세션에서 찾아볼 수 있습니다