- 관련게시물 : 싱글벙글 오늘 새벽 공개된 애플 혁신

애플의 Liquid Glass

마소의 Windows Vista

이번 WWDC에서 등장한 Liquid Glass는 "단순히 Windows Vista와 유사해보일 뿐이다."라는 감상평이 있었다.

"그냥 둘 다 투명해보이는 유리창에 블러 추가된 것 아냐?"정도로 말이다.

처음 얼핏 보는 입장에선 충분히 그럴 수 있다.

비스타 외에 글래스 UI는 우리가 그렇게 흔히 볼 수 있는 존재가 아니었기 때문이다.

그러나 애플의 Liquid Glass를 조금 더 파고 든다면 우리는 비스타와의 차이점을 느낄 수 있다.

비스타는 유리를 단순 고정적인 블러 처리를 했다면, 반면에 Liquid Glass는 글래스 뒷 편의 환경에 따라 '유동적'으로 성질이 변한다.

비스타의 글래스는 창 윗부분처럼 부가적인 요소에 불과한 경우가 많지만 Liquid Glass는 보다 텍스트와 상호작용하는 경우가 많기 때문에 가시성을 위해 동적이어야만 한다.

그렇기 때문에 이름이 그냥 Glass가 아닌 'Liquid(액체처럼 유동적인)' Glass이다.

Apple Developer에선 Liquid Glass를 크게 세 주제로 나누어서 설명한다. (영상 링크는 맨 아래에 첨부)

1. "Dynamics" (끊임없이 변화하는, 역동적인)

2. "Adaptivity" (적응성)

3. "Principles" (원리)

파트 별로 각각의 일부분 정도만 확인하겠다.

여기서부턴 전부 애플 디자인 팀의 영상이고 설명이다.

1. "Dynamics" (끊임없이 변화하는)

Liquid Glass는 "Lensing"을 통해 시각적 외관을 정의한다.

Lensing은 현실 세계에서 빈번하게 경험하는 개념이다.

이를 통해 우리는 투명한 물체의 빛이 구부러지고 굴절되는 것을 '직관적'으로 이해할 수 있다.

물체의 존재와 움직임을 이해할 수 있는 것이다.

(본능적인 시각을 이용하는 것)

기존 소재가 빛을 분산 시켰던 것에 비해

새로운 소재는 '실시간'으로 빛을 동적으로 구부리고 모양을 만든다.

현실 세계에서 시각적으로 보는 것과 유사한 경험을 조성하는 동시에 백그라운드 콘텐츠를 정의한다.

이렇게하면 가볍고 투명하게 느껴지면서도 명확히 구별할 수 있다.

유연하고 빠르게 반응하며 자연스럽게 흐르는 모션과 특성이 현실 세계의 경험하는 액체의 움직임과 매우 유사하다. 

Liquid Glass는 반응성을 높혀 빛을 돋보이게 하고 살아있는 듯한 경험을 선사한다.

또한 젤 고유의 특성으로 상호작용에 따라 계속 변화하는 모습을 나타낸다.

우리가 생각하는 움직임과 유사한 인터페이스 경험을 선사할 수 있다.

2. "Adaptivity" (적응성)

나머지 내용이 궁금하면 꼭 유튜브로 보자. 본인은 신기해서 반복해서 봤다.

Liquid Glass는 여러 레이어가 함께 작동한다.

밝기가 변화하지 않거나 어두운 외관을 가졌던 이전 소재와는 달리 각 레이어는 뒷배경에 적응해 지속적으로 변화한다.

주변의 다채로운 색은 소재 특성을 돋보이게 하고 인터페이스에 세련미를 더한다.

효과는 표면에만 국한되지 않는다.

빛이 반사되고, 분산되며 그림자에도 스며든다.

현실 세계와 같이 말이다.

글래스는 배경 위에 자연스럽게 녹아내리며 제목 요소를 항상 명확하게 유지한다.

콘텐츠를 스크롤 해서 배경이 어두운 스타일이 되면

글래스는 옅게 디밍 효과(밝기 조절)를 적용해 지능적으로 전환한다.

또 한 번의 대비로 가독성을 보장하는 것이다.

3. "Principles" (원리)

Liquid Glass의 진정한 힘은 전체적 디자인 접근법에 있다.

빛의 동작과 깊이 효과, 적응형 변화는 각각 따로 움직이는 기능이 아니다.

복잡한 레이어 시스템이다.

함께 움직이면 더 놀라운 소재를 완성한다.

레이어 일부 중 다음 세 가지를 살펴보겠다.

① 하이라이트 레이어

Liquid Glass는 우리에게 익숙한 방식과 동일하게 빛을 발생시키는 소재를 비춘다.

휴대폰을 잠그고 해제하는 상호작용 중에 이 빛은 소재 주변을 맴돌게 해 실루엣을 드러낸다.

어떤 경우에는 빛이 기기의 움직임에 반응하기도 한다.

현실 세계처럼 말이다.

② 그림자 레이어

(글래스 바로 아래를 유심히 관찰하면 그림자가 드리우다가 사라지는 장면을 볼 수 있다.)

텍스트 위에 놓인 경우 그림자의 오퍼시티(불투명도)를 높인다.

반대로, 단색 백그라운드 위에 놓인 경우에는 그림자의 오퍼시티를 낮춘다.

이렇게하면 글래스와 콘텐츠를 더 명확하게 있어 요소를 한눈에 쉽게 알아볼 수 있다.

③ 내부의 빛 상호작용 레이어

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

(잘 보면 글래스 안에서 빛이 난다.)

탭 한번이면 요소에서 빛이 퍼져나가 근처의 모든 글래스 요소를 물들이고 소재와 자연스럽게 상호작용한다.

이러한 모든 동작들은 인터페이스가 살아 있는 느낌을 주며 또한 애플 기기가 현실 세계와 직접 연결된 느낌을 준다.

끝!

...

보면 볼수록 애플의 디자인 팀은 현대 미학 정수의 집대성이 아닐까 싶다.

스티브 잡스의 완벽주의 디자인 미학 계승,

애플의 압도적인 자본 지원 능력과 인적 능력,

팀 쿡의 냉철한 능력주의 리더쉽과 토론 위주의 선진 사내 문화 등이 맞물려

항상 남성적이고 딱딱하기 그지없는 테크 기업을 장인 정신이 깃든 일류 럭셔리 브랜드로 승화하는데 성공한 애플 그 자체가 경외롭다.

자연의 물리법칙은 현실의 우리에게 너무도 당연한 것이라 이러한 과학성을 모르고 본 우리들은 별 게 아니라고 생각하는 것이 일반적이다.

하지만 인위성에서 탈피하고자 극구의 노력을 가하는 스마트폰 기업이 완벽주의자 애플 뿐이라면,

그것은 남들이 못 하는 걸 '꾸준히' 해내는 유일한 기업이라고 볼 지도 모르겠다.

본문 영상으로 보기 (19분 32초) - Youtube Apple Developer

아이폰 애니메이션 관련 추가 영상 (5분 59초)