Build a UIKit app with the new design (feat. WWDC 2025)

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

이번 포스팅에서는 WWDC 2025에서 소개된 Build a UIKit app with the new design 세션을 정리해보겠습니다 🙋🏻

 

---

Build a UIKit app with the new design

Liquid Glass를 앱에 가져와서 적용하는 방법에 대해 알아보는 세션입니다.

 

 

Liquid Glass는 반투명하고 역동적이죠.

UIKit의 기본적인 컴포넌트들은 새로운 SDK 업데이트를 통해 사용한다면 바로 이런 적용으로 보일 수 있어요.

 

---

Tab views and split views

탭 뷰와 스플릿 뷰에 새 디자인을 적용하고 컨텐츠 위에 띄우는 방법을 보겠습니다.

이미 새 버전에서 탭 바와 스플릿 컨트롤러는 Liquid Glass 디자인으로 업데이트 되었어요.

 

 

탭 바는 고정되어서 앱에서 더 나은 탐색이 가능해졌습니다.

앱의 개요를 빠르게 볼 수 있고 섹션 간 빠른 전환을 도와주죠.

컨텐츠 위에 떠오르고 스크롤 시 최소화 되어서 컨텐츠에 계속 집중할 수 있게 해줍니다.

스크롤 시 탭 바를 최소화 하려면 tabBarMinimizeBehavior을 사용해 원하는 방향으로 설정을 할 수 있어요.

 

 

 

탭 바 위에 액세서리 뷰가 있습니다.

UITabBarController는 탭 막대 위에 액세서리 뷰를 표시해 디자인을 맞춥니다.

 

탭 바를 최소화하면 액세서리 뷰가 아래로 내려가 탭바와 나란히 표시가 되죠.

하단 액세서리 뷰를 설정하려면 아래와 같이 적용해주면 됩니다.

 

 

 

요렇게 말이죠.

 

액세서리 뷰를 조정하려면 tabAccessoryEnvironmental 속성의 변화를 감지하도록 등록할 수 있어요.

또한, updateProperties를 통해 액세서리 뷰를 업데이트 할 수도 있습니다.

 

 

Automatic trait tracking과 updateProperties에 대해 더 자세히 알아보려면 아래 세션을 참고해주세요.

 

What’s new in UIKit - WWDC25 - Videos - Apple Developer

 

 

iPad에서도 탭 바와 사이드바가 Liquid Glass로 나타납니다.

 

 

UITabBar 컨트롤러를 사용하면 앱 컨텐츠 위에 떠있을 수 있죠.

UITab과 UITabGroup을 사용하면 앱에 자동으로 맞춤 적용되어 iPad의 탭 바와 사이드바 사이를 전환하게 해줍니다.

 

 

여기 영역은 사이드바를 위한 안전 영역 여백까지도 포함됩니다.

 

 

컨텐츠 이미지 뷰와 확장 뷰가 뷰 계층에 위치해 매끄럽게 확장되어 빈 공간을 채워줍니다.

 

 

해당 코드처럼 UIBackgroundExtensionView에 이미지 뷰 컨텐츠로 할당합니다.

그럼 위 예시처럼 자동으로 확장되어 전체 빈 공간을 채워주고 자연스럽게 Liquid Glass 효과를 가집니다.

 

만약 레이아웃을 커스텀하게 주고 싶다면 위처럼 automaticallyPlacesContentView를 false로 주고 제약 조건을 설정하면 됩니다.

 

---

Navigation and toolbars

네비게이션과 툴바의 새 디자인과 작동 방식도 알아볼께요.

 

 

이렇게 툴바나 검색바를 이용할때 시스템이 자동으로 각 항목을 시각적 그룹으로 나눠줍니다.

각 그룹은 글래스 배경을 공유하죠.

다만 완료/닫기 혹은 눈에 띄는 스타일의 버튼은 각각의 글래스 배경을 가집니다.

 

 

선택과 완료 버튼은 중앙 4개의 버튼 그룹과 글래스 배경을 공유하면 안됩니다.

우선 아이템을 navigationItem으로 등록하여 할당합니다.

여기서는 공유 버튼과 정보 버튼 사이에 분리를 위해 fixedSpace를 사용하면 됩니다.

 

 

이런식으로 틴트나 색조도 적용할 수 있죠.

 

 

이렇게 각 단일 배경을 가질 수 있고 만약 그룹화 하고 싶다면 아래와 같이 묶어줄 수 있습니다.

 

 

iOS 26의 새 디자인 시스템 중 하나로 투명한 바 배경이 기본값으로 적용됩니다.

탐색 및 툴 바에서 배경 커스텀을 제거해야 해요.

UIBarAppearance나 backgroundColor를 사용하면 글래스 디자인에 영향을 주기에 주의해야 합니다!

 

 

이렇게 이제 자동으로 시각 효과가 적용됩니다.

겹쳐지는 컨텐츠의 가독성을 높여주는데 이걸 엣지 효과라 부릅니다.

 

엣지 효과는 이렇게 시트와도 사용할 수 있어요.

 

 

Interaction을 생성하고 스크롤뷰에 컨텐츠를 할당하고 인터렉션을 넣는 방식이죠.

 

 

또한 이렇게 네비게이션에서도 전환 과정에서 효과가 적용됩니다.

 

---

Presentations

프레젠테이션 방식의 개선 사항을 알아보겠습니다.

알람 및 시트의 작동 방식으로 볼 수 있어요.

 

 

이렇게 팝오버도 기능 역시 글래스 효과가 적용됩니다.

애니메이션을 통해 시각적인 연속성을 가지고 자연스럽게 보여주죠.

이 작동은 메뉴에 자동으로 적용됩니다.

 

만약 바텀 시트에도 동일하게 적용하고 싶다면 아래와 같이 구현할 수 있어요.

 

 

zoom으로 설정하고 바 버튼 아이템을 클로저로 넣어주는것입니다.

 

이제 iOS 26에서 기본적인 시트는 디자인을 화면 높이에 맞게 자동으로 조정합니다.

그렇기에 새 글래스 배경을 적용하기 위해서는 커스텀한 배경은 제거하는것이 좋습니다.

 

 

 

iPad의 ActionSheet는 모든 소스 뷰에 고정이 되어 있는데요.

iOS 26부터는 아이폰에서도 동일하게 적용됩니다.

alertController에서 소스 아이템이나 소스 뷰를 popoverPresentationController에 꼭 설정해야 합니다.

 

 

소스 뷰를 할당하면 새로운 전환이 액션 시트에도 영향을 미칩니다.

 

---

Search

검색 경험이 어떻게 개선되었는지도 보겠습니다.

 

 

아이폰에서 이제는 서치 바가 자동으로 하단 툴 바로 갔습니다.

조금 더 사용성이 좋아졌어요.

이미 툴 바가 있다면, searchBarPlacementBarButtonItem을 추가하면 됩니다.

 

 

위치 설정도 중요하죠.

 

iPad에서는 macOS 툴 바와 동일해졌습니다.

 

 

뷰 사이 전환하며 검색을 가능하게 하려면 UITabBarController를 이용하면 됩니다.

 

 

요렇게 나타나죠.

만약 탭하면 이렇게 확장되어 쉽게 검색하도록 변형됩니다.

 

 

만약 아래와 같이 키보드도 자동으로 나오게 하려면 automaticallyActivateSearch를 활성화해주면 됩니다.

 

 

아이패드에서는 이렇게 가운데 조율됩니다.

 

 

---

Controls

버튼, 스위치, 슬라이더 등 제어 기능으로 넘어가서 살펴보겠습니다.

 

 

이렇게 자동으로 새로운 Liquid Glass 스타일을 가져요.

 

UIButtonConfiguration을 통해서 기존 버튼 스타일 외 두가지 Liquid Glass 스타일을 설정할 수 있습니다.

 

이것도 SwiftUI의 모디파이어 사용처럼 딸깍하고 쉽게 적용이 가능하네요!

 

슬라이더 사용시에도 역시나 적용되고 스트레치 효과도 적용됩니다.

 

 

iOS 26은 TrackConfiguration으로 슬라이더에 눈금을 표시합니다.

 

 

---

Custom elements

커스텀한 요소에 Liquid Glass를 적용하는 방법을 살펴볼께요.

Liquid Glass는 UIBlurEffect 등 다른 시각 효과와 구분됩니다.

따라서 사용하기 적합한 특정 위치가 존재할 수 있죠.

Liquid Glass는 상호작용 레이어로 설계되어 컨텐츠 위, 사용자의 손가락 아래에 떠 있으며 사용자가 직접 터치하는 주요 기능을 제공하죠.

 

 

그렇기에 앱의 가장 중요한 요소에 제한적으로 사용하는것이 좋습니다.

가능하다면 시스템에서 제공하는 뷰와 컨트롤을 통해서 사용하는것이 좋아요.

 

그래도 만들고 싶다?

 

UIVisualEffectView와 새로운 UIGlassEffect를 생성하고 애니메이션 블록에 glassEffect 설정을 하는것으로 작업할 수 있습니다.

 

 

기본적으로 글래스는 캡슐 모양입니다.

모양을 바꾸려면 cornerConfiguration을 사용하면 됩니다.

 

 

또한 글래스에도 라이트 다크 모드가 있어요.

선택된 userInterfaceStyle에 맞게 적용됩니다.

 

 

글래스를 기존 Glass 컨테이너에 추가하면 자동으로 새 디자인으로 커스텀 적용이 됩니다.

 

 

모서리가 컨테이너에 맞게 자동 적용되게 하려면 containerRelative를 이용합니다.

 

 

글래스는 사이즈에 따라 모양을 맞춤 조정합니다.

사이즈가 크면 불투명하고 작을 수록 투명해지죠.

 

레이블이나 이미지를 추가하려면 visualEffectView의 contentView를 사용하면 됩니다.

물론 동적 색상도 적용됩니다.

 

 

눈에 띄는 뷰를 설정하려면 글래스에 tintColor를 설정하고 다른 글래스 속성과 함께 애니메이션을 적용하면 됩니다.

 

 

물론 이 tintColor도 자유롭게 커스터마이징 할 수 있어요.

 

버튼과 같은 상호작용 컴포넌트는 사용자 상호작용에 반응하죠.

버튼을 탭하면 크기가 커지며 튀어 오르는것을 보여줍니다.

 

또한 더이상 글래스 이펙트가 필요없다면 nil로 꺼주면 되죠.

 

 

알파값을 조정하는 것보다 이렇게 효과 속성을 컨트롤하는게 더 권장됩니다.

 

현재는 하나의 글래스로만 예시를 살펴봤지만, 글래스에는 다중 요소 상호 작용 시 추가적인 내장 작동 방식도 존재합니다.

Liquid Glass는 다양한 모양과 매끄럽게 섞일 수 있죠.

UIGlassContainerEffect를 통해서 말이죠!

 

 

서로 떨어져있지만 영향을 미치기 시작하는 거리를 조정하려면 아래와 같이 spacing을 이용할 수 있어요.

 

 

또한 겹치는 프레임으로 애니메이션을 적용할 때 글래스 뷰는 하나의 모양으로 결합됩니다.

 

 

글래스를 여러 요소로 나누려면 우선 애니메이션 없이 같은 위치에 추가한 다음 애니메이션화를 하면 됩니다.

 

 

---

Conclusion

Liquid Glass 적용이 꽤나 편리하게 할 수 있도록 만들어진것 같습니다.

한번 해보고 싶네요 오랜만에 😃

 

---

References

Build a UIKit app with the new design - WWDC25 - Videos - Apple Developer