Home데브기어 새소식기술자료[UX Summit 요약] 델파이로 윈도우10에서 멋진 플루언트 UI 룩앤필을 구현하기 #1

[UX Summit 요약] 델파이로 윈도우10에서 멋진 플루언트 UI 룩앤필을 구현하기 #1

  • 2020-10-27
  • Posted by: Narae Kim
  • Categories: 기술자료, 메인 노출
댓글 없음

델파이로 윈도우10에서 멋진 플루언트 UI 룩앤필 구현하기 (Giving your Apps the Fluent UI Look and Feel with Delphi)를 요약한 글입니다.

  • (델파이 개발자 뿐 아니라) 윈도우 애플리케이션 개발자가 알아야 할 기본이 되는 중요한 마이크로소프트 UI 디자인의 핵심을 정리하고 보여줍니다.
  • 비디오를 보면 훨씬 이해가 잘 될 것입니다. 여기서는 핵심 정리에 초점을 맞추었습니다.

 

이 주제는 총 2편의 시리즈로 정리했습니다.

  • 1편: 마이크로소프트의 새 표준 디자인 컨셉 플루언트UI 알아보기 – 핵심 요소, 윈도우10 반영, 윈도우10 룩앤필과 UX를 델파이 앱에 적용하기 위해 꼭 알아야하는 핵심 개념과 델파이 기술
  • 2편: 델파이 개발자들이 플루언트UI를 구현하는 방법(데모) https://devgear.co.kr/archives/4283

 

발표자 이안 바커(Ian Barker)는 델파이 개발자들에게도 잘 알려진 엠바카데로 MVP입니다. “깃(Git)과 깃허브(Github)를 사용해야 하는 이유와 델파이 개발자가 꼭 필요한 만큼만 사용하기” 라는 컨텐츠로도 많은 관심을 받았었죠.

 

플루언트 UI란?

  • 마이크로소프트 디자인 요소를 정의한 “디자인 언어”의 최신판
  • 이미 윈도우10, 오피스365 등 마이크로소프트 최신 제품들에 적용
  • 마이크로소프트가 수많은 UX 연구를 통해 실현한 새 디자인 (윈도우 96, 98, Me, 비스타를 거치면서 실패/성공한 경험 반영)
  • 이미 멋지다는 것을 알고 있는 바로 그 “네온 프로젝트”임
  • 공식 웹페이지: https://microsoft.com/design/fluent/
    • 집중한 요소와 이유 등 명확한 정보가 제공되는 페이지입니다.
  • 한글 Wiki: https://ko.wikipedia.org/wiki/플루언트_디자인_시스템
    • 다소 부정확한 내용도 있으므로, 공식 웹사이트를 권장합니다.

 

플루언트 UI가 중요한 이유

  • 윈도우 애플리케이션 개발자라면, 윈도우다운 이 룩앤필에 익숙해져야 사용자 윈도우 경험과 여러분의 앱 경험을 일치시키고 사용자가 혼란을 느끼는 앱을 만들지 않을 수 있음
  • 이 디자인을 받아들이지 않는 윈도우 애플리케이션은 구식으로 보이거나 윈도우와 충돌이 나서 사용자에게 불편을 줄 수 있음
  • 마이크로소프트가 잡는 방향을 따를 수 밖에 없음
    • 마이크로소프트 윈도우 뿐만 아니라 마이크로소프트가 만드는 많은 개발 도구, API, SDK 등도 이 방향이 적용됨

 

플루언트 디자인의 실제 모습

‘윈도우10 설정 화면’에 잘 반영되어 있음

  • 라이트모드, 다크모드
  • 마우스가 올라갔을 때 상자 테두리가 나타나는 곳은 기능이 있는 곳임
    • 마우스가 위치를 벗어나면 상자 테두리가 사라짐
  • 포커스를 받은 우니도우는 테두리가 표시됨
    • 강조색: 기본값은 빨강

 

플루언트 UI의 기본 사상

  • ‘마이크로소프트 디자인 언어2’를 개조
  • ‘메트로 UI’로 알려진 MDL1에서 시작되어 진화함
    • 윈도우폰에 적용되었던 통일된 당시 UI 기억하시나요? 마이크로소프트는 메트로에서 폰과 윈도우8 모두에 통일된 UI를 적용하고자 했고, 결국은 하드웨어 지원 문제 등의 이유로 실패했습니다. 자세한 내용은 아래 링크를 참고하세요.
  • ‘플루언트 UI’는 윈도우폰과 윈도우8에서 벗어난 후 새롭게 구축됨
    • 예전에 이상하게 컸던 윈도우 버튼 기억하시죠?
  • 한글 Wiki: https://ko.wikipedia.org/wiki/메트로_(디자인_언어)

 

마이크로소프트 플루언트 디자인 시스템

  • 마이크로소프트 디자인 언어를 구현
  • 2017년 10월, Windows 10 업데이트에서 공식 적용
  • 수많은 다양한 장비에서 윈도우가 이용되고 있으므로 단계적으로 안전하게 변화해오면서 이제는 꽤 정착됨
  • 윈도우 7에서 윈도우 10으로 거의 옮겨감 (윈도우 8은 잠시 거쳐가는 정도였음)
  • 윈도우 10은 실제로 많은 서브 버전들이 있지만 ‘플루언트 UI’가 일관적으로 적용됨

 

플루언트 UI의 핵심 개념

  • 핵심 요소: Light(빛), Depth(깊이), Motion(움직임), Fonts and Icons(폰트와 아이콘), Material(재질)
  • 대부분 이미 MDL1 즉 ‘메트로’ 구현 시 있었지만, MDL2 즉 ‘플루언트 디자인’에서 더 구체화되고 통일성이 갖추어짐
  • 오피스365 현재 버전에 그 특징이 잘 나타남

 

아래 내용은 비디오를 보면 보다 명확히 이해할 수 있습니다:
https://summit.desktopfirst.com/talks/how-to-give-your-apps-the-really-cool-windows-10-fluent-ui-look-and-feel-with-delphi/

핵심 요소 주요 사항
Light(빛)
  • 다크 모드 /라이트 모드
  • Reveal Focus:
    (버튼, 윈도우 등)클릭할 수 있는 요소가 포커스를 받으면(마우스가 위치하거나 탭키로 포커스를 받으면) 그 테두리가 드러난다.
  • Reveal Highlight:
    마우스 위치의 빛이 더 밝고 차차 미세하게 엹어진다. (테두리 색상도 마찬가지로 미세하게 엹어지는 효과가 적용된다)
Depth(깊이)
  • Z축을 이용하여 층을 나누어 내용을 차별화
  • 그림자가 다시 도입됨 – 여전히 기본적으로 평평한 디자인을 유지하지만, 깊이를 이용해 원하는 곳을 강조한다.
Motion(움직임) 애니메이션 효과를 통해 사용자가 전환 내용을 이해할 수 있도록 한다.
Fonts and Icons
(폰트와 아이콘)
  • Segoe* UI 폰트로 통일됨
  • Segoe 아이콘이 윈도우10에 내장됨
    • 아이콘은 윈도우에 맞게 통일감있게 사용하는 것이 좋다. 사람들은 이미 학습된 아이콘 모습을 보면 자동으로 기존 학습대로 인식한다. 따라서 윈도우의 아이콘을 다른 용도로 사용하면 사용자에게 혼란을 준다.
  • Font-Awesome 프로젝트에도 유사한 것들이 많이 있다:
Material(재질) 반투명하게 씨쓰루 룩을 윈도우10에서 많이 경험했죠? 이것이 대표적 재질인 아크릴 재질이다. 아크릴 재질은 뿌연 효과 알파 투명도를 사용한다.

 

[데모: 윈도우10 개인설정]
  • 윈도우 바탕화면에서 오른쪽 마우스 후 가장 아래 항목인 “개인설정”을 선택해보자.
  • Material (아크릴): 설정 창이 표시되고, 이 창 뒤에 가려진 화면은 반투명으로 비친다.
  • Light (Reveal Highlight): 설정 창 왼쪽 메뉴 부분에서 마우스를 좌우로 움직이면 살짝 더 밝은 부분이 마우스를 따라다닌다. 그래서 미세한 그라디에이션 효과가 생긴다.
  • Light (다크 모드 / 화이트 모드): 설정 창 왼쪽 메뉴에서 “색”을 선택하면 다크 모드와 화이트 모드를 선택할 수 있다.
  • Light (Reveal Focus): 설정 창 바깥을 클릭하면 설정 창의 테두리의 강조색이 사라지지만, 다시 설정 창 안쪽을 클릭하면 설정 창의 테두리에 강조색이 표시된다.
  • Fonts와 Icons: 설정 창의 모든 글자와 아이콘은 Segoe UI 폰트와 Segoe 아이콘이다.

 

[데모: 하나는 윈도우10의 설정 창과 이 창을 델파이로 직접 똑같이 만들어본 화면]

요컨대, 델파이로도 Material(아크릴), Light(하일라이트, 포커스) 등을 모두 구현할 수 있다.

이 데모는 델파이로 만들 때 AlMediaDev 라는 써드파티 콘트롤 세트를 사용해서 손쉽게 만들었다.

AlMediaDev 콘트롤은 흥미로운 프로퍼티가 있다. 예를 들면 FluentUIBackground 프로퍼티에서 Acrylic을 선택하면 Material에서 아크릴 효과를 줄 수 있다.FluentUIBorder, FluentUIInactiveAcrylicColorOpaq 등의 속성도 있다. (역자주: 델파이로 구현한 화면과 설명은 24분 정도부터 볼 수 있습니다)

이 세션은 델파이 세션이기에 앞서 플루언트 UI에 대한 일반 세션이므로 델파이 부분은 생략한다. 하지만, 내 블로그에는 다크 모드 / 화이트 모드를 탐지하는 법, 화면 해상도에 맞게 크기 변경 등 여러 코드와 안내가 있다.

 

[관련 자료]

 

{UX SUMMIT} 더 많은 정보를 확인해보세요!
Post Views: 516