Big Sur의 앱 아이콘
애플의 새로운 OS, Big Sur에서 아이콘 디자인이 크게 바뀌었다. macOS X 이후 가장 많은 디자인 변화가 있는 업그레이드였다.
빅서의 뜻은 미국 캘리포니아 중부 해안의 빅서 주립공원에서 따왔다. 아름다운 해변으로 유명한 곳이며, 픽사 애니메이션 '도리를 찾아서'에 나오는 캘리포니아 모로 베이가 여기에 있다. 매버릭, 요세미티, 엘 캐피탄, 시에라, 하이 시에라, 모하비, 카탈리나에 이은 지명 이름을 붙인 macOS 시리즈다.
빅서는 레이아웃, 작업 영역의 구분, 타이포, 투명도 등 모바일과 데스크톱 디바이스에서 공통적으로 사용되면서, 각 디바이스의 환경에 맞춘 디자인을 보여주고 있다. 많은 디자인 변화 중에서 가장 먼저 보이는 아이콘이 어떻게 변했고, 어떻게 적용되는지 알아보려고 한다.
빅서의 새로운 아이콘 디자인은 배경이 생겼고, 자세하게 묘사되는 오브젝트가 전경에 배치된다. 오브젝트와 아이콘을 통해서 앱의 맥락과 앱에서 자주 하는 행동에 대해 알 수 있다. 그렇지만 온라인 커뮤니티 반응을 살펴보면, 다시 스큐어모피즘으로 돌아갔다고 말하는 경우를 많이 접할 수 있다. 많은 디자이너가 스큐어모피즘과 플랫으로 디자인의 스타일을 구분한다. 하지만 이 관점으로만 디자인을 평가하는 것은 성급하다.
가이드의
통일과 변화
주요 아이콘의 변화macOS 매버릭부터 빅서까지 디자인은 단순하고 평면적으로 변하고 있다. 디자인 가이드를 통해서 이 변화의 방향성을 볼 수 있다. 요세미티에서 macOS의 아이콘은 새로운 가이드와 규칙이 적용되면서 대대적인 변화를 겪었다. 요세미티에서 정립된 아이콘 가이드는 빅서에서 한 번 더 단순화되었다. 규칙이 단순화되면서 재질과 구체적인 묘사는 다시 세밀해졌다.
요세미티가 출시된 시기는 디자인의 규칙과 일관성, 통일성이 강조되던 시기로, 디자인을 구조적으로 시스템화하기 위한 노력이 많이 있었다. 그래서 명확한 수치가 적용되었다.
http://martiancraft.com/blog/2014/07/inspecting-yosemite-icons/명확한 수치에 따른 디자인을 위해서 모호한 소실점이 없어졌다. 아이콘의 미묘한 테두리가 명확해지면서, 윤곽이 통일되었다. 동적인 묘사를 위해 채택된 기울임은 -9°였다. 기울어진 각도가 사용되는 가이드는 기울어진 사각형(tilted rectangle)으로 불렸다.
Icon Design Guidelines on perspective. Source: Apple기울어진 각도를 사용하는 아이콘은 각도만 통일되고, 나머지 부분은 자유롭게 사용되었다.
기울기와 함께 아이콘의 질감을 표현하기 위한 장치 중 빛의 반사도 가이드에 명시되었다. 이전에는 다양한 질감을 표시했지만, 요세미티부터는 텍스쳐가 없는 매끈한 금속 질감의 반사를 묘사했다. 두 방향에서 비치는 조명의 각도는 15°로 정해져 있었다.
http://martiancraft.com/blog/2014/07/inspecting-yosemite-icons/빅서에서 여러 가지였던 요세미티의 가이드가 하나의 가이드로 통일되었다. 빅서의 가이드 특징은 테두리 영역의 추가와 기울어진 오브젝트의 각도다.
가이드가 하나로 합쳐졌다.가이드가 변경되면서 모든 아이콘이 리디자인 되었다.
이제는 모두 둥근 사각형 안에 들어간다.제한된 가이드 안에서 묘사가 세밀해졌기 때문에, 고해상도 스크린에서 볼 경우, 앱을 더 잘 이해할 수 있다. 빅서에서는 UI를 구성하는 기본 글자 크기가 더 작아져서, 아이콘이 역할이 더 커졌다. 데스크톱에 적용된 이미지를 보면, 앱 아이콘의 구분과 통일성이 개선되었다는 것을 알 수 있다.
이전 아이콘에 비해서 명확하고, 더 디테일하다.새로 생긴 아이콘들을 가이드에 맞춰서 정리해보면, 가이드가 어떻게 적용되었는지 알기 쉽다.
가이드의 특징대로 아이콘을 분류하면 가이드가 보인다.예전에 각도만 통일되었던 아이콘에 비교하면, 그동안 갖고 있던 아이덴티티의 다양성을 유지하면, 규격을 통일했다. 정렬과 간격, 윤곽이 정리되면서, 더 세밀한 묘사가 추가되었다.
https://www.andrewdenty.com/blog/2020/07/01/a-visual-comparison-of-macos-catalina-and-big-sur.html데스크톱에서 보면, 변화가 명확하다. UI에 사용되는 아이콘과 텍스트는 작아졌지만, 더 세밀해졌고, 더 넓은 공간을 여유롭게 사용한다.
플랫폼에 따른
디테일 묘사
새로운 애플 아이콘 가이드는 다양한 플랫폼에서 사용되는 것을 고려하여, 아이콘의 랜더링 디테일을 조절하라고 하고 있다. 모바일 아이콘과 비교해보면, 유사한 테두리를 가지면서 더 큰 스크린에서는 더 자세하게 묘사되고 있다.
macOS의 편지 봉투에는 애플 주소가 적혀 있다.맥락과 일관성을 고려하는 점에서 아이콘의 배경을 활용하고 있다. 아이콘의 배경은 단순하지만, 앱을 사용하는 백그라운드를 은유적으로 표현한다. 동시에 배경 위에 오브젝트가 배치된다.
체스 아이콘의 변화빅서의 아이콘 가이드의 특징은 유연하고 풍부한 표현이 가능하게 하면서 제품의 맥락을 잘 표현한다는 점이다. 그리고 이 배경 위에 오브젝트는 자세하고 구체적으로 묘사된다. 가이드라인도 배경이 나타내는 네러티브와 맥락을 잘 표현해달라고 말하고 있다.
애플의 안내 문구 중에 visual consistency가 눈에 띄는데, 해외 디자인 아티클로 보면, context와 consistency를 구분하는 경우가 있다. 시각적 일관성(visual consistency)은 브랜딩과 마찬가지로 UI를 통한 앱의 자연스러운 사용 과정(Flow)에서 강조된다. 디자인에서 일관성(consistency)은 같은 것이 반복되거나, 논리적인 앞뒤전후가 아니라 좀 더 인간적인 모델을 추구하는 것으로 보인다.
배경과 전경을 사용해서 풍부한 표현이 가능하다.MS의 사례를 보면, 지나치게 모던한 디자인이 가지는 한계에 대한 교훈을 얻을 수 있다. 코드명 메트로 UI였던, 윈도우8 스타일 UI은 디지털 네이티브를 타깃으로 제작되었지만, 길게 가진 못했다. 대신 좀 더 풍부한 표현이 가능한 Fluent Design System이 도입되었다. 미니멀하거나 모던한 디자인은 간결해 보이지만, 복잡한 상황에 대응하기 힘들다.
스큐어모피즘으로 판단하기 전에 어떤 환경에서 어떤 목적으로 디자인되었는지 생각해봐야 한다. ‘예쁜’ 아이콘과 ‘기능’이 잘 표현되는 논리적인 디자인에 대한 토론이 엉뚱한 결론이 도착하는 것을 막을 수 있다.
빅서의
시스템 아이콘
빅서는 아이콘은 앱 아이콘과 시스템 아이콘으로 구분된다. 시스템 아이콘은 이번 업데이트에서 면이 아닌 선으로 디자인되었다. 면이 사라진 대신 좀 더 디테일하게 표현되었다. 그리고 각 라인의 크기와 정렬이 많이 개선되었다.
파인더 사이드바의 변화시스템 아이콘이 더 작아지면서 단순해졌고, 글자와 간격이 세밀하게 조정되었다. UI의 아이콘과 텍스트가 작아졌지만, 간격은 더 여유 있게 구성되었다. 전반적으로 고정된 UI는 작아졌지만, 스크린 크기와 해상도의 변화에 따라 넓게 배치된다.
소프트웨어의 아이콘은 기능을 알려주고 소프트웨어의 아이덴티티를 구성한다. 아이콘, 버튼, 배경, 프레임 등이 모여서 하나의 브랜드를 표현하게 된다. 그리고 디바이스의 스펙 변화와 사용자의 사용 방식, 처리해야 하는 업무에 따라 변하게 된다.
시스템 아이콘의 변화는 아이콘뿐 아니라, 아이콘이 배치되는 상황의 변경도 가져왔다. macOS의 작업 영역의 변화는 다른 글에서 다루려고 한다.
용어와 남용은
편향을 만든다.
빅서의 아이콘은 OS 출시 전부터 화제가 되었다. 화제의 핵심적인 부분은 스큐어모피즘이었다. 스큐어모피즘과 머티리얼, 모던, 미니멀한 디자인의 과거 방향에 있으며, 왠지 이제는 해서는 안될 디자인으로 취급받는 듯하다. 반면에 미니멀한 디자인을 효율적으로 만든다는 뜻이다. 그런데 이 의미가 어떤 부분에서는 논리적인 디자인으로 인식되는 경향이 생겼다.
스큐모피즘과 요즘 나온 현대적인 디자인 트렌드의 차이는 '논리', 규칙', '효율성' 등으로 스마트한 느낌을 주고, 자세히 표현된 디자인은 비효율적이며, 없어져야 한다는 식으로 말하는 경우가 많다. 디자이너마다 디자인의 목적이나 비전이 다르다. 그런데 남이 사용하는 용어로 자신의 디자인을 설명하면 안 된다.
예전에 '충무로 디자인'이라는 말이 있었다. 울긋불긋하고, 통일성이나 규칙성이라고는 눈곱만큼도 없다. 우습게 보이지만, 실제로 그렇게 디자인해보면 알게 된다. 생각보다 쉽지 않다. 막 만든 거 같지만 효과적이고 빠르게 제작할 수 있다. 문제는 주변을 넓게 보지 않고, 좁은 시야로 디자인하는 것이다.
구글의 경우에는 원색에 가까운 눈에 띄는 4개의 색상을 섞었다. 그리고 각 아이콘의 디자인은 평면적이지만, 입체적이다. 애플의 경우는 대상의 자세한 특징을 묘사하고 빛의 투과와 반사, 그림자를 사용한 디자인을 사용한다.
트렌드를 추종하고, 벤치마킹을 많이 할 때, 남이 하는 디자인의 발자국만 보고 따라 가면 안된다. 똑같이 자리에 발자국을 남기려고 하지 말고, 발자국과 발자국 사이를 생각하고, 이어지는 방향을 생각해 봐야 한다.
있는 것을 그대로 보고, 전략을 세울 때다.
