brunch

매거진 디자인 뉴스레터 디독

라이킷 72 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Jul 19. 2020

애플이 주도하는 소프트 UI

*본 글은 디자인 뉴스레터 디독에서 발행한 글입니다.

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

디독

page.stibee.com

요약

애플이 주도하는 UI의 특징을 살펴볼 수 있는 아티클입니다. 애플의 디자인 흐름에 모든 디자인이 똑같이 접근할 필요는 없지만, 어떤 이유로 그러한 디자인 흐름을 만들었는지 가볍게 살펴보면 어떨까요?

애플은 이번 WWDC 2020에서 꽤 대담한 업데이트 소식을 몇 가지 발표했다. 여기서 기술적인 부분은 우선 넘겨두고, UI가 어떻게 바뀌었는지에 중점적으로 살펴보자. UI는 초기에 Aqua로 최초의 비트맵을 표현하고 더 현대적인 스타일을 거쳐, 이제는 완전히 새롭고 일관된 하나의 디자인 언어로 모두 합쳐졌다.

Mac 메인 OS 디자인 스타일

모바일, 데스크탑 OS의 변화는 현재 가장 잘 작동하는 디자인 스타일을 보여준다. 변형된 디스플레이 시대가 도래하기 전까지, 부드러운 UI는 유지될 것이다. 이번에 애플이 보여준 것과 마이크로소프트가 개발한 것 사이에서 유사점을 찾아볼 수 있는데

바로 유려한 UI 디자인이란 것이다. 십년도 더 전에 애플이 마이크로소프트가 애플의 아이디어를 베꼈다고 조롱하더니(상당히 합법적으로) 이제 애플이 자사 제품에 마이크로소프트 방식을 도입한다고 생각하니 우습다.

내용은 다음과 같다.

1. (더) 둥근 모서리

신규 사용자들 중 일부는 이를 기억하지 못하겠지만, 애플은 항상 둥근 모서리에 집중고, 점점 더 둥글어졌다.

초기 아이폰 OS는 오히려 사각형으로 보이는 패널 및 토글을 갖고 있었는데, 우리는 모두 본능적으로 날카로운 모서리를 싫어한다는 ‘teeth’ 패러다임을 알고 있다. 이런 UI는 더 무섭고 덜 친절하게 표현된다.

이런 이유로, 애플은 우리가 지금 알고 있고 사랑하는 좀 더 둥근 버전의 토글로 천천히 다듬어 나갔다.

(왼쪽) 첫 번째 iPhone 버전, (오른쪽) 자연스러움을 위해 더 둥글게 표현되고 있는 디자인

하지만, 여기서 멈추지 않았고, 아이콘 모서리의 반지름도 수정했다. 이제는 비슷한 스타일의 아이콘도 맥 OS에 등장하고 있다.

UI에 떨어지는 곡선이 실제와 동일하게 표현되기 시작했다.

윈도우, 패널, 액션 시트 또한 약간 더 둥글어졌다. 이러한 변화의 대부분은 매우 둥근 디스플레이를 가진 아이폰 X에서부터 시작되었다고 볼 수 있다. 액션 시트 상단을 둥글게 함으로써 곡선을 맞춘 것이다.

둥근 모서리가 바로 여기 있다.

2. 투명함과 블러 처리된 배경

악명 높은 iOS 7이 나오면서, 투명하고 배경이 흐릿한 스타일이 인기를 끌었다. 대부분의 사람들은 매우 얇은 형태의 글꼴과 결합된 초미니멀리즘의 새로운 디자인을 싫어했지만

또 대부분의 사람들은 흐릿한 배경 효과를 많이 좋아했다. 현재 사이드바(이전의 맥 OS 버전 몇 가지)와 툴팁에서도 이러한 흐릿한 배경 표현은 두드러지게 나타나고 있다.

흐릿한 배경, 특히 사이드 바 아래에 이러한 표현은 배경의 일부가 전체 OS에 연결되었음을 보여준다.

마이크로소프트는 이러한 투명성을 이용하여 매우 유사한 레이어 중심의 접근법을 UI 디자인에 사용하고 있다.

레이어링은 사용자에게 더 가벼운 표면을 노출하는 데 사용되는 반면, 그 후 낮은 스택의 레벨은 약간 더 어둡게 표현된다. 이러한 방식으로 반투명 효과가 없어도 충분한 계층 구조를 보여준다는 말인데

개인적으로 나는 이러한 선택에 대해서는 완벽히 동의할 수 없다. 나는 솔리드 컬러가 이를 더 명확하게 사용자에게 전달할 것이라고 믿는 편인데, 아래 층과 ‘연결'을 표현하고 싶은 그들의 욕구는 이해한다.

3. 정돈된 심볼(유형)

나는 이 변화가 점진적일 것이라고 믿고 있는 편이다. 애플은 맥 OS 아이콘 스타일로 ‘리얼리즘'을 유지하고 싶어했고, 모바일 OS에 이러한 부분이 훨씬 더 표현되었다.

지금까지 Finder 아이콘이 어떻게 변했는지는 다음 이미지로 살펴볼 수 있다.

아이콘은 확실히 단순화 되어가고 있고, 직사각형 모양에서 점차 둥글고 균일해진 형태로 정리됐다. 미소는 어떤 이유에서인지 더 얇게 변화되었고 (변할 것 같다). 사용자에게 더 친근하게 전달되게끔 각도도 달라지고 있다.

맥 OS의 툴바 아이콘은 전형적인 iOS/ iPad OS 아이콘과 함께 균일하게 정리됐다. 아이콘 스타일은 더 둥글게, 친근하고 개방적으로 표현되었고, 테두리의 경우에는 시각적으로 더 이해하기 쉽고 불필요한 장식이 없어졌다.

4. 스큐어모피즘?

맥 OS는 스큐어모피즘 요소의 최후의 보루 중 하나라고 할 수 있다. 이제 애플은 새로운 형태로 통합되어 현대적이고 평평한 표면과 결합되고 있다. OS는 새롭게 현대적인 모습을 보여주는 동시에 OS 자체가 갖고 있는 스타일에 기반하고 있다.

지금이 좀 더 미니멀한 디자인이 나오는 데까지 중간 지점이 될 것 같다. 우리는 친숙하다고 믿는 것을 좋아하기 때문에, iOS 7처럼 급진적인 변화가 올지도 모르겠다.

5. 기타

이전 맥 OS 버전에서도 모바일 OS의 다크모드와 샌프란시스코(폰트)를 도입한 것처럼, 이제 애플 디자인 시스템은 모든 플랫폼에서 일관되게 전달되고 있다.

샌프란시스코는 현대적인 산세리프 서체로 단순함이 위대하다는 것을 다시 한 번 증명한다.

이러한 전체적인 리디자인은 또한, 수백만 명의 사용자를 가진 한 회사가 작동하는 UI의 보편적인 방식을 어떤 한 방향으로 그 흐름을 이끌 수 있다는 것을 증명하기도 한다.

둥근 귀퉁이와 부드러운 그림자, 또 섬세한 그라데이션 같은 것들이 남아있는 것처럼.

위 그림은 일러스트 북에서 참고한 소프트 UI의 한 사례이다.

물론, 모든 사람들을 위해 디자인된 제품은 가장 보편화된 기본 원칙을 따라야 하는 것이 맞다. 하지만, 그렇다고 해서 우리가 하는 모든 일에 똑같은 규칙을 적용해야 한다는 것은 아니다.

고도로 전문화된 틈새 제품을 만들고 있다면, 여러분은 그대로 날카로운 모서리와 완전히 불투명한 레이어 등을 디자인 요소로 사용할 수 있는 것이다.

애플이 역할을 하지 않았다고는 생각하지 않다. 그들은 대부분의 사람들이 좋아하는 것에 대해 광범위하게 연구했고 그것을 바탕으로 여전히 인기를 끌고 있는 지금이 바로 소프트 UI이인 것이니까.

저자 : Michal Malewicz

원문 : How Apple makes soft-UI the future

번역자 : 노효정