WWDC24) SwiftUI로 맞춤형 시각 효과 제작하기

 

[ 세션 소개 ]

이 세션에서는 다채롭고 사용하기 좋은 앱을 만들기 위해 시각 효과를 생성하는 방법을 다루고 있다 !

시각효과는 특정 기능이 예상대로 작동함을 보여주고, 앱 화면에 개성을 더하고, 진행중인 중요한 일에 주의를 집중 시키는 역할 !

새로운 시각효과를 만든다 ? 빌드를 시작하기 전에는 무엇이 적합한지 알 수 없는 경우가 많음.

 

세션에서 만들어볼 시각효과들

- SwiftUI로 맞춤형 스크롤 효과를 만드는 방법

- 메시 그라디언트로 앱에 풍부한 색상을 적용하는 방법

- 맞춤형 뷰 전환을 구성하는 방법

- 텍스트 렌더링으로 근사한 텍스트 전환을 만드는 방법

- 금속 셰이더를 작성하여 고급 그래픽 효과를 만드는 방법

 

 

⬇️ Scroll effects 

- 우리가 사용하는 대부분의 앱 경험은 스크롤 하면서 확인하는 항목의 모음. 

가로형 스크롤 보기 안에 있는 사진 모음.

 

- .scrollTargetBehavior(.paging) : 페이징 동작을 사용하여 페이지 나누기 효과 적용. 

 

- scrollTransitions 수정자는 표준적인 요소 모음을 맞춤형 모음으로 변경할 때 사용할 수 있다.

- scrollTransition은 전환하려는 content와 phase를 노출 시킴

- 이러한 값을 사용하여 스크롤뷰에서 회전수와 사진별 offset을 변경할 수 있음. ( 사진의 위치를 기준으로 )

- 스크롤 하면 양쪽에서 이어지는 사진이 회전하면서 원형 캐러셀 효과를 만듬.

- value 속성을 통해 이미지가 화면에서 떨어진 거리를 결정

- 뷰가 화면에 완전히 표시되면 isIdentity 속성이 true 가 됨 

 

자세히 설명하자면,

content: 실제 보여질 뷰 (여기선 AnimalPhoto)
phase: 뷰가 스크롤 중 어느 위치에 있는지를 나타내는 정보
phase.value: -1.0 ~ 1.0 범위. 중앙에 가까울수록 0
- 예: 왼쪽에 있을 땐 음수, 오른쪽에 있을 땐 양수
phase.isIdentity: 뷰가 현재 중심(온스크린 중심 위치) 에 있으면 true, 아니면 false

🎨 효과 설명

🔄 .rotationEffect(.degrees(phase.value * 2.5))
스크롤 중에 이미지를 회전시킴
phase.value에 따라 좌우로 회전
왼쪽에 있을수록 음수 값 → 왼쪽으로 회전
오른쪽에 있을수록 양수 값 → 오른쪽으로 회전

phase.value가 -1.0일 경우 → -2.5도 회전 (왼쪽으로)
phase.value가 0일 경우 → 0도 회전 (중앙)
phase.value가 1.0일 경우 → +2.5도 회전 (오른쪽으로)

⬇️ .offset(y: phase.isIdentity ? 0 : 8)
이미지가 중앙에 있지 않으면 약간 아래로 이동
스크롤 중 이미지가 옆에 있을 땐 y: 8 → 아래로 8pt 이동
중심에 있으면 y: 0 → 원래 위치

 

 

 

- modifier를 변경하여 scrollTrasition을 업데이트 

- 이미지의 xOffset은 변경하되 이미지를 자르는 모양은 바꾸지 않는다.

스크롤 값에 따라 업데이트할 모든 콘텐츠에 이 수정자를 적용할 수 있다. 이미지 아래의 텍스트 캡션에 스크롤 전환을 추가하여 이미지가 페이드 아웃되고 오프셋 됨

 

스크롤 하면서 볼수 있는 식료품 모음 모든 항목이 같은 색상으로 표시됨.

 

- visualEffect를 추가하면 content 플레이스홀더와 proxy에 접근할 수 있음.

- content 플레이스홀더의 작동 방식은 scrollTransition에서와 동일

- proxy는 뷰의 지오메트리 값을 제공

- proxy의 뷰의 위치를 사용하여 뷰의 색조를 변경하면 멋진 그라디언트 효과가 만들어짐

- visualEffect를 사용하면 뷰의 위치와 크기에 따라 시각적 속성을 효과적으로 변경할 수 있으므로 스크롤뷰에서 사용하기 좋음.

 

1. .hueRotation(Angle(degrees: ... ))

이건 색조(Hue) 를 회전시키는 modifier예요.
Angle(degrees:) 안에 넣는 숫자만큼 색상 스펙트럼이 회전돼서, 보라색 → 빨강 → 주황 → 노랑 … 이런 식으로 색이 변화함
즉, 위 코드에서는 뷰의 수직 위치에 따라 색이 달라짐

2. proxy.frame(in: .global).origin.y

🧱 proxy
.visualEffect { content, proxy in ... } 구문 안의 proxy는 해당 뷰의 레이아웃 정보를 계산할 수 있게 해주는 객체예요.

📦 proxy.frame(in: .global)
이건 뷰의 프레임을 어떤 좌표계에서 계산할지 지정하는 거예요. .global을 쓰면 → 스크린 전체 기준으로 위치를 반환함

📍 .origin.y
전체 스크린 기준에서 이 뷰의 y좌표를 가져오는 것 즉, 현재 뷰가 스크린의 어느 세로 위치에 있는지를 의미

예: 맨 위 뷰의 origin.y는 100쯤 아래로 갈수록 origin.y 값이 커짐 → 그래서 아래에 있을수록 더 많이 색이 회전

3. / 10 — 왜 나눌까?

origin.y는 보통 수십~수백 pt인데, 이걸 그냥 회전 각도로 쓰면 색이 너무 빨리 바뀜
그래서 10으로 나눠서 변화 폭을 조절하는 것 예: y=200 → 200 / 10 = 20도 색상 회전

 

색상 대신 다른 시각적 속성 변경

 

 

- 도형과 동일한 y위치를 사용하여 스크롤뷰 상단에있는 요소에 오프셋, 크기조정, 페이드 및 블러 효과를 적용

 

결론 : ScrollTransition과 VisualEffect는 커스텀 스크롤뷰 효과에 매우 유용하다 

 

 

- 화면에서 요소의 위치에 따라 스케일을 조정하는 스크롤뷰를 만들 수 있음

- 원근감을 바꾸기 위해 활용할 수 있음 ( 회전 및 기울이기와 같은 변형 효과 )

- 오프셋을 통해 스택 동작 만들기

- 밝기, 채도, 색조와 같은 색상 속성을 조정하여 내용을 강조하고 명확하게 표시

 

 

🌈 Color treatments

- 색상은 인터페이스에 중요한 역할을 함. 앱에 개성을 더하거나, 주의를 집중시키거나 의도를 명시할 수 있음.

- SwiftUI는 앱에 색상을 적용하는 도구를 다양하게 제공.

-> 다양한 그라디언트 유형, 색상 컨트롤 블렌드 등을 지원

 

- SwiftUI는 메시 그라디언트도 지원.

- 동적 배경을 적용하거나 표면에 시각적 구분을 추가해야 할 때 유용

 

- 메시 그라디언트는 점의 그리드로 만들어지고, 각 점은 색상과 연관되어 있음

 

- 점을 이동하면 색상효과를 만들 수 있음. 매끄럽게 블렌딩. 가까운 점은 색상이 더 선명하게 전환

 

- width 및 height 매개변수를 사용하여 그리드의 행과 열을 정의 : 3 x 3 그리드

- 그리드 내 X 및 Y 좌표의 위치를 정의 

- 그리드 내 점은 SIMD2 float 값으로 정의됨. X 및 Y 축에서 0부터 1까지의 값을 가짐

 

SIMD2<Float>는 x, y 좌표 한 쌍을 저장하는 구조체

🔹 SIMD란?

SIMD = Single Instruction, Multiple Data → 여러 개의 데이터를 한 번에 계산할 수 있게 해주는 고성능 벡터 연산 기술
Swift에서는 이걸 위해 SIMD2, SIMD3, SIMD4 같은 타입을 제공해요.

예 : let point = SIMD2<Float>(0.3, 0.7)

 

 - 마지막으로 각 점에 해당하는 색을 추가 

 

가운데 점의 좌표를 옮기면 새 위치에 따라 색상이 이동

 

- 표면 색상을 이미지에 맞춰 바꾸거나 메시 그라이언트 애니메이션으로 변경 사항이 있음을 알릴 수 있음

📳 View transitions

- 사용자는 인터페이스를 통해 앱이 백그라운드에서 어떤 작업을 수행하는지 알 수 있음

- Trasition은 일어나는 변경 사항을 전달할 때 유용

예) 버튼을 탭할 때 , 사용자가 요소를 드래그

 

- 아바타뷰 : 사용자의 온라인 상태에 따라 표시되거나 숨겨짐. 사용자가 온라인 상태면 표시되고 그렇지 않으면 숨겨지도록

- transition 중  scale 적용 : 아바타가 등장하고 없어질 때 크기를 늘리거나 줄임.

- combined 메소드로 다른 transition 추가 가능

- scale 전환과 opacity 전환 같이 사용

 

Custom transition 

- 커스텀 트랜지션을 만들기 위해 새 struct 생성 : Twirl

- Transition 프로토콜 준수

- Transition 본문 함수는 content와 phase 매개변수를 사용

- content 매개변수의 작동 방식은 스크롤뷰에서의 방식과 같음 : 전환할 콘텐츠에 대한 플레이스 홀더로 작동

- phase값으로 뷰가 현재 표시되는지 확인할 수 있으며 이를 활용하여 뷰에 조건부 스타일 적용

 

- scale의 경우, 뷰를 표시할 때는 최대 스케일로 표시하고 표시하지 않을 때는 스케일을 절반으로 지정

- opacity의 경우, 요소가 완전히 표시되는 상태와 숨겨지는 상채를 전환하도록 설정

 

커스텀 트랜지션 적용

- 블러 추가하여 아바타가 초점에 들어오고 나가는 것처럼 보이도록, 회전도 추가하여 아바타가 돌도록

- phase 값을 확인하며 보기가 표시될지 또는 사라졌는지 알수 있음 -> 아바타가 사라질 때도 같은 방향으로 회전하도록 ( 음수값 사용 )

- brightness 수정자를 추가하여 뷰가 표시될때 약간의 빛을 내어 시선을 끌게 

 

💬 Text transitions

- 텍스트 라인마다 애니메이션 추가 

- TextRenderer : iOS18 및 관련 릴리즈에 도입된 새 API

- 강력한 프로토콜인 TextRenderer을 사용하면 뷰 트리 전체에서 SwiftUI 텍스트가 그려지는 방식을 커스텀할수 있음

 

- TextRenderer프로토콜의 핵심은 draw(layout:in:) 메소드

- 이 메소드의 인수는 Text.Layout , GraphicsContext

-  Text.Layout : 텍스트의 개별 구성요소인 라인, 런, 글리프에 접근할 수 있도록 함

-  GraphicsContext : 캔버스뷰에서 사용되는 것과 같음. 

- for 루프를 사용하여 레이아웃의 개별 라인을 반복하고 컨텍스트에 그림 => 기본 렌더링 동작

-

- 전환 유도를 위해 속성 3개를 추가

1. elapsedTime : 지금까지 경과한 시간을 지정

2. elementDuration : 개별 라인이나 요소에 애니메이션을 표시하는데 사용할 시간

3. totalDuration : 전체 전환에 소요되는 시간

-> SwiftUI가 elapsedTime 값에 자동으로 애니메이션을 적용할 수 있도록 Animatable 프로토콜 구현 

- animatableData 속성을 elapsedTime으로 전달하면 간단하게 채택할 수 있음.

 

- 애니메이션 반복 시작 : 라인별로 애니메이션 적용

- 애니메이션 전체에 사용가능한 시간을 균등하게 분배하려면 연속된 두 라인 사이의 지연 시간을 계산해야함.

- 헬퍼 함수 호출 : elementDelay(count:)

- 모든 라인을 나열 : 인덱스와 해당 지연 값을 기준으로 상대적인 시작 시간을 계산

- 개별 라인에서 경과한 시간은 전체 경과 시간에서 요소의 개별 시간 오프셋을 뺀 값. 

- 현재 GraphicsContext의 사본을 만듬.

-> GraphicsContext에 값 시맨틱이 있으므로 헬퍼함수에 대한 개별 호출이 서로 영향을 주지 않음

- 마지막으로 헬퍼 함수를 호출하여 개별 라인을 그림

 

🧠 전체 흐름 요약

Text.Layout 안에 있는 텍스트의 각 줄(line) 을 하나씩 순회하며
각 줄에 대해 지연(delay) 을 주고 일정한 간격으로 애니메이션되도록
GraphicsContext를 복사하여 각 줄을 독립적으로 그림

elementDelay(count:) :전체 애니메이션 시간을layout.count (줄 개수) 만큼 균등하게 나눔
→ 각 줄마다 시작할 시간 간격

layout.enumerated() → 각 줄과 인덱스를 함께 순회
예: (0, "첫 번째 줄"), (1, "두 번째 줄") ...

줄 번호(i) × 줄당 지연 시간(delay) = 이 줄의 시작 시간 오프셋
예: 0번째 줄: 0초 1번째 줄: 0.2초 2번째 줄: 0.4초 …

현재까지 경과한 시간 elapsedTime에서 해당 줄의 오프셋을 뺀 값을 elementTime으로 설정
단, 음수가 되지 않게 max(0, ...) 하고 최대 지속시간 elementDuration을 넘지 않게 min(..., elementDuration)

⏱️ 즉, 이 줄의 진행률을 시간에 따라 계산하는 것!

• GraphicsContext는 값 타입 → 복사해서 써야 함
• 그래서 copy라는 사본을 만든 후, 각 줄 그리기용으로 개별 사용
• 이 줄에서 .draw(...) 함수로 줄을 실제 그리는 로직 호출!
  
  
  

💬 왜 context 복사하는가?

Swift의 GraphicsContext는 값 타입(value semantic)이라서

• 그냥 사용하면 이전 줄 그린 결과에 영향을 줄 수 있음
• 그래서 각 줄마다 독립적인 copy 를 만들어서 부작용 없이 사용

라인을 그리기 전에 애니메이션을 적용하려는 GraphicsContext의 속성을 업데이트

 

더 쉽게 처리하기 위해 분수 진행 값도 계산

 

라인이 페이드 인되도록 빠른 불투명도 경사를 계산

 

동시에 blurRadius를 0으로 줄여 라인이 확산된 상태에서 나타나는 느낌을 줌

 

- 첫 blurRadius는 라인의 typographicBounds 속성에서 읽은 라인의 높이를 기반으로 함

 

spring을 사용하여 y축 translation에 애니메이션을 적용

 

- 라인의 디센더 길이에 따라 위쪽으로 이동하는 y위치에서 시작.

 

Baseline : 글자가 정렬되는 기준선
대부분의 글자는 이 선 위에 위치
Descender : 글자의 아래로 내려가는 부분
g, y, j, p, q 등의 꼬리 부분

예: g → 둥근 아래 꼬리 부분 = descender

디센더를 고려하지 않으면
글자의 꼬리가 아래로 떨어져서 화면 밖으로 잘릴 수 있음

디센더 길이만큼 위로 올리면
텍스트 전체가 적절한 위치에 깔끔하게 그려짐

- 마지막으로 새 draw options 메소드로 라인을 그림

- 서브 픽셀 양자화를 해제하면 spring을 안정화 시키고 지터를 방지할 수 있음.

 ✅ 픽셀 양자화(Quantization)

좌표값이나 그래픽 위치를 정수 단위 픽셀에 맞춰 강제로 끊는 것을 말해요. 디지털 화면은 픽셀 단위로 그리기 때문에, 실수 좌표(예: x = 23.6)는 렌더링 시 보통 가장 가까운 정수 픽셀 (24)로 반올림해서 그립니다.

✅ 서브 픽셀(Subpixel)

일부 그래픽 시스템은 소수점 단위 좌표 (예: x = 23.3) 도 부드럽게 그려줘요. 이걸 "서브 픽셀 렌더링"이라고 해요
→ 더 정밀한 위치 표현



😵 그런데 양자화를 하면 어떤 문제가?

애니메이션 중 좌표가 미세하게 움직일 때, 양자화로 인해 좌표가 '툭툭 끊겨서' 보임 이게 바로 "지터(jitter)", 즉 움직임이 덜덜 떨리는 현상



💥 "Spring을 안정화시키고 지터를 방지한다"는 뜻?

SwiftUI나 UI 프레임워크에서 spring animation (스프링 애니메이션)은
→ 마치 탄성처럼 자연스럽게 움직이는 애니메이션

하지만 서브 픽셀 양자화가 켜져 있으면:
애니메이션 도중 위치가 정수 픽셀로만 움직이게 되면서 덜덜 떨리거나 끊기는 느낌(jitter)이 날 수 있어요.

그래서 양자화를 꺼주면:
spring 애니메이션이 더 부드럽고 안정적으로 작동 좌표 변화가 실제 물리적으로 연속된 것처럼 표현됨

 

- Renderer로 텍스트에 애니메이션을 적용하려면 커스텀 Transition 구현 필요 

- 현재 트랜잭션에 이미 애니메이션이 있을 수 있다는 점 고려 : 이 Transition이 withAnimation에 대한 호출에서 트리거된 경우

 

- 트랜잭션 body view modifier를 사용하면 적절할 때 애니메이션 재정의 가능.

- 이러면 모든 라인에 대해 균일한 선형 페이싱 보장.

-> 모든 줄이 같은 속도로 자연스럽게 등장하게 만들 수 있다는 말 !!

 

- 그 다음 새로운 textRenderer 뷰 수정자를 사용하고 전환되는 뷰에 커스텀 renderer를 설정

# 라인 수에 의존하는 전환 ?  라인 수는 로케일이나 Dynamic Type 크기에 따라 달라질 수 있음에 주의 !

 

- 글리프 마다 애니메이션 적용. 글리프 ? 그 문자를 시각적으로 어떻게 그릴지 결정된 도형

- Text.Layout의 run 슬라이스를 반복해야함. 이 슬라이스는 글리프나 내장된 이미지처럼 레이아웃의 가장 작은 단위를 나타냄

 

Text.Layout 안에는 run이라는 단위가 있음 
run : 줄(line) 안에서 동일한 스타일을 가진 연속된 텍스트 조각

이 run을 반복(iterate)하면서 그 안에 있는 글리프(글자 모양) 또는 이미지(이모지, SF Symbol 등) 를 하나씩 처리해야 함
이게 텍스트 렌더링의 가장 작은 단위이기 때문에 → 여기에 애니메이션, 색상, 변형 등을 걸 수 있음

🎯 왜 run 단위로 반복하냐?

텍스트를 정교하게 제어하기 위해서예요.
글자 하나하나에 애니메이션을 넣는다거나 이모지를 따로 움직인다거나 특정 run만 강조 처리하는 등
→ run 단위로 접근해야 커스텀 처리 가능

- Text.Layout은 라인의 모음. 라인은 런의 모음이고 , 런은 RunSlice의 모음

- flattenedRunSlice라는 헬퍼 메소드를 사용하면 RunSlice만 반복하면 됨. 

- 헬퍼함수는 line 인수의 유형과 이름을 RunSlice로 변경

 

 

# 특정 글자만 강조 !

 

- TextAttribute 프로토콜 사용 : iOS18 및 관련 릴리즈에서 TextRenderer와 함께 도입, 이 프로토콜을 구하녀하면 텍스트에서 TextRenderer로 데이터 전달 가능

 

- customAttribute text modifier를 사용하여 Visual Effects 단어를 EmphasisAttribute로 표시.

- 특정 범위의 텍스트를 표시하는데만 사용했으므로 TextAttribute struct에 멤버 변수를 추가하지 않아도 됨

 

- layout의 flattenedRuns 반복

- Attribute-Type을 키로 사용하는 하위 스크립트를 사용하여 run에 EmphasisAttribute가 있음을 확인

1) 속성이 존재하는 경우, 이전과 동일한 방식으로 슬라이스 반복

2) 속성이 없는 경우, 0.2초에 걸쳐 run에서 빠르게 페이드 인

 

 

 

👥 Metal shaders

- shader : 다양한 렌더링 효과를 기기의 GPU에서 바로 계산하는 작은 프로그램

- SwiftUI에서는 내부적으로 셰이더를 사용하여 여러 시각효과 구현

- iOS 17 에 도입된 SwiftUI 셰이더를 사용하면 성능은 유지하면서 시각효과 작성 가능.

 

- SwiftUI에서 Shader를 인스턴스화하려면 ShaderLibrary에서 Shader의 이름을 갖는 함수를 호출하면 됨.

- 추가 매개변수를 Shader함수에 전달할 수도 있음. 색상, 숫자, 이미지 

- layerEffect로 뷰에 이 효과 적용 : SwiftUI가 뷰의 모든 픽셀에 대해 Shader함수 호출

 

많은 픽셀을 실시간으로 처리하기 위해 Shader는 고도로 병렬화된 작업에 최적화된 기기의 GPU에서 실행됨
GPU프로그래밍의 특성 상 Shader자체는 Swift 로 작성할 수 없음.

 

-> Metal Shading Language 로 작성. ( Metal 이라고 함 )

 

 

Shader의 Metal 파일 : Shader함수의 이름이 ShaderLibrary에서 호출한 것과 일치

- SwiftUI는 각 뷰의 픽셀에 대해 이 함수를 GPU에서 실행 

- 실행 시 position은 해당 픽셀의 위치를 나타냄 

- layer는 뷰 콘텐츠를 나타냄 

- 레이어를 샘플링해서 콘텐츠를 가져올 수 있지만 위치를 기준으로 Shader가 인스턴스화된 maxSampleOffset 내에 머물러야 함

 

---

- SwiftUI는 색상과 같은 유형을 Metal 에서 사용할 수 있는 표현으로 해결하고 변환.

예 : 분홍색 -> half4

- Metal은 이러한 유형의 벡터를 많이 사용.

- half4는 16비트 부동 소수점 숫자 포함, 4개의 구성요소를 갖는 벡터

- 이 유형은 빨강, 녹색 , 파랑 및 알파 구성요소를 인코딩. 

- float2 는 32비트 부동 소수점 숫자를 포함. 2개의 구성요소를 갖는 벡터로 2D 점이나 차원에 주로 사용

 

- SwiftUI에서 Shader는 

 

1. Custom Fills

2. Color Effects

3. Distortion effects

4. Layer effects 

 

위 효과들을 사용할 수 있다.

3가지 효과중 레이어 효과가 가장 강력하고 나머지 두 효과를 포함하고 있음

 

- 사용자가 뷰를 탭할 때마다 트리거 되는 푸시 효과가 적용되어 있음

- 뷰는 spring을 통해 크기가 작아지다가 즉시 다시 올라옴.

 

=> 하지만, 탭하는 위치에서 애니메이션이 응답하는 것이 아니라 인위적이고 경직된 느낌 ? 

💬 뷰를 누를 때마다 누른 위치에서부터 스케일 효과가 바깥쪽으로 퍼지도록 하고 싶다 !

: Shader로 구현이 가능하다.

 

 

- Metal 파일에 새 셰이더 함수를 추가 : Ripple

- 레이어 효과의 API에 필요한 인수 2가지 추가 : position, layer

- 뷰가 눌린 지점, 경과된 시간, 그 외 4개 매개변수에 대한 함수

- 픽셀에 대한 왜곡을 계산하여 새로운 newPosition을 얻음 => 뷰를 샘플링

- 왜곡에 따라 약간의 조정 후 수정된 색상을 반환 

 

- SwiftUI에서 셰이더 함수를 호출하기 위해 RippleModifier라는 ViewModifier를 만듬

- 셰이더 함수의 모든 매개변수를 SwiftUI에 노출.

- body(content:) 메소드에서 셰이더를 인스턴스화 하고 이를 콘텐츠에 적용

- 셰이더에는 시간 개념이 없음. SwiftUI에서 애니메이션을 작동시켜야함 

 

- RippleEffect 라는 ViewModifier를 작성

: keyframeAnimator 를 사용하면 제스처와 같이 외부 변화를 기반으로 하는 애니메이션 실행 가능

- 트리거 값이 업데이트 될 때 마다 0에서 최종 지속 시간 값까지 elapsedTime에 애니메이션 적용

- 애니메이션의 모든 단계에서 현재 시간과 보기를 누른 원래 지점을 RippleModifier에 전달.

 

4개의 매개변수 값을 할당해보는 실험 : 어떤 값이 좋을지.

- 디버그 UI를 빌드.

휴대폰이나 엑코 미리보기에서 셰이더 기능에 적합한 매개변수 입력 가능

- 디버그 UI는 복잡한 애니메이션을 반복할 때 유용 !!

- 매개변수 노출, 중간 값을 시각화하는 오버레이 그리기.

- 피드백 : 유용, 셰이더 작업은 무궁무진

 

 

 

이번 세션에서는 SwiftUI로 시각효과를 만드는 다양한 방법을 살펴보았는데요.

생각보다 양이 많고, 내용이 구체적이었네요... ! 실제로 제가 이렇게 깊게 사용해볼 수 있을진 모르겠지만 ~

몬가 이것저것 신기한 세션이었습니다 :)

 

 

봐주셔서 감사합니다.