<div id="readability-page-1" class="page"><div><blockquote>
GlassEffectContainer와 올바른 API 선택으로 오프스크린 렌더링 66% 줄이기
</blockquote>
<hr>
<h2 id="들어가며">들어가며</h2>
이전 글에서는 SwiftUI 관점에서 렌더링 최적화 방법에 대해 얘기했다면, 이번 포스팅에서는 Liquid Glass의 제대로된 사용법이 무엇인지에 대해 초점을 맞춰보겠습니다. Liquid Glass는 자체만으로도 GPU 부하가 있는데, 잘못 사용한다면 엄청난 GPU 리소스 증가가 발생할 수 있기 때문입니다.
따라서 해당 포스팅에서는 Liquid Glass 관련 API들의 성능 특성과 올바른 사용법을 다뤄보겠습니다.
<ol>
<li>safeAreaBar vs safeAreaInset - 언제 무엇을 사용할까?</li>
<li>glassEffectID vs glassEffectUnion - 성능 차이 이해하기</li>
<li>GlassEffectContainer - 오프스크린 렌더링 최적화</li>
</ol>
<hr>
<h2 id="1-safeareabar-vs-safeareainset">1. SafeAreaBar vs SafeAreaInset</h2>
<h3 id="차이점">차이점</h3>
고정 헤더/푸터를 구현할 때, iOS 15부터 사용 가능한 <code>safeAreaInset</code>과 iOS 26에서 새로 도입된 <code>safeAreaBar</code> 중 선택해야 합니다.

























<table><thead><tr><th>항목</th><th>safeAreaInset</th><th>safeAreaBar (iOS 26)</th></tr></thead><tbody><tr><td>블러 효과</td><td>X</td><td>O (edge effect)</td></tr><tr><td>스크롤 반응</td><td>고정만</td><td>스크롤 시 블러 적용</td></tr><tr><td>사용 시점</td><td>콘텐츠를 가리지 않을 때</td><td>블러 효과가 필요할 때</td></tr></tbody></table>
<h3 id="safeareainset">safeAreaInset</h3>
스크롤해도 고정되지만 블러 효과가 없습니다.
<pre><code>ScrollView {
 content
}
.safeAreaInset(edge: .top) {
 CustomHeader()
}</code></pre>
<ul>
<li>iOS 15부터 사용 가능</li>
<li>고정된 헤더/푸터 구현에 적합</li>
<li>콘텐츠를 가리는 게 없다면 이것으로 충분</li>
</ul>
<h3 id="safeareabar">safeAreaBar</h3>
스크롤 시 edge effect가 적용됩니다. 
iOS 26에서 새로 도입되었으며, Liquid Glass 컴포넌트와 함께 사용됩니다.
<pre><code>List(0..&lt;100) { i in
 Text("Row \(i)")
}
.navigationTitle("Safe Area Bar Example")
.safeAreaBar(edge: .bottom) { // Add content using the new API
 Button("Send") {
 // action
 }
 .buttonStyle(.glass)
 .padding()
}</code></pre>
<img src="https://velog.velcdn.com/images/jwlee010523/post/6d544911-9bb8-4d4e-8198-95fe236e8ffa/image.gif">
즉, 블러 효과가 필요 없다면 <code>safeAreaInset</code>을 사용하고, Liquid Glass와 같은 요소를 사용한다면 <code>safeAreaBar</code>를 사용하면 될거 같네요.
<hr>
<h2 id="2-glasseffectid-vs-glasseffectunion">2. glassEffectID vs glassEffectUnion</h2>
두 API 모두 glass 요소들을 연결하는 역할을 하지만, 성능 특성이 다릅니다.
<h3 id="핵심-차이">핵심 차이</h3>






























<table><thead><tr><th>항목</th><th>glassEffectID</th><th>glassEffectUnion</th></tr></thead><tbody><tr><td>목적</td><td>Morphing 전환 애니메이션</td><td>멀리 떨어진 요소 합치기</td></tr><tr><td>렌더링 타겟</td><td>O (뷰가 렌더링 타겟이 됨)</td><td>X</td></tr><tr><td>CPU 프로파일</td><td>렌더링 대기 시간 증가</td><td>영향 없음</td></tr><tr><td>사용 시점</td><td>요소 appear/disappear 시</td><td>항상 연결된 UI 표현 시</td></tr></tbody></table>
<h3 id="glasseffectid">glassEffectID</h3>
Morphing 전환 애니메이션을 가능하게 합니다.
<pre><code>struct GlassEffectIDExample: View {
 @State private var isExpanded = false
 @Namespace private var namespace

 var body: some View {
 VStack(spacing: 24) {
 GlassEffectContainer(spacing: 40) {
 HStack(spacing: 40) {
 // Primary button - always visible
 Image(systemName: "pencil")
 .font(.title)
 .frame(width: 60, height: 60)
 .glassEffect()
 .glassEffectID("pencil", in: namespace)

 // Secondary button - toggleable with morphing animation
 if isExpanded {
 Image(systemName: "eraser.fill")
 .font(.title)
 .frame(width: 60, height: 60)
 .glassEffect()
 .glassEffectID("eraser", in: namespace)
 }

 // Third button - toggleable
 if isExpanded {
 Image(systemName: "paintbrush.fill")
 .font(.title)
 .frame(width: 60, height: 60)
 .glassEffect()
 .glassEffectID("brush", in: namespace)
 }
 }
 }

 Text("Tap to see morphing animation")
 .font(.caption)
 .foregroundStyle(.secondary)

 // Toggle button
 Button(isExpanded ? "Collapse Tools" : "Expand Tools") {
 withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
 isExpanded.toggle()
 }
 }
 .buttonStyle(.borderedProminent)
 .padding(.bottom, 40)
 }
 }
}</code></pre>
<img src="https://velog.velcdn.com/images/jwlee010523/post/b60ad71f-3a47-4e87-a34b-aa12c94e31ec/image.gif">
주의사항
<ul>
<li>뷰가 렌더링 타겟으로 지정됨</li>
<li>렌더링이 완료되어야 다음 값을 처리할 수 있음</li>
<li>CPU 프로파일에서 대기 시간 증가 관찰됨</li>
</ul>
<blockquote>
ID가 걸려있으면 뷰가 렌더링 타겟으로 지정됨 → 렌더링 끝내야만 다음 값을 처리할 수 있음
</blockquote>
<h3 id="glasseffectunion">glassEffectUnion</h3>
멀리 떨어진 요소들을 하나의 glass 형태로 합칩니다.
<pre><code>import SwiftUI

struct ContentView: View {
 
 @Namespace var namespace

 var body: some View {
 GlassEffectContainer {
 HStack {
 Image(systemName: "cloud.bolt.rain.fill")
 .frame(width: 80, height: 80)
 .glassEffect()
 .glassEffectUnion(id: 1, namespace: namespace)

 Image(systemName: "cloud.bolt.rain.fill")
 .frame(width: 80, height: 80)
 .glassEffect()
 .glassEffectUnion(id: 1, namespace: namespace)

 Image(systemName: "cloud.bolt.rain.fill")
 .frame(width: 80, height: 80)
 .glassEffect()
 .glassEffectUnion(id: 2, namespace: namespace)

 Image(systemName: "cloud.bolt.rain.fill")
 .frame(width: 80, height: 80)
 .glassEffect()
 .glassEffectUnion(id: 2, namespace: namespace)
 }
 }
 .frame(maxWidth: .infinity, maxHeight: .infinity)
 .background(.blue)
 }
}

#Preview {
 ContentView()
}</code></pre>
<img src="https://velog.velcdn.com/images/jwlee010523/post/f8d7c8c3-ed69-480c-b996-5d18130ce8c9/image.png" width="300px">
사용 시점
<ul>
<li><code>GlassEffectContainer</code>의 spacing 파라미터로 커버되지 않는 거리</li>
<li>항상 연결되어 보여야 하는 UI (예: Apple Maps 줌 컨트롤)</li>
</ul>
제약 조건
<ul>
<li>동일한 effect type</li>
<li>유사한 shape</li>
<li>동일한 identifier와 namespace</li>
</ul>
Swift with Majid에서는 이를 다음과 같이 설명합니다
<blockquote>
"The glassEffectUnion view modifier combines glasses only when they have the same effect types, similar shapes, and identifiers."
</blockquote>
<h3 id="선택-가이드">선택 가이드</h3>
<pre><code>전환 애니메이션이 필요하다면? → glassEffectID
 └─ 주의: 렌더링 타겟 지정으로 CPU 부하 증가

항상 연결된 UI가 필요하다면? → glassEffectUnion
 └─ spacing으로 안 되는 큰 간격일 때
</code></pre>
즉, <code>glassEffectID</code>는 전환 애니메이션에만 사용해야 합니다. 불필요한 사용은 CPU 부하를 증가시키기 때문입니다.
<hr>
<h2 id="3-glasseffectcontainer-성능-최적화">3. GlassEffectContainer 성능 최적화</h2>
<h3 id="cabackdroplayer와-오프스크린-렌더링">CABackdropLayer와 오프스크린 렌더링</h3>
각 glass 효과는 CABackdropLayer를 생성하며, 이는 3개의 오프스크린 텍스처를 필요로 합니다.
<pre><code>CABackdropLayer 1개 = 오프스크린 텍스처 3개
→ 오프스크린 렌더링이 많을수록 GPU 부하 증가</code></pre>
JuniperPhoton은 이를 다음과 같이 설명합니다
<blockquote>
"Keeping the offscreen rendering count as less possible is crucial to achieve high performance."
</blockquote>
<h3 id="container-없이-사용-비효율적">Container 없이 사용 (비효율적)</h3>
<pre><code>// 비효율적: CABackdropLayer 3개 생성
HStack {
 Button("Action 1") { }
 .glassEffect() // CABackdropLayer 1
 Button("Action 2") { }
 .glassEffect() // CABackdropLayer 2
 Button("Action 3") { }
 .glassEffect() // CABackdropLayer 3
}
// → 오프스크린 렌더링 9회 (3개 × 3텍스처)</code></pre>
<h3 id="glasseffectcontainer-사용-효율적">GlassEffectContainer 사용 (효율적)</h3>
<pre><code>// 효율적: CABackdropLayer 1개로 통합
GlassEffectContainer(spacing: 16) {
 HStack {
 Button("Action 1") { }
 .glassEffect()
 Button("Action 2") { }
 .glassEffect()
 Button("Action 3") { }
 .glassEffect()
 }
}
// → 오프스크린 렌더링 3회 (1개 × 3텍스처)</code></pre>
<h3 id="spacing-파라미터">spacing 파라미터</h3>
<code>spacing</code> 파라미터는 morphing 거리를 제어합니다.
<pre><code>GlassEffectContainer(spacing: 30) {
 // 30pt 이내의 glass 요소들은 서로 morphing됨
 // 30pt 초과 시 별개의 glass로 표시
}</code></pre>
<blockquote>
"Elements within this distance visually blend and morph together during transitions."
</blockquote>
<h3 id="성능-비교">성능 비교</h3>

























<table><thead><tr><th>방식</th><th>CABackdropLayer</th><th>오프스크린 텍스처</th></tr></thead><tbody><tr><td>Container 없음 (3개)</td><td>3개</td><td>9개</td></tr><tr><td>Container 사용</td><td>1개</td><td>3개</td></tr><tr><td>절감율</td><td>66%</td><td>66%</td></tr></tbody></table>
즉, 여러 glass 효과가 있다면 반드시 <code>GlassEffectContainer</code>로 그룹화해야 오프스크린 렌더링을 최적화 할 수 있습니다. 
웬만한 경우에는 Apple에서 제공하는 방식대로 하는게 옳은거 같네요😊
<hr>
<h2 id="참고-자료">참고 자료</h2>
<h3 id="공식-문서">공식 문서</h3>
<ul>
<li><a href="https://developer.apple.com/documentation/swiftui/view/safeareabar(edge:alignment:spacing:content:)">Apple Developer - safeAreaBar</a></li>
<li><a href="https://developer.apple.com/documentation/swiftui/view/glasseffectunion(id:namespace:)">Apple Developer - glassEffectUnion</a></li>
<li><a href="https://developer.apple.com/documentation/SwiftUI/Applying-Liquid-Glass-to-custom-views">Apple Developer - Applying Liquid Glass to custom views</a></li>
<li><a href="https://developer.apple.com/videos/play/wwdc2025/323/">WWDC25 - Build a SwiftUI app with the new design</a></li>
</ul>
<h3 id="기술-블로그">기술 블로그</h3>
<ul>
<li><a href="https://swiftwithmajid.com/2025/07/16/glassifying-custom-swiftui-views/">Swift with Majid - Glassifying custom SwiftUI views</a></li>
<li><a href="https://swiftwithmajid.com/2025/07/23/glassifying-custom-swiftui-views-groups/">Swift with Majid - Glassifying custom SwiftUI views: Groups</a></li>
<li><a href="https://juniperphoton.substack.com/p/adopting-liquid-glass-experiences">JuniperPhoton - Adopting Liquid Glass: Experiences and Pitfalls</a></li>
<li><a href="https://www.hackingwithswift.com/articles/278/whats-new-in-swiftui-for-ios-26">Hacking with Swift - What's new in SwiftUI for iOS 26</a></li>
</ul>
<h3 id="오픈소스-참고">오픈소스 참고</h3>
<ul>
<li><a href="https://github.com/conorluddy/LiquidGlassReference">LiquidGlassReference - GitHub</a></li>
<li><a href="https://exploreswiftui.com/wwdc25">ExploreSwiftUI - WWDC25 iOS 26 SwiftUI Features</a></li>
</ul></div></div>

jwlee010523.log

GlassEffectContainer와 올바른 API 선택으로 오프스크린 렌더링 66% 줄이기
들어가며
이전 글에서는 SwiftUI 관점에서 렌더링 최적화 방법에 대해 얘기했다면, 이번 포스팅에서는 Liquid Glass의 제대로된 사용법이 무엇인지에 대해 초점을 맞춰보겠습니다. Liquid Glass는 자체만으로도 GPU 부하가 있는데, 잘못 사용한다면 엄청난 GPU 리소스 증가가 발생할 수 있기 때문입니다.
따라서 해당 포스팅에서는 Liquid Glass 관련 API들의 성능 특성과 올바른 사용법을 다뤄보겠습니다.
safeAreaBar vs safeAreaInset - 언제 무엇을 사용할까?
glassEffectID vs glassEffectUnion - 성능 차이 이해하기
GlassEffectContainer - 오프스크린 렌더링 최적화
1. SafeAreaBar vs SafeAreaInset
차이점
고정 헤더/푸터를 구현할 때, iOS 15부터 사용 가능한 safeAreaInset과 iOS 26에서 새로 도입된 safeAreaBar 중 선택해야 합니다.
항목
safeAreaInset
safeAreaBar (iOS 26)
블러 효과
X
O (edge effect)
스크롤 반응
고정만
스크롤 시 블러 적용
사용 시점
콘텐츠를 가리지 않을 때
블러 효과가 필요할 때
safeAreaInset
스크롤해도 고정되지만 블러 효과가 없습니다.
ScrollView {
 content
}
.safeAreaInset(edge: .top) {
 CustomHeader()
}
iOS 15부터 사용 가능
고정된 헤더/푸터 구현에 적합
콘텐츠를 가리는 게 없다면 이것으로 충분
safeAreaBar
스크롤 시 edge effect가 적용됩니다.
iOS 26에서 새로 도입되었으며, Liquid Glass 컴포넌트와 함께 사용됩니다.
List(0..<100) { i in
 Text("Row \(i)")
}
.navigationTitle("Safe Area Bar Example")
.safeAreaBar(edge: .bottom) { // Add content using the new API
 Button("Send") {
 // action
 }
 .buttonStyle(.glass)
 .padding()
}
즉, 블러 효과가 필요 없다면 safeAreaInset을 사용하고, Liquid Glass와 같은 요소를 사용한다면 safeAreaBar를 사용하면 될거 같네요.
2. glassEffectID vs glassEffectUnion
두 API 모두 glass 요소들을 연결하는 역할을 하지만, 성능 특성이 다릅니다.
핵심 차이
항목
glassEffectID
glassEffectUnion
목적
Morphing 전환 애니메이션
멀리 떨어진 요소 합치기
렌더링 타겟
O (뷰가 렌더링 타겟이 됨)
X
CPU 프로파일
렌더링 대기 시간 증가
영향 없음
사용 시점
요소 appear/disappear 시
항상 연결된 UI 표현 시
glassEffectID
Morphing 전환 애니메이션을 가능하게 합니다.
struct GlassEffectIDExample: View {
 @State private var isExpanded = false
 @Namespace private var namespace
 var body: some View {
 VStack(spacing: 24) {
 GlassEffectContainer(spacing: 40) {
 HStack(spacing: 40) {
 // Primary button - always visible
 Image(systemName: "pencil")
 .font(.title)
 .frame(width: 60, height: 60)
 .glassEffect()
 .glassEffectID("pencil", in: namespace)
 // Secondary button - toggleable with morphing animation
 if isExpanded {
 Image(systemName: "eraser.fill")
 .font(.title)
 .frame(width: 60, height: 60)
 .glassEffect()
 .glassEffectID("eraser", in: namespace)
 }
 // Third button - toggleable
 if isExpanded {
 Image(systemName: "paintbrush.fill")
 .font(.title)
 .frame(width: 60, height: 60)
 .glassEffect()
 .glassEffectID("brush", in: namespace)
 }
 }
 }
 Text("Tap to see morphing animation")
 .font(.caption)
 .foregroundStyle(.secondary)
 // Toggle button
 Button(isExpanded ? "Collapse Tools" : "Expand Tools") {
 withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
 isExpanded.toggle()
 }
 }
 .buttonStyle(.borderedProminent)
 .padding(.bottom, 40)
 }
 }
}
주의사항
뷰가 렌더링 타겟으로 지정됨
렌더링이 완료되어야 다음 값을 처리할 수 있음
CPU 프로파일에서 대기 시간 증가 관찰됨
ID가 걸려있으면 뷰가 렌더링 타겟으로 지정됨 → 렌더링 끝내야만 다음 값을 처리할 수 있음
glassEffectUnion
멀리 떨어진 요소들을 하나의 glass 형태로 합칩니다.
import SwiftUI
struct ContentView: View {
 @Namespace var namespace
 var body: some View {
 GlassEffectContainer {
 HStack {
 Image(systemName: "cloud.bolt.rain.fill")
 .frame(width: 80, height: 80)
 .glassEffect()
 .glassEffectUnion(id: 1, namespace: namespace)
 Image(systemName: "cloud.bolt.rain.fill")
 .frame(width: 80, height: 80)
 .glassEffect()
 .glassEffectUnion(id: 1, namespace: namespace)
 Image(systemName: "cloud.bolt.rain.fill")
 .frame(width: 80, height: 80)
 .glassEffect()
 .glassEffectUnion(id: 2, namespace: namespace)
 Image(systemName: "cloud.bolt.rain.fill")
 .frame(width: 80, height: 80)
 .glassEffect()
 .glassEffectUnion(id: 2, namespace: namespace)
 }
 }
 .frame(maxWidth: .infinity, maxHeight: .infinity)
 .background(.blue)
 }
}
#Preview {
 ContentView()
}
사용 시점
GlassEffectContainer의 spacing 파라미터로 커버되지 않는 거리
항상 연결되어 보여야 하는 UI (예: Apple Maps 줌 컨트롤)
제약 조건
동일한 effect type
유사한 shape
동일한 identifier와 namespace
Swift with Majid에서는 이를 다음과 같이 설명합니다
"The glassEffectUnion view modifier combines glasses only when they have the same effect types, similar shapes, and identifiers."
선택 가이드
전환 애니메이션이 필요하다면? → glassEffectID
 └─ 주의: 렌더링 타겟 지정으로 CPU 부하 증가
항상 연결된 UI가 필요하다면? → glassEffectUnion
 └─ spacing으로 안 되는 큰 간격일 때
즉, glassEffectID는 전환 애니메이션에만 사용해야 합니다. 불필요한 사용은 CPU 부하를 증가시키기 때문입니다.
3. GlassEffectContainer 성능 최적화
CABackdropLayer와 오프스크린 렌더링
각 glass 효과는 CABackdropLayer를 생성하며, 이는 3개의 오프스크린 텍스처를 필요로 합니다.
CABackdropLayer 1개 = 오프스크린 텍스처 3개
→ 오프스크린 렌더링이 많을수록 GPU 부하 증가
JuniperPhoton은 이를 다음과 같이 설명합니다
"Keeping the offscreen rendering count as less possible is crucial to achieve high performance."
Container 없이 사용 (비효율적)
// 비효율적: CABackdropLayer 3개 생성
HStack {
 Button("Action 1") { }
 .glassEffect() // CABackdropLayer 1
 Button("Action 2") { }
 .glassEffect() // CABackdropLayer 2
 Button("Action 3") { }
 .glassEffect() // CABackdropLayer 3
}
// → 오프스크린 렌더링 9회 (3개 × 3텍스처)
GlassEffectContainer 사용 (효율적)
// 효율적: CABackdropLayer 1개로 통합
GlassEffectContainer(spacing: 16) {
 HStack {
 Button("Action 1") { }
 .glassEffect()
 Button("Action 2") { }
 .glassEffect()
 Button("Action 3") { }
 .glassEffect()
 }
}
// → 오프스크린 렌더링 3회 (1개 × 3텍스처)
spacing 파라미터
spacing 파라미터는 morphing 거리를 제어합니다.
GlassEffectContainer(spacing: 30) {
 // 30pt 이내의 glass 요소들은 서로 morphing됨
 // 30pt 초과 시 별개의 glass로 표시
}
"Elements within this distance visually blend and morph together during transitions."
성능 비교
방식
CABackdropLayer
오프스크린 텍스처
Container 없음 (3개)
3개
9개
Container 사용
1개
3개
절감율
66%
66%
즉, 여러 glass 효과가 있다면 반드시 GlassEffectContainer로 그룹화해야 오프스크린 렌더링을 최적화 할 수 있습니다.
웬만한 경우에는 Apple에서 제공하는 방식대로 하는게 옳은거 같네요😊
참고 자료
공식 문서
Apple Developer - safeAreaBar
Apple Developer - glassEffectUnion
Apple Developer - Applying Liquid Glass to custom views
WWDC25 - Build a SwiftUI app with the new design
기술 블로그
Swift with Majid - Glassifying custom SwiftUI views
Swift with Majid - Glassifying custom SwiftUI views: Groups
JuniperPhoton - Adopting Liquid Glass: Experiences and Pitfalls
Hacking with Swift - What's new in SwiftUI for iOS 26
오픈소스 참고
LiquidGlassReference - GitHub
ExploreSwiftUI - WWDC25 iOS 26 SwiftUI Features

SwiftUI iOS 26 Liquid Glass 성능 최적화

댓글