마이크로소프트(MS)는 15일(현지시각) UX 프레임워크 모음인 플루엔트Fluent UI를 발표했습니다. 이 디자인 프레임워크는 패브릭Fabric UI의 다음 세대 디자인이며 현재 MS는 웹 및 모바일 앱 UI 라이브러리를 플루엔트 UI로 통합했습니다.

 

MS는 자사 사이트와 깃허브를 통해 플루엔트 UI 관련 개발도구와 가이드라인을 공개하고 있습니다.

 

아래는 MS의 블로그 전문 번역입니다.

 

새로운 크로스 플랫폼 라이브러리

 

플루엔트 UI는 코드, 디자인 및 상호 작용 동작을 공유하는 웹 및 모바일 앱을 만들기위한 UX 프레임워크 모음 이상입니다. 고객이 하루 종일 사용하는 장치에서 보다 자연스럽게 느낄 수 있는 경험을 제공하기 위해, 여러 분야 및 제품 팀에서 개발하는 방법에 대한 새로운 접근 방식입니다.

 

우리는 개발자 생태계를 단순화해 모든 종류의 파트너가 이 프레임워크를 활용하고 자신의 경험을 구축 할 수 있도록 도울 것입니다.

 

플루엔트 UI 리액트(웹), 플루엔트 UI 애플(iOS 및 macOS) 및 플루엔트 UI 안드로이드 깃허브 라이브러리의 구성 요소를 사용 하면 마이크로소프트 365 앱 및 서비스가 강력한 도구로 유지 됩니다. 또, 플랫폼 전반에 걸쳐보다 직관적이고 일관성을 유지할 수 있습니다. 새로운 플루엔트 UI 리액트 네이티브 라이브러리가 추가, 크로스 플랫폼 구성 요소가 생성돼 자바 스크립트 개발자가 여러 장치에서 이전보다 신속하게 고객에게 경험을 전달할 수 있습니다.

 

기본 윈도 환경을 구축하는 개발자를 위해 WinUI는 플루엔트 디자인 시스템도 계속 구현합니다.

 

 

각 장치마다 고유하며 여전히 유창함

 

우리는 생산성 소프트웨어가 무엇보다도 인간의 창의력을 향상시켜야한다고 생각합니다. 휴대 전화, 태블릿, 노트북 또는 대형 화면에서 방해가되지 않고 작업을 손쉽게 수행 할 수 있어야합니다.

 

자동차 디자인과 마찬가지로, 각 제품마다 사람들의 마음에 브랜드 경험이 담긴 인상을주기 위해 몇 가지 서명 디자인 요소 만 있으면된다고 생각합니다. 이 '필수' 요소는 명확성과 구조를 만들어 사람들은 어떤 장치를 사용하든 제품 사용 방법을 이해합니다. MS 로고, 친숙한 앱 아이콘, 인식 가능한 앱 이름 및 고유 한 앱 브랜드 색상은 브랜드 경험에 대한 사람들의 인상을 형성합니다. 그러나 앱을 독창적으로 유창하게 느끼게하는 더 구체적인 UI 구성 요소도 있습니다. 예를 들어, 맞춤형 네비게이션 바는 모바일 앱에 친숙하고 친근한 느낌을줍니다.

 

 

우리에게 플랫폼간에 일관된 느낌을주는 경험은 모든 픽셀과 동일한 스타일 가이드 규칙이나 UI에 관한 것이 아닙니다. 대신, 우리는 각 플랫폼의 작동 방식과 고객에게 익숙한 것에 중점을 둡니다. 일반적으로 80/20 규칙을 참조합니다. 기본 패턴을 80 % 사용하여 고객 경험을 향상시키는 맞춤형 구성 요소에 집중합니다.

 

보다 일관되고 생산적인 경험 제공

 

이유가 없거나 설명 할 수 없는 이유로 사물이 다르게 작동하면 실망할 수 있습니다. 이는 고객을 좌절시키고 더 나아지게 동기를 부여합니다. 플루엔트 디자인 시스템을 사용하면 보다 효율적으로 작업 할 수 있습니다. 또한 고객에게보다 일관되고 연결된 경험을 제공 할 수 있습니다. 모두에게 이득입니다.

 

즉, 하나의 Microsoft 365 앱을 배우면 다른 앱을 쉽게 선택하여 탐색하고 작업을 수행하는 방법을 알 수 있습니다. 플랫폼에서도 마찬가지입니다. 언제 어디서나 원하는 곳에서 원하는 방식으로 일할 수 있습니다. 사람들은 종종 한 장치에서 작업을 시작하고 다른 장치에서 작업을 완료하므로 플랫폼에서 일관된 환경을 만들면 고객의인지 과부하를 줄입니다.

 

간단히 말해 Fluent는 고객과 함께 할 수있는 동급 최고의 경험을 제공하기 위해 더 잘 협력하는 디자이너와 개발자에 관한 것입니다.

 

테마 아키텍처 현대화

 

오늘날 MS 제품은 웹 및 윈도, 안드로이드, iOS 및 macOS 플랫폼에 걸쳐 있으며 모두 분리 된 테마 방식을 사용합니다. 모든 플랫폼에서 일관된 환경을 만들려면 설계자와 개발자가 변경 사항을 독립적으로 업데이트해야합니다.

 

우리는 확장 가능한 미래 보장형 디자인 시스템을 만들기 위해 테마 아키텍처를 현대화하려고합니다. 향후 테마를 사용하면 Microsoft 프레임 워크에서 공통 테마 인프라, 분류법 및 중앙 집중식 크로스 플랫폼 스타일 라이브러리 세트를 사용하여 모든 플랫폼에서 설계 값을보다 쉽고 빠르게 업데이트 할 수 있습니다.

 

이를 위해 우리는 고정 된 값에서 벗어나 더 독립적 인 변수 또는 디자인 토큰으로 이동하고 있습니다. 디자인 토큰은 UI 표면의 시각적 속성을 정의하고 공통 구문을 사용하여 디자인을 코드에 연결합니다. 디자인 및 개발 도구로 액세스 할 수있는 중앙 집중식 스타일 라이브러리는 코딩 된 구성 요소를 수정하지 않고도 업데이트 할 수있는 장소 역할을합니다.

 

토큰의 힘을 폭로하고 복잡성을 완화하기 위해 기존 디자인 도구 내에서 디자이너를 만나는 방법을 모색했습니다. MS의 대부분 디자이너는 피그마Figma를 사용하기 때문에 거의 또는 전혀 마찰없이 디자인 토큰을 지원하기 위해 해당 도구의 기능을 확장 할 수있는 방법을 찾았습니다.

 

피그마 플러그인은 기본 속성 패널을 대체합니다. 속성 패널을 통해 색상이나 획 너비를 지정하여 디자인을 만드는 대신 디자이너는 레이어에 토큰을 할당합니다. 필요한 경우 이러한 토큰을 다른 값으로 다시 매핑하여 변경 사항을 설계 전체에 전파 할 수 있습니다. 또한 이러한 디자인 토큰을 플랫폼 별 값으로 변환하는 개발 파이프 라인을 구축하고 있습니다.

 

이러한 노력을 통해 설계 가치를 코드베이스에 직접 배포하여 제품 설계자와 개발자에게 완전히 통합 된 설계-코드 워크 플로를 제공 할 수 있습니다.

 

물론 이 모든 장점은 고객에게 전가 될 것입니다. 사람들은 자신이 만든 앱의 테마 라이브러리를 쉽게 옵트 인 할 수 있습니다. 그런 다음이 라이브러리를 사용자 정의하여 제품의 브랜드 나 서비스를 더 잘 반영하고 생태계 전체에서보다 일관된 느낌을 줄 수 있습니다.

 

디자이너, 개발자, 접근성 및 국제화 전문가 및 작가의 의견을 바탕으로 개발자 프레임 워크가 발전하고 있습니다. 우리는 개선을위한 영역, 고객이 우리에게 더 많은 것을 필요로하는 영역을 파악하고이를 실현합니다.

 

기본 모양과 느낌을 존중하고 매일 수백 명의 개발자와 수백만 명의 소비자가 사용하는 UX 구성 요소를 포함하는 디자인 시스템을 찾고 있다면 플루엔트UI를 사용해보십시오 .

 

내부 및 외부 개발자 모두 플루엔트 UI 마이크로소프트 깃허브로 제작을 하게 돼 기쁩니다 .