Liquid Glass 만나보기

Liquid Glass는 Apple 소프트웨어 디자인의 계보를 잇는 새로운 발자국입니다 유연하면서도 동적인 레이어를 도입해 Apple 생태계 전반에 걸쳐 새로운 앱과 시스템 경험을 선사하죠 Mac OS X의 Aqua 사용자 인터페이스부터 iOS 7의 실시간 흐림, iPhone X의 유동성 Dynamic Island의 유연성과 VisionOS의 몰입형 인터페이스까지 이 여정에서 배운 모든 것을 기반으로 구현되었죠 물리적 세계의 소재를 재창조하는 대신 이러한 배움을 통해 구축된 Liquid Glass는 동적으로 조명을 휘게 하고 모양을 잡는 새로운 디지털 메타 소재입니다 동시에 가벼운 액체와 같이 유기적으로 동작하고 움직입니다 현대적인 앱의 동적 움직임과 매끄러운 터치감에 발맞추어 반응하죠

저는 Apple Human Interface Design 팀 디자이너 Chan입니다 이 세션에서는 Liquid Glass의 핵심 동적 특성을 검토할 것입니다 그 다음 제 동료 Shubham이 Liquid Glass가 여러 맥락, 환경에 자동으로 적응하는 방식을 설명할 것입니다 마지막으로 Bruno가 Liquid Glass 활용에 대한 주요 원칙을 설명하겠습니다 바로 시작하겠습니다 Liquid Glass는 둥근 화면을 채택하고 몰입형 디자인을 지향한 Apple 프로덕트 디자인을 잘 보완합니다 UI에서 표현된 모습은 현대적인 기기의 둥근 곡선에 꼭 맞는 둥근 외형이며 떠 있는 형태죠 명확히 정의된 이 모양은 손가락 고유의 지오메트리에 맞게 쉽게 탭할 수 있도록 제작되었습니다 더 편하게 앱과 상호작용할 수 있죠 Liquid Glass는 Lensing을 통해 시각적 외관을 정의합니다 Lensing은 현실 세계에서 빈번하게 경험하는 개념입니다 이런 경험을 통해 우리는 투명한 물체의 빛이 구부러지고 굴절되는 것을 직관적으로 이해할 수 있죠 이를 통해 물체의 존재와 움직임 형태를 이해할 수 있는 것입니다

Liquid Glass는 본능적인 시각적 단서를 사용해 레이어 간 소통에 새로운 방법을 소개하고 그 아래에서는 콘텐츠가 빛을 보죠 기존 소재가 빛을 분산시켰던 것에 비해 새로운 소재는 실시간으로 빛을 동적으로 구부리고 모양을 만들며 집중시킵니다 현실 세계에서 우리가 시각적으로 보는 것들과 유사한 경험을 조성하는 동시에 백그라운드 콘텐츠를 정의하죠 이렇게 빛을 조각하면 제어 동작을 할 때 가볍고 투명하게 느껴지면서도 명확히 구별할 수 있습니다

퇴색하는 대신, Liquid Glass는 점진적으로 빛이 구부러지는 정도를 조절해 소재의 시각적 모습을 보존하며 매끄럽게 전환이 이루어지도록 합니다

소재가 어떻게 느껴지고 작동하는지도 중요하겠죠 Liquid Glass의 시각적 특성과 동적 특성은 기초 단계에서부터 한몸으로 설계되었습니다 액체의 움직임은 우리 모두가 직관적으로 느끼는 것과 같죠 유연하고 빠르게 반응하며 자연스럽게 흐르는 모션과 특성이 우리가 현실 세계에서 직접 경험하는 것과 매우 유사합니다

Liquid Glass는 상호작용에 즉각적으로 반응하고 빛을 돋보이게 합니다 인터페이스 반응성이 높아져 살아있는 듯한 경험을 선사하죠 또한 젤과 같은 고유의 특성이 있어 사용자와의 상호작용에 따라 계속해서 변화하고 변형되는 모습을 그대로 나타냅니다 이러한 유연성 덕분에 계속해서 변화하는 우리의 생각과 움직임과 유사한 인터페이스 경험을 선사할 수 있죠

요소는 일시적으로 Liquid Glass를 들어올릴 수도 있습니다 구성 요소와 상호작용을 할 때와 같이 말이죠 대기 시, 시각적인 움직임이 없다 터치하면 살아나는 듯합니다 제어 기능에서 사용하기 좋습니다 투명한 액체 렌즈를 통해 볼 수 있어 그 밑에 있는 값을 정확히 읽을 수 있으니까요

이 유연한 특성은 사용자 입력값에 소재가 반응하는 방식에 그치지 않고 역동적으로 변화하는 현대 앱 환경에 동적으로 반응하는 것에서도 볼 수 있습니다 앱에서 여러 상태를 오갈 때 Liquid Glass는 각 맥락에서 제어 기능에 따라 동적으로 변화하죠 덕분에 제어 기능 배치 시 플로팅 평면을 한 개로 두는 개념이 그대로 유지됩니다 앱 내 여러 섹션 간의 전환이 유동적이고 매끄럽게 느껴집니다 제어 기능의 모양이 계속 변화할 때 말이죠 메뉴를 표시할 때 버블이 터지며 안에 있는 콘텐츠를 나타냅니다 가볍고 일관적인 전환을 통해 탭한 부분에 내용이 유지되죠 버튼과 그 안에 포함된 내용 간의 관계를 매우 명확하고 직접적으로 전달합니다 이 속성을 가진 Liquid Glass는 앱 외관의 새로운 장을 열었습니다 감각까지도 새롭게 느끼게 하죠 새로운 방식으로 빛을 구부리고 모양을 만드는 특성과 역동적으로 굽히고 모양을 바꾸는 특성이 융합된 Liquid Glass는 앱의 경험을 본질적으로 더 유기적이고 유동적으로 만들며 몰입값을 높입니다

이제 Liquid Glass가 여러 환경과 플랫폼에 자동으로 적응하는 방식을 알아보겠습니다 Shabam에게 넘길게요 고마워요, Chan Liquid Glass는 처음부터 크기와 환경에 적응하도록 설계되었습니다 뒤에 있는 콘텐츠와는 관계없이 명확함을 유지하도록 말이죠 동시에 끊임없이 미묘하게 변화하면서도 콘텐츠 레이어와는 명확히 구분된 모습을 보이죠 Liquid Glass는 여러 레이어로 구성되어 있습니다 이러한 레이어가 함께 작동해 고유한 외관을 완성하죠 밝기가 변화하지 않거나 어두운 외관을 가졌던 이전 소재와는 달리 각 레이어는 그 뒤에 있는 것에 적응해 계속해서 변화합니다

뒤에 있는 텍스트를 스크롤하면 그림자가 더 강조되어 두 요소를 더 명확히 구분합니다

동적 범위에 있는 색조의 강도가 변화하여 버튼의 가독성을 유지하면서도 가능한 한 많은 콘텐츠를 표시합니다 필요한 경우에는 독립적으로 밝은 모드와 다크 모드를 전환시켜 어떤 조건에서든 익숙한 디자인을 표시하고 앱의 콘텐츠를 더욱 돋보이게 합니다 도구 막대 버튼에 메뉴를 표시할 때와 같이 유리가 구부러지고 변형되면 소재의 특성이 변해 보다 두껍고 무거운 소재를 시뮬레이션합니다 더 깊고 풍부한 그림자를 드리워 뚜렷한 렌즈와 굴절 효과를 내고 빛을 부드럽게 분산시키죠 미묘한 차이로 사용자 경험에 깊이를 더합니다 글래스 요소 자체 내의 콘텐츠의 가독성까지 높이죠 Liquid Glass는 여러 플랫폼에 걸쳐 일관적인 디자인 언어를 전달하는 데 매우 중요합니다 iPad와 Mac에서도 동일한 원칙이 적용되었죠 iPhone과 마찬가지로 이러한 Liquid Glass 레이어는 제어 및 탐색을 위한 고유한 기능 레이어를 형성하고 모든 요소 위에 떠다니며 콘텐츠에는 더 크고 더 넓은 공간을 제공합니다

글래스 제어 기능은 창의 둥근 모서리에 잘 맞아 떨어져 UI의 동심성을 유지합니다 사이드바와 같은 큰 요소의 경우 Liquid Glass 외관은 앱의 앰비언트 환경에 따라 결정됩니다

근처에 색이 다채로운 콘텐츠가 있다면 그 빛이 글래스의 표면을 자연스럽게 물들여 소재 특성을 돋보이게 하고 인터페이스에 세련미를 더합니다 효과는 표면에만 국한되지 않죠 빛이 반사되고, 분산되며 그림자에도 스며듭니다 현실 세계에서와 같이 말이죠 iPad와 Mac의 플로팅 사이드바는 매우 깊은 몰입감을 선사합니다

사이드바와 탭바는 응집력 높고 일관된 언어를 전달합니다 모든 플랫폼에서 앱의 기본 탐색 기능을 활용할 때 경험할 수 있죠 모든 것을 하나의 탐색 요소로 생각할 수도 있겠습니다 앱의 캔버스가 커짐에 따라 유동적으로 확장되죠 이제 스크롤 에지 효과에 대해 이야기해 보겠습니다

스크롤 에지 효과는 Liquid Glass와 함께 작동하며 Ui와 콘텐츠 계층을 명확히 분리해 가독성을 높입니다 특히 동적으로 스크롤되는 콘텐츠에서 유용하죠 Liquid Glass처럼 스크롤 에지 효과는 본질적으로 적응하는 특성이 있습니다 글래스 요소 아래에서 콘텐츠를 스크롤하면 이 효과가 내용을 배경에 부드럽게 녹여내고 움직이는 콘텐츠 위로 글래스를 들어 올린 시각 효과를 주죠 또한 제목과 같은 고정 요소를 항상 명확하게 유지합니다

어두운 콘텐츠를 아래로 스크롤할 때 글래스 자체가 어두운 스타일로 전환되면 이 효과는 지능적으로 전환하여 옅게 디밍 효과를 적용합니다 또 한번 대비를 주어 가독성을 보장하죠 열 제목과 같이 도구 막대 아래에 고정된 액세서리 보기가 있는 등 일부의 경우 대신 하드 스타일 효과를 사용합니다

점진적인 페이드 아웃 대신 도구 막대와 고정된 액세서리 보기의 높이에 맞추어 일관적으로 적용됩니다 이 스타일은 액세서리 보기와 그 아래에 놓인 스크롤할 콘텐츠의 떠 있는 요소를 더 분명히 구분해야 할 때 사용합니다 Liquid Glass가 크기, 환경 및 플랫폼 적응 방식, 활용 방법 그리고 앱의 콘텐츠를 강조하는 동시에 명확성과 가독성을 위해 스크롤 에지 효과를 활용하는 방법을 배웠습니다 이제 Bruno가 Liquid Glass 변형에 대해 더 알려드리고 앱에서 가장 잘 사용하는 방법을 설명해드릴 것입니다 고마워요, Shubham Liquid Glass를 잘 활용하려면 먼저 이를 깊이 이해해야 합니다 Liquid Glass가 구축된 방법과 몇 가지 동작을 검토해 보겠습니다 디자인 단계에서 기대되는 바가 무엇인지 아실 수 있을 겁니다

Liquid Glass의 진정한 힘은 전체적 디자인 접근법에 있습니다 빛의 동작과 깊이 효과 적응형 변화는 각각 따로 움직이는 기능이 아닙니다 이는 복잡한 시스템에 속한 레이어라고 할 수 있죠 함께 움직이며 요소를 합친 것보다 더 놀라운 소재를 완성합니다 이 레이어 중 일부를 좀 더 자세히 살펴보겠습니다 먼저 하이라이트 레이어입니다

Liquid Glass는 현실 세계와 같은 물성을 갖습니다 이 환경 속에서 빛은 우리에게 익숙한 동일한 방식으로 빛을 발생시키는 소재에 비춥니다 지오메트리에 반응하는 소재죠 휴대폰을 잠그고 잠금 해제하는 등 상호작용 중에 이 빛은 공간에서 움직이며 빛이 소재 주변을 맴돌게 해 실루엣을 드러냅니다 어떤 경우에는 빛이 기기의 움직임에 반응하기도 합니다 Liquid Glass가 현실 세계에 존재하는 것처럼 보이게 하죠

그림자 또한 요소를 더 실제적이고 명확하게 구현하는 데 중요한 역할을 합니다 다음 슬라이드에서 그림자를 주의 깊게 관찰해보세요

요소는 뒤에 어떤 것이 있는지 잘 알며 텍스트 위에 놓여진 경우 그림자의 오퍼시티를 높입니다 반대로, 단색 빛 백그라운드 위에 놓여진 경우에는 그림자의 오퍼시티를 낮춥니다 이렇게 하면 콘텐츠와 더 명확히 구분할 수 있어 요소를 한눈에 쉽게 알아볼 수 있도록 구현할 수 있습니다

Liquid Glass와 상호작용할 때 물질은 피드백의 한 형태로서 내부에서 빛을 발합니다

탭 한번이면 요소에서 빛이 퍼져나가 근처의 모든 Liquid Glass 요소를 물들이고 자연스럽고 유연한 방식으로 소재 특성과 상호작용합니다

이러한 동작은 인터페이스가 살아 있는 느낌을 주며 장치가 물리적 세계와 직접 연결된 느낌을 줍니다 여러 레이어가 함께 적응해 UI 레이어 구조의 명확성과 초점을 유지하는 경우가 있습니다

예를 들어 Mac 또는 iPad에서 창의 초점을 잃는 경우 Liquid Glass는 시각적으로 흐려져 다른 곳으로 주의를 유도합니다

이렇게나 세련된 방식이 내장되어 제공되죠 Liquid Glass를 통해 큰 차이를 만드는 미묘한 동적 동작이 자동으로 적용되죠 좋아요, 이제 구조와 동작에 대해 모두 알아보았으니 Liquid Glass의 사용법과 활용법, 고를 수 있는 여러 변형에 대해서 설명해드리겠습니다 Liquid Glass를 많은 곳에 바로 적용해보고 싶으시겠지만 이는 앱 콘텐츠 위에 떠 있는 탐색 레이어에만 적용하는 것이 좋습니다 Liquid Glass로 아래 테이블 뷰를 구성하면 다른 요소와 맞닿아 레이어를 흐리게 할 것입니다 명확성을 유지하고 싶다면 콘텐츠 레이어에 두어야 합니다 마찬가지로, 항상 글래스는 겹쳐 사용하지 않아야 합니다 Liquid Glass 요소를 위, 아래로 겹쳐 사용하면 인터페이스를 답답하고 혼란스럽게 만들 수 있습니다 Liquid Glass 위에 요소를 둘 땐 두 레이어에 Liquid Glass 소재를 동시에 사용하지 않아야 합니다 대신 가장 위의 요소에 채우기, 투명성 및 생동감을 적용해 소재의 일부처럼 얇은 오버레이로 보이게 처리하는 것이 좋습니다 다음으로, Liquid Glass 변형을 이야기해 봅시다 일반 또는 투명 중에 선택할 수 있습니다 변형 종류는 본연의 특성과 활용되는 사용 사례가 다르므로 서로 섞여서는 안 됩니다 일반 변형은 다재다능하기 때문에 가장 많이 사용할 유형입니다 이 변형은 설명한 모든 시각적 및 적응 효과를 제공하며 어떤 환경에서든 가독성을 보존합니다 어떤 크기나 콘텐츠에서도 작동해 위에 무엇이든 놓을 수 있습니다 반면에 투명 변형은 적응형이 아닙니다 영구적으로 투명하기 때문에 아래 놓인 콘텐츠의 풍부함이 글래스에 그대로 드러나도록 하고 세련된 방식으로 글래스와 상호작용합니다 기호와 라벨의 가독성을 충분히 유지하기 위해서는 아래 놓인 콘텐츠를 어둡게 하기 위해 디밍 계층을 두어야 합니다 이 레이어 없이는 가독성이 눈에 띄게 나빠지기 때문입니다 앱에 Liquid Glass 요소를 둘 공간이 보다 작은 경우 디밍 효과를 국소적으로 적용해 콘텐츠의 생동감을 유지할 수 있습니다

요약하자면, 일반 변형은 어디서나 작동할 수 있지만 투명 변형은 다음 세 가지 조건이 충족될 때만 사용해야 합니다 먼저, 적용하는 요소가 미디어가 풍부한 콘텐츠여야 하죠 둘째, 콘텐츠 레이어가 디밍 레이어에 의해 부정적 영향을 받지 않아야 합니다 마지막으로, 그 위에 얹힌 내용이 명확하고 밝게 표현되어야 합니다 가독성에 대해 이야기하겠습니다 Liquid Glass 설계의 핵심 고려 사항이죠

탐색 막대와 탭 막대와 같이 작은 요소는 뒤에 놓인 것에 따라 외관을 끊임 없이 조정합니다 또한 배경에 따라 밝은 색에서 어두운 색으로 전환하죠 소재를 최대한 매력적이고 명확하게 보이게 합니다

메뉴나 사이드바 같이 큰 요소 또한 주변 환경에 맞게 적응하지만 어두운 색에서 밝은 색으로 전환되지는 않습니다 표면적이 너무 커서 전환 기능이 있다면 오히려 방해가 될 것입니다 가독성을 유지하기 위해 기호와 글리프도 Liquid Glass 위에 동일하게 적용됩니다 밝은 모드, 다크 모드를 전환하며 글래스의 동작을 미러링해 대비를 극대화합니다 일반 변형에 배치된 모든 콘텐츠는 자동으로 이 적용을 받게 됩니다 맞춤형 색상도 사용할 수 있지만 선택적으로 적용해야 합니다 항목이나 요소가 뚜렷한 기능적 목적을 가진 경우, 강조하기 위해 색조를 입힐 수 있습니다 어떻게 작동하는지 자세히 살펴보겠습니다

Liquid Glass 요소에 색을 입히는 새로운 방법을 소개합니다 소재의 원 특성을 보존하고 가독성을 극대화하죠

라벨에서 텍스트 및 전체에 색조가 적용된 버튼과 잠금 화면의 시간까지, 모든 Liquid Glass 요소에서 일관적입니다 소재에 생동감을 더하고 주변의 콘텐츠와도 더 깊이 연결되죠

색상을 선택하면 다양한 톤이 생성되어 색조가 입혀진 요소 아래에 놓인 콘텐츠의 밝기에 매핑됩니다 기존 색상을 완전히 잃지 않으면서도 뒤에 놓인 물체에 따라 색감과 밝기 색채가 변하는 현실 세계의 틴티드 글래스에서 영감을 얻었죠

이렇게 하면 소재의 물성을 강조하면서도 가독성과 대비감에도 도움을 줄 수 있습니다

색조의 장점은 글래스의 모든 움직임과 기본적으로 호환되어 어떤 요소든 아주 쉽게 색조를 입힐 수 있다는 점입니다

다음은 내장 색조 기능 대신 단색 채우기를 사용하는 버튼입니다 완전히 불투명하기 때문에 Liquid Glass의 시각적 특성과는 다르죠 하지만 새로운 색조를 적용했을 때를 봐야 합니다 갑자기 더 투명해지며 주변 환경과 잘 어우러지죠

색조는 UI의 핵심 요소와 동작을 강조하기 위해서만 사용해야 합니다 먼저, 지양해야 할 사항을 살펴보겠습니다 모든 요소에 색조를 적용하면 안 됩니다 무엇을 강조하고 싶은지 분명하지 않아 혼란스럽기 때문입니다 앱에서는 색조를 콘텐츠 레이어에 입혀야 합니다 반면에, 이 주문 보기 버튼에는 색조를 사용하기 좋죠 빨간색은 음식 배달 앱의 핵심인 ‘주문’을 돋보이게 합니다 콘텐츠 레이어는 원치 않는 시각적 노이즈를 지양하기에도 좋습니다 앱을 처음으로 실행하는 등의 변하지 않는 상태에서는 콘텐츠와 Liquid Glass가 겹치지 않게 해야 합니다 겹치지 않도록 콘텐츠를 재배치 또는 크기를 조정해야 하죠

Liquid Glass는 가독성 문제 외에도 다양한 사용자의 니즈 충족을 위해 접근성 기능도 갖추고 있습니다

Liquid Glass의 강점을 보존하고 특정 Liquid Glass 레이어를 바꾸는 물질의 수정자 역할을 하죠

예를 들어, 투명성을 낮추면 Liquid Glass에 눈이 앉은 듯한 효과를 주어 뒤의 콘텐츠를 흐리게 만듭니다 대비를 높이면 요소의 흑색 또는 흰색 비율을 높여 경계선의 대비감을 돋보이게 합니다 움직임을 줄이면 일부 효과의 강도가 줄어들며 소재의 유연한 특성을 비활성화합니다 이는 새로운 소재를 사용할 때마다 자동으로 적용할 수 있습니다 시스템 수준에서 이러한 설정을 켜면 Liquid Glass 요소에서 이 효과를 적용시킬 수 있습니다 이 세션에서는 Liquid Glass의 핵심 원칙과 가치를 다루었습니다 이 요소를 효과적이고 포괄적으로 사용할 수 있도록 기능과 동작을 탐구하고 실용적인 지침에 대해 논의했죠

Liquid Glass는 모든 플랫폼에서 통합된 디자인 언어를 전달해 하드웨어와 소프트웨어가 매끄럽게 어우러지게 합니다 더 유동적이고 역동적인 상호작용 경험을 선사하죠 인터페이스의 모든 부분에서 눈에 띄게 새로워진 모습을 선보입니다 Apple의 시각 및 상호작용 디자인에서 새로운 장을 연 것이죠 당신이 우리와 함께할 앞으로의 여정이 기다려집니다