brunch

You can make anything
by writing

C.S.Lewis

by 김준범 Jul 06. 2020

애플의 soft-UI

How Apple makes soft-UI the future

애플의 soft-UI



애플이 WWDC2020에서 큰 업데이트를 발표했다. 기술적인 면 외에 UI가 어떻게 바뀌었는지 살펴보자. 애플의 UI 디자인은 최초의 비트맵 아이콘부터 아쿠아 아이콘, 모던한 스타일로 변해왔다. 그리고 지금은 모든 것들이 완전히 새롭게 변했다.

Main Mac OS design styles

모바일과 데스크톱 OS의 변화에 따라 디자인 스타일도 가장 적합한 스타일로 변화한다. 모핑(morphing) 디스플레이(UI의 형태에 따라 디스플레이가 물리적으로 입체가 되는 디스플레이)가 나타나기 전 까지는 soft UI가 대세일 것이다. 애플이 새로 보여준 UI와 마이크로소프트의 Fluent UI design에 비슷한 점이 있다.

십여 년 전에 애플은 Windows Vista가 애플의 디자인을 베낀 것에 대해 조롱했지만 지금은 애플이 마이크로소프트의 방식을 그들의 제품에 적용하고 있다.


애플의 새로운 UI 디자인 스타일


마이크로소프트의 Fluent design system 콘셉트




(more) Rounded corners


최근에 애플 제품을 사용하기 시작한 사용자는 모르겠지만, 애플은 항상 둥근 모서리를 지향해 왔다.

그리고 계속 둥근 모서리는 더 둥글어졌다.

최초의 iPhone OS는 사각형에 가까운 토글 버튼과 패널을 가지고 있었다. 애플은 토글 버튼을 점차 더 둥근 버전으로 다듬었다.

좌측 - 최초의 iphone 버전. 우측 - 더 둥근 형태로의 진화.

여기서 멈추지 않고 아이콘의 모서리도 조정하였다. 지금은 유사한 스타일의 아이콘이 Mac OS에서도 보이고 있다.


UI의 모서리가 실제 디스플레이의 모서리의 둥글기에 맞춰 둥글어졌다.

윈도우, 패널, 그리고 액션 시트의 모서리가 더 둥글어졌다. 이러한 변화는 모서리가 아주 둥근 디스플레이를 가진 iPhone X의 등장과 함께 시작되었다. 액션 시트의 모서리도 디스플레이의 둥글기에 맞춰 더 둥글어졌다.






투명도와 배경 흐림 효과


투명도와 배경 흐림(background blur) 효과는 악명 높은 iOS 7의 등장과 함께 유명해졌다. 대부분의 사람들은 극단적으로 미니멀한 형태와 매우 얇은 폰트로 이루어진 새로운 스타일을 싫어했다.

그러나 배경 흐림 효과는 매우 좋아했다. 지금은 배경 흐림 효과는 사이드바뿐만 아니라 툴팁에서도 두드러지게 나타난다.


많은 경우에 배경 흐림 효과는 - 특히 사이드바에 적용된 효과 - 윈도우에서 이 효과가 적용된 부분의 배경을 투과하여 보여줌으로써 OS 전체에 "연결되어" 있다는 것을 보여준다.


마이크로소프트도 투명도를 이용한 레이어 기반의 매우 유사한 방식을 사용하고 있다.

이러한 방식은 밝은 면이 사용자에게 더 가깝게 보이고, 순차적으로 하단의 레벨은 좀 더 어둡게 보인다는 잘 알려진 콘셉트를 사용하고 있다. 이러한 방식은 투명도 효과 없이도 계층구조를 보여줄 수 있다.


개인적으로 이러한 방식이 좋은지는 모르겠다. 나는 불투명한 색상이 더 명확히 보인다고 생각한다. 그러나 하단의 레이어와 "연결"시키려는 의도는 이해할 수 있다.





(약간은) 통일된 심벌


나는 이 변화가 점진적으로 일어날 것이라고 생각한다. 애플은 mobile OS와 비슷하게 "리얼리즘"을 Mac OS 아이콘 스타일에 충분히 반영하려고 하고 있었다.

지금까지 파인더 아이콘은 이렇게 변했다.

아이콘은 심플해졌고, 각이진 형태도 매우 둥근 형태로 변화했다. 미소 짓는 입의 라인도 더 얇아졌고 각도도 더 친근한 느낌이 든다.


Mac OS의 툴바 아이콘들도 iOS/iPad의 아이콘들과 더 유사해졌다. 아이콘 스타일이 또 한 번 둥글어졌고 친근해졌다. 굵기는 충분히 인식 가능한 정도로 굵어졌고 불필요한 장식은 없어졌다.




스큐몰피즘(Skeumorphism)?


Mac OS는 스큐몰피즘 의 요소가 최후까지 남아있는 곳이었다. 이제는 new-skeumorphism으로 전환해서 모던하고 플랫한 스타일로 바뀌었다. 새롭고 모던해 보일 뿐만 아니라 원래의 스타일에서도 크게 벗어나지 않는 느낌을 준다.

바뀐 스타일은 미니멀 디자인과 스큐몰피즘의 중간 단계처럼 보인다. 결국 우리는 iOS7의 스타일의 급격한 변화를 받아들이게 된 것처럼 익숙해지면 좋아하게 되어 있다. 




기타


이전의 Mac OS 버전은 다크모드와 샌프란시스코 폰트를 모바일로부터 가져왔다. 이제는 애플의 디자인 시스템이 모든 플랫폼에 걸쳐 매우 유사해진 것 같다.

샌프란시스코 폰트는 심플한 것이 훌륭하다는 것을 다시 한번 증명한 모던한 고딕체이다.

변경된 디자인은 수백만의 사용자를 가진 애플이 둥근 모서리, 부드러운 그림자, 정교한 그라데이션과 같은 UI를 밀고 있다는 것을 보여준다.

Soft UI의 다른 예시


분명히 "모든 사람들"을 위해 디자인되는 제품의 디자인은 가장 일반적이고 친숙한 가이드라인을 따라야 한다. 그러나 이것은 우리가 하는 모든 디자인에 똑같은 규칙을 적용해야 한다는 것을 의미하지는 않는다.

매우 전문화 되고 특별한 분야의 제품을 만든다면 여전히 날카로운 모서리나 불투명한 레이어를 사용할 수도 있다.

그러나 나는 애플이 그들이 해야 할 의무를 다 하지 않았다고 보지는 않는다. 애플을 대부분의 사람들이 좋아하는 것에 대한 광범위한 리써치를 했을 것이고, 그것이 트렌드로 나타난 것이다.

이제는 Modern, Soft-UI가 트렌드가 될 것 같다.






원문 출처 : https://uxdesign.cc/how-apple-makes-soft-ui-the-future-9f3ac69eea6f


작가의 이전글 다크모드 디자인

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari