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

Apple의 프레임워크 엔지니어링 매니저 Jeff Nadeau입니다 '새로운 디자인으로 AppKit 앱 빌드하기'를 시청하고 계시죠 새로운 macOS 디자인은 Mac 앱의 모양과 느낌을 관통하는 공통된 기반이며 시스템 전반에 걸쳐 복습 자료와 제어 기능을 갖추고 있습니다 새로운 디자인의 핵심 요소는 Liquid Glass 재료입니다 빛을 반사하고 굴절시키는 반투명한 표면이죠 사용자 인터페이스에 역동성과 깊이를 더합니다 AppKit에는 새 디자인을 적용에 필요한 모든 것이 있습니다 프레임워크의 주요 변경사항을 안내하겠습니다 macOS Tahoe에서 기대할 수 있는 동작에 대해 간략히 설명해보고 새 디자인 채택 시 미세 조정이 가능한 새로운 API도 설명해 드리겠습니다 변경 사항은 위에서부터 순서대로 살펴보겠습니다 먼저 애플리케이션의 기본 구조 구성 요소부터 시작합니다 그런 다음 스크롤 효과를 소개하겠습니다 에지 투 에지 스크롤 콘텐츠의 가독성을 높이는 시각 효과죠 제어 기능 외관과 레이아웃도 크게 업데이트 되었습니다 마지막으로, Liquid Glass 재료에 대해 자세히 알아보겠습니다 작동 방식과 커스텀 UI 요소에 글래스를 도입할 때 사용하는 AppKit API에 대해서도 알아볼 것입니다 앱 구조부터 시작하겠습니다 새로운 디자인 시스템은 Mac 창의 모양을 변경하고 주요 구조 영역을 글래스로 프레이밍합니다 그 영역 중 하나는 도구 막대입니다 새로운 디자인 시스템에서 도구 막대 요소는 글래스 재료 위에 배치됩니다 전체 도구 막대가 콘텐츠 위에 떠 있는 것처럼 보이도록 해 창 안의 계층을 강화하죠 글래스는 또한 논리적 그룹을 통해 제어 기능을 하나로 모읍니다 이는 각각 단 하나의 행동을 나타내기 때문에 AppKit은 글래스 하나에 여러 도구 막대 버튼을 자동으로 그룹화합니다 다양한 유형의 제어 기능이 자체 글래스 요소로 분리됩니다 세분화된 제어 기능, 팝업 버튼 및 검색 제어 기능과 같은 요소로요 AppKit은 각 항목의 제어 보기 유형에 따라 자동으로 그룹화를 결정합니다 자동 동작을 오버라이드 하려면 NSToolbarItemGroup을 사용해 항목을 그룹화하거나 스페이서를 삽입하여 항목을 분리합니다 Liquid Glass 재료는 상황에 맞게 적응하고 지능적으로 반응하죠 뒤에 있는 콘텐츠의 밝기에 맞게 모습을 바꾸는 것처럼요 도구 막대 글래스는 스크롤된 콘텐츠가 특히 밝거나 어두운 경우 밝거나 어둡게 변하기도 합니다 이 외관 변경사항은 NSAppearance 시스템을 통해 도구 막대 콘텐츠에 전달됩니다 따라서 다크 모드 지원에 필요했던 모든 작업이 여기에도 적용됩니다 NSToolbar는 모든 도구 막대 항목 뒤에 글래스를 자동 배치합니다 그러나 모든 항목을 유리 위에 배치해서는 안 되겠죠 커스텀 제목이나 상태 표시자같은 비상호작용 항목에는 글래스 재료를 사용하지 않아야 합니다

사진 도구 막대의 정보와 텍스트가 그 예입니다 글래스 재료가 뒤에 놓여져 있어 거의 버튼처럼 보이죠 글래스는 isBordered 속성을 거짓으로 설정해 NSToolbarItem에서 제거할 수 있습니다 이제 훨씬 좋아 보이네요

나머지 도구 막대 항목에 대해 글래스 재료는 색조라는 또 다른 멋진 기능을 제공합니다 NSToolbarItem의 새로운 스타일 속성을 활용해 눈에 띄는 스타일을 지정하세요 눈에 띄는 스타일은 글래스에 강조 색상을 입힙니다 중요한 작업을 강조하거나 상태를 표시할 때 쓰기 좋죠 눈에 띄는 도구 막대 항목의 모양을 추가로 사용자화하려면 backgroundTintColor 속성으로 글래스의 특정 색상을 선택합니다 도구 막대 항목에 이목을 집중시킬 또 다른 방법은 배지입니다 NSItemBadge API를 사용하여 도구 막대 항목이 새로운 또는 보류 중인 콘텐츠로 이동하는지를 나타냅니다 예를 들어 배지를 사용하여 읽지 않은 메시지 수를 표시하거나 새 알림의 존재를 알릴 수 있습니다 글래스 도구 막대를 보았으니 창의 주요 콘텐츠로 넘어가보죠 종종 Split View를 사용하여 구성되는 요소죠 새로운 디자인에서 사이드바는 창의 콘텐츠 위에 떠 있는 유리 한 장으로 나타납니다 Inspector는 에지 투 에지 유리를 사용해 콘텐츠 옆에 두죠 NSSplitViewController를 이용해 앱에서 효과를 사용하세요 사이드바 또는 Inspector 동작으로 분할 항목을 생성하는 경우 AppKit은 적절한 글래스 재료를 자동으로 제공합니다 이제 사이드바가 유리 위에 얹혔으니 더 이상 레거시 사이드바 자료가 필요하지 않습니다 NSVisualEffectView로 사이드바 안의 재료를 표시하려는 경우 글래스 재료가 드러나지 않도록 가릴 것입니다 보기 계층에서 시각 효과 뷰를 제거해야 합니다

지금은 사이드바 글래스가 창 위에 떠 있는 것처럼 보이니 근처에 있는 분할된 콘텐츠 위에 나타날 수 있습니다 수평으로 스크롤 가능한 콘텐츠나 슬라이드해 스와이프 동작을 드러내는 목록 항목, 맵 또는 영화 포스터 같이 사이드바 영역으로 확장하는 풍부한 콘텐츠라면 이 방법이 잘 작동합니다 분할된 콘텐츠를 사이드바 아래에 표시되도록 하려면 Automatically Adjust Safe Area Insets 속성을 참으로 설정합니다 사이드바 자체가 아닌 사이드바 아래에서 확장하려는 콘텐츠에 대해 이를 설정해야 합니다 이 속성이 참일 때 NSSplitView는 사이드바 아래에 해당 항목의 프레임을 확장해 가려지지 않은 영역에 콘텐츠를 표시하도록 도와줍니다 사진이나 아트워크와 같은 풍부한 콘텐츠는 사이드바 속 떠 있는 글래스 재료를 정말 돋보이게 해주지만 그 효과 때문에 일부 영역을 가리는 것은 바람직하지 않습니다 이 App Store 포스터는 에지 투 에지로 표시될 때 눈에 띄는 효과를 내지만, 아트워크에는 사이드바 크기를 수용할 만한 네거티브 공간이 없습니다 사이드바를 숨기면 실제로 무슨 일이 일어나는지 알 수 있죠 콘텐츠가 미러링되고 흐려져 아트워크 내용을 흐리게 하지 않고 외관을 확장합니다 AppKit에는 이 효과를 제공하는 새로운 API가 있습니다

NSBackgroundExtensionView입니다 보기 영역 중 가려지지 않은 부분을 안전한 영역으로 사용해 콘텐츠를 배치하고 시각적 효과를 사용해 에지 투 에지로 외관을 확장하는 뷰입니다 NSBackgroundExtensionView를 생성하고 분할된 항목의 전체 프레임을 채우도록 배치해 실행합니다 ContentView를 할당해 안전 영역에 배치하여 떠 있는 사이드바를 피합니다 다 됐습니다 백그라운드 확장 보기가 자동으로 콘텐츠 복제본을 만들어 안전 영역 밖의 공간을 채웁니다 도구 막대와 같이 떠 있는 사이드바는 동심성이라는 새 디자인 시스템의 핵심 요소를 시연합니다 각 요소는 컨테이너의 모서리 반경에 꼭 맞는 곡률로 디자인되었죠 이 경우 창이 그렇습니다 이 유사성은 쌍방으로 성립됩니다 새 디자인 시스템에서 창은 부드럽고 여유로운 코너 반경으로 디자인되었으며 창의 스타일에 따라 변화합니다 이제 도구 모음이 있는 창에는 더 큰 반경이 사용됩니다 이는 글래스 도구 막대 요소를 동심으로 감싸도록 설계되었으며 도구 막대 크기에 맞게 확장합니다 제목 표시 막대만 있는 창엔 아직 더 작은 모서리 반경이 적용되어 창 제어 기능을 촘촘하게 감쌉니다 더 큰 모서리는 부드러운 느낌과 우아한 동심성을 줍니다 콘텐츠를 창 에지와 가까이 클립할 수도 있습니다 모서리에 중첩되는 콘텐츠를 배치하려면 새로운 NSViewLayoutRegion API를 사용합니다 레이아웃 영역은 뷰의 영역을 설명합니다 안전 영역과 같지만 모서리 회피와 같은 기능이 내장되어 있습니다 모서리의 크기에 따라 영역을 가로 또는 세로로 삽입할 수 있습니다 API에 대해 다루겠습니다 안전 영역 또는 표준 레이아웃 여백에서 영역을 확보할 수 있습니다 이 영역에는 코너 적응 기능이 포함되어 영역에 수평 또는 수직으로 삽입할 수 있습니다 레이아웃 영역에서 layoutGuide 메서드를 사용해 자동 레이아웃 제한을 적용하는 안내를 얻어보세요 또한 영역의 원시 지오메트리를 에지 삽입 또는 현재의 사각형 형태로 얻을 수도 있습니다

새 API의 실제 예시를 참고해보겠습니다 새 폴더 버튼이 코너와 맞닿는군요 접촉이 없도록 영역을 제한하고 싶습니다 updateConstraints 메서드에서 수평 모서리 적응을 포함한 안전 영역 레이아웃 가이드를 얻어보죠 레이아웃 가이드는 일반적인 안전 구역 레이아웃 가이드와 같지만 모서리와 더불어 에지에 추가 삽입을 포함하죠

그런 다음 버튼의 지오메트리와 안전 영역 가이드를 연결하기 위해 레이아웃 제한 조건을 여럿 만듭니다 몇 줄의 코드만으로 이제 버튼이 모서리 옆으로 잘 옮겨졌네요 이제 스크롤 에지 효과를 소개하겠습니다 새 디자인은 콘텐츠가 에지 투 에지로 흐르도록 합니다 Liquid Glass 요소가 그 위에 얹히죠 글래스와 콘텐츠를 분리하기 위해 시스템은 둘이 겹치는 영역에 시각적 효과를 적용합니다 이 효과는 두 가지로 제공됩니다 콘텐츠를 점진적으로 흐리게 하는 소프트 에지 스타일과 콘텐츠와 떠 있는 요소를 더 분명히 구분하기 위해 보다 불투명한 요소를 뒷대는 하드 에지 스타일입니다

스크롤 가능한 콘텐츠의 경우 스크롤 에지 효과는 NSScrollView 안에 있습니다 스크롤 보기는 효과 위에 떠 있는 콘텐츠를 기반으로 효과의 크기와 모양을 변형합니다 떠 있는 요소가 오고 갈 때 효과가 자동으로 조정됩니다 스크롤 에지 효과는 도구 막대 항목, 제목 표시줄 액세서리 새 유형의 액세서리, 분할 항목 액세서리 아래에 자동 적용됩니다 분할 항목 액세서리는 제목 표시줄 액세서리와 매우 유사합니다 Split View 제어기 내에서 하나의 분할에만 적용된다는 것만 빼면요 분할의 상단 또는 하단 에지에 배치할 수도 있죠 분할 항목 액세서리를 추가하려면 NSSplitViewItemAccessoryViewController를 생성하고 상단 및 하단 정렬 액세서리 보기 제어 기능 메서드를 사용해 Split View 항목에 첨부할 수 있습니다 제목 막대 액세서리와 같이 분할 항목 액세서리는 떠 있는 콘텐츠를 스크롤 에지 효과에 통합하기 가장 좋습니다 효과의 크기와 모양에 영향을 주며 콘텐츠 안전 영역을 삽입하여 콘텐츠 레이아웃을 간소화합니다 그 어떤 디자인 시스템도 제어 기능 없이는 완성되지 않죠 macOS Tahoe의 제어 기능이 완전히 새로운 모습을 갖췄습니다 새로운 디자인은 기기 간에 더 일관적인 유사성을 만들어내죠 macOS, iOS 및 iPadOS 에서 버튼, 스위치 및 슬라이더 등 여러 요소의 외관을 통합합니다 이러한 변경사항은 Mac 컨트롤에서 기대할 수 있는 특성과 기능을 유지하기 위해 신중하게 적용되었습니다

MacOS 제어 기능은 다양한 표준 크기로 제공됩니다 초소형부터 대형까지 다양하죠 이 덕분에 제어 기능의 밀도와 계층을 다양한 수준으로 유지할 수 있습니다 MacOS Tahoe에는 여기에 한 가지 크기가 더 추가되었습니다 가장 중요한 행동을 강조하기 위한 초대형 크기죠 초대형은 애플리케이션에서 가장 눈에 띄는 행동을 나타낼 때 이상적인 크기입니다 미디어 플레이어에서 음악을 대기열에 올리거나 커뮤니케이션 앱에서 전화를 거는 등 앱을 실행하는 이유가 되는 주된 동작입니다 새로운 크기 외에도 제어 기능의 정도를 다시 구상했습니다

이전 macOS 버전과 비교해 초소형, 소형 및 중형 제어 기능의 크기를 약간 더 키워 제어 기능 라벨 주변 공간을 넓혔고 클릭할 요소의 크기를 키웠습니다 다양한 제어 높이에 적응시키려면 제어 기능 높이를 하드 코딩하지 말고 AutoLayout을 사용하세요 복잡한 Inspector 및 팝오버같은 기존 고밀도 레이아웃과의 호환성을 위해 AppKit은 Mac OS의 이전 릴리즈와 일치시킬 API를 제공합니다 NSView에서 새로운 prefersCompactControlSizeMetrics 속성을 사용합니다 이 속성은 보기 계층 구조에서 상속됩니다 이것을 참으로 설정하면 AppKit이 이전 macOS 릴리즈와 호환되는 사이즈 사양으로 돌아갑니다 새로운 디자인 시스템은 몇 가지 새로운 제어기 모양도 도입합니다 초소형부터 중형 크기에는 여전히 모서리가 둥근 직사각형 모양이 적용되어 가로 밀도가 더 높습니다 대형과 초대형 크기는 캡슐처럼 둥근 모양이 적용되어 추가적인 공간을 더 잘 활용하게 해주죠 맞춤 디자인에 동심성을 갖추려면 선호하는 모양을 재정의해 제어 기능에 입힐 수 있습니다 이 예에서는 중형 제어 기능을 사용해 맞춤법 검사용 맞춤형 콜아웃 막대를 만들었습니다 막대용 컨테이너는 캡슐 모양으로 구성되었기 때문에 둥근 직사각형 제어 기능의 내부와는 잘 들어맞지 않습니다 borderShaped 속성의 완벽한 사용 사례입니다 이 API를 사용하면 버튼과 팝업 버튼, 세분화된 컨트롤의 모양을 재정의할 수 있습니다

이러한 캡슐 모양을 적용하기 위해 제어 기능을 오버라이드하면 커스텀 컨테이너에 잘 들어 맞습니다

모양 외에도 새 글래스 베젤 스타일을 사용해 버튼의 재료를 사용자화할 수 있습니다 베젤 스타일은 Liquid Glass 재료로 표준 버튼 뒤로가기를 대체합니다 다른 콘텐츠 위에 띄울 버튼에 적합하죠 글래스 베젤 스타일은 주어진 색상으로 글래스에 색을 입히는 기존 bezelColor 속성과 호환됩니다 AppKit에는 제어 프로미넌스라는 아이디어도 새롭게 도입되었습니다 버튼이 눈에 띄는 정보에 변형을 주면 색상에 설정된 시각적 무게감의 수준을 제어할 수 있습니다 이를 통해 기본 버튼처럼 같은 인터페이스에서 프로미넌스를 더 높이지 않고도 버튼에 색을 추가할 수 있습니다 이 테크닉은 삭제 버튼에 사용됩니다 눈에 띄는 빨간색 덕분에 작업이 삭제와 관련된 것을 알 수 있죠 하지만 주변 제어 기능에 비해 너무 도드라지지는 않아야 합니다

눈에 띄는 색조 유형은 네 가지가 있습니다 스타일과 구성에 적합하도록 프로미넌스 강도를 선택해야 하는 자동 유형과 색조를 최소화해 적용하거나 적용하지 않는 없음 유형 색조를 차분히 적용하는 2차 유형 그리고 가장 눈에 띄는 색조를 적용하는 기본 유형이 있습니다

버튼에 프로미넌스가 낮은 색조를 적용하려면 tintProminence 속성을 2차로 설정합니다 기본적으로 강조 색상을 사용하여 표시됩니다 이 예에서는 재생 버튼을 기본 버튼처럼 작동하도록 만들고 싶기 때문에 약간 다르게 다뤄보겠습니다 그래서 반환 키에 상응하는 키를 설정했습니다 이렇게 하면 버튼이 예측 가능한 방식으로 키보드에 반응합니다 또한 기본 버튼이기 때문에 가장 프로미넌스가 강한 수준으로 색조를 자동으로 적용하게 됩니다

색조 프로미넌스에는 슬라이더 기능도 있습니다 tintProminence API를 사용하면 강조 색상으로 트랙을 채울지 결정할 수 있습니다 슬라이더를 없음으로 설정하면 트랙을 채우지 않습니다 반면 2차 또는 1차로 설정하면 슬라이더가 채워지죠 macOS Tahoe에는 슬라이더 채우기 기능이 하나 더 추가되었습니다 트랙을 따라 어느 위치에나 고정할 수 있죠 끝부분에만 고정할 수 있는 게 아닙니다 새로운 neutralValue 속성을 사용해 트랙 채우기의 앵커 역할을 하는 값을 설정합니다 이번 재생 속도 제어의 예에서는 neutralValue를 1x로 설정하여 속도가 더 느려지거나 빨라질 때 선택한 값과 기본값 사이의 차이가 파란색으로 채워지며 정보 전달에 도움을 줍니다 새 디자인 시스템의 메뉴도 업데이트되었습니다 새로워진 외관은 물론 아이콘 활용법도 눈에 띄게 늘어났죠

이제 메뉴 막대 메뉴와 컨텍스트 메뉴 모두 아이콘으로 핵심 동작을 나타냅니다 메뉴의 각 섹션 내에서 아이콘은 하나의 열을 형성합니다 스캔하기 쉽죠 메뉴 항목에 명확하고 이해하기 쉬운 기호를 추가하면 사용자가 메뉴에서 가장 중요한 동작을 빠르게 찾을 수 있습니다

'새로운 디자인 시스템과 더 친숙해지는 법' 영상에서 메뉴 아이템에 맞는 기호 선택의 세심한 가이드를 받아보세요 꼭 확인해 보세요 마지막으로, Liquid Glass 요소를 앱에 통합해보겠습니다 Liquid Glass 재료를 맞춤형 UI 요소에 통합하기 전에 이 새로운 재료 뒤에 숨겨진 디자인 의도를 고민해봐야 합니다

Liquid Glass 요소는 최상위 UI 계층에 떠 있죠 제어 기능과 탐색 기능을 기능적 계층으로 끌어 올립니다 Liquid Glass는 앱에서 가장 중요한 요소에만 사용해야 한다는 의미입니다 이 계층의 최상위 수준에 속하는 제어 기능이죠 Freeform의 인라인 편집 제어 기능이 좋은 예입니다 콘텐츠 옆에 놓여 있기보다는 위에 떠 있죠 Liquid Glass 재료와도 조화롭게 어울립니다

NSGlassEffectView API로 콘텐츠를 글래스에 배치합니다 contentView를 설정해 AppKit으로 필요한 시각 효과를 적용하고 글래스를 주변 환경에 맞게 적용시켜 가독성을 높입니다 NSGlassEffectView를 콘텐츠 뒤 하위 보기로 배치하면 안 됩니다 모서리 반경 및 색조 색상 속성으로 글래스 모양도 사용자 지정할 수 있습니다 기존 요소에 NSGlassEffectView를 도입하는 예를 살펴보겠습니다

이 예에서는 일일 운동 통계와 운동 유형을 선택할 수 있도록 맞춤형 제어 기능을 보여주는 피트니스 앱을 활용합니다 수평 NSStackView를 사용하여 표시하고 있죠 이 UI에서 눈에 띄는 부분은 이것이니 두 부분 모두 글래스 위에 놓겠습니다 Liquid Glass 재료는 새로운 코드 몇 개만으로 적용할 수 있습니다 먼저 표시하려는 각 글래스 요소에 대해 NSGlassEffectView를 생성하고 그리고 각각의 contentView 속성을 원하는 보기로 설정합니다 GlassEffectView는 자동 레이아웃으로 contentView에 지오메트리를 엮으니 동기화 유지에 대해 걱정할 필요가 없습니다

그 다음 글래스 효과 보기를 보기 계층에 넣습니다 이 예에선 스택 보기를 업데이트해 새 GlassEffectViews를 바꿨습니다 가까운 곳에 글래스 모양이 여러 개 있다면 NSGlassEffectContainerView로 그룹화합니다 글래스 효과 컨테이너 보기는 여러 글래스 요소를 렌더링 효과 하나에 결합합니다 여기에는 몇 가지 이점이 있습니다

먼저, 리퀴드 시각 효과를 통해 그룹화된 글래스 요소가 유동적으로 결합되고 분리됩니다 글래스 모양은 서로 간의 거리와 NSGlassEffectContainerView에서 볼 수 있는 공간 속성에 따라 함께 융합됩니다

두 번째로 글래스의 적응형 외관이 그룹화된 요소 전체에 입혀져 기존 콘텐츠의 변화에 따라 외관의 일관성을 유지합니다 그룹화는 시각적 정확성을 위해서도 중요합니다 Liquid Glass 재료는 빛을 반사하고 굴절하며 주변 콘텐츠의 색상을 따라 갑니다

이 효과를 구현하기 위해 글래스 재료는 자체 크기보다 더 큰 영역의 콘텐츠를 샘플링합니다 하지만 샘플링 영역에 다른 글래스 요소가 포함되어 있으면 어떨까요? 글래스는 다른 글래스를 샘플링할 수 없으므로 이 경우 일관적인 시각 효과를 구현하기 어렵습니다 글래스 효과 컨테이너를 사용하면 요소들이 샘플링 영역을 공유하게 됩니다 이렇게 하면 시각적으로 일관적인 효과를 구현할 수 있고 글래스 효과의 완성도도 향상됩니다 그룹 전체에서 사용할 샘플링이 한 개만 있으면 되기 때문이죠

이전 샘플을 다시 살펴보자면 두 가지 글래스 효과는 논리적 그룹의 일부이기 때문에 글래스 효과 컨테이너 안에 유지되어야 합니다 간단히 설정할 수 있죠 이번 예시에서는 NSGlassEffectContainerView를 생성해 스택 보기를 contentView로 설정해보겠습니다 컨테이너와 콘텐츠 보기도 자동 레이아웃을 사용하여 함께 제한됩니다 덕분에 기존 레이아웃에서 컨테이너를 깔끔하게 바꿀 수 있죠 Liquid Glass 재료는 앱의 주요 제어기를 향상하는 강력한 도구로 콘텐츠가 에지 투 에지로 원활하게 흐르도록 하죠 앱 고유의 기능을 강조할 수 있는 좋은 방법입니다

다음은 뭘까요? 첫 번째 단계는 Xcode 26으로 앱을 구축하는 것입니다 다수의 새 디자인이 바로 작동하죠 가능한 한 콘텐츠를 에지 투 에지로 확장합니다 떠 있는 글래스 도구 막대와 사이드바를 최대한 활용합니다 그 다음 하드 코딩된 제어 높이나 유연하지 않은 레이아웃 제약에 앱을 감사하여 새 제어 기능의 크기에 맞춰 적용합니다 Liquid Glass 재료를 사용해 기호 아이콘으로 메뉴 동작을 꾸미고 인터페이스를 돋보이게 할 요소를 식별합니다 시청해주시고 멋진 Mac 앱을 만들어 주셔서 감사합니다