Liquid Glass 디자인 시스템 (iOS 26)

Liquid Glass 디자인 시스템 (iOS 26)

Apple의 Liquid Glass 구현 패턴입니다. Liquid Glass는 뒤에 있는 콘텐츠를 흐리게 처리(blur)하고, 주변 콘텐츠의 색상과 빛을 반사하며, 터치 및 포인터 상호작용에 반응하는 동적 머티리얼(material)입니다. SwiftUI, UIKit 및 WidgetKit 통합 방법을 다룹니다.

사용 시점

• 새로운 디자인 언어를 적용하여 iOS 26+용 앱을 구축하거나 업데이트할 때
• 유리(glass) 스타일의 버튼, 카드, 툴바 또는 컨테이너를 구현할 때
• 유리 요소 간의 모핑(morphing) 전환 효과를 만들 때
• 위젯에 Liquid Glass 효과를 적용할 때
• 기존의 blur/material 효과를 새로운 Liquid Glass API로 마이그레이션할 때

핵심 패턴 — SwiftUI

기본 유리 효과 (Basic Glass Effect)

어떤 뷰에든 Liquid Glass를 추가하는 가장 간단한 방법:

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect()  // 기본값: regular 변형, 캡슐 모양

모양 및 틴트(Tint) 사용자 정의

Text("Hello, World!")
    .font(.title)
    .padding()
    .glassEffect(.regular.tint(.orange).interactive(), in: .rect(cornerRadius: 16.0))

주요 사용자 정의 옵션:

• .regular — 표준 유리 효과
• .tint(Color) — 강조를 위해 색상 틴트 추가
• .interactive() — 터치 및 포인터 상호작용에 반응
• 모양: .capsule (기본값), .rect(cornerRadius:), .circle

유리 버튼 스타일

Button("Click Me") { /* 액션 */ }
    .buttonStyle(.glass)

Button("Important") { /* 액션 */ }
    .buttonStyle(.glassProminent)

여러 요소를 위한 GlassEffectContainer

성능 및 모핑을 위해 항상 여러 유리 뷰를 컨테이너로 감싸세요:

GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()

        Image(systemName: "eraser.fill")
            .frame(width: 80.0, height: 80.0)
            .font(.system(size: 36))
            .glassEffect()
    }
}

spacing 파라미터는 병합 거리를 제어합니다 — 요소들이 가까워질수록 유리 모양이 함께 섞입니다.

유리 효과 통합 (Uniting Glass Effects)

glassEffectUnion을 사용하여 여러 뷰를 단일 유리 모양으로 결합하세요:

@Namespace private var namespace

GlassEffectContainer(spacing: 20.0) {
    HStack(spacing: 20.0) {
        ForEach(symbolSet.indices, id: \.self) { item in
            Image(systemName: symbolSet[item])
                .frame(width: 80.0, height: 80.0)
                .glassEffect()
                .glassEffectUnion(id: item < 2 ? "group1" : "group2", namespace: namespace)
        }
    }
}

모핑 전환 (Morphing Transitions)

유리 요소가 나타나거나 사라질 때 매끄러운 모핑 효과를 생성하세요:

@State private var isExpanded = false
@Namespace private var namespace

GlassEffectContainer(spacing: 40.0) {
    HStack(spacing: 40.0) {
        Image(systemName: "scribble.variable")
            .frame(width: 80.0, height: 80.0)
            .glassEffect()
            .glassEffectID("pencil", in: namespace)

        if isExpanded {
            Image(systemName: "eraser.fill")
                .frame(width: 80.0, height: 80.0)
                .glassEffect()
                .glassEffectID("eraser", in: namespace)
        }
    }
}

Button("Toggle") {
    withAnimation { isExpanded.toggle() }
}
.buttonStyle(.glass)

사이드바 아래로 가로 스크롤 확장

가로 스크롤 콘텐츠가 사이드바나 인스펙터 아래로 확장되도록 하려면, ScrollView 콘텐츠가 컨테이너의 리딩/트레일링 가장자리에 닿도록 하세요. 레이아웃이 가장자리까지 확장되면 시스템이 사이드바 아래 스크롤 동작을 자동으로 처리하므로 추가적인 수정자는 필요하지 않습니다.

핵심 패턴 — UIKit

기본 UIGlassEffect

let glassEffect = UIGlassEffect()
glassEffect.tintColor = UIColor.systemBlue.withAlphaComponent(0.3)
glassEffect.isInteractive = true

let visualEffectView = UIVisualEffectView(effect: glassEffect)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.layer.cornerRadius = 20
visualEffectView.clipsToBounds = true

view.addSubview(visualEffectView)
NSLayoutConstraint.activate([
    visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    visualEffectView.widthAnchor.constraint(equalToConstant: 200),
    visualEffectView.heightAnchor.constraint(equalToConstant: 120)
])

// contentView에 콘텐츠 추가
let label = UILabel()
label.text = "Liquid Glass"
label.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.contentView.addSubview(label)
NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
])

여러 요소를 위한 UIGlassContainerEffect

let containerEffect = UIGlassContainerEffect()
containerEffect.spacing = 40.0

let containerView = UIVisualEffectView(effect: containerEffect)

let firstGlass = UIVisualEffectView(effect: UIGlassEffect())
let secondGlass = UIVisualEffectView(effect: UIGlassEffect())

containerView.contentView.addSubview(firstGlass)
containerView.contentView.addSubview(secondGlass)

스크롤 가장자리 효과 (Scroll Edge Effects)

scrollView.topEdgeEffect.style = .automatic
scrollView.bottomEdgeEffect.style = .hard
scrollView.leftEdgeEffect.isHidden = true

툴바 유리 통합

let favoriteButton = UIBarButtonItem(image: UIImage(systemName: "heart"), style: .plain, target: self, action: #selector(favoriteAction))
favoriteButton.hidesSharedBackground = true  // 공유 유리 배경에서 제외

핵심 패턴 — WidgetKit

렌더링 모드 감지

struct MyWidgetView: View {
    @Environment(\.widgetRenderingMode) var renderingMode

    var body: some View {
        if renderingMode == .accented {
            // 강조(Accented) 모드: 흰색 틴트가 적용된 테마 유리 배경
        } else {
            // 풀 컬러 모드: 표준 모양
        }
    }
}

시각적 계층 구조를 위한 강조 그룹 (Accent Groups)

HStack {
    VStack(alignment: .leading) {
        Text("Title")
            .widgetAccentable()  // 강조 그룹
        Text("Subtitle")
            // 기본 그룹
    }
    Image(systemName: "star.fill")
        .widgetAccentable()  // 강조 그룹
}

강조 모드에서의 이미지 렌더링

Image("myImage")
    .widgetAccentedRenderingMode(.monochrome)

컨테이너 배경

VStack { /* 콘텐츠 */ }
    .containerBackground(for: .widget) {
        Color.blue.opacity(0.2)
    }

주요 디자인 결정

결정 사항	근거
GlassEffectContainer 래핑	성능 최적화, 유리 요소 간 모핑 가능
spacing 파라미터	병합 거리 제어 — 요소들이 얼마나 가까워야 섞일지 미세 조정
@Namespace + glassEffectID	뷰 계층 구조 변경 시 매끄러운 모핑 전환 가능
interactive() 수정자	터치/포인터 반응에 명시적으로 참여 — 모든 유리가 반응할 필요는 없음
UIKit의 UIGlassContainerEffect	일관성을 위해 SwiftUI와 동일한 컨테이너 패턴 적용
위젯의 강조 렌더링 모드	사용자가 강조된 홈 화면을 선택할 때 시스템이 틴트 유리 적용

모범 사례

• 항상 GlassEffectContainer를 사용하세요. 여러 형제 뷰에 유리를 적용할 때 사용하면 모핑이 가능해지고 렌더링 성능이 향상됩니다.
• .glassEffect()는 다른 모양 수정자(frame, font, padding) 다음에 적용하세요.
• .interactive()는 사용자 상호작용에 응답하는 요소(버튼, 토글 항목 등)에만 사용하세요.
• 컨테이너의 간격(spacing)을 신중하게 선택하여 유리 효과가 병합되는 시점을 제어하세요.
• 뷰 계층 구조를 변경할 때 withAnimation을 사용하세요. 매끄러운 모핑 전환이 가능해집니다.
• 라이트 모드, 다크 모드, 강조/틴트 모드 등 다양한 모양에서 테스트하세요.
• 접근성 대비를 확인하세요. 유리 위의 텍스트는 반드시 가독성을 유지해야 합니다.

피해야 할 안티패턴

• GlassEffectContainer 없이 여러 개의 독립적인 .glassEffect() 뷰 사용
• 유리 효과를 너무 많이 중첩 사용 — 성능 및 시각적 선명도 저하
• 모든 뷰에 유리 적용 — 상호작용 요소, 툴바, 카드 등에 예약하여 사용
• 코너 반경(corner radii) 사용 시 UIKit에서 clipsToBounds = true 누락
• 위젯의 강조 렌더링 모드 무시 — 강조된 홈 화면 모양을 해침
• 유리 뒤에 불투명한 배경 사용 — 반투명 효과를 무효화함

사용 사례

• 새로운 iOS 26 디자인이 적용된 내비게이션 바, 툴바 및 탭 바
• 플로팅 액션 버튼 및 카드 스타일 컨테이너
• 시각적 깊이와 터치 피드백이 필요한 대화형 컨트롤
• 시스템의 Liquid Glass 모양과 통합되어야 하는 위젯
• 관련 UI 상태 간의 모핑 전환 효과