‘플루언트 디자인’ MS 제품의 새로운 디자인 기준

Posted by

다양한 제품들에 해당 제품을 만든 업체만의 고유한 정체성을 적용하는 것은 고객 입장에서 제품의 브랜드 이미지를 명확히 인지할 수 있게 하고, 업체 자체의 인지도도 늘릴 수 있는 효과를 가져옵니다.

구글 안드로이드의 머리티얼 디자인. (https://material.io/design/color/dark-theme.html)

최근에는 많은 업체들이 자사의 브랜드 제품들에 해당 업체들만의 독특한 ‘디자인 기준’을 부여함으로써, 브랜드 이미지를 고객들에게 쉽게 각인시키기 위해 노력하고 있는데요. 마이크로소프트사 또한 예외가 아닙니다.


과거의 유산, 윈도우 8과 ‘메트로 디자인’

메트로 디자인이 적용된 윈도우 8의 시작 메뉴 환경. (https://youtu.be/iWxHbRqvwG0)

마이크로소프트는 지난 2012년 ‘윈도우 8’을 출시하면서, 화려한 효과를 절제하고 단순함명료함을 극대화한 것이 특징인 메트로라는 이름의 디자인 기준을 확립했던 바 있습니다.

메트로 디자인이 적용되었던 윈도우 8은 새로운 기본 앱들의 아이콘이 꾸밈 없이 깔끔해졌고, 시작 메뉴에 ‘타일’이라는 요소가 도입돼 더욱 직관적인 형태를 갖추었으며, 전반적인 사용자 환경이 시각적 효과를 배제한 채 깔끔한 디자인을 중심으로 이루어졌습니다.


오피스 2013, 2016에서의 ‘메트로 디자인’

이렇게 ‘단순·명료함’에 가치를 부여한 메트로 디자인은 윈도우 8에서만 적용되고 그치지 않았습니다. 지난 2013년 발표되었던 ‘오피스 2013’을 시작으로 오피스 제품군에도 메트로 디자인이 적용되어 오고 있습니다. 이와 함께 오피스 2013부터는 프로그램들의 아이콘이 선과 면만으로 구성된 단순한 형태로 바뀌었습니다.

오피스 2016 제품군의 UI.

이러한 메트로 디자인은 오피스 2016까지 계속해서 이어졌습니다.

오피스 제품군에서는 이전부터 엑셀은 초록색, 워드는 파란색, 파워포인트는 빨간색과 같이 고유한 색상으로 프로그램을 구분해 왔습니다. 오피스 2013에 이은 ‘오피스 2016’에서는 이러한 점을 더욱 살려 제목 표시줄 전반의 색이 해당 프로그램의 상징색으로 완전히 칠해지는 요소를 도입해, 사용자가 각 프로그램의 특색을 더욱 명료하게 인식할 수 있도록 함으로써 메트로 디자인의 취지를 잘 살렸다고 볼 수 있었습니다.


‘플루언트 디자인’의 등장, 그 내용은?

2015년 출시된 ‘윈도우 10’을 비롯해 한동안 MS의 제품들에는 메트로 디자인이 꾸준히 적용되어 왔었습니다. 윈도우 10에서는 시작 메뉴에서 볼 수 있는 타일과 단순한 모양의 기본 앱 아이콘 등의 메트로 디자인적 요소들을 볼 수 있었고, 오피스 제품군의 디자인도 ‘오피스 2013’ 이후로 큰 규모의 변혁이 없었습니다.

하지만 최근 들어 여러 MS 제품들이 지금까지 입고 있던 메트로 디자인을 벗고, 새로운 디자인으로 갈아 입기 위한 준비를 하고 있습니다. 마이크로소프트는 지난 2017년에 ‘플루언트’라는 이름의 새로운 디자인 기준을 발표했습니다.

플루언트 디자인이 추구하는 느낌을 표현한 그래픽 이미지. (https://docs.microsoft.com/ko-kr/windows/apps/fluent-design-system)

플루언트 디자인의 가치는 기존처럼 직관적이면서도 보는 사람에게 추상적으로 느껴질 수 있게 하는 점에 있습니다. 이에 알맞게 플루언트 디자인을 구성하는 5대 요소도 (Light), 깊이(Depth), 움직임(Motion), 재질(Material), 규모(Scale)라는 자연적인 성격의 요소들을 중점적으로 설정한 것을 볼 수 있습니다.

기존의 메트로 디자인은 직관성이 높고 깔끔해서 보기 좋다는 장점이 있었지만, 동시에 디자인 구성이 항상 단순했기 때문에 자칫 밋밋하거나 별로 독특하지 않은 디자인으로 보일 수 있다는 한계도 있었습니다. 그래서 이러한 한계를 보완하기 위해, 메트로 디자인의 ‘명료성’에 심미성을 결합해 만든 개념이 플루언트 디자인이라고 할 수 있습니다.

플루언트 디자인이 발표된 2017년부터 윈도우 10과 오피스 제품군 등에서 플루언트 디자인이 적용되기 시작했는데, 마이크로소프트사는 자사 제품들의 플루언트 디자인 적용을 장기적인 프로젝트로써 점진적으로 진행하겠다는 계획입니다.

지난 ‘윈도우 8’에서 새로운 시작 메뉴와 같은 메트로 디자인의 요소를 급격하게 적용했다가 많은 혹평을 받고 실적 부진으로 이어졌던 전례를 보면 이를 반면교사로 삼은 것처럼 느껴지네요.


오피스, 플루언트 디자인을 입다

2018년 12월에는 오피스 제품군의 아이콘이 플루언트 디자인을 따르도록 새로 디자인되었습니다. 이는 오피스 제품군의 구독형 서비스인 ‘오피스 365’ 사용자를 대상으로 동시기부터 적용되기 시작했습니다.

(상) 기존 메트로 디자인을 따르는 오피스 프로그램의 아이콘
(하) 새로운 플루언트 디자인을 따르는 오피스 프로그램의 아이콘

엑셀(Excel)·워드(Word) 아이콘:
직선을 통해 간단하게 표현된 시트·문서 상징 → 그라데이션을 통해 표현된 시트·문서 상징

파워포인트(PowerPoint) 아이콘:
단색 원그래프와 직선으로 표현된 슬라이드 상징 → 그라데이션으로 나타나는 원그래프 하나만으로 표현된 슬라이드 상징

아웃룩(Outlook) 아이콘:
편지봉투 속에서 그라데이션으로 나타나는 달력 형상이 나오는 것을 부각하여, 메일 관리 기능과 함께 기존의 아이콘에서는 표현하지 않았던 일정 관리 기능까지 상징화하였음.

플루언트 디자인이 적용된 오피스 프로그램의 아이콘들에서 찾을 수 있는 공통점은 그라데이션을 활용하였다는 것입니다. 겉으로 보기에는 모두 비슷한 형태로 그라데이션을 활용했지만, 이를 유심히 보면 엑셀에서는 의 구분이 되고, 워드에서는 의 구분이 되고, 파워포인트에서는 그래프 영역의 구분이 되고, 아웃룩에서는 달력 날짜의 구분으로 다양하게 해석할 수 있습니다.

이렇게 외관은 단순할지라도 추상적·감각적인 요소를 적용하여 보는 사람으로써 디자인을 더욱 몰입감 있게 접할 수 있게 하는 것이 플루언트 디자인이 추구하는 대표적인 가치라고 소개해 드릴 수 있겠습니다.


윈도우 10의 플루언트 디자인, 이제 ‘시작’

대표적으로 설정 앱에서 왼쪽의 리스트 영역에 적용된 반투명 효과를 볼 수 있다. (개인 설정 → 색 → ‘투명 효과’ 옵션을 활성화해야 함)

한편 윈도우 10에서는 지난 2017년 10월에 배포된 ‘가을 크리에이터 업데이트(Fall Creatiors Update, 버전 1709)’에서부터 창의 일부분에 반투명 효과를 적용하는 등 플루언트 디자인으로의 전환을 위한 기반을 마련하고 있었습니다.

플루언트 디자인에 맞게 아이콘이 업데이트된 앱들과 그렇지 않은 앱들을 구분해 보았다.

그리고 2020년 5월에 배포되는 기능 업데이트(버전 2004)를 통해서 일부 기본 앱의 아이콘들이 플루언트 디자인에 맞춰 새롭게 바뀔 예정입니다.

‘메모장’의 아이콘은 2021년 상반기 업데이트에서 변경될 예정이다. 필자의 컴퓨터는 2020년 4월 업데이트가 이미 설치된 상태로, 2020년 5월 업데이트가 설치된 상태에서도 아이콘이 새로 바뀐 ‘메모장’ 앱은 더 높은 버전을 요구하며 설치되지 않는다.

하지만 다음달에 업데이트를 설치해도 아이콘이 바뀌지 않는 기본 앱들도 있습니다. 플루언트 디자인으로의 전환이 점진적인 작업인 만큼 다음달의 업데이트뿐만이 아니라 추후에 지속적으로 나올 업데이트를 통해서 아이콘이 새롭게 바뀌는 기본 앱들이 점점 늘어날 전망입니다.