새로운 디자인으로 SwiftUI 앱 빌드하기

안녕하세요 저는 Franck입니다 SwiftUI 팀의 엔지니어죠 이번 시간에는 새 디자인으로 훌륭한 앱 만드는 법을 알아봅니다 iOS 26과 macOS Tahoe에서 앱의 디자인과 분위기 그리고 시스템 경험에 관한 큰 개선점이 있었습니다 그 중심에는 제어 기능과 탐색 요소를 위한 새로운 적응형 재료 Liquid Glass가 있죠 유리의 광학적 특성과 액체의 유동성에서 영감을 얻어 가볍고 동적인 재료를 만들었습니다 다양한 구성 요소 아래의 콘텐츠가 더 발전하도록 돕죠 콘텐츠를 스크롤하면 글래스는 자동으로 아래에 콘텐츠에 맞게 적용돼 밝게 또는 어둡게 변합니다 모든 플랫폼에서 새로운 모습으로 상호작용할 때 제어 기능은 살아 움직입니다 이제 토글이나 세그먼트 피커

슬라이더 같은 제어 기능은 상호작용 시 Liquid Glass로 변해 훌륭한 경험을 제공합니다 앱이 실행되는 모든 플랫폼에 개선점이 적용됩니다 'Liquid Glass 만나보기'를 시청해 새 재료 디자인에 대해 더 깊게 알아보세요 그리고 '새로운 디자인 시스템과 더 친숙해지는 법'을 확인하고 새 디자인을 사용하는 모범 사례도 알아보세요 때로는 인생에서 정말 중요한 것을 명확히 하고 거기에 집중하기 위해 자신을 재창조하고 더 큰 그림을 봐야 할 때도 있습니다 저는 오늘 이 지혜를 Landmarks 앱에 적용하려 합니다 Apple Developer 웹 사이트에서 사용할 수 있는 샘플 프로젝트죠 Apple 플랫폼 전반에서 새 디자인 시스템 요소를 소개하고 새로운 API를 채택해서 Landmarks 앱을 명확하게 구성하고 집중을 도우려 합니다 Xcode 26 SDK로 앱을 빌드할 때 UI 전반에서 달라진 점을 발견하실 수 있습니다 TapView나 NavigationSplitView 등 구조적 앱 구성 요소에 대한 업데이트부터 시작하겠습니다 그리고 도구 막대의 새로운 모습과 작동 방식을 다루고 일관성과 사용 편의성을 향상시킨 검색 경험에 대한 개선점을 공유하겠습니다 Liquid Glass로 제어 기능이 어떻게 살아나는지 보여 드리고 맞춤형 UI 요소에 글래스를 적용하는 방법을 설명하며 마무리하겠습니다

이 다섯 항목에는 각각 자동으로 적용되는 개선점과 경험을 더 사용자화할 수 있는 새 API가 있습니다 앱 구조는 앱 탐색법을 정의하는 API 제품군을 의미합니다

여기에는 수정자인 'NavigationSplitView', 'TabView’ 그리고 시트가 포함됩니다 모두 새 디자인을 위해 조정되었습니다 'NavigationSplitView'는 잘 정의된 계층을 따라 여러 개일 수 있는 루트 카테고리를 탐색하게 해주죠

이제 콘텐츠 위에 Liquid Glass 사이드바가 떠 있어 Landmarks 앱 내 멋진 히어로 배너의 분홍 꽃잎이 사이드바에 비치게 됩니다 하지만 Landmarks 팀이 이 훌륭한 여행지를 전부 방문해 아름다운 사진을 담아오며 사진이 잘리기를 바라진 않았겠죠 사이드바가 얼마나 멋지든간에요 새 'backgroundExtensionEffect' 수정자를 사용하면 콘텐츠 잘림 없이 뷰가 안전 영역 밖으로 확장됩니다

사이드바를 잠시 숨기면 뒤에서 어떤 일이 일어나는지 볼 수 있죠 이미지는 안전 구역 밖에서 미러링되고 흐려져 모든 내용을 표시하면서 아트워크를 확장합니다 새 디자인은 Liquid Glass를 더 사용해 Inspector를 빛냅니다 Landmarks 사이드바 반대편의 Inspector는 더 섬세한 레이어로 콘텐츠를 보여줍니다 그러면 Inspector가 선택된 항목과 연관성을 가지죠

'TabViews'는 항상 접근 가능한 최상위 탐색을 제공합니다 가능한 옵션의 개요를 한눈에 보도록 해주고 섹션간 전환을 최적화하면서 각 섹션의 맥락을 유지합니다

새 디자인으로 iPhone의 탭 막대는 콘텐츠 위에 떠 있고 스크롤을 최소화하도록 구성될 수 있습니다 덕분에 앱의 콘텐츠가 주인공으로 남을 수 있죠

'tabBarMinimizeBehavior' 수정자로 이 작동 방식을 채택하세요 이 예시에서 TV 앱은 'onScrollDown' 방식을 사용합니다

이 구성으로 반대 방향으로 스크롤하면 탭 막대가 다시 확장되죠

이제 당신의 앱에 음악 앱의 재생 보기처럼 바로 접근 가능한 추가 제어 기능이 있다고 가정해봅시다

'tabViewBottomAccessory’ 수정자로 막대 위에 뷰를 배치해 탭 막대의 축소 동작이 제공하는 추가 공간을 최대한 활용합니다

액세서리 보기에서 환경의 'tabViewBottomAccessoryPlacement'를 읽으세요 그리고 탭 막대 영역으로 축소 시 액세서리의 콘텐츠를 조정합니다

좋아요 이제 'NavigationSplitView'가 새 디자인으로 아름답게 Landmarks에 들어간 걸 보여드렸고 'TabView 기반' 앱을 채택하는 방법도 공유했습다 이제 시트를 살펴보죠 새 랜드마크 컬렉션을 생성할 때 랜드마크 옵션 시트가 표시됩니다 iOS 26에서 부분 높이 시트는 기본으로 Liquid Glass 배경과 함께 삽입돼죠

높이가 낮으면 하단 에지가 디스플레이의 둥근 모서리에 자리합니다

전체 높이 시트로 전환되면 글래스 배경화면은 점점 불투명해지고 화면 끝에 고정됩니다 기존에 'presentationBackground' 수정자를 사용해 맞춤형 배경을 시트에 적용해왔다면 맞춤형 배경을 제거하여 새 재료가 빛나게 해 보세요

시트는 해당되는 버튼에서 바로 확장되어 나타납니다 소스 뷰가 확장되며 프레젠테이션 콘텐츠가 나타나게 하려면 표시된 도구 막대 항목을 확대 및 축소 탐색 전환의 소스로 만드세요 그리고 시트의 콘텐츠를 전환의 목적지로 표시하세요

시트와 마찬가지로 메뉴나 알림, 팝오버 등 다른 표시 방식도 Liquid Glass 제어 기능에서 원활히 작동하며 동작보다 프레젠테이션 콘텐츠에 집중하게 합니다

새로운 디자인에서는 대화 상자도 해당되는 버튼에서 자동으로 확장되며 나타납니다

탄탄한 저희 앱 구조와 함께 도구 막대로 넘어가볼게요 새 디자인에서 도구 막대는 앱 콘텐츠 위에 떠 있는 Liquid Glass 표면에 위치하며 자동으로 아래의 콘텐츠에 맞게 적용됩니다 도구 막대 항목은 자동으로 그룹화됩니다 Xcode로 Landmarks 앱을 빌드하면 맞춤형 도구 막대 항목은 시스템 제공 뒤로 버튼이랑 별개로 그룹화됩니다

'즐겨찾기'와 '컬렉션에 추가’ 버튼은 관련된 동작이라는 점을 강조하고 싶습니다 저는 고정 간격에 새 'ToolbarSpacer' API를 사용해 각각 다른 그룹으로 나눴습니다

그룹된 동작이 관련 있음을 시각적으로 잘 보여줍니다 공유 링크 및 Inspector와 같은 분리된 동작은 구분되는 작동 방식을 가지죠 'ToolbarSpacer'로 도구 막대 항목 사이를 확장해 유연한 공간을 만들 수 있습니다

Mail 앱은 이 기술과 검색 및 구성 항목을 이용해 선행 정렬 그룹과 후행 정렬 그룹을 생성합니다

일부 도구 막대 항목은 시각적 그룹화 없이도 가능하죠 내 아바타를 보여주는 도서 앱의 항목이 그 예입니다 'sharedBackgroundVisibility' 수정자를 적용해 항목을 알맞은 그룹으로 배경 없이 분류합니다

Landmarks 앱에 친구들이 제 랜드마크 컬렉션에 반응하는 기능을 추가했습니다 새로운 반응이 있을 때 알림 항목에 표시기를 추가하고 싶습니다 달콤한 외부의 인정을 놓칠 수는 없으니까요

도구 막대 항목에 badge 수정자를 사용해 코드 한 줄로 달콤한 인정을 받아보세요

저는 도구 막대 항목의 콘텐츠에 'badge' 수정자를 적용해 표시기를 보여주려 합니다 도구 막대에서 항목을 그룹화하고 배지를 지정하는 것 외에도 새 디자인으로 도입된 변화가 더 있습니다 아이콘은 도구 막대 등 여러 환경에서 모노크롬 렌더링을 쓰죠

모노크롬 팔레트는 시각적 잡음을 줄이고 앱의 콘텐츠를 강조하고 가독성을 유지합니다

'.tint()' 수정자로 아이콘에 색조를 입히는 방법도 있지만 모노크롬을 사용하면 시각 효과뿐 아니라 의미도 전달할 수 있죠 콜투액션이나 다음 단계처럼요

새로운 디자인에서 제어 기능의 가독성을 유지하게 해주는 자동 '스크롤 에지 효과'는

시스템 도구 막대 아래 콘텐츠의 은은한 흐림, 페이드 효과입니다 앱의 막대 항목 뒤에 추가 배경 또는 어두움 효과가 있는 경우 간섭을 피하기 위해 효과를 반드시 삭제하세요

캘린더 앱처럼 많은 플로팅 요소가 있는 밀도 높은 UI는 'scrollEdgeEffectStyle' 수정자로 콘텐츠 효과를 더 선명하게 만들어보세요

도구 막대 얘기를 해 봤으니 이제 새 디자인을 이용해 스마트한 검색 경험을 만드는 방법을 알려드리겠습니다 플랫폼 전반 검색의 주요 패턴 2개에 대규모 업데이트가 있었죠 '도구 막대에서 검색하기'는 이제 화면 하단 필드에 위치하여 쉬운 사용이 가능합니다 iPad 및 Mac에서는 도구 막대의 상단 후행에 위치하죠 두 번째는 다중 탭 앱에서 전용 페이지로 취급되는 것입니다 Landmarks 앱에서 상단 후행 모서리에 검색을 배치했슴니다 이 위치에 배치할 때는 앱의 콘텐츠가 최대한 검색 가능하도록 만들어야 합니다

검색 필드가 Liquid Glass 표면에 나타납니다

탭해서 활성화하고 키보드를 불러낼 수 있죠 Landmarks에 이 변형을 사용하려고 'NavigationSplitView'에 'searchable' 수정자를 적용했습니다 여기서 수정자를 선언하는 것은 검색이 'NavigationSplitView’ 전체에 적용됐다는 의미입니다 열 하나에만 적용된 것이 아닙니다

이 변형은 iPhone에서 자동으로 맞춤 적용되어 검색 필드를 화면의 하단으로 가져옵니다

기기의 크기와 도구 막대 버튼 수 및 기타 요인에 따라 시스템은 검색 필드를 도구 막대 버튼으로 최소화할 수 있죠 지금 Mail 앱에서 보시는 것처럼요

버튼을 탭하면 키보드 위에 전체 너비의 검색 필드가 나타나죠

명시적으로 최소화 동작을 선택하고 싶다면 검색은 앱 경험의 주요 부분이 아니기 때문에 'searchToolbarBehavior' 수정자를 사용하면 됩니다

다중 탭 앱에서는 종종 전용 검색 페이지에서 검색이 이뤄지죠 이 패턴은 모든 저희 플랫폼의 앱에서 사용됩니다 예를 들자면 내 피트니스 트렌드를 확인하기 위한 건강 앱 등이 있죠

앱에서 이 작업을 수행하려면 탭 하나에서 검색 역할을 설정하고 TabView에 searchable 수정자를 배치하세요

이 탭이 선택되면 검색 필드가 탭 막대를 대신하고 탭의 콘텐츠가 표시됩니다

사용자는 브라우징 제안과 상호작용하거나 검색 필드를 탭하여 키보드를 불러오고 특정 검색어로 계속 검색합니다

iPad 및 Mac에서 검색 탭이 선택되면 검색 필드는 앱 브라우징 제안의 위쪽 중앙에 나타납니다 이런 패턴을 이용해 앱의 검색 경험을 유동성 있고 제어 가능하게 만드세요 제어 얘기가 나왔으니 표준 제어 기능 개선점을 보죠 새 디자인은 모든 플랫폼에서 버튼, 슬라이더, 메뉴 등 제어 기능에 대해 강한 가족 유사성을 가집니다

가장 일반적인 제어 기능인 버튼의 개선점에서 시작하려고 합니다 테두리가 있는 버튼은 이제 기본적으로 캡슐 모양으로 새 디자인의 곡선 모서리와 조화를 이룹니다 macOS의 초소형, 소형 및 중형 제어 기능의 둥근 직사각형 모양이 수평 밀도를 보존합니다

기존의 버튼 테두리 도형 제어자로 크기와 관계 없이 모양을 지정하게 해줍니다

새 디자인에서 제어 기능 높이가 업데이트되었습니다

macOS의 제어 기능 대부분은 크기가 약간 더 커서 제어 레이블 주위에 조금 더 많은 공간을 제공하죠 그리고 클릭 대상의 크기를 키웁니다

복잡한 Inspector와 팝오버 같은 기존 고밀도 레이아웃과의 호환성을 위해 기존의 'controlSize' 수정자를 단일 컨트롤에 적용하거나 전체 컨트롤 세트에 적용할 수 있습니다 그리고 가장 중요한 눈에 띄는 동작을 위한 초대형 크기의 버튼을 지원합니다 마지막으로 새로운 글래스 및 눈에 띄는 글래스 버튼 스타일로 앱의 모든 버튼에 Liquid Glass를 가져올 수 있죠 슬라이더로 넘어가서 새 기술 몇 가지를 알아보겠습니다

이제 눈금 표시를 지원합니다 'step' 매개변수로 슬라이더를 초기화하면 눈금 마크가 자동으로 나타납니다

각 눈금을 수동으로 배치할 수도 있죠

'Ticks' 클로저로 눈금의 위치를 지정하세요 저는 지금 60%와 90%에 눈금을 지정하고 있습니다 슬라이더로 특정 위치에서 트랙을 채우기 시작할 수 있죠 기본 값에서 왼쪽/오른쪽으로 조절하는 값을 표시할 때 매우 유용한 기능입니다 재생 시 재생 속도 값을 더 빠르게 혹은 느리게 선택하는 것과 같죠

'neutralValue' 매개변수로 시작 지점을 지정하세요 메뉴의 레이아웃은 플랫폼 전반에서 새 디자인과 일관됩니다 아이콘은 계속 선행 에지에 있고 이제 macOS에서도 사용됩니다 레이블 또는 표준 제어 기능 생성자를 사용한 API는 이제 두 플랫폼에서 동일한 결과를 생성합니다

SwiftUI의 제어 기능 외에도 새 디자인을 위해 당신의 제어 기능을 업데이트해 줄 다수의 새 API가 있습니다

제어 기능은 대부분 컨테이너와 완벽히 정렬되는 모서리를 가지고 있습니다 그 컨테이너가 iPhone일지라도요 이것을 '모서리 동심성'이라고 부르죠 예를 들어 시트 하단에 위치한 버튼은 시트의 모서리 중심에 맞게 정렬돼야 합니다

컨테이너와 자동으로 동심성을 유지하는 뷰를 구축하기 위해 동심원 직사각형을 사용합니다 'containerConcentric' 구성을 직사각형의 'corner' 매개변수에 전달해 화면 종류와 창 모양에 관계 없이 컨테이너에 맞게 자동으로 조절됩니다 새 디자인을 채택하는 가장 좋은 방법은 표준 앱 구조와 도구 막대, 검색 배치 및 제어 기능을 사용하는 거죠 하지만 때론 앱을 좀 더 사용자화 해야 합니다 앱을 위한 맞춤형 Liquid Glass 요소 빌드 방법도 알려드리죠 지도 앱이 아주 좋은 예시인데요 맞춤형 글래스 제어 기능을 지도 콘텐츠 위에 우아하게 띄우죠

비슷한 방식으로 방문한 랜드마크의 배지를 Landmark 앱에 추가하겠습니다 우선 Liquid Glass 효과를 이용해 맞춤형 배지 뷰를 만들어보죠

'glassEffect' 수정자를 이용해 맞춤형 뷰에 글래스를 추가합니다 기본적으로 글래스 효과는 콘텐츠 뒤의 캡슐 모양에 적용됩니다 SwiftUI는 자동으로 생생한 텍스트 색상을 사용하는데 화려한 배경에 맞춰 조정되며 가독성을 유지합니다

수정자에 모양을 제공해 글래스 효과 모양을 사용자화하세요

특히 중요한 뷰의 경우 'tint' 수정자를 사용하세요

도구 막대 버튼처럼 시각 효과만을 위해서가 아니라 의미를 전달하기 위해 사용하세요

글래스 효과에 텍스트를 넣으면 아래의 콘텐츠에 맞는 생동감 있는 색조를 사용합니다 iOS의 맞춤형 제어 기능 또는 상호작용 요소가 있는 컨테이너엔 글래스 효과에 'interactive' 수정자를 추가하면 됩니다 글래스는 확대/축소, 튀어오르기 및 은은하게 빛나기 등 도구 막대 버튼과 슬라이더 효과에 맞춰 사용자 상호작용에 반응하죠 이제 맞춤형 배지가 있으니 여러 배지를 한번에 가져와서 서로 상호작용하고 어우러지게 해 보죠 'GlassEffectContainer'를 사용해 다중 글래스 요소를 결합하세요 시각적 정확성을 위해 반드시 그룹화해야 합니다 글래스 재료는 빛을 반사하고 굴절하며 주변 콘텐츠에서 색상을 가져옵니다 더 큰 영역의 콘텐츠를 샘플링해 효과를 적용할 수 있습니다

하지만 다른 글래스를 샘플링할수는 없죠 주변에 다른 컨테이너의 글래스 요소를 두는 건 일관성 없는 작동 방식으로 이어집니다

글래스 컨테이너는 해당 요소들이 동일한 샘플링 지역을 공유해 일관된 시각 결과를 제공하게 하죠

'GlassEffectContainer'로 Lankmarks 앱에서 배지를 그룹화 중입니다 내 배지를 확장할 때 나오는 자연스러운 전환 효과를 보세요

당신의 글래스 컨테이너에도 같은 효과를 줄 수 있죠 'glassEffectID' 수정자를 사용해서요

구성을 위해 먼저 로컬 네임스페이스를 선언합니다 그리고 네임스페이스를 확장된 배지 스택의 각 글래스 효과 요소 및 토글 버튼과 연결합니다 버튼을 다시 탭하면 업적 배지가 우아하게 다시 들어갑니다

Liquid Glass 효과는 기능을 강조하는 최고의 방법으로 당신의 앱을 특별하게 만들어줍니다 새 디자인 적용 방법과 Liquid Glass 사용법을 간단히 봤는데 즐거웠길 바랍니다 이제 당신 차례입니다 Xcode 26으로 빌드한 앱에서 새 디자인을 채택하세요 표준 제어 기능을 사용해 자동으로 많은 기능을 얻을 수 있죠

앱의 흐름을 검증하고 변경이 필요한 뷰가 있는지 식별하세요 시트와 도구 막대 아래의 제거 가능한 배경 색상에 특히 주의하세요 마지막으로 Liquid Glass로 풍부한 표현의 구성 요소를 만들고 앱을 돋보이게 하세요 새 디자인과 함께 멋진 시간 보내시기 바랍니다 계속 빛나세요