WWDC 스터디 WWHIGH에서 [WWDC22]Swift Charts: Raise the bar 영상에 대한 발표를 하기 위해 토스증권의 1년 주식 차트를 iOS 16부터 사용 가능한 Swift Charts 프레임워크를 사용하여 클론코딩해봤습니다.
| 토스원본 | 클론 |
|---|---|
 |
 |
 |
 |
'Swift Charts로 어디까지 커스텀이 될까?'라는 궁금증이 들어서 한 번 조금 복잡한 차트를 클론코딩해보기로 하여 진행하게 됐습니다.
Swift Charts에서는 그래프의 데이터를 나타내는 부분을 Marks라고 부릅니다.
그리고 Swift Charts는 위와 같은 종류의 Marks를 지원합니다. 그렇다면 이 Marks는 얼마나 커스텀이 될까요?
토스증권 차트를 도식화하면 위와 같습니다. 여기서 각 부분을 표현하는데 어떤 종류의 Marks가 사용됐는지 알아보겠습니다.
Bar Marks가 사용된 부분을 보면, 위와 같은 커스텀이 이루어졌습니다. 코드로 각 커스텀을 어떻게 적용했는지 하나하나 살펴봅시다.
이렇게 BarMark의 yStart와 yEnd 매개변수를 이용하여 그래프상에서 시가부터 종가까지만 BarMark가 표시되도록 했습니다.
BarMark의 너비또한 매개변수로 지정해줄 수 있습니다. 위에서는 .fixed를 이용하여 너비를 고정값으로 지정해줬는데, .ratio를 이용하면 비율로도 지정할 수 있습니다.
Swift Charts에서는 색상을 바꿀 때 .foregroundStyle 수식어를 사용합니다.
막대의 코너를 둥글게 하기 위해 SwiftUI에서 자주 사용되는 .cornerRadius 수식어를 사용했습니다. 이처럼 Swift Charts에는 SwiftUI View에 사용되던 많은 수식어가 지원됩니다. '이 수식어는 차트에도 적용될거 같은데?'라는 생각이 들면 적용해보세요! 웬만하면 될 것입니다.
토스차트를 만드는 데 쓰이진 않았지만, 한 차트에 두 가지 데이터를 표시할 경우, .position 수식어로 두 데이터를 서로 다른 줄로 표시할 수 있습니다. BarMark의 경우 기본적으로는 두 데이터가 한 막대로 표시됩니다.
이제 PointMark로 넘어와봅시다. .symbolSize 수식어를 이용하면 PointMark의 심볼 크기를 변경할 수 있습니다.
PointMark에서 가장 궁금한 것은 심볼 모양을 직접 만들 수 있는지 여부일 것입니다. 위와 같이 ChartSymbolShape 프로토콜을 준수하는 커스텀 타입을 만들면 가능합니다.
커스텀 심볼을 .symbol 수식어에 넣으면, 위와 같이 PointMark의 심볼을 직접 만든 심볼로 변경할 수 있습니다.
마지막으로, '내 주식 평균'과 최고가, 최저가를 나타내는 텍스트를 표시하는 데에는 .annotation 수식어를 사용했습니다.
이렇게 .annotation 수식어 안에는 텍스트 뿐만 아니라 뷰를 넣을 수 있습니다.
Swift Charts에서는 축도 커스텀 할 수 있습니다.
왼쪽의 기본 차트와 달리 토스차트는 축이 보이질 않는데, .chartXAxis 수식어에서 .hidden을 사용하여 축을 보이지 않게 만들었기 때문입니다.
또한 .chartYScale을 이용하여 Y축 스케일을 최소값을 최저가로, 최고값을 최고가로 고정했습니다.
이외에도 위 세 가지를 조건에 따라 표시하거나 표시하지 않는 등의 다양한 커스텀을 할 수 있습니다.
Swift Charts는 ChartProxy를 제공합니다. 차트의 특정 데이터의 좌표나 크기를 알려줍니다.
위와 같이 .chartOverlay나 .chartBackground 수식어에서 proxy를 사용할 수 있으며, 이 안에 적힌 코드는 SwiftUI의 .overlay나 .background와 동일하게, 차트의 위나 아래에 그려지게 됩니다.
토스차트의 드래그 제스처를 구현하기 위해 이 기능을 이용했으며, 코드는 위와 같습니다.