윈도우10 '플루언트 디자인 시스템', "UX 통합의 시작"
상태바
윈도우10 '플루언트 디자인 시스템', "UX 통합의 시작"
  • by 이상우
GUI(Graphical User Interface)는 입체적으로 표현된 창과 아이콘을 마우스로 조작하게 함으로써 사용자들은 열렬히 환호했다. 윈도우7까지 이 방향성을 유지해왔던 마이크로소포트(MS)가 윈도우8에서 '모던 디자인'이라는 완전히 새로운 GUI를 제시한다.

"모던 디자인은 플랫 디자인과 다르다. 플랫 디자인으로 표현할 수 없는 깊이와 특징, 배경 등을 포함한다."

MS는 '윈도우8.1 UX 디자인 가이드라인'에서 모던 디자인을 스위스 양식으로 널리 알려진 국제 타이포그래피 양식을 토대로 시각적 사고에서 접근하는 현대적 디자인으로 정의했다. 왜 이 이야기를 꺼내는가 하면, MS가 윈도우10에서 또 한번 디자인 변화를 예고해서다. 새 디자인 가이드 '플루언트 디자인 시스템(Fluent Design System)'은 빛, 깊이, 모션, 재질, 스케일을 기반으로 다양한 기기에 맞는 새로운 UX가 특징이다. MS는 공식 블로그에서 "오래된 플랫 디자인에서 플루언트 디자인으로 전환을 위해 비디오나 이미지, 그래픽 등 여러 레이어를 병합하는 컴포지션(Composition) API가 제공하는 시각적 및 기능과 XAML 레이어가 반드시 필요하다."고 설명하고 있다.

[윈도우10 UI 프레임 워크 레이어. 컴포지션 API는 다이렉트X에서 제공하는 그래픽 레이어의 상위에 해당한다.]

UWP(유니버셜 윈도우 플랫폼) 개발자는 XAML과 C#과 같은 친숙한 기존 언어와 사용하면서 플루언트 디자인 시스템이 제공하는 시각적으로 금속에 더 가까운 새로운 비주얼 레이어를 사용할 수 있다. 시스템 자원을 덜 쓰면서 개발자는 훌륭한 시각적 성능의 사용자 경험을 구현할 수 있다는 의미로 해석된다. 이미 윈도우10 SDK 빌드 16190은 NavigationView와 TreeView 등의  템플릿이 Windows.UI.XAML.Controls 네임 스페이스에서 사용할 수 있다.

[전체 디자인에 투명 효과를 줬다. 버튼에는 컴포지션 효과가 추가됐다.]

[ListView 구현 예. 마우스 커서를 움직이면 흐르는 듯한 하이라이트 효과가 나타난다. ]

MS는 플루언트 디자인 시스템을 올 가을 업데이트 예정의 '윈도우10 폴 크리에이터 업데이트'에서 완성되지 않는 몇 년이 걸리는 프로젝트라고 설명한다. 개발자가 플루언트 디자인 시스템을 이제 막 접하기 시작했고 자신의 것으로 만들어 가는 단계이므로 앱과 윈도우10에 녹아 드는데 시간이 필요하다는 의미다.

[플루언트 디자인 시스템 구성의 5가지 요소]

MS는 정말 오랫동안 화면 크기가 다른 모든 기기에서 동일한 윈도우10이 구동 되도록 힘써왔다.  이것이 가능 하려면 모든 기기에서 동일한 UX와 일관된 지침이 필요하다. 플루언트 디자인 시스템이 등장한 배경이다. 플루언트 디자인 시스템은 그동안 UI를 개발하기 위해 소비했던 시간과 노력을 확 줄여준다. 지금까지 윈도우에서 동작하는 다양한 앱의 경우 제각각 서로 다른 UI를 사용했다. 개발자들은 서로 다른 환경에서 동일한 UI를 구현하기 위해 많은 시간과 노력을 투입할 수밖에 없었고, 사용자들은 일체감 없는 UI에 적응하려 애를 썼다.

플루언트 디자인 시스템의 가장 핵심은 스케일이다. 2차원의 UWP 앱의 혼합현실(MR·Mixed Reality) 즉, 홀로렌즈나 윈도우 혼합현실(Windows Mixed Reality) 헤드셋에서 3차원처럼 다차원으로 확장 가능한 UI 디자인에 대응하기 위해 필수적인 요소이기 때문이다. PC나 스마트폰, 혼합현실 헤드셋 등 다른 상황에서 UX 통일을 위해 스케일이라는 요소의 중요성은 점점 커질 것이다. MS가 윈도우10 사용자에게 어떤 UX를 제시할지 흥미롭다. 플루언트 디자인 시스템은 '프로젝트 네온'이라는 이름으로 지난 4월 업데이트에 추가될 예정이었으나 완성도를 위해 올 가을 폴 크리에이터 업데이트로 미뤄졌다.


[리뷰전문 유튜브 채널 더기어TV]
이 기사를 공유합니다
ABOUT AUTHOR

댓글삭제
삭제한 댓글은 다시 복구할 수 없습니다.
그래도 삭제하시겠습니까?
COMMENT 0
댓글쓰기
계정을 선택하시면 로그인·계정인증을 통해
댓글을 남기실 수 있습니다.