[WWDC] Liquid Glass 딥다이브 — 알아두면 좋을 10가지 문장

안녕하세요 여러분 Mini입니다 !

2025년 WWDC, 애플의 가장 큰 변화 포인트는 누가 뭐래도 새로운 디자인 언어 Liquid Glass의 등장이었습니다.

세션을 보면서 저는 이런 생각이 들었습니다.

“빛이 휘어지고, 물방울이 살아 움직이는 듯한 이 새로운 애플의 디자인 패러다임을, 기존 앱 디자인 스타일에서 어떻게 녹여낼 수 있을까?”

아마 저와 같은 고민을 하신 분들이 많을 거예요.

멋진 디자인은 디자인이고, 결국 중요한 건 실제 제품에 어떻게 적용하느냐니까요.

그래서 이 글에서는 Liquid Glass를 한눈에 이해할 수 있도록 12개의 핵심 문장을 정리했습니다.

Liquid Glass를 깊이 이해하고 싶다면, 이번 글이 여러분에게 좋은 길잡이가 되어줄 겁니다. 차근차근 시작해보죠 !💪🏻

1. Lensing

Liquid Glass는 “Lensing”을 통해 시각적 외관을 정의합니다.

단순, 기존 Blur effect와는 다르게 “Lensing”은 현실 세계에서 우리가 시각적으로 경험하는 것과 유사한 경험을 조성하는 것이 목적인데요.

빛을 분산시켰던 기존 소재와는 다르게, 새로운 소재는 투명한 물체의 빛을 동적으로 구부리는 (굴절, 휘어짐) 모양을 통해 물체의 존재와 움직임 형태를 이해시키는 것이 특징입니다.

Lensing는 단순 투명함, 혹은 흐림 효과와는 명확히 구분되는 현실 세계 렌즈와 같은 디자인 개념입니다.

둥근 곡선에 맞는 둥근 외형, 떠 있는 형태, 손가락 고유의 모양과 맞게 탭할 수 있도록 제작되었습니다.

Liquid Glass의 시각적(visual) 특성과 동적(motion) 특성은 기초 단계부터 하나로 설계되었다고 소개됩니다,

• 액체의 움직임 : 유연하고 빠르게 반응하며, 자연스럽게 흐르는 모션과 특성이 현실 세계에서 직접 경험하는 유체의 움직임과 매우 유사합니다.
• 반응성 : Liquid Glass는 사용자 입력이나 환경 변화에 빠르게 반응하면서 빛을 돋보이게 합니다.
• 유연성 : 젤과 같은 고유의 특성을 지녀, 사용자와의 상호작용에 따라 계속 변화하고 변형되는 모습을 드러냅니다.

따라서 Liquid Glass를 앱에서 제대로 활용하기 위해서는 이러한 원리를 이해하고, 인터페이스에 어떻게 적용할 수 있는지를 아는 것이 중요할 것입니다.

이 큰 원칙 아래 이어지는 문장들을 계속 따라가봅시다 !

2. Behaviors are built-in

Liquid Glass는 단순한 시각적 효과를 넘어서는 현실 세계를 반영한 동작을 내장하고 있습니다.

Liquid Glass의 실재감 있고 직관적인 미묘한 동적 동작(behavior) 기능은 기본으로 함께 제공됩니다.

이 동작은 크개 빛의 반응(Highlight Layer), 그림자(Shadow), 물질(Material) 분야로 나누어서 살펴볼 수 있습니다. 하나씩 살펴보겠습니다.

Highlight Layer

• Liquid Glass는 현실의 물질처럼 빛에 반응합니다.
• 빛은 우리에게 익숙한 방식으로 재질에 닿아, 지오메트리(geometry)에 맞게 움직이고 실루엣을 드러냅니다.
• 때로는 마치 Liquid Glass가 실제 공간에 존재하는 듯한 느낌을 주기 위해, 기기의 움직임(Motion)에 따라 빛이 반응하기도 합니다.

Shadow

• 그림자는 요소를 더 실제적이고 명확하게 구현하는데 중요한 역할을 하는 핵심 요소입니다.
• 컴포넌트가 텍스트 위에 놓여진 경우, Shadow의 불투명도(Opacity)를 자동으로 높여 콘텐츠와의 구분성을 더 명확하게 합니다.
• 반대로 단색이나 밝은 배경 위에 놓여진 경우, Shadow의 불투명도(Opacity)를 낮춥니다.

왼쪽은 텍스트 위에 올려져있어 shadow opacity가 높은 경우, 오른쪽은 단색이어서 shadow opacity가 낮은 경우

Material

• Material은 Liquid Glass와 상호작용할 때 피드백(feedback)의 형태로 사용됩니다.
• 사용자가 탭을 한번 하면 — 빛이 퍼져나가면서 — 주변에 있는 모든 Liquid Glass 요소를 물들이듯 확장됩니다.
• 이러한 상호작용은 자연스럽고 유연한 방식으로 재질의 특성을 드러내며, 마치 인터페이스가 살아있다는 느낌과 / 기기와 물리 세계가 직접 연결된 경험을 우리에게 선사합니다.

Liquid Glass를 통해 제공되는 이런 Highlight layer, shadow, material 등의 동작은 자동으로 적용되어 / 세밀해보이지만 큰 차이를 만들어낸다고 합니다.

3. Avoid glass-on glass

Glass 위에 또다른 Glass를 넣는 것은 금지됩니다.

Liquid Glass는 앱 콘텐츠 위에 떠 있는 Navigation Layer에서 사용할 때 가장 빛을 발합니다.

같은 재질의 요소가 겹치거나 맞닿는다면, 시각적으로 레이어가 흐려지고 사용자가 인터페이스를 직관적으로 이해하기 어려워지기 때문입니다.

즉 명확성을 유지하고 싶은 경우에, Liquid Glass 위에 요소를 둘 때는 두 레이어 (Contents Layer, Navigation Layer)에 Liquid Glass 소재를 동시에 사용하지 않아야 합니다.

가장 왼쪽이 Navigation layer에 적용된 Liquid Glass, 두번째처럼 같은 요소가 겹치면 안되고, 세번째처럼 구분되어야 합니다.

같은 맥락에서 항상 글래스는 겹쳐 사용하지 않아야 한다고 소개합니다.

만약 Liquid Glass 요소를 위아래로 겹쳐 쌓아버리면, 인터페이스가 투명성과 반사 효과로 인해 답답하고 혼란스러워질 것이기 때문입니다.

*마치 현실에서 유리판을 겹쳐놓고 안을 들여다보려는 것과 비슷한 느낌이죠.

만약 여러 요소의 중첩이 필요한 경우, 가장 위의 요소에 한해서는 채우기(fill), 투명성(transparency), 생동감(vividness)을 활용해 얇은 오버레이처럼 처리하는 것이 좋다고 설명합니다.

이런 경우 단순한 겹침을 넘어서, 상위 요소가 하나의 디자인 맥락 안에서 (= Liquid Glass 소재의 일부가 확장된 듯한 느낌) 자연스럽게 섞이는 듯한 느낌을 줄 수 있습니다.

꼭 Liquid Glass를 사용하지 않아도 같은 맥락을 유지할 수 있는 것이죠 !

왼쪽이 glass-on-glass가 발생한 안좋은 예시. 오른쪽이 같은 맥락을 잘 유지한 좋은 예시.

4. Use tinting for emphasis

색조는 UI의 핵심 요소와 동작을 강조하기 위해서만 사용되어야 합니다.

Variant 이야기를 먼저 꺼내보겟습니다.

Liquid Glass에는 두 가지 Vairant, Regular와 Clear로 나뉘어집니다.

Regular는 가장 많이 사용되는 기본 유형이죠. 모든 시각적 및 적응 효과를 제공하며 어떤 환경에서도 가독성을 보존할 수 있습니다.

반면, Clear는 Regular와 같은 적응형이 아닙니다.

영구적으로 투명하기 때문에 아래 놓인 콘텐츠의 풍부함이 글래스에 드러나고, 세련된 방식으로 글래스와 상호작용할 수 있습니다.

하지만 영구적으로 투명하다는 성질 때문에, 기호와 라벨의 가독성을 유지하기 위해 — 아래 놓인 콘텐츠를 어둡게 하는 Dimming layer를 반드시 추가해줘야합니다.

왼쪽이 Regular variant, 오른족이 Clear Variant와 Dimming layer를 함께 사용한 예시

Clear Variant는 아래 세 가지 조건이 충족되는 경우에만 사용할 수 있습니다.

• 적용하는 요소가 Media-rich한 콘텐츠여야 합니다.
• Contents Layer가 Dimming Layer의 영향으로 가독성을 잃어버리면 안됩니다.
• 위에 얹힌 콘텐츠가 명확하고 밝게 표현되어야 합니다. (Bold and Bright content)

색조(tint) 이야기를 하기에 앞서 regular와 clear variant 요소를 소개한 이유는, 그만큼 가독성이 Liquid Glass 설계의 핵심 고려 사항이라는 것을 강조하기 위함이었습니다.

Tinting은 현실 세계의 유리처럼 작동합니다.

조금 더 자세하게 Liquid Glass의 tinting은 선택한 색상이 단순히 덮어씌워지는 게 아니라, 배경 콘텐츠의 밝기·채도·톤에 맞춰 자연스럽게 적응되는 기능입니다.

뚜렷하게 목적을 가진 기능을 강조하기 위해서 이 Tinting을 활용할 수 있다고 소개합니다. = Use tinting for emphasis.

우리가 알고 있는 왼쪽이 tinting이라면, Liquid Glass에서는 이러한 형태보다 자연스럽게 적응되는 오른쪽의 tinting을 소개합니다.

단, 모든 요소를 Tinting해서는 안됩니다.

어떤 것이 강조점인지 불명확해지고, 사용자에게 혼란만 줄 수 있기 때문입니다. (당연하죠?) 그래서 주요한 액션이나 1차 버튼만 tinting하도록 소개하고 있죠.

앱 전체에 색감을 더하고 싶은 경우에는 Tinting보다 Contents Layer에 색을 입히는 것이 맞다고 합니다.

-> Liquid Glass에서의 Tinting은 “강조"라는 명확한 목적이 있는 곳에서만 전략적으로 사용하는 개념입니다.

5. Seamless, scalable, and powerful.

끊김 없이(Seamless), 자연스럽게 확장되며(Scalable), 강력한(Powerful) 경험

Apple은 이번 Liqid Glass 업데이트로 공통된 디자인 기반을 구축하고 싶어합니다.

공통된 디자인 기반이란, iPhone, iPad, Mac, 그리고 다양한 입력 방식(터치, 키보드, 마우스, 펜슬)을 아우르는 경험이 하나의 이어지는 호흡으로 이어지기를 원하는 것이죠.

이러한 경험을 Seamless, scalable, powerful이라는 세 가지 단어로 요약해볼 수 있습니다.

Seamless (끊김 없는 경험)

• UI가 콘텐츠를 방해하지 않으면서도 필요한 순간에 부드럽게 떠올라 사용자가 흐름(flow)을 잃지 않도록 합니다.
• 이는 표면 사이의 관계를 명확히 드러내는 것으로 (Depict relationships) — Action Source와 Action Presentation의 관계를 명확하게 정의해 탭한 요소에서 직접 확장되는 상호작용을 고정하는 내용으로 구현됩니다.
• 예시로 액션 시트 같은 경우, 더 이상 화면 하단에서 무작정 뜨는 것이 아니라 해당 동작 (액션시트 호출)이 발생한 위치에서 바로 나타나고 — 그 동작 자체가 액션 시트의 출처가 됩니다.

가장 대표적인 사례가 액션 시트 호출 (source)과 표시 (presentation)의 변화입니다.

Scalable (확장 가능한 구조)

• 레이아웃, 계층 구조, 상호작용 중 어느하나라도 빠짐없이 모든 기기에서 (Apple 생태계에 있는 플랫폼이라면) 디자인이 일관되게 유지되어야 합니다.
• “One Decision, all platforms.”라는 문장으로 정의내릴 수 있습니다.

• 각 플랫폼별 특징은 아래와 같이 명확하게 구분할 수 있지만, 동일한 디자인 시스템 규칙을 기반으로 각 기기의 특성을 존중하면서 공통된 리듬을 유지할 수 있습니다.
• iPhone은 좁은, 세로 레이아웃에 초점을 맞춥니다. (narrow, vertical layout)
• Mac의 모든 요소는 넓고 확장된 캔버스에 배치됩니다. (wide, expansive canvas)
• iPad는 시스템 스택의 중간 단계로써, iPhone의 집중 경험과 Mac의 넓고 깊은 경험을 이어주는 다리 역할을 합니다. (focus utility of iPhone with the spacious depth of Mac)

이 중 디자인에서 확장성의 개념을 익힐 수 있는 플랫폼이 특별하게 iPad라고 소개합니다.

순서대로 iPhone, Mac, iPad의 플랫폼 특징

Powerful (강력한 기반)

• “강력하다”는 말은 단순히 비주얼이 화려하다는 뜻이 아니라, 개발 생산성과 사용자 경험 두 측면에서 모두 힘을 발휘한다는 의미입니다.
• 개발자는 더 적은 커스텀 코드로도 플랫폼 간 일관성을 확보할 수 있음과 동시에, 디자이너는 더 높은 수준의 제어와 표현력을 얻을 수 있다는 뜻이죠.
• 대표 변화 예시로 아래 Alert처럼 타이포그래피의 명확성 (볼드)과 구조 (왼쪽 정렬)가 더욱 강화된 개선을 볼 수 있습니다.

6. Watch for pinched or flared corners.

특히 모서리 부분을 주의해서 디자인해야 합니다.

이번 디자인 시스템에서 또 하나 주목해볼 점은, 흔히 모서리 둥글기로 부르는 corner radius값을 단순한 장식이 아니라 시각적 리듬과 균형을 유지하는 도구로 활용한다는 점입니다.

여기서 등장하는 핵심 개념은 동심형 (concentric) 레이아웃입니다.

Liquid Glass 디자인 시스템에서 우리들이 사용할 수 있는 도형의 유형은 아래 세 가지 입니다.

• Fixed : 고정된 corner radius 값을 가지는 기본형 도형
• Capsule : 높이(height)의 절반을 반지름(radius) 값으로 설정하는 도형
• Concentric : 상위 요소 (= 부모 컨테이너)의 패딩을 뺀 값으로 반지름을 계산하는 도형 (calculate radius by subtracting padding from the parent’s)

왼쪽부터 순서대로 Fixed, Capsule, Concentric shape, 우리는 이 중 가장 마지막에 집중해볼 겁니다.

우리가 위 도형들을 활용할 때 가장 주의해야할 부분은 모서리가 너무 좁거나 (Pinched) 벌어져 있는 (Flared) 경우입니다.

이런 문제는 주로 중첩된 카드나 이미지 컨테이너 화면에서 나타납니다.

시스템이 내부 반지름을 자동 계산하지 못하면 비율이 깨지고, 전체 레이아웃의 조화가 무너지는 상황이 발생할 수 있죠.

이때 정답은 간단합니다.

• 화면이 중첩되어 시스템이 내부 반지름을 자동으로 조정하고 싶은 경우 -> Concentric Shape를 사용
• 컨테이너 내부와 독립적으로 작동하는 컴포넌트를 관리하고 싶은 겨우 -> 보조 반지름이 있는 동심형 (fallback radius가 적용됩니다)

이러한 현상은 기기 가장자리, 버튼 주변에서도 관찰될 수 있는데요.

iPhone에서는 화면 끝과 맞닿는 경우, 가장자리에 여백(margin)을 두고 Capsule을 사용하는 방식을 / iPad나 Mac인 경우, Concentric Shape를 써서 균형을 유지하는 방법을 고려할 수 있겠습니다.

한 단계 더 나아가보겠습니다.

곡률은 단순히 예쁜 둥근 모서리를 만드는 데 그치지 않고, 탐색 흐름과 포커스를 반영하는 시각적 장치로써 활용되기도 합니다.

Reflect navigation focus

탐색이 깊어지거나 전환될 때, Liquid Glass의 재질이 미묘하게 달라지며 사용자의 의도를 강화합니다. (익숙한 단서를 활용, 시트가 표시될 때 모달 상태를 Dimming layer로 알리는 것처럼)

• 메인 플로우를 방해할 때 : Dimming layer + Liquid Glass의 조합으로 사용자의 시선을 중앙에 집중시켜 공간의 목적을 더 명확하게 만듭니다.
• 병렬 작업인 경우 : Liquid Glass는 자연스러운 흐름을 해치지 않으면서, 요소를 명확히 구분합니다.
• 시트의 포커스가 위로 올라갈 때 : Liquid Glass는 뒤로 물러나며 점차 불투명해지고, 크기가 살짝 커지며 “더 깊이 들어간다"는 몰입감을 제공합니다.

Elevate controls

과거에는 UI가 멈춰 있으면 컨트롤과 배경이 뒤섞여 상호작용성을 구분하기 어려웠습니다.

Liquid Glass는 이 문제를 해결합니다.

컨트롤을 Content layer로부터 들어올려(elevate) 콘텐츠와 분리감을 주고, 사용자는 즉각적으로 “여기가 누를 수 있는 부분”임을 인식할 수 있습니다.

지금까지의 내용은 전부 모서리의 곡률 (corner radius)과 이어지는 내용이었습니다.

7. Clean up your bars.

그동안 커스텀으로 사용했던 툴바, 네비게이션바, 탭바. 이제 정리할 때입니다.

가장 이번 글에서 자극적인 부분이 아닐까 생각이 듭니다.

한동안 저를 비롯한 우리 모두는 툴바(ToolBar), 내비게이션 바(NavigationBar), 탭바(TabBar)를 필요에 따라 커스텀해 왔습니다.

버튼에 무게감이나 강조점을 주기 위해 배경이나 색조를 추가하거나, 선명하게 구분선을 보이게 하도록 테두리를 추가한 경우가 많았었죠.

하지만 새로운 디자인 시스템에서는 이런 장식적인(decoration) 커스터마이징은 필요하지 않습니다.

아니, 조금 더 자극적으로 말해 바에 대한 커스터마이징은 이제 더 이상 필요가 없다고 말합니다.

계층 구조와 강조는 더 이상 배경이나 테두리 같은 데코레이션에 의존하지 않고, 레이아웃과 그룹화를 통해 자연스럽게 드러나야 하기 때문입니다. = Instead of relying on decoration, hierarchy should be expressed through layout and grouping

Organize for legibility

견고한 바 구조를 만들려면 핵심은 단순합니다.

읽기 쉬워야 하고, 공간적으로 명확해야 한다는 것.

• 새로운 디자인 API를 사용하면 그룹화된 항목은 자동으로 배경을 공유하고, 공간 관계를 유지합니다.
• 만약 항목들이 제대로 그룹화되지 않았다면, 그것은 UI가 스스로 불필요한 요소를 정리하라는 메시지를 보내는 신호일 수 있습니다.
• 보조적인 동작은 더 보기(똥글뱅이 점 세 개 있는 버튼) 메뉴로 옮기는 것이 더 깔끔하고 접근성도 높일 수 있습니다. (move secondary actions into a more menu to keep things clean and accessible)

왼쪽과 같이 자동으로 항목들의 그룹화가 이루어지지 않았다면, 오른쪽과 같이 더 보기 메뉴로 정리해볼 수 있겠습니다.

추가로 도구 막대 항목 (Group bar items)은 기능과 빈도에 따라 그룹화할 수 있습니다.

다시 말해, 비슷한 동작을 수행하는 버튼은 함께 배치하는 것이 바람직하다는 뜻이죠.

단, 아이콘과 텍스트를 함께 그룹화해서는 안됩니다. 두 요소가 하나의 버튼처럼 보일 수 있기 때문입니다.

만약, 텍스트 버튼이 필요한 경우라면 그룹이 아닌 독립된 컨테이너에 두어야 합니다.

왼쪽과 같이 심볼과 텍스트를 함께 그룹화한다면, 이를 하나의 버튼으로 착각을 일으킬 수 있겠죠?

Tab bar, Accessory View

탭바는 앱에서 가장 지속적으로 노출되는 요소 중 하나입니다.

따라서 명확하고 직관적인 구성이 무엇보다 중요합니다.

• 콘텐츠가 처음부터 화면에 보이지 않는다면? → 검색(Search) 탭을 필수로 고려해볼 필요가 있습니다. -> 이제 하단에 전용 검색 탭을 도입해, 사용자가 더 빠르고 쉽게 접근할 수 있습니다.
• 탭바는 이제 Accessory View를 활용해, 앱 전체에 걸쳐 미디어 재생 컨트롤 (media playback control) 같은 기능을 항상 표시할 수도 있습니다.
• 단, 특정 화면에만 해당되는 동작은 탭바에 넣어서는 안됩니다. -> UI의 지속적인 요소와 맥락에 따라 달라지는 요소가 섞이면, 계층 구조가 모호해지고 사용자가 어디에 집중해야 하는지 알기 어려워지기 때문이죠.

왼쪽이 새롭게 등장한 Accessory View, 오른쪽과 같이 특정 맥락에만 속한 내용을 탭바로 만든다면 안됩니다.

이 바 (bar)에 대한 내용을 꽤 길게 세션에서 다루고 있어, 무엇보다 기존 앱에 새로운 Liquid Glass 디자인 요소를 적용한다면 가장 우선적으로 다뤄봐야 할 것 같군요.

8. Scroll edge effects are not decorative.

스크롤시 적용되는 부드러운 스크롤 엣지 효과를 잘 활용해봅시다.

스크롤 엣지 효과(Scroll edge effect)는 단순히 예쁜 장식을 위한 기능이 아니라, Liquid Glass 디자인 시스템 안에서 UI와 콘텐츠의 경계를 명확히 보여주는 신호로써 추가된 기능임을 명확하게 알아야 합니다.

Liquid Glass를 사용할 때는 가독성을 위해 컨트롤과 콘텐츠는 명확히 구분되어야 합니다.

기존에는 컨트롤이 콘텐츠 위에 배치되는 방식이었다면, 이제는 시스템 소재 위에 올려지는 방식이 적용됩니다.

딱딱한 구분선을 대체하기 위해 적용된 것이 바로 이 부드러운 블러 효과 (= Scroll edge effect)로, 불필요한 시각적 왜곡을 줄이고 사용자가 콘텐츠에 더욱 집중하고 UI 가독성을 높일 수 있다고 설명합니다.

이 효과는 오버레이처럼 화면을 가리거나 어둡게 만들지 않으며, UI와 콘텐츠가 만나는 지점을 명확히 보여주기 위한 목적입니다.

단, 플로팅 UI 요소가 없는 곳에는 절대 이 효과를 사용해서는 안됩니다.

왼쪽의 딱딱한 컨트롤과 콘텐츠와의 경계 | 오른쪽의 부드러운 블러 효과로 드러나는 경계

Scroll View에서는 고정된 컨트롤이 뒷면의 컨텐츠와 겹치는 경우, 자동으로 엣지 효과를 보이도록 설정되었습니다.

시스템 전체에서는 soft와 hard 두 가지 엣지 효과 스타일이 제공됩니다.

• Soft 스타일 : 부드러운 전환으로, 버튼이나 입력창과 같은 인터랙티브 요소에 Liquid Glass를 적용할 때 어울립니다. iOS와 iPadOS의 기본값입니다.
• Hard 스타일 : 강하고 불투명한 경계를 제공합니다. 주로 macOS에서 사용되며, 배경이 없는 컨트롤, 인터랙티브 텍스트, 고정된 테이블 헤더처럼 선명도가 더 필요한 경우에 적합합니다.

이 두 가지 스타일은 혼합되거나 동시에 사용될 수 없습니다.

각 환경과 목적에 맞게 하나의 스타일을 적절히 선택해서 사용하는 것이 핵심이라 볼 수 있겠습니다.

왼쪽이 soft 스타일, 오른쪽이 hard 스타일

9. Use symbols for recognition

단순 아이콘을 넘어서는 심볼 (symbols)의 의미

심볼(symbol)은 사용자가 앱을 탐색하는 과정에서 의미를 빠르게 파악할 수 있고, 기억을 통해 익숙함을 느낄 수 있도록 돕는 하나의 디자인 언어와 같은 역할을 합니다.

너무나 당연하게도 콘텐츠가 하나의 그룹으로 묶여 있다면, 레이아웃이 변경되더라도 항상 함께 유지되어야 할 것입니다. (위에서도 계속 강조한 것처럼)

이를 가능하게 하는 중요한 개념 중 하나가 동일한 심볼을 사용하는 것입니다. (텍스트를 사용하는 것보다 오히려 더 장점을 불러올 수 있다고 합니다 !)

예를 들어, iPhone에서 쓰던 ‘검색 아이콘(돋보기)’이 iPad나 Mac에서도 동일하게 등장한다면 사용자는 추가적인 학습 없이도 의미를 직관적으로 이해할 수 있는 것처럼요.

반복을 통한 익숙함은 곧 사용자의 빠른 인지와 효율적인 사용 경험으로 이어집니다.

하지만 모든 아이콘이 동작을 명확하게 드러낼 수 있는 것은 아닙니다.

오히려 심볼의 사용이 여러 의미로 해석되어, 사용자의 모호함을 증대시킬 수 있는 부분도 분명 존재합니다.

• ✏️ 연필 아이콘 : annotate(주석 달기)로 이해할 수도 있고, edit(편집)으로도 착각할 수 있습니다.
• ✔️ 체크 아이콘 : confirm(확인)인지, select(선택)인지, 심지어 complete(완료)인지 헷갈릴 수 있습니다.

이처럼 심볼의 사용만으로는 기능의 전달을 명확하게 표현하기 어려운 경우라면, 심볼만 고집하기보다는 텍스트 레이블을 사용하는 것이 더 명확할 수도 있을 것입니다.

왼쪽과 오른쪽을 비교했을 때 기능의 명확성은 오른쪽 텍스트 레이블이 더 분명해집니다.

하지만, 그럼에도 불구하고 Apple의 디자인 시스템에서도 텍스트보다 심볼 중심으로 전환되는 추세가 두드러지는 것은 사실입니다.

특히, 아래와 같은 메뉴 바 (menu bar)에서는 글자 대신 기호를 적극적으로 배치해 공간의 효율성을 추구하는 면을 두드러지게 하는 사례를 확인할 수 있죠.

아래와 같은 예시처럼 관련된 동작이 여러 가지인 경우, 아이콘을 반복하거나 변형하지 않는 것이 좋습니다.

순서대로 아이콘의 반복, 변형, 한번 사용과 그룹화. 가장 오른쪽 부분을 권장합니다.

즉, 심볼은 그룹을 나타날 때 한 번만 사용하는 것이 좋다고 합니다.

관련된 동작이 여러 개라고 해서 아이콘을 반복하거나 변형하는 것은 오히려 혼란을 줄 수 있기 때문입니다.

여러분들이 사용자에게 제공하고자 하는 동작을 어떠한 심볼을 사용하는 것이 적절하게 표현할 수 있을지 고민해보는 것도 좋은 경험이 되겠네요 !

10. Define a shared anatomy, Support core interactions

다시 강조합니다. 어떤 기기나 플랫폼에서도 같은 방식으로 쓰이고 반응하도록, UI 구조와 동작을 통일하는 것을.

iPhone, iPad, Mac은 화면 크기도 다르고, 입력 방식도 다릅니다.

하지만 Apple은 이를 예외로 두지 않고 하나의 프레임워크 안에서 다루길 권장합니다. 이 프레임워크는 이번 Liquid Glass를 포함하면서, 동시에 SwiftUI의 내용도 함께 포함되겠네요.

그 출발점은 간단합니다.

“이 컴포넌트가 어떻게 구성되었는가, 그리고 어떻게 동작하는가”

심볼과 마찬가지로, 버튼·탭바·사이드바 같은 구성 요소도 익숙한 레이아웃을 재사용해야 합니다.

그래야 사용자는 새로운 환경에 들어가더라도 ‘익숙함’을 유지한 채 탐색할 수 있기 때문입니다.

Structure components to scale

문제는 구조가 바뀔 때입니다. 예를 들어, iPad에서는 같은 메뉴가 팝업 형태로 나오고, Mac에서는 컨텍스트 메뉴로 보일 수 있습니다.

이 경우 겉모습(구조) 은 달라지더라도, 핵심 상호작용(core interaction) 은 반드시 동일해야 합니다. (Components should always support the same set of core interactions)

• 탭바(tab bar)는 어떤 기기에서도 선택(selection) 을 명확히 보여줘야 합니다.
• 세그먼트 컨트롤(segmented control)은 항상 상태(state) 를 즉각적으로 반영해야 합니다.
• 사이드바(sidebar)는 플랫폼에 따라 모양은 달라도 탐색(navigation) 의 중심 역할을 유지해야 합니다.

즉, 형태가 달라져도 기능과 피드백은 동일하게 설계해야 한다는 원칙입니다.

여기서 더 나아가, Apple이 강조하는 포인트는 “단순히 차이를 메우는 것”이 아니라 “연계성을 강화하는 것” 입니다.

즉, iOS와 macOS에서 동일한 컴포넌트를 억지로 같게 만들 필요는 없습니다. 대신,

• 동일한 구조적 원칙을 따르면서
• 각 플랫폼의 강점을 살린 변형을 적용하고
• 사용자가 다른 플랫폼으로 이동했을 때도 동일한 목적과 상호작용을 직관적으로 이해할 수 있어야 합니다.

이는 분명 애플의 멀티 디바이스 환경의 영향을 고려하기 때문이라고 생각합니다.

특히, 이번 Liquid Glass는 visionOS 스타일이 iOS, macOS, iPadOS 등에도 적용되었다고 개인적으로 느껴졌는데요.

결국은 앱의 구조와 상호작용이 일관되게 (visionOS) 적용됨으로써. 훗날 Spatial Computing이 보편화되는 과정에서 그 간격을 최대한 줄이고. 빠르게 사용자들이 적용해나갈 수 있도록 하는 사전적 조치가 아닐까 싶었습니다.

사용자가 매번 새로운 앱을 배우는 것 같은 피로감을 느끼지 않도록 하기 위함인 것이죠.

그런 점에서 이번 디자인 업데이트는 새로운 변화의 시작점이 되는 “중요한” 내용으로 더더욱 느껴졌던 것 같습니다.

keeping the moment alive, 앞으로 Apple이 말하는 순간의 연속성을 Liquid Glass로 보장해봅시다.

Reference

Meet Liquid Glass | WWDC25 — Videos — Apple Developer

Get to know the new design system | WWDC25 — Videos — Apple Developer

Design foundations from idea to interface | WWDC25 — Videos — Apple Developer