Bring Swift Charts to the third dimension (feat. WWDC 2025)

안녕하세요. 그린입니다 🍏

이번 포스팅에서는 Bring Swift Charts to the third dimension이라는 WWDC 2025의 세션을 정리해보겠습니다 🙋🏻

 

---

Bring Swift Charts to the third dimension

---

Introduction

다들 아시는 Swift Charts를 3차원으로 가져오는것에 대한 세션이에요.

Chart3D를 사용해서 2D Swift Cahrts를 3차원으로 가져오고 시각화하는 방법을 소개하고 있습니다.

 

알아볼까요?

 

우선 Swift Charts는 접근성이 뛰어나고 시각적인 차트를 만드는 프레임워크이죠.

차트는 다양하게 애플 플랫폼에서 사용되고 있어요.

 

 

배터리 잔량이나 수학 함수 그래프 등 정말 다양하게 쓰일 수 있죠.

 

Swift Charts에서는 사용 가능한 빌딩 블록을 사용해서 축 표시, 레이블, 선 플롯 같은 2D 차트를 만들 수 있습니다.

 

 

이런 형태를 말이죠.

 

그런데 이제 iOS 26에서는 Swift Charts가 3D 차트를 지원해서 플롯을 다각화할 수 있습니다.

 

 

이에 대해 더 자세히 알아봅시다!

---

Plotting in 3D

3D 플롯으로 2D 차트 세트를 3차원으로 가져오는 방법을 알아봅니다.

 

 

먼저 2D 차트로 데이터를 시각화하는 코드가 있습니다.

예시로 펭귄의 세가지 종에 대한 정보들을 담고 보여주고 있습니다.

이건 Swift Charts로 손쉽게 만들 수 있죠.

 

 

이렇게 여러 데이터에 대한 단일 차트를 만들 수 있죠.

 

이제는 이 단일 차트들을 Swift Charts를 이용해 수준을 한단계 높일 수 있습니다.

데이터 전체를 포함하는 단일 차트를 합쳐 만드는것이죠.

 

 

바로 3D 차트를 만드는것이고, Chart3D를 사용하는것입니다.

Chart3D는 산포도 등 2D 차트의 익숙한 컨셉을 3D로 완전히 구현해줍니다.

 

코드를 볼까요?

 

 

Chart 선언을 Chart3D로 바꾸고 z 축에 대한 정보를 넣어주는것이죠.

 

너무 간단하죠?

 

당연하게 3D 차트는 제스처로 회전시키고 확인할 수도 있습니다.

 

 

세가지 마커 타입 모두 3D 차트에 맞게 업데이트되었습니다.

그리고 Chart3D의 항목으로 SurfacePlot이 추가 되었습니다.

 

그걸 알아볼께요 이제 😃

 

---

SurfacePlot

SurfacePlot을 이용해 3차원 수학 함수를 그래프화하는 방법을 볼까요?

 

SurfacePlot은 LinePlot의 3차원 확장 프로그램입니다.

 

 

3차원에서 변수가 최대 두개인 수학적 표면을 플롯합니다.

새로운 SurfacePlot API는 LinePlot API와 비슷해요.

 

코드를 볼까요?

 

 

보시면 Double 인자 두개를 받고 하나의 Double 타입을 반환하는 클로저를 사용합니다.

이 클로저 내에서 수학 표현식을 이용하죠.

SurfacePlot이 X와 Z의 다른 값에 대해 표현식을 평가하고 계산된 Y값의 연속적인 표면을 생성합니다.

이 표면은 간단하거나 복잡하게 만들 수 있죠.

 

이에 대해 조금 더 자세히 알고 싶다면 아래 세션을 참고하세요!

 

Swift Charts: Vectorized and function plots - WWDC24 - Videos - Apple Developer

 

SurfacePlot를 통해 데이터의 선형 회귀를 나타낼 수도 있어요.

 

 

독립적인 x, z 변수를 기반으로 y 값을 추정하는 LinearRegression 클래스를 정의합니다.

즉, 여기서는 몸무게를 추정하기 위한 선형 회귀를 설정해요.

그리고 SurfacePlot에서 이 인스턴스를 이용해주는것이죠.

 

 

요렇게 시각화되어 나타나게 됩니다.

 

마지막으로 커스텀화 해볼까요?

 

---

Customization

커스터마이즈를 할 수도 있습니다.

 

 

3D 차트에서 각도는 Pose라고 합니다.

더 명확한 시각화 제공을 위해서는 초기 Pose를 선택하는것이 중요하죠.

사전에 값을 알 수 없는 동적 데이터라면 해당 타입의 일반 데이터셋에 맞는 초기 Pose를 선택하는것이 좋습니다.

 

코드를 볼까요?

 

 

차트의 Pose는 Chart3DPose 모디파이어를 사용해 조정되며 Chart3DPose 상태 변수가 필요합니다.

이 상태 변수 값은 front, default 혹은 특정 값들로 편하게 설정할 수 있어요.

커스텀 시 이 타입의 이니셜라이저는 두개 매개변수를 사용해요.

하나는 차트의 좌우 기울기인 azimuth, 하나는 위아래 기울기인 inclination을 사용합니다.

 

 

또한 이렇게 왼쪽 그림을 보면 차트 뒤쪽의 점과 앞쪽의 점의 크기가 같은데요.

이러면 차트 전체에서 깊이와 관계없이 크기와 거리를 비교하기 더 쉽습니다.

측면에서 봐도 동일하죠.

3D 차트를 2D로 효과적으로 전환해주죠.

 

이런걸 정사 카메라 투영이라고 부릅니다.

 

Chart3D에서는 두가지 카메라 투영 방식이 있습니다.

 

하나는 앞서 말한 Orthographic이라는 정사 카메라 투영이죠.

 

두번째로 우측 그림을 보면 Perspective라고 불리는데 원근 투영이라고 부릅니다.

데이터 포인트가 멀수록 작게 보이고 평행선은 수렴합니다.

이 경우 몰입형 경험이 가능하며 깊이 인지에 유용할 수 있죠.

 

 

이렇게 chart3DCameraProjection 모디파이어로 쉽게 선택할 수 있습니다.

각 상황에 맞는 방법을 택하면 좋을것 같아요.

 

SurfacePlot에 또한 표면 스타일 커스텀 옵션도 있습니다.

 

 

SwiftUI에서 흔히 사용되는 foregroundStyle을 적용할 수도 있죠.

그라디언트로 여러 옵션을 선택할 수 있습니다.

일부는 2D 차트에서도 익숙한것들이 많죠.

 

 

이렇게 다양하게 커스텀화하여 사용할 수 있게 됩니다.

 

 

또한 VisionPro에서도 더 할 나위 없이 멋지게 보이죠 🕶️

 

---

Conclusion

Chart3D를 사실 사용해볼 일이 잘 없는데, 점점 갈수록 편한것도 있지만 디자인과 사용성에 신경을 많이 써준 느낌이 드네요 😃

오랜만에 토이 프로젝트로라도 간단히 만들어보고 싶어집니다 😁

 

---

References

Bring Swift Charts to the third dimension - WWDC25 - Videos - Apple Developer