효과적인 차트 디자인

♪ ♪

안녕하세요, Halden입니다 저는 Lilian입니다 오늘은 효과적인 차트를 디자인하는 법을 다룰게요 차트는 앱을 매력적이고 유익하게 하는 좋은 방법입니다 일기예보 차트를 일정을 짜는 데 사용하거나 주식 가격으로 재정적 결정을 하거나 피트니스 데이터로 활동을 보고 새 목표를 정할 수 있습니다 앱에서 차트를 디자인 하기 전에 앱의 경험을 먼저 설계해야 합니다 앱의 필요에 따라 차트를 언제 사용할지 어떻게 사용할지, 어떤 디자인 체계로 통합할지 결정할 수 있죠

이 설계 과정의 첫 단계는 올해의 발표 중 하나인 '차트를 이용해 앱 경험 설계하기'에서 다룹니다 이번 발표에서는 이 설계 과정의 다음 단계인 차트를 디자인하는 법을 다룹니다 정확히는 여러분들이 전달하고자 하는 바가 집중돼있고 이해하기 쉬우며 장애가 있는 사람들도 접근 가능한 차트를 디자인하는 법입니다 이를 위해 샌프란시스코와 쿠퍼티노에서 다양한 팬케이크를 파는 푸드트럭에 대한 앱에 들어갈 차트를 디자인해보겠습니다 완성된 앱에는 팬케이크 판매를 계획하고 관리를 돕는 전체 차트 시스템이 들어있습니다 이번에는 이 차트들 중 지난 30일 간 팬케이크 판매량 차트를 디자인하는 법을 보겠습니다 좋은 차트 디자인은 차트의 목표를 정하는 데에서 시작합니다 이 앱의 이 페이지에서 보여주고자 하는 바는 '지난 30일간 팬케이크 판매량이 어땠는가'입니다 이런 목표는 다양하게 표현할 수 있습니다 푸드 트럭 주인들에게 최근 판매량의 패턴을 보여주어 판매량에 어떤 변동이 어느 정도 범위로 있는지 이해하는 데 도움이 될 수 있습니다 값을 식별하면 특정한 날을 확인하는 데 유용합니다 최대 판매량, 이상치가 있는 날 주간 혹은 요일에 따른 비교나 위치에 따른 비교 등에 대한 이해를 도울 수도 있습니다 다른 것들에 대해서도 마찬가지입니다 이 중에서 푸드 트럭 주인에게 어떤 정보가 가장 중요할까요? 효과적인 차트는 몇 가지 중요한 정보에 집중합니다 의도를 갖고 차트를 디자인하세요 푸드 트럭 주인들이 가장 원하는 것은 요일이나 시간에 따라 팬케이크 판매 실적이 어땠는지 알아내는 것입니다 따라서 패턴이나 범위 값을 전달하는 데 중점을 둬야합니다 이 세 가지 주안점을 차트에 어떻게 나타낼 수 있을까요? 이 디자인 과정을 차근차근 살펴봅시다 이 디자인 과정은 다섯 가지 요소를 포함합니다 표시는 차트의 막대와 같이 시각적 구성 요소입니다 축은 이런 표시들에 프레임을 제공합니다 설명은 이해와 해석을 쉽게 할 수 있게 돕습니다 상호작용은 데이터를 더 잘 살펴볼 수 있게 하고 접근성에 중요한 요소입니다 색은 개성을 더해주고 두번째 차트에서 보셨듯이 의미를 더 뚜렷하게 합니다 먼저 차트의 시각적 구성 요소인 표시로 어떤 형태의 차트를 원하는지 알아내야 합니다 막대 차트에서의 '표시'는 막대이고 선 차트에서는 선이며 산포도에서는 점입니다 이들은 데이터의 각 항목을 표시하는 요소입니다 표시는 다양한 종류가 있는데 어떠한 하나의 표시라도 다양한 방법으로 데이터를 표현할 수 있습니다 막대를 예로 들면 데이터의 시간에 따른 변화를 나타내려 옆으로 나열할 수도 있고 전체에서 각 범주당 비율을 보여주기 위해 막대를 쌓아서 보여줄 수도 있습니다 혹은 다른 범주끼리 묶어서 값을 비교할 수도 있습니다 이는 표시로 데이터를 보여주는 많은 방법 중 몇 가지일 뿐이죠 그렇다면 우리는 어떤 차트를 쓰는 게 좋을까요? 표시는 데이터와 목표에 맞게 정해야 합니다 차트는 앞서 정한 바와 같이 패턴, 범위 및 개별 가치와 같이 30일 동안의 팬케이크 판매량에 대한 이런 세 가지 측면을 잘 나타내야 합니다 표시를 정하기 위해 패턴에 주의를 기울여봅시다 푸드 트럭 주인들은 판매량의 궤적이나 변동을 보는 것이 유용할 것입니다 가로 축에는 시간을 나타내고 세로 축에는 팬케이크 판매량을 나타냅니다 이 축은 아직 불완전한데 나중에 완성하겠습니다 일별 팬케이크 판매량을 점으로 표시하는 방법도 있습니다 이 차트처럼 깔끔하게 정리된 데이터를 떠올린다면 점으로 표시하는 게 좋아보이죠 하지만 실제 데이터는 이렇게 좋은 경우가 드뭅니다 실제 데이터를 점을 이용해 표시하면 어떠한 패턴도 찾기 힘들어집니다 초기에 차트 디자인을 실제 데이터로 테스트하는 게 중요하죠 점 표시는 이상치나 데이터가 모여있는 경우를 잘 보여주는 표시이지만 우리의 목적에는 부합하지 않습니다 판매량 패턴을 더 잘 보기 위해서 선 표시를 이용해 판매량을 연결할 수 있습니다 선은 변동되는 비율을 보여주는 데 좋습니다 여기서는 패턴과 궤적이 명확히 보입니다 그런데 만약 한 달 동안 푸드 트럭을 하루씩 번갈아 5일 간 닫아야 하면 어떻게 될까요? 이런 경우에는 떨어져 있는 값들을 연결하는 부분이 다른 값들보다 도드라져서 판매량 패턴이 덜 명확하게 보입니다 다양한 경우의 데이터에 대비해 차트를 디자인하는 걸 기억하세요 막대 표시는 조금 더 유연하게 사용할 수 있습니다 이렇게 0임을 알 수 있지만 시선이 분산되지 않습니다 또한 흰색이 많을 수록 더 많이 팔렸다고 이해하기에도 더 직관적입니다 판매량은 누적되므로 흰색 부분을 다 합쳐서 지난 30일간의 총 판매량을 쉽게 가늠할 수 있습니다

멋지네요! 지금까지 팬케이크 판매량이 명확하게 보이는 표시를 선택했죠 이제 또 다른 중요한 점은 모든 시각적 정보들을 비시각적인 방식으로 표현해 접근 가능한 디자인으로 만드는 것 입니다 다시 말해 이 표시들과 나타내는 정보들이 VoiceOver 등으로 접근 가능해야 합니다 VoiceOver는 화면을 읽어주어서 시각장애인을 포함한 사람들이 점자나 음성을 통해 시각을 이용하지 않고도 정보를 읽을 수 있게 해줍니다

팬케이크 1,234개 VoiceOver를 이용해 차트의 요소들 같은 콘텐츠를 이동할 수 있습니다 5월 8일, 팬케이크 54개 5월 9일, 팬케이크 36개 버튼 2개중 2번째, 1년 이를 상호작용하는 데 사용할 수도 있습니다 1년, 2개중 2번째 선택됨 Audio Graph라는 기능을 통해 Audio Graph 차트를 음향으로 재생합니다 Audio Graph 재생

완료됨 여러분의 차트 표시를 비시각적으로 접근 가능케 하려면 1. VoiceOver가 값을 탐색하는 방법을 디자인하고 2. Audio Graph를 사용해야 합니다 편리하게도 Swift Charts API로 구현된 차트는 표시에 대한 커스텀 가능한 접근성 라벨 및 Audio Graph 구현을 자동적으로 포함합니다 Audio Graphs와 Swift Charts API에 대해 더 알아보려면 개발자 문서와 작년의 발표인 '앱의 차트를 접근 가능하게 하기'와 올해의 발표인 '안녕 Swift Charts'를 확인하세요 좋아요! 이제 목표와 데이터에 맞게 표시를 디자인하고 VoiceOver로 접근 가능하게 만들었습니다 이렇게 한가지 질문인 '지난 30일 간 팬케이크 판매량이 어땠는가?'와 특히 그 패턴에 대해 알아보았습니다 이제 푸드 트럭 주인들은 판매량의 최근 변동을 볼 수 있습니다 그렇다면 이 변동의 범위와 특정한 날의 값은 어떻게 볼까요? 이를 위해 축을 디자인해야 합니다 축 프레임은 값을 참조할 수 있는 표시를 제공합니다 예를 들어 팬케이크 판매량 차트에서 가로 축을 시작일부터 종료일까지로 설정하면 5월 8일부터 6월 6일까지 총 30일을 표시하게 되죠 세로 축은 어떨까요? 이 값들은 전적으로 푸드 트럭의 판매량에 달려있습니다 이러한 축은 범위를 잘 설정하는 것이 중요합니다 범위는 고정돼 있을 수도 동적일 수도 있습니다 고정된 범위의 예시는 설정 앱의 배터리 차트의 수직 축입니다 배터리 잔량은 항상 0에서 100% 사이임을 알고 있습니다 수직 축의 범위를 고정해 놓으면 배터리가 완충되었는지 방전되었는지 아니면 그 사이인지 쉽게 알 수 있습니다 이 경우에는 수직 축의 범위가 바뀌면 혼란스러울 수 있지만 다른 경우에는 필요할 수 있습니다 건강 앱의 걸음 수 차트가 동적 범위를 사용하는 예시입니다 정해진 최대 걸음 수가 없으므로 세로 축이 동적으로 바뀌며 데이터에 맞게 변해야 합니다 이렇게 하면 걸음 수가 적을 때도 세로 공간을 전부 활용해서 변동을 더 쉽게 보여줍니다 팬케이크 판매량 차트로 돌아가봅시다 걸음 수처럼 푸드 트럭의 팬케이크 판매량에는 제한이 없죠 그러니 동적 범위를 사용해 데이터에 대한 차트의 세로축이 상한값에 맞춰 자동적으로 변하게 합시다 보시면 하한값은 그대로 0에 고정돼 있습니다 이 방법은 막대 길이의 의미가 유지되게 하는 좋은 방법입니다 이렇게 하면 두 배 많이 팔리면 막대의 길이도 두 배가 됩니다 상한값과 하한값의 라벨이 도움이 되지만 차트의 중간을 해석하기 위해서는 더 많은 구조가 필요합니다 이는 다음 개념으로 이어집니다 축 격자 선과 라벨을 잘 만들어야 합니다 격자 선은 표시된 값들을 어림하는 데 참조 기준이 됩니다 격자 선이 많을 수록 값을 어림하기 쉬워집니다 건강 앱의 추세와 같은 차트들처럼 격자 선과 라벨이 필요 없을 수 있습니다 이러한 차트들은 더 큰 차트들을 엿보는 용도의 차트이므로 데이터의 패턴만 잘 확인할 수 있으면 됩니다 격자 선과 라벨을 추가하면 산만해질 수 있습니다 격자 선과 라벨은 값들을 더 정확하게 분석하고자 하는 세부 차트에 나타납니다 앞서 푸드 트럭 주인들이 판매량의 범위와 값들을 확인하고 싶을 것이라고 말했습니다 지금은 두 개의 가로 격자 선이 있는데 하나는 0에 있고 하나는 월간 판매량의 대략적 최대값에 있는데 격자 선의 수가 차트의 중간에서 범위를 어림하기에 너무 적습니다 반면 너무 많은 격자 선과 라벨을 추가하면 산만해집니다 이런 일곱 개의 수평 격자선은 조금 많아보입니다 적절한 밀도가 되도록 이 요소의 균형을 맞춰야 합니다 이 차트의 내용과 사용 의도를 고려하면 가로 격자 선이 네 개이고 축이 변경될 때마다 범위를 바꾸는 것이 더 효과적입니다 첨언하자면 격자 선과 라벨을 추가할 때 차트를 이해하기 쉽도록 직관적인 값을 사용하는 게 좋은데 이 경우에는 20의 배수입니다 마찬가지로 7일 간격으로 시간을 표시하는 것이 직관적이며 이 경우 30일의 기간동안 5개의 격자선이 그려집니다 이렇게 격자 선과 라벨의 밀도를 고려해 배치하고 범위를 고려해 축을 설정했습니다 지금까지 효과적인 차트를 위해 많은 것을 다뤘는데요 차트는 복잡한 시각 요소로써 이 예제가 이해하기 쉬워지려면 추가적인 작업이 필요합니다 어떻게 하면 빠르고 직관적으로 표시와 축이 의미하는 바를 잘 전달할 수 있을까요? 이를 위해 다음 주제인 설명으로 넘어가죠 설명은 차트의 의도를 구성하고 이해하기 쉬우며 접근 가능하게 하는 데 중요합니다 설명이나 차트 앞에 텍스트를 사용해서 차트를 이해하기 쉽도록 맥락 정보를 제공하면 이 차트가 최근 30일 간 팬케이크 판매량에 대한 것임이 명확해지죠 설명은 간략해도 되며 차트의 가깝도록 UI에 포함되어야 합니다 이 차트를 앱의 UI에서 보면 화면의 제목인 '총 판매량'이 어느 정도 맥락정보를 제공하며 제어하는 부분에 쓰여있는 '30일'이라는 라벨로 시간 범위를 빠르게 설정합니다 이를 시작으로 세로축의 의미도 명확하게 해야 합니다 판매량을 매출로 보고 있는 걸까요? 아니면 팬케이크 수 일까요? 축 라벨을 추가해 이 문제를 해결할 수 있습니다 수직 축 위에 '판매된 팬케이크 수'라 써놓을 수 있지만 하지만 구석이고 너무 작습니다 이 차트의 의미를 분명하게 전달할 수 있는 다른 방법은 제목을 지어 맥락을 제공하는 것입니다 '판매된 팬케이크 수'라고 차트의 위에 써서 차트의 의미를 잘 보이게 합니다 이러한 맥락을 제공하는 것은 차트의 틀을 구성하는 데 중요해요 차트의 주요 내용을 요약해 설명을 더 잘 구성할 수도 있습니다 많은 차트에서 이 방법을 사용하죠 예를 들어 날씨 앱의 강우 위에 써 있는 텍스트는 주요 내용을 설명합니다 여기에서는 '약한 비가 예상됨' '약한 비가 9분 이내 시작돼 36분 지속될 것으로 예상됨'이죠

내용을 표현하는 방법은 문장부터 과거 데이터와 비교하는 기호까지 다양한 방법이 있습니다 우리 차트에 간단한 방법을 써보죠 제목을 '총 판매량: 1,234 팬케이크'로 바꿔 차트의 주요 내용이 표시되도록 다시 써줍니다 이 설명은 차트에 구체적인 값을 제공하고 중요 정보를 요약합니다 설명은 데이터의 맥락을 제공하고 주요 내용을 요약해서 독자가 차트를 쉽게 이해할 수 있도록 합니다 이렇게 차트를 이해하기 쉽고 모두가 접근 가능하게 만들어줘요 이는 차트의 세부 사항을 확인하는 데 다른 사람보다 시간이 더 걸리고 힘들어하는 특정 장애를 갖고있는 사람들이 무엇을 찾아야 할지 특정하는 데 도움이 됩니다 접근 가능성에 대해 얘기하자면 차트에 Audio Graph로 중요 설명을 VoiceOver에 추가할 수 있습니다 Audio Graph를 쓰면 Audio Graph VoiceOver로 축이 무엇인지 비시각적으로 설명할 수 있습니다 차트 설명 x축은 시간, y축은 판매량입니다 데이터 시리즈는 하나입니다 Audio Graph로 여러분이 직접 사용자화할 수 있는 데이터에 대한 요약을 제공할 수 있습니다 이러한 설명들은 특히 x축과 y축에 대한 설명은 비시각적으로 차트를 전달하는 데 필수적입니다 Audio Graph를 사용할 수 없어도 VoiceOver가 이런 종류의 설명들에 접근 가능성 라벨과 같이 다른 방법으로 접근할 수 있도록 해주세요 이제 차트의 맥락을 제공하고 주요 내용을 요약했으며 Audio Graph나 이에 상당하는 설명을 만들어 차트의 필수적인 부분을 모두 작성했습니다 여기서 상호작용을 이용하면 더 효과적으로 만들 수 있습니다 사람들이 데이터를 더 면밀하게 탐색하고 이해할 수 있도록 상호 작용을 설계할 수 있습니다 예를 들어 상호작용을 이용해 차트의 일부가 더 넓은 맥락에서 어떤 의미인지 강조할 수도 있고 데이터를 일간, 주간, 월간 연간으로 탐색할 수도 있습니다 팬케이크 판매량 차트도 상호작용을 이용해 개선할 수 있죠 특정 날의 팬케이크 판매량을 정확히 알 수 있다면 푸드 트럭 주인들에게 유용할 것입니다 상호작용형 툴팁을 사용해서 차트를 터치하면 특정한 값을 강조하고 읽어줄 수 있습니다 이렇게 사용하기 쉬운 터치 기반 상호작용을 만들기 위해서는 커다란 터치 타겟을 써야합니다 터치 타겟을 차트의 표시와 같은 크기로 만들지 않고 차트의 공백 부분을 포함한 전체 높이까지 타겟을 늘려 사용하면 막대 위쪽의 빈 공간을 포함해 어디를 터치해도 되므로 툴팁을 사용하기 더 쉬워집니다

상호작용은 터치만 있는 것이 아닙니다 사람들은 상황이나 장애와 같은 이유에 따라 다양한 방법으로 기기와 상호작용합니다 차트 상호작용이 이해하기 쉽고 접근 가능하도록 다양한 인풋을 설계해야 합니다 다시 말해 터치나 마우스 클릭에 대해 설계한 모든 상호작용을 키보드, 음성 명령, 스위치 제어 VoiceOver에 대해서도 같은 경험이 되게 설계해야 합니다 이런 상호작용을 설계할 때 화면에서 터치 타겟을 설계했던 것처럼 스위치 제어나 VoiceOver의 포커스 지시기가 크게 표시되도록 하는 것이 중요합니다

VoiceOver 지원을 위해서는 라벨도 접근 가능하기 좋게 디자인해야 합니다 표시를 어떻게 디자인 했는지 다시 떠올려보면 VoiceOver가 차트의 데이터 값들을 탐색하도록 했었습니다 따라서 VoiceOver가 막대 중 하나를 탐색하면 "6월 1일, 팬케이크 36개" 라고 읽습니다 이 라벨이 좋은 디자인인 이유는 간결하기 때문입니다 축 이름과 같은 정보들은 Audio Graph가 이미 설명했으므로 불필요하게 반복하지 않습니다 단어의 약자를 쓰지 않고 전체 철자를 사용해서 VoiceOver가 'June'을 'Jun'이나 '육 대시 일'이라고 읽지 않고 36이 팬케이크의 수임을 확실히 해줍니다 또한 데이터 값들을 맥락에 맞게 배치했습니다 이 경우에는 날짜에 따른 배치입니다 이렇게 순서대로 배치하면 특정 값을 찾기 쉽습니다

5월 27일, 5월 28일 5월 29일, 5월 30일 팬케이크 41개 이렇게 하면 특히 차트의 다른 부분으로 이동할 때 어떤 데이터를 보는지 맥락정보를 제공해서 데이터를 해석하기 쉬워집니다

레이블의 종류는 차트의 목표에 따라 다릅니다 예를 들어 지도에서 자전거 경로에 대한 고도 차트를 보면 모든 개별 값을 보여주진 않지만 고도가 올라가고 내려가는 패턴을 막대 여러 개로 표현하는데 막대가 너무 많아서 개별 값을 탐색하기 어렵습니다 잘 디자인된 접근 가능한 라벨은 막대의 구간별로 5.8km에서 7.1km까지 30m 올라가고 1.5m 내려갔습니다'라고 안내합니다 반면 차트가 같은 차트를 자세하게 볼 수 있는 버튼 안에 있는 작은 미리보기라면 하나의 라벨로 차트 전체를 요약하는 것이 더 적당합니다 이제 차트에 대해 접근 가능하고 이해하기 쉬우며 집중되도록 상호작용을 설계했는데 한 가지 주제를 더 다뤄야 합니다 바로 색입니다 색은 차트를 더 명확하고 개성있게 해줍니다 지금까지 흑백으로만 디자인했는데 색을 입히면 차트를 더 돋보이게 할 수 있습니다 뿐만아니라 더 많은 것을 전달할 수 있게 됩니다 피트니스 앱의 세 가지 활동 링과 같이 범주를 구분하기 위해 색을 쓸 수 있고 날씨 앱의 온도 표현처럼 강도를 표현하기 위해 쓸 수도 있죠 반대로 차트의 특정 요소를 강조하려고 색을 없앨 수도 있죠 이처럼 건강 앱에서는 하루의 최대와 최소 심박수를 강조합니다

색을 이용해 강조해보세요 중요한 정보를 전달하는 수단에 더해 차트의 전달력을 높이는 데 색을 사용하는 것이 이상적입니다 설명을 돕기 위해 앱에서 샌프란시스코와 쿠퍼티노에 있는 두 대의 푸드 트럭을 추적하는 경우를 생각해봅시다 총 판매량 차트를 위치에 따라 판매량을 비교할 수 있는 차트로 바꾸려면 어떻게 해야 할까요? 각 도시에서의 판매량을 선으로 나타낼 수 있지만 이렇게 하면 어떤 선이 어떤 도시인지 알 수 없습니다 둘을 구별하는 라벨이나 레이아웃이 없습니다 각 선에 기호로 개별 날짜를 표시해서 연관성을 명확히 보여줄 수 있습니다 여기서는 샌프란시스코는 원 쿠퍼티노는 사각형으로 표시했어요 이제 범례가 필요합니다 색을 추가해 차이를 강조할 수 있습니다 기호에도 색이 추가되는 것이 중요합니다 색맹인 사람들은 이 두 선을 구분하지 못할 수 있습니다 이 방법은 색상 사용 없이 구분짓기 같은 시스템 설정에 특히 중요합니다 데이터를 표현할 색상을 고를 때 몇 가지 고려해야 할 점이 있습니다 먼저 색이 어떤 의미를 갖는지 고려해야 합니다 예를 들어 빨강과 초록으로 배터리 잔량이 적음을 나타낼 수 있죠 색상의 의미는 문화적으로 정해질 수도 있습니다 미국에서는 주식 앱에서 이익은 초록, 손실은 빨강으로 표시하는 것이 자연스럽습니다 반면 중국과 같은 다른 나라에서는 사람들이 반대로 생각해서 빨강은 이익을 초록은 손실로 여깁니다

이 차트에서는 파랑과 초록이 적당합니다 이 색상들이 이 도시들에 뚜렷한 의미가 없기 때문입니다 하지만 앱의 모양과 느낌에 맞게 색을 바꾸려면 어떻게 할까요?

범주에 대한 색을 고를 때 시각적 균형이 중요합니다 한가지 색상이 더 뚜렷하면 계층적 의미가 내재됩니다 가령 샌프란시스코는 짙은 보라색으로 표시하고 쿠퍼티노는 밝은 분홍으로 표시하면 보시는 바와 같이 쿠퍼티노의 밝은 분홍색이 샌프란시스코의 짙은 보라색에 비해 두드려져 보여서 쿠퍼티노가 더 중요해 보입니다 포화도와 밝기를 비슷하게 맞춰 해결할 수 있습니다 나아졌네요 색상 선택에 조금 더 신경써야 하지만 지금도 두 색상이 비슷하게 중요해 보여서 하나의 도시가 다른 도시보다 더 중요해보이지 않습니다 시각적 비중을 위해 색상을 조정하는 것도 하나의 방법입니다 가끔 차트의 특정 값이나 구간에 주의를 집중시키기 위해 하나의 색이 시각적 비중이 더 있어야 할 때도 있습니다 피트니스 앱의 트렌드 차트가 이렇게 최근 활동을 강조합니다 색상 표를 선택할 때 가독성과 접근 가능성을 위해 시각적으로 구분이 잘 되는 색상을 사용하는 것이 중요합니다 좋은 방법은 서로를 이름으로 구별하기 쉽고 잘 대비되는 색상을 선택하는 것입니다 샌프란시스코에 보라색을 쓰고 쿠퍼티노에 보라빛 분홍색을 쓰는 대신 보라색과 초록색을 쓰겠습니다 그리고 배경으로부터도 잘 구분되는 색으로 바꿔주겠습니다 두 색과 배경이 모두 구분되게 색상을 고르면 시각 장애가 있는 사람들에게도 접근 가능성이 높아져 모두에게 더 나은 디자인이 됩니다 항상 색맹인 사람들을 위해 구분이 명확한 색을 사용하려 노력해봐요 여러분의 선택을 색맹 필터로 확인해볼 수 있습니다 마지막으로 시스템 설정의 다크 모드와 라이트 모드 대비 증가가 모두에서 잘 보이도록 차트를 만들어줍니다 자 지금까지 무엇을 다뤘는지 복습해보죠 팬케이크 푸드 트럭 앱을 위한 차트를 디자인했습니다 목표를 효과적으로 전달하기 위한 표시를 선택하고 VoiceOver에서 표현되도록 했으며 데이터를 한눈에 알아볼 수 있도록 축 범위와 격자 선을 설정했습니다 전반적인 개요와 맥락을 확인할 수 있게 설명을 추가하고 상호작용을 추가해 필요한 세부사항들을 제공했으며 팬케이크 위의 버터처럼 다양한 색상을 덧입혔습니다 그리고 두 도시에서의 팬케이크 판매량 비교를 위한 두번째 차트에 색상을 사용해 더 잘보이게 했습니다 모든 단계에서 차트의 디자인이 집중되어있고 이해하기 쉬우며 접근 가능하도록 결정했습니다 다시 말해 효과적인 차트를 만들었습니다 우리가 디자인한 차트는 단지 많은 내용의 전체 앱에 포함된 전체 차트 시스템 중 일부입니다 동일한 디자인 과정을 거쳐 다른 팬케이크 차트도 환상적으로 만들 수 있습니다 이제 팬케이크가 먹고 싶네요 저도요

시청에 감사드립니다