새로운 디자인 시스템과 더 친숙해지는 법

안녕하세요! Apple Design Team디자이너 Maria입니다 이번 세션에서는 시각 디자인정보 아키텍처, 핵심 시스템 구성요소 등 디자인 시스템전반에 최신 변경 사항을 모두 다룰 예정입니다 아직 세션을 시작하지 않으셨다면연관된 세션부터 확인해 보세요 Chan, Shubham, Bruno가 만든Liquid Glass 세션을 보세요 Liquid Glass에서는 오늘 내용의기초인 디자인 시스템의 원칙과 작동방식, 앱에 효과적이고포용적으로 적용하는 법을 소개합니다 Liquid Glass는 진행한 가장큰 소프트웨어 디자인 업데이트로 완전히 새로운 휴리스틱을 통해인터페이스와 콘텐츠 관계를 새롭게 정의합니다 그 결과 응집력과 적응력, 표현이 뛰어난조화로운 디자인 언어가 탄생하죠 시스템에 대한 전체적인 접근은강력한 기회를 제공하며 이러한 원칙들이 Apple 생태계의모든 화면과 상호작용 전반에 걸쳐 확장될 수 있게 해 줍니다 SwiftUI, Mac, Catalyst 기술과iPad 창크기 조절 같은 새 기능으로 우리는 공통된 디자인 기반을지향하고 있으며 다양한 기기, 화면 크기입력 방식에서 일관된 경험을 위한 시스템도 발전시키고 있습니다 개별 기능을 설계하든전체 시스템을 구축하든 Apple 프레임워크의 유연성으로기기 간 디자인이 더 매끄럽고 확장 가능하며 강력해집니다 이번 릴리스에는 여러분이 직접경험해볼 수 있는 부분이 많아 미리 말씀드리지 않겠습니다 중요한 업데이트를 보여주고자세 가지 영역에 집중하겠습니다 첫째, 새로운 디자인 언어가 대규모 일관성을가능하게 하는 방법을 설명하고 다음으로 탐색과 콘텐츠 참여를돕는 구조를 다루겠습니다 끝으로 연속성으로 상호작용이어디에서 발생하든 익숙하게 만드는 법을 소개하겠습니다 시작해 보죠 Liquid Glass는 Apple의 변화하는디자인 언어에 큰 역할을 했습니다 이 디자인은 다양한 플랫폼에서일관된 친숙함을 제공하면서도 각 경험을 세밀하게 조정해 최적의 사용감으로 설계했습니다 시스템을 설계할 때 작은디테일의 영향에 주목했습니다 체계적 접근은 모든 단계에서의도적인 설계를 하는 것이며 작은 조작부터 넓은 표면에까지 모든 부분을 전체 맥락에서 고려한다는 뜻입니다 Apple의 시스템 컬러는Light, Dark, 고대비 모드 등 다양한 환경에서 조정해Liquid Glass와 어우러지며 색조 구분을더 향상하면서도 Apple 특유의 낙관적인감성을 그대로 유지합니다 또한 타이포그래피는 명확성과구조를 강화하도록 개선되었으며 굵게 좌정렬되어 경고, 온보딩등에 가독성이 좋아졌습니다 가장 주목할 만한 변화 중 하나는도형의 활용 방식에 있습니다 Apple의 하드웨어는일관된 베젤을 갖고 있으며 이러한 세밀함이 이제UI 설계에도 적용되어 곡률, 크기, 비율이어우러지면서 손에 쥐는 요소와 화면요소 간 통일된 리듬을 만듭니다 도형이 서로 맞물리는 방식에는은밀한 기하학적 원리가 있으며

공통의 중심을 기준으로반경과 여백을 정렬하여 도형들이 편안하게 중첩될 수 있습니다 시각적 균형을 유지하기 위해뷰는 수학적으로 중앙에 정렬되며 필요 시 중앙 정렬이 되고아니면 미세 위치가 조정됩니다 동심원 레이아웃을 구성할 때는세 가지 유형의 도형을 사용합니다 고정 도형은 고정된 모서리 반경을 가지며 캡슐형 도형은 컨테이너 높이의절반을 반지름으로 설정합니다 동심형 도형의 경우상위 요소의 여백을 제외한 값으로 반지름을 계산합니다

캡슐의 기하학적 구조는동심성을 기반으로 합니다 이와 같은 형태는시스템 전반에 걸쳐 나타나며 슬라이더와 스위치의대칭 비율, 막대와 버튼 그룹화된 테이블 뷰의둥근 모서리 등에서 보입니다 캡슐은 터치 레이아웃에서는집중시키고 명확성을 제공하지만 데스크톱 환경에서는 상호작용에 캡슐이 가유용합니다 macOS에서 Mini, Small, Medium컨트롤이 둥근 사각형을 유지하며 이는 인스펙터 패널처럼컴팩트하고 고밀도인 레이아웃에 잘 어울립니다 대형 컨트롤은 이제캡슐 형태를 사용하며 새롭게 추가된 초대형 크기와 함께 Liquid Glass 장점을 활용해넓은 곳에서 강조할 수 있습니다 복잡한 데스크톱 레이아웃에계층구조와 균형이 형성됩니다 나만의 시각적 디자인 언어와인터페이스 요소가 Liquid Glass와 잘 어우러지도록 하는 것이 중요합니다 같은 조의 음악처럼 인터페이스요소들은 시스템의 리듬과 톤을 보완해야 하며 서로충돌해서는 안 됩니다 이 때 일이 복잡해질 수 있습니다 자체 디자인 시스템을관리하고 있다면 더 그렇죠 소개한 도형들을 사용하면구성 요소를 시스템에 정렬하고 Apple API와의 호환성도 더 쉽게확보할 수 있습니다

앱 업데이트 시 모서리가 너무좁거나 벌어져 있는지 주의 깊게 확인하세요 이들은 긴장감을 주고디자인의 균형을 해칠 수 있습니다 이는 종종 카드 내부 이미지처럼중첩된 컨테이너에서 발생합니다 뭔가 어색하게 느껴진다면해결책은 의외로 간단합니다 시스템이 내부 반지름을자동으로 계산하려면 동심형이어야 합니다 이러한 현상은 기기 가장자리특히 버튼 주변에서도 관찰됩니다 휴대폰 레이아웃에서는 화면 가장자리에 여백을두고 캡슐을 사용하세요 iPad와 Mac에서는 창 가장자리에맞춰 정렬되는 동심형 도형을 사용하면 균형 잡힌 느낌을 줍니다 컨테이너 내부와 독립적으로작동하는 컴포넌트를 관리할 때 유용한 팁이 있습니다 보조 반지름이 있는동심형을 사용하세요 이 동심형 값은중첩될 경우 자동으로 조정되며 컴포넌트가 독립 배치될 때에는 보조 반지름이 적용됩니다 기초가 마련되면 다음 단계는Liquid Glass 효과를 극대화하도록 앱의 구조를이해하고 설계하세요 앱이 점점 더 몰입감 있고 콘텐츠가 중심이 됨에 따라UI는 필요 시 상호작용을 지원하고 필요 없을 시 방해 되지 않게 합니다 Liquid Glass는 UI에 새 기능적계층을 정의하며 콘텐츠 위에 자연스럽게 배치되어 구조와명확성을 주고 시선을 유지합니다 적용하는 방법 중 하나는 표면 사이의 관계를 명확히드러내는 것입니다 이는 표면의 형태, 출처, 그리고공간적 연결 상태를 입체적이면서도 안정감 있게 보여 줍니다 동작 시트를 생각해 보세요 전에는 호출 동작과 상관 없이항상 화면 하단에 표시되었지만 이제는 해당 동작이 발생한 위치에서 바로 나타나고 그 동작 자체가동작 시트의 출처가 됩니다 명확하게 정의된 역할은시스템이 관계를 이해하게 하며며 탭한 요소에서 직접확장되는 상호작용을 고정합니다 맞춤형 제어기를 만들 때도같은 접근 방식을 적용해야 하며 재질 역시 내부 뷰가아닌 컨트롤 자체에 직접 적용해야 합니다

Liquid Glass는 탐색이 깊어지거나전환될 때 미묘한 재질 변화로 사용자의 의도를 강조하며탐색 초점을 잘 드러냅니다 복잡하게 느껴질 수 있지만익숙한 단서들을 이용합니다 시트가 표시될 때 모달 상태를디밍 레이어로 알리는 것처럼요 메인 플로우를 방해할 때 디밍레이어를 Liquid Glass와 사용하면 시선을 중앙에 집중시켜공간의 목적이 더 명확해집니다 반면, 작업이 병렬인 경우Liquid Glass는 자연스러운 흐름을 해치지 않으면서도화면 요소를 명확히 유지하죠 포커스 이동 시 위로 올리듯이Liquid Glass는 뒤로 물러나며 점차 불투명해지고부드럽게 커져 더 깊은 몰입감을 제공합니다 이처럼 Liquid Glass는 포커스와 깊이 표현 뿐만 아니라 탐색 컨트롤을 더욱돋보이게 합니다 전에는 인터페이스가 멈추면컨트롤과 배경 구분이 어려웠지만 Liquid Glass는 이를 들어 올려콘텐츠와 분리감을 강화하고 상호작용성을 높여 줍니다

무엇보다 먼저맞춤화한 부분이 있다면 이제 정리할 때입니다 버튼에 적절한 무게감을 위해배경이나 테두리를 추가했습니다 오랫동안 흔히 사용된정당한 방법이었죠 새 시스템 디자인이 도입되면서 강조해야 하는 이유를다시 배우고 있습니다 따라서 이러한 맞춤화는더 이상 필요하지 않게 되었습니다

계층 구조는 장식에 의존하지 말고 구조는 레이아웃과그룹화를 통해 드러나야 합니다 견고한 구조를 만들기 위해서는바 항목을 읽기 쉽고 공간적으로 명확하게 배열하는 것이 중요합니다 새로운 디자인으로 업데이트할 때올바른 API를 통해 그룹화된 항목은 자동으로 배경을공유하고 공간 관계를 유지합니다 항목들이 예상대로그룹화되지 않는다면 해결에 대한 팁이 있습니다 도구 막대가 복잡하게 느껴진다면 불필요한 요소를 제거하는신호로 받아 들여보세요 보조 동작은 추가 메뉴로 옮겨더 깔끔하고 접근성 높게 합니다 도구 막대 항목은기능과 빈도에 따라 그룹화하세요 비슷한 동작을 수행하는 버튼은함께 배치하는 것이 바람직합니다 단 '선택'이라는 텍스트와 공유아이콘처럼 아이콘과 텍스트를 그룹화하지 않도록 합니다하나의 버튼처럼 보이니까요 텍스트 버튼이 필요하면단독 컨테이너를 사용합니다

예를 들어, 완료와 같은주요 동작은 분리되어 표시됩니다 iOS와 iPadOS에서는파란색 체크 표시로 macOS에서는 눈에 띄는 텍스트 버튼으로 표현되어 쉽게 인식되고상호작용이 쉬운 초점이 됩니다 탭 바는 앱에서 가장 자주볼 수 있는 구성 요소입니다 탭 바를 적절히 구성하면명확한 레이아웃을 제공하고 섹션 간 매끄럽게 이동합니다 콘텐츠가 처음 화면에 보이지않으면 검색 기능이 필수입니다 이러한 이유로 iOS에서는하단에 전용 검색 탭을 도입해 사용자가 더 쉽고빠르게 접근할 수 있도록 했습니다 탭 바는 액세서리 보기를활용해 앱 전체에서 미디어 재생 컨트롤 등항상 표시되는 기능도 지원합니다 단, 특정 화면에만 해당되는동작은 여기에 배치하지 마세요 예를 들어 결제 버튼은 관련 콘텐츠와 배치합니다 UI의 여러 부분에서 온 요소들이섞이면 계층 구조가 모호해지고 지속적인 요소와 문맥에 따라바뀌는 요소의 구분이 힘듭니다 이제 시각 효과가 어떻게 콘텐츠의 우선순위를 정하고 상호작용을 명확하게만드는지 살펴보겠습니다 Liquid Glass를 사용할 때는가독성을 위해 콘텐츠와 명확히 구분되어야 합니다 요즘의 Safari처럼 컨트롤이콘텐츠 위에 배치되는 것이 아니라 시스템 소재 위에 올려집니다 구분하지 않으면 대비가약해질 수 있습니다 스크롤 에지 효과는 경계를 더욱명확하게 하여 딱딱한 구분선을 부드러운 블러 효과로 대체해UI 가독성을 높입니다 또한 스크롤 에지 효과는단순한 장식이 아닙니다 오버레이처럼 화면을 가리거나 어둡게 만들지 않으며 UI와 콘텐츠가 만나는 지점을명확히 보여줄 뿐입니다 따라서 플로팅 UI 요소가없는 곳에는 사용하지 마세요

스크롤 뷰는 고정컨트롤이 겹치면자동으로 에지 효과를 보입니다 시스템 전체에서 소프트와하드 두 가지 스타일이 제공됩니다 이 두 스타일을 혼합하거나동시 사용은 피해야 합니다 대부분의 경우 기본값인소프트 스타일을 사용하며 특히 iOS와 iPadOS에서 그렇습니다 소프트 스타일은 부드럽게 전환되며 버튼이나 입력창과 같은 인터랙티브 요소에Liquid Glass 적용 시 어울립니다 하드 스타일은 주로 macOS에서 사용되죠 강하고 불투명한 경계를 제공하여배경 없는 인터랙티브 텍스트나 컨트롤, 고정된 테이블 헤더 등의선명도를 높이는 데 적합합니다 스크롤 에지 효과는 한 뷰에서 한 번만 적용해야 합니다 iPad 또는 macOS의Split View 레이아웃에는 패널마다 개별 효과를 줄 수 있지만높이를 유지해 정렬합니다 콘텐츠 중심의 설계가사이드바에도 적용되어 이제 사이드바가 화면 끝까지 확장됩니다 이를 위해 사이드바는인셋 형태로 구성되었으며 Liquid Glass로 콘텐츠가자연스럽게 몰입만감을 줍니다 배경 확장 프로그램 효과로콘텐츠가 사이드바 뒤까지 전체 너비를 채우면서도레이아웃의 시각 중심에 있습니다 이 효과는 히어로 이미지색상의 배경이나 넓은 느낌을 주고 싶은 표면에 활용합니다 텍스트나 컨트롤은 반드시그 위에 배치하여 원치 않는 시각적 왜곡을 방지해야 합니다 그리고 이게 끝이 아닙니다! 이제 스크롤 뷰가 기본으로사이드바 밑까지 확장돼 캐러셀이 자연스럽게 이어지며탐색을 방해하지 않습니다

각 뷰마다 배경 확장효과를 적용할 수 있어 더 풍부하고 유연한레이아웃 구성이 가능합니다 여기서는 상단과 하단 뷰에배경 확장 프로그램 효과를 쓰고 중앙의 스크롤 뷰는분리되어 있습니다 디자인 언어는 일관성을 제공하고구조는 동작을 결정하며 연속성은 이 모든 요소를하나의 유기적 경험으로 만듭니다 간단한 개념이죠기기 변경이나 창 크기를 조절해도 처음부터 시작하지 않고이전 작업을 계속할 수 있습니다 앱은 사용자의 흐름이끊기지 않도록 그 순간을 자연스럽게 이어가야 합니다 레이아웃, 계층 구조, 상호작용 중어느 하나라도 모든 기기에서 디자인이 일관되게유지되어야 합니다 이 방법은 오히려디자인 과정을 간소화해 주죠 각 플랫폼별로 처음부터다시 설계할 필요 없이 앱의 구조만 한 번설계하면 충분합니다 새로운 개념은 아니지만이제 이 방향에 더 집중합니다 먼저 기기의 컨텍스트에 대한관점을 되짚어보겠습니다 새로운 디자인 시스템을 도입하며앱을 업데이트하는 지금이야말로 다양한 플랫폼에서 경험이연결되는지 재평가하는 기회입니다 iPhone은 좁은, 세로레이아웃에 초점을 맞춥니다 Mac은 모든 요소는넓고 확장된 캔버스에 배치됩니다 iPad는 시스템 스택의 중간으로서iPhone의 집중된 기능성과 Mac의 넓고 깊은 경험을 이어주는 다리 역할을 합니다 디자인이 확장성을 익히는 곳이 바로 iPad죠 이러한 기반을 토대로 이제공유된 콘텐츠가 어떻게 연속적인 경험을 만들어 내는지 살펴보죠 앞서 언급한 공간 구성의예시를 기억하시나요? 바로 이 부분에서 그 개념이 중요한 역할을 합니다 콘텐츠가 의도적으로하나의 그룹으로 묶여 있다면 레이아웃이 변경되더라도 함께 유지되어야 합니다 기기 간 동일한 기호를 사용하면의미를 일관되게 전달할 수 있으며 반복을 통해 사용자는 익숙해질 수 있습니다 하지만 모든 동작이명확하게 드러나는 것은 아닙니다 연필 아이콘은 주석을 암시하고체크표시는 확인으로 보여 선택이나 편집과 같은동작으로 오해할 수 있습니다 명확하게 표현하기 어려운 경우텍스트 레이블이 항상 더 좋습니다

보셨겠지만 바에서 텍스트보다기호 중심으로 전환되는 추세이며 메뉴를 포함한 전체 플랫폼전반에 확산되고 있습니다 따라서 인식에 도움이 된다면메뉴에 기호를 적극 활용하세요 복사 방법처럼 관련된동작이 여러 가지인 경우 아이콘을 반복이나 변형하지 마세요 기호는 한번 사용해 그룹을나머지는 텍스트로 설명하세요 휴먼 인터페이스 가이드라인의아이콘 페이지도 업데이트되어 일반적인 동작에 적합한권장 글리프 목록을 제공합니다 SF Symbols를 직접 사용하든자체 시스템에 매핑하든 이 목록이 유용한 출발점이 될 수 있습니다 기기 간의 연속성을 유지하려면구성 요소를 확장 가능한 구조로 설계하고 플랫폼 간의 차이도공통 프레임워크로 다뤄야 하며 이를 예외로 간주해서는 안 됩니다

이러한 것들이 다양한 환경에서잘 작동하려면 두 가지에 있습니다 어떻게 구성되었고 어떻게 동작하는가하는 것이죠 공통된 구조를 정의하는 것부터 시작하세요 기호와 마찬가지로 구성 요소레이아웃의 부분도 일관되게 익숙한 위치에서 재사용되어야 합니다 이런 접근 방식은사이드바와 테이블 항목에서처럼 메뉴에도 동일하게적용되고 있습니다 macOS의 팝업 메뉴와iOS의 빠른 메뉴는 겉은 다르지만 둘다 선택 표시, 아이콘, 레이블액세서리를 가지고 있습니다 구조가 변경되더라도동작이 그 차이를 보완해야 합니다 구성 요소는 언제나 동일한핵심 상호작용을 지원해야 합니다 탭 바, 구분 제어기사이드바와 같은 구성 요소들은 형태는 다르지만, 선택, 탐색 상태 표시를 일관된방식으로 제공하며 기능과 피드백도 동일하게 전달합니다 이는 단순히 플랫폼 간의차이를 메우는 것을 넘어 플랫폼 내에서 구성요소 간연계성을 높이는 목적이 있습니다 구성 요소가 유기적으로 작동하고연결되면 모든 것이 어우러집니다

이디자인 시스템 변경이었습니다시각적 디자인, 아키텍처 구성 요소가 Liquid Glass중심으로 통합되었습니다 이제 여러분의 차례입니다 Apple 디자인의 새로운 시대를여러분과 함께할 수 있어 기쁩니다 휴먼 인터페이스 가이드라인을 확인하고 Apple 디자인 리소스에서최신 UI 키트도 살펴보세요 또 이러한 아이디어들을앱에 적용해 보시기 바랍니다 시청해 주셔서 감사합니다다음에 또 만나요!