Swift Charts 소개

♪ 안녕하십니까 저는 Dominik입니다 기쁜 마음으로 Swift Charts를 소개합니다 SwiftUI로 뛰어난 차트를 제공하는 Apple의 새 프레임워크입니다 우리를 둘러싼 데이터는 전례 없는 자원을 제공함으로써 세상을 이해하고 더 나은 결정을 내리게 합니다 하지만 데이터만으로는 쓸모가 없습니다 데이터를 이해해야만 유용하게 활용할 수 있죠 잘 디자인되고 이해하기 쉬운 데이터 시각화는 복잡한 데이터를 명확하게 전달하고 데이터를 해석과 지식으로 전환해 줍니다 Apple에서 우리는 시각화의 모범 사례를 수년간 연구했습니다 차트가 힘을 발휘하려면 데이터의 유용한 콘텍스트를 보여 줘야 합니다 예를 들면 특정 기간에 걸친 주가의 추세와 변동 지난번 운동 중 심박수 변화 저녁에 서늘해지는 시간 등이죠 이것은 우리 플랫폼에서 차트를 활용하는 일부 예시에 불과합니다 오늘 새 프레임워크를 소개하게 되어 신나는군요 여러분의 앱에 유익한 차트를 만들어 보세요 Swift Charts를 소개합니다 Swift Charts는 유연한 프레임워크로 Apple이 디자인한 차트를 만들 수 있습니다 SwiftUI와 마찬가지로 선언적 구문을 사용하죠 Swift Charts의 언어는 이미 익숙하실 겁니다 따라서 오늘은 Swift Charts를 활용해 유익하고 이해하기 쉬우며 쾌적한 시각화를 만들겠습니다 그동안 저희 팀은 팬케이크 푸드트럭을 도와 앱으로 판매량을 추적했습니다 이 트럭은 달콤하고 짭짤한 세계적인 메뉴를 제공합니다 카차파, 인제라, 크레프 지엔빙, 도사 및 아메리칸 팬케이크 등이죠 지난 30일간 푸드트럭은 다양한 스타일로 4,500여 개의 팬케이크를 제공했습니다 가장 인기 있는 건 카차파였고 이미 앱을 보면 가장 중요한 정보가 제목에 뜹니다 여섯 가지 팬케이크의 자세한 내용을 보여 주는 차트를 추가해 보죠 Swift Charts에서 시각화를 수행할 때는 SwiftUI와 동일한 선언적 구문을 사용합니다 Swift Charts에서는 요소별로 차트를 만들죠 막대 차트의 주요 구성 요소는 막대입니다 데이터의 각 항목을 시각적 요소로 표현하죠 이 시각 요소를 '마크'라고 부릅니다 Xcode로 넘어가서 차트를 만들어 보시죠 우선 차트를 하나 추가합니다 Chart에 BarMark를 추가해서 막대를 만들겠습니다 카차파의 수치를 막대로 표현하려면 이름과 판매량을 설정해야 합니다

막대의 X 포지션은 팬케이크 이름의 값에서 가져오도록 설정했습니다 여기서는 카차파죠 .value 팩토리 메소드의 첫 번째 인수는 값에 대한 설명입니다 두 번째 인수는 값이죠 이제 미리보기에 막대가 하나 생겼습니다 Y 속성으로 나오는 막대의 높이는 카차파의 판매량으로 설정합니다 916개죠 막대의 위치나 높이를 직접 설정하지 않는다는 의미로 .value를 사용합니다 Swift Charts는 막대만 자동으로 생성하지 않습니다 X축 막대에 대한 레이블과 막대의 길이가 의미하는 Y축의 이름도 보여 주죠 두 번째 막대로 인제라를 추가해 보죠 푸드트럭에서 850개가 팔렸습니다

개별적인 마크를 만들면 간단하게 앱에서 나타납니다 하지만 보통 우리가 만들고 싶은 건 구조체의 배열에 따라 구성되는 차트입니다 팬케이크 판매량에 구조체를 추가해 보죠

이름을 설정합니다 String이죠 트럭이 판 팬케이크 수는 Int입니다 반복해서 사용하고 싶기 때문에 Identifiable로 설정합니다

이름을 반환하는 ID 연산 프로퍼티를 정의합니다 이제 팬케이크의 배열에 따라 데이터 세트를 만들 수 있죠 외부 데이터 소스에서 불러올 수도 있지만 여기서는 코드 안에 정의하겠습니다 카차파와 인제라 옆에 크레프도 추가합니다 막대 차트 데이터는 ForEach로 만들 수 있죠 우선 두 번째 막대를 제거하세요

다음으로 할 일은 ForEach로 BarMark를 반복하는 것입니다

루프의 변수 이름으로 'element'를 선택했습니다

다음으로 X축에 Element.name을 넣고

Y축에는 Element.sales를 넣습니다

ForEach가 차트에서 유일한 콘텐츠인 경우 차트 이니셜라이저에 데이터를 직접 넣어도 됩니다

이제 남은 세 항목인 지엔빙, 도사 및 아메리칸 팬케이크를 추가합니다

배열에 항목을 추가할수록 차트에 막대 마크가 늘어납니다 마지막으로 막대의 레이블이 점점 가까워졌을 겁니다 X축과 Y축을 바꾸면 차트를 눕힐 수 있습니다 레이블을 적을 공간이 늘어나죠 Swift Charts 프레임워크는 축의 스타일을 자동으로 적절하게 선택합니다 이로써 Swift Charts에서 첫 데이터 시각화가 완성됐습니다 Xcode의 새 기능들을 이용하면 다크 모드에서도 차트가 보기 좋게 바뀝니다 다양한 폰트 크기에 적응하고

기기 크기와 방향 및 손쉬운 사용도 지원합니다

시각적으로 표현된 데이터에 접근하려면 눈으로 볼 수 있어야 합니다 Swift Charts는 VoiceOver에 시각화 데이터를 전달해서 인기 있는 팬케이크의 정보를 누구나 찾을 수 있습니다 VoiceOver에서 차트를 탐색하면 팬케이크의 이름과 판매량을 말해 줍니다 카차파, 916, 인제라, 850 크레프, 802 지엔빙, 753, 도사, 654 아메리칸, 618 물론 이 차트는 Apple이 2021년 발표한 Audio Graphs를 지원합니다 소니피케이션도 포함돼 있죠 차트 설명, 차트 세부 사항 Audio Graph 재생 완료 Swift Charts를 이용해서 유용하고 이해하기 쉬운 차트를 푸드트럭 앱에 추가했습니다 차트는 푸드트럭에서 팬케이크의 종류별 판매량을 보여 줍니다 팬케이크 종류별 요약 외에도 일일 판매량 데이터도 수집합니다 트럭은 쿠퍼티노와 샌프란시스코를 찾아갑니다 요일별로 푸드트럭이 장사할 위치를 알려 주고 싶습니다 이 질문에 답하기 위해 두 도시의 데이터를 시간순으로 시각화해 보겠습니다 디자인을 넘나드는 것이 쉽다는 것을 보여 드리고자 세 가지 차트를 반복하겠습니다 쿠퍼티노의 막대그래프부터 시작해 보죠 샌프란시스코 데이터를 추가하고 Picker를 추가합니다 마지막으로 데이터를 결합해서 하나의 꺾은선 차트로 합칩니다 가장 먼저 살펴볼 막대 차트는 요일별 팬케이크 판매량의 평균입니다 판매량 데이터는 요일을 날짜별로 정리해서 팬케이크가 얼마나 팔렸는지 정수로 저장합니다 쿠퍼티노의 데이터는 cupertinoData에 저장됩니다 이전과 마찬가지로 BarMark로 차트를 만듭니다 막대의 X 위치는 날짜별 요일에서 가져오도록 설정합니다

높이는 판매량 값에서 가져오죠

그렇게 나온 첫 번째 반복 차트는 쿠퍼티노의 요일별 판매량 데이터를 보여 줍니다 두 번째 반복에서는 샌프란시스코를 추가해 보죠 팬케이크 트럭이 주중에 장사할 위치를 찾을 때 이 차트가 유용할 겁니다 샌프란시스코의 판매량 데이터는 sfData 변수에 들어갑니다 두 도시를 전환하면서 각 도시의 막대 차트를 보려 합니다 상태 변수로 City를 추가합니다 그리고 도시에 대한 Picker를 View에 추가합니다

두 도시의 판매량 개요를 City 변수에 따라 전환하기 위해 데이터 변수에 스위치 문을 추가합니다

이제 남은 일은 쿠퍼티노의 데이터를 두 도시를 오가는 데이터로 바꾸는 것입니다 쿠퍼티노와 샌프란시스코죠 스위치를 전환하면 두 도시 사이에서 차트가 전환됩니다 SwiftUI는 Swift Charts의 애니메이션과 함께 작동합니다 따라서 애니메이션 방식을 easeInOut으로 지정하면 두 도시를 전환할 때 막대가 움직입니다 한 번에 한 장소만 보여 주죠

앱과 어울리는 느낌을 줍니다 마지막 반복에서는 양쪽 도시의 차트를 꺾은선 차트로 그리겠습니다 꺾은선 차트를 만들 때는 쿠퍼티노에서 만든 막대 차트에서 시작합니다 쿠퍼티노와 샌프란시스코의 데이터는 시리즈의 배열로 저장돼 있습니다 시리즈 구조체엔 도시와 판매량 데이터가 들어 있죠 양쪽 시리즈를 보기 전에 쿠퍼티노의 데이터에 초점을 맞춰 보죠 이 차트에서는 시리즈 데이터를 반복할 수 있습니다 차트 이니셜라이저는 ForEach와 동일하게 작동합니다

쿠퍼티노의 특정 데이터를 시리즈의 판매량 데이터로 대체할 수 있죠

두 도시의 데이터를 구분하기 위해 도시의 막대 색을 바꾸려 합니다 foregroundStyle이 시리즈 데이터에서 도시를 가져오도록 설정합니다

어떤 색이 어떤 도시인지 표시하기 위해 Swift Charts가 차트 아래로 범례를 생성합니다 이제 두 번째 도시의 데이터를 추가합니다

미리보기에서 보이듯 Swift Charts가 샌프란시스코의 색상을 자동으로 고릅니다 두 도시의 막대를 차트에 모두 보여 주죠 차트는 특정 콘텍스트에 따른 데이터를 보여 줍니다 데이터나 질문이 바뀌면 시각화도 달라져야 하죠 Swift Charts를 활용하면 빠르게 차트를 바꾸면서 다양한 디자인을 탐색할 수 있습니다 적층형 막대 차트는 하루 총 판매량 평균을 쉽게 볼 수 있습니다 하지만 두 도시를 비교하려면 어떻게 해야 할까요? 점도표나 꺽은선 차트가 더 적절할 겁니다 마크 유형을 BarMark에서 PointMark로 변경합니다 팬케이크 판매량이 점으로 표시되죠 LineMark를 사용하면 꺾은선 차트로 표시됩니다 꺾은선 차트는 판매량 데이터에 알맞습니다 두 도시를 요일별로 비교할 수 있기 때문이죠 여러 마크를 결합할 수도 있습니다 예를 들어 PointMark를 추가해 보죠

색상 없이 시리즈를 구분할 수 있도록 각 도시에 부호를 지정합니다

이제 지점마다 색과 부호로 도시를 표시합니다 선에 점을 표시하는 것은 일반적인 형태이므로 Swift Charts에 단축 명령어가 있습니다 LineMark에 부호 modifier를 적용할 수 있죠 점의 스타일은 선의 스타일을 따라갑니다 훌륭한 차트가 나왔네요 일주일의 판매량 동향을 쉽게 비교할 수 있죠 차트에 따르면 샌프란시스코의 판매량은 특히 일요일에 높습니다 Swift Charts를 활용하면 순식간에 다양한 디자인을 쉽게 반복할 수 있습니다 발표를 마무리하며 Swift Charts가 얼마나 쉽고 반복이 간단한 것과 동시에 매우 유연해서 앱의 스타일에 매끄럽게 통합되는지 살펴보겠습니다 Swift Charts에서는 마크와 마크 속성의 구성으로 차트를 작성합니다 팬케이크 앱에서는 세 가지 마크와 네 가지 마크 속성으로 차트를 구성했습니다 예를 들어 X와 Y 속성으로 단순한 막대 차트를 작성했습니다 디자인을 빠르게 탐색하도록 마크도 변경해 봤습니다 점도표를 만들었죠 그리고 선 마크를 사용한 꺾은선 차트는 X축과 Y축을 표시합니다

속성도 추가할 수 있습니다 Foreground Style로 차트에 여러 시리즈를 표시하죠 차트 하나에 여러 마크를 쓸 수도 있습니다 점과 선을 결합해서 두 개의 마크 속성으로 동일한 값을 표시했죠 Swift Charts는 지금 우리가 사용하는 것보다 더 많은 마크와 마크 속성을 지원합니다 사용자 지정 마크도 추가할 수 있죠 Swift Charts는 마크와 마크 속성 덕분에 적은 수의 선언적 빌딩 블록을 사용하면서 광범위한 차트 디자인을 표현할 수 있습니다 빌딩 블록을 결합하여 앱에 멋진 데이터 시각화를 생성하는 방법은 아주 다양합니다 덕분에 SwiftUI로 할 수 있는 일과 가능성이 무궁무진하죠 오늘 보여드린 것처럼 다크 모드 및 다양한 장치의 화면 크기 Dynamic Type, VoiceOver Audio Graphs를 무료로 지원합니다 그리고 Swift Charts는 고대비 모드도 지원합니다 마지막으로 Swift Charts는 여러 현지화와 멀티플랫폼을 지원합니다 같은 코드를 쓰는 차트는 모든 Apple 플랫폼에서 쓸 수 있죠 사용자 지정 옵션도 어디서나 작동합니다 각 플랫폼에 맞게 차트를 조정할 수 있죠 오늘은 Swift Charts에서 SwiftUI의 강력한 구문을 사용해 봤습니다 더 적은 코드로 많은 차트를 만들 수 있죠 그리고 Swift Charts는 풍부한 사용자 지정 옵션을 제공합니다 여러분의 앱에 어울리게 차트를 만들 수 있죠 이제 새로운 영역으로 차트를 만들 수 있으니 문서에 차트를 꾸미는 방법을 살펴보겠습니다 다음 세션을 기대해 주십시오 ♪