세미나 [UX Summit 2020 요약] 정말 멋진 윈도우 10 플루언트 UI를 델파이로 구현하기

<< UX Summit 2020 목록으로 이동

UX Summit 의 2020 시리즈 중, Giving your Apps the Fluent UI Look and Feel with Delphi - Ian Barker 의 한글 요약본입니다.

• 발표자 (Ian Barker)는 델파이 개발자에게 잘 알려진 엠바카데로 MVP입니다. “Git과 Github를 사용해야하는 이유와 델파이 개발자가 꼭 필요한만큼만 사용하기”도 많은 관심을 받았습니다.
• 발표자 이안 바커(Ian Barker) 웹사이트 
• 이 요약에 미처 담지 못한 좋은 내용은 원본을 보세요: YouTube 비디오 보기 (1편: 52분, 2편: 47분)
• 이 문서는 핵심 정리에 초점을 맞추었습니다. 비디오와 함께 보기를 권합니다.
   

1편에서는 (윈도우 개발자를 위한 일반적인 세션),

• 마이크로소프트의 새 표준 디자인 컨셉인 플루언트 UI의 핵심 개념을 정리하고, 윈도우10에서 실제로 어떻게 반영되었는지 살펴봅니다.
• 더 세련되어진 윈도우 10의 룩앤필과 UX를 적용하기 위해, 윈도우 애플리케이션 개발자에게 필요한 기술을 정리합니다.

2편에서는 (델파이 개발자를 위한 델파이 코드 중심 세션),

• 델파이 개발자들이 플루언트 UI를 구현하는 방법을 데모와 함께 설명합니다.
  (서드파티를 사용할 수도 있고, 순수 델파이 코드만으로도 가능합니다.)
• 소스 코드는 깃허브에서 무료로 볼 수 있습니다.
• 비디오에서 소스 코드 작성을 볼 수 있는데, 일반 UI 코드 작성 시에도 도움이 될 것입니다. 

목차

정말 멋진 윈도우 10 플루언트 UI를 델파이로 구현하기 (1편)

(1편 비디오 보기)

플루언트 UI란?

• 마이크로소프트 디자인 요소를 정의한 디자인 언어의 최신판
• 이미 윈도우 10, 오피스 365 등 마이크로소프트 최신 제품들에 적용되어 있다.
• 마이크로소프트가 수많은 UX연구를 통해 실현한 미적인 새 디자인
  (윈도우 96, 98, Me, 비스타를 거치면서 실패했거나 성공한 경험이 반영되었다.)
• 이미 멋지다고 알려졌던 바로 그 네온 프로젝트이다. 
• 마이크로소프트 디자인 공식 웹페이지에서 무엇을 염두에 두었는지, 왜 그랬는지를 포함한 정확한 정보를 볼 수 있다.
• 한글 Wiki (플루언트 디자인 시스템) (다소 부정확한 내용도 있으므로 공식 웹사이트를 권장한다.)
   

플루언트 UI가 중요한 이유?

• 윈도우 애플리케이션 개발자라면 윈도우다운 룩앤필에 익숙해져야 한다.
  • 사용자 입장에서, 윈도우 사용 경험과 여러분이 만든 윈도우 앱 경험이 일치해야 혼란을 느끼지 않는다.
• 이 디자인 표준을 벗어난 윈도우 애플리케이션은 구식으로 보이거나 윈도우와 충돌이 나서 사용자에게 불편을 줄 수 있다.
• 마이크로소프트가 잡는 디자인 방향이 주류가 되므로, 윈도우에서 작동되는 애플리케이션이라면 따를 수 밖에 없다.
  • 윈도우 뿐만 아니라 마이크로소프트가 만드는 많은 개발 도구, API, SDK 등에서도 이 방향이 적용된다.
     

플루언트 디자인의 실제 모습: “윈도우10 설정 화면”에 잘 반영되어 있음

• 라이트모드, 다크모드가 제공된다.
• 마우스가 올라갔을 때 상자 테두리가 나타나는 곳은 기능이 있음을 의미한다. (마우스가 위치를 벗어나면 상자 테두리가 사라진다.)
• 포커스를 받은 윈도우는 테두리가 강조 표시된다. (기본 강조 색상: 빨강)
   

플루언트 UI의 기본 사상

• 마이크로소프트 디자인 언어 2 (MDL2)를 향상
• 메트로 UI로 알려진 마이크로소프트 디자인 언어 1 (MDL1)에서 시작되어 진화됨
  • 오래전, 윈도우폰에 적용되었던 당시 통일된 UI를 시도했었다. 
  • 마이크로소프트는 메트로에서 폰과 윈도우 8 전체에 통일된 UI를 적용하고자 했으나 결국은 하드웨어 지원 문제 등의 이유로 실패했다. 
    (자세한 내용은 관련글 참조)
  • 예전에 이상하게 컸던 윈도우 버튼이 기억나는가?
• 플루언트 UI는 윈도우폰과 윈도우8에서 벗어난 후 새롭게 구축
• 한글 Wiki (메트로 디자인 언어)
   

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

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

플루언트 UI의 핵심 개념

• 핵심 요소: Light, Depth, Motion, Fonts and Icons, Material 
• 대부분 이미 MDL1 즉, 메트로 구현 시에 이미 있었지만, MDL2 즉, 플루언트 디자인에서 더 구체화되고 통일성이 갖추어졌다.
• 오피스 365 현재 버전에 그 특징이 잘 나타났다.
  (역자주: 아래 내용은 비디오를 보면 보다 명확히 이해할 수 있습니다.)
   

데모: 윈도우10 개인설정을 통해 플루언트 UI를 경험해보자.
(20분 05초부터 데모 보기)

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

데모: 하나는 윈도우10의 설정 창과 모양과 방식이 똑같은 창을 델파이로 만들기 데모
(20분 54초부터 데모 보기)

• 델파이로 Material (아크릴), Light (하이라이트, 포커스) 등 플루언트 UI를 모두 구현할 수 있다.
• 이 데모는 델파이 10.4에서 AlMediaDev 라는 써드파티 컨트롤 세트를 사용했으므로 손쉽게 만들었다. (써드파티를 사용하지 않은 구현은 2편에 소개한다)
  •  AlMediaDev 컨트롤은 많은 프로퍼티를 통해 플루언트 UI를 반영 수 있도록 한다. 가격도 상당히 저렴하다.
    • 예를 들어, FluentUIBackground 프로퍼티에서 Acrylic을 선택하면 Material에서 아크릴 효과를 줄 수 있다.
    • FluentUIBorder, FluentUIInactiveAcrylicColorOpaq 등 플루언트 UI 구현 관련 속성이 많이 있다.
• 이 세션은 델파이 세션이기에 앞서 플루언트 UI에 대한 일반 세션이므로 델파이 부분은 생략한다
• 하지만, 내 블로그에는 다크 모드 / 화이트 모드를 탐지하는 법, 화면 해상도에 맞게 크기 변경 등 여러 코드와 안내가 있다.

 델파이 코드 구현 보기: (24분 33초부터 데모 보기)
 

1편의 관련 자료와 링크

• 1편 발표 자료 및 원본 아티클
• 마이크로소프트 공식 플루언트 UI 사이트
• 잘 정리된 블로그
• Almedia Dev Style Controls
• 한글 Wiki (Segoe UI)

정말 멋진 윈도우 10 플루언트 UI를 델파이로 구현하기 (2편)

(2편 비디오 보기)

목차

• 마이크로소프트 플루언트 UI의 핵심 요소 5가지 (1편 내용 재정리)
• 데모: 델파이로 구현한 플루언트 UI를 델파이로 구현한 앱 실행 화면 보기 (비디오 12분 50초부터 재생하기)
• 데모: 델파이 내장 컴포넌트로만 플루언트 UI를 구현한 앱 작동 및 구현 방법 설명 (비디오 19분 49초부터 재생하기)
• 데모: Almedia 컴포넌트로 플루언트 UI를 구현한 앱 작동 및 구현 방법 설명 (비디오 30분 55초부터 재생하기)
   

마이크로소프트 플루언트 UI의 핵심 요소 5가지 (1편 내용 재정리)


그림1. 플루언트 UI가 적용된 윈도우 10 개인 설정 창

• 빛 (Light)
  • 포커스 표현(Reveal Focus): 포커스를 받은 요소의 테두리를 눈에 띄도록 표시
  • 강조 표현(Reveal Highlight): 마우스가 위치한 곳을 더 밝게 표시
     
• 깊이 (Depth)
  • 오피스 2019 앱을 실행하면 나타나는 첫 화면에 잘 나타남
  • 클릭할 수 있는 요소 역시 평소에는 평면이지만, 포커스를 받으면 그림자와 함께 3차원으로 튀어나와 보임
     
• 모션 (Motion)
  • 윈도우 10 메일 앱을 열면 나타나는 화면에서 잘 나타남
  • 앱의 배경인 구름이 흘러가는 것이 표현되어 생동감을 줌
     
• 폰트와 아이콘 (Font & Icon)
  • Segoe UI 폰트 (평소에는 Segue UI의 light 폰트) 와 아이콘으로 통일됨
     
• 재질 (Material)
  • 아크릴 바탕(Acrylic), 뒤에 있는 화면을 완전히 가리지 않고 반투명으로 표현, 투명도 적용
     

데모: 델파이로 구현한 플루언트UI를 델파이로 구현한 앱 실행 화면 보기 
(비디오 19분 51초부터 재생하기)

그림2. 플루언트UI가 적용된 Almedia에서 제공하는 데모 앱

그림3. 이 세션에서 사용한 플루언트 UI의 핵심 요소들을 구현한 앱 (델파이만으로 만든 앱과 Almedia를 사용한 앱 모두 깃허브에 소스 코드가 공개되어 있음)

데모: 델파이 내장 컴포넌트로만 플루언트 UI를 구현한 앱 작동 및 구현 방법 설명
(비디오 19분 49초부터 재생하기)

• 플루언트 UI의 빛(Light) - 포커스를 버튼에 표현하기: 우측 상단의 최소화 버튼 (비디오 20분 43초부터 재생하기)
  • TRectangle [최소화 버튼] 이미지를 넣고, 그 안에 TFillRGBEffect를 넣고 마우스 오버일 때 작동하도록 설정한다.
     
• 플루언트 UI의 깊이(Depth)를 버튼에 표현하기: 섹션 카드 (비디오 21분 28초부터 재생하기)
  • TRoundRectangle 안에 TLabel과 TShadowEffect를 넣고 마우스 오버일 때 작동하도록 설정한다.
  • (TShadowEffect의 Enabled 속성이 True 이면 그림자가 표시된다.)
     
• 플루언트 UI의 재질(Material)을 버튼에 표현하기: 화면의 왼쪽 영역 (비디오 22분 42초부터 재생하기)
  • 투명도 구현은 생각보다 쉽다 (의외로 많은 사람들이 어렵거나 불편한 방법을 사용하고 있다.)
  • VCL에서는 TForm의 (AlphaBlend속성이 True이고) AlphaBlendValue가 255이면 불투명이다.
  • 값이 0으로 가까이 갈 수록 더 투명해진다.
  • FMX는 화면 그리기 방식이 VCL과 다르다. TForm의 Transparency 속성을 True로 주면 투명해진다. 그리고 나서 각 섹션에서 Opacity 속성을 사용해 투명도를 정한다.
  • 이 데모의 FXM 폼에서는 BorderStyle 속성을 None으로 주어 테두리가 평소에 보이지 않도록 했다.
  • 그리고 나서 화면 왼쪽의 TPanel의 Opacity 속성을 0~1 사이 값으로 설정하여 조절한다. (1 이면 완전히 불투명하다.)
  • 이 데모의 TPanel의 투명도를 설정하는 부분은 우측 본 화면의 아래 쪽에 있다.
  • TSpinBox를 통해 값을 받는다.
     

// TSpinBox의 OnChange 이벤트를 처리하는 코드
// 0˜10까지 값을 받으면, 해당하는 Opacity(0~1)가 반영되도록 한다.
procedure TForm1.SpinBox1Change(Sender: TObject);
begin
  if SameText(Spinbox1.Text, '10') then
    Panel1.Opacity := 1
  else
    Panel1.Opacity := StrToFloat('0.' + Spinbox1.Text);
end;

• '플루언트 UI의 빛(Light) - 포커스를 폼 자체에 표현하기 (비디오 25분 19초부터 재생하기)
  • 멀티플랫폼용인 FMX에서는 TForm의 OnActivate와 OnDeactivate 이벤트에서 포커스를 받았는지를 알 수 있다.
  • 참고로, 윈도우 전용인 VCL에서는 TApplication의 이벤트을 사용해야 포커스를 받았는지를 알 수 있다.
     

// ‘플루언트UI의 빛(Light)-포커스’를 OnActivate에서 강조, OnDeactivate에서 해제하는 코드
// [참고]윈도우 전용인 VCL에서는 TApplication을 사용해야 포커스를 받았는지를 알 수 있지만, 
// 멀티플랫폼용인 FMX에서는 TForm에서 가능하다
procedure TForm1.FormActivate(Sender: TObject);
begin
  UpdateFocus(True);
end;

procedure TForm1.FormDeactivate(Sender: TObject);
begin
  UpdateFocus(False);
end;

procedure TForm1.UpdateFocus(const IsFocussed: Boolean);
begin
  // 창이 선택된 상태이고 AND 창이 최대화되지 않은 상태라면
  // 창의 테두리 선을 표시하여 강조한다.
  if IsFocussed and (WindowState <> TWindowState.wsMaximized) then
    begin
      Line1.Stroke.Color := GetAccentColor(claRed);
      FillRGBEffect2.Color := Line1.Stroke.Color;
      FillRGBEffect3.Color := Line1.Stroke.Color;
      UpdateTransparency;
    end
  else
    begin
      Line1.Stroke.Color := claWhite;
      UpdateTransparency; // 창이 최대화된 경우, 투명도가 적용되지 않아야 한다.
    end;
  Line2.Stroke.Color := Line1.Stroke.Color;
  Line3.Stroke.Color := Line1.Stroke.Color;
  Line4.Stroke.Color := Line1.Stroke.Color;
end;

• 가장 위쪽 툴바에서 마우스를 누른 상태로 창의 위치를 옮기도록 구현 하기 (비디오 26분 57초부터 재생하기)
  • Mousedown 이벤트를 사용한다.
     

// 창에 Title Bar가 없는 경우, 가장 윗쪽 툴바를 마우스로 누른 상태로 창의 위치를 옮길 수 있도록 하는 코드
// Mousedown 이벤트를 사용한다.
procedure TForm1.Panel7MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
  if (Button = TMouseButton.mbLeft) then
    if WindowState <> TWindowState.wsMaximized then
      StartWindowDrag;
end;

• 사용자가 윈도우에서 설정한 ‘강조색(Accent Color)’ 알아내기 (비디오 27분 59초부터 재생하기)
   

// 사용자가 윈도우에서 설정한 ‘강조색(Accent Color)’ 알아내는 코드
function GetAccentColor(const TheDefault: TColor): TColor;
const
  TheKey   = 'SOFTWARE\Microsoft\Windows\DWM\';
  TheValue = 'AccentColor';
var
  Reg: TRegistry;
  AccentCol: DWord;
  sStr:     string;
begin
  // 데스크톱 윈도우 관리자에 없는 값을 아래 레지스트리에서 가져올 수 있다:
  // \\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\DWM\
  //
  // 이 레지스트리에서 "AccentColor"의 DWORD 값을 찾는다. 이값은 창 테두리, 엣지 브라우저의 텝 등등에 적용된다.
  //
  // 해당 키의 전체 경로:
  //   \\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\DWM\AccentColor
  //
  Result := TheDefault;
  Reg    := TRegistry.Create(KEY_READ);
  try
    Reg.RootKey := HKEY_CURRENT_USER;
    if Reg.KeyExists(TheKey) then
      if Reg.OpenKey(TheKey, False) then
      try
        if Reg.ValueExists(TheValue) then
        begin
          AccentCol := Reg.ReadInteger(TheValue);
          // AccentColor를 읽어서 8자리 헥사(Hex) 숫자로 변환
          sStr := IntToHex(AccentCol, 8);
          // (Hex 값임을 표시하는) 첫 2자리 0x를 제거
          sStr := Copy(sStr, 3, Length(sStr) - 2);
          // 이제, "$FF"를 앞에 놓고 RGB값을 뒤에서부터 떼어내어 델파이의 TColor에 맞추기
          //
          // [참고] 델파이의 TColor에 맞추는 방법으로 GetRValue(), GetGValue() 등 훨씬 좋은 것들이 있다.
          // 이 방법을 쓰는 이유는, 편한 함수를 제공하는 유닛을 포함하지 않아도 되기 때문일 뿐이다. 
          Result := TColor(StrToIntDef('$ff'  + Copy(sStr, 5, 2) + Copy(sStr, 3, 2) + Copy(sStr, 1, 2), TheDefault));
        end;
      finally
        Reg.CloseKey;
      end;
  finally
    Reg.Free;
  end;
end;

그림4. 윈도우 레지스트리에 있는 강조색 (Accent Color) 값

데모: Almedia 컴포넌트를 사용하여 플루언트 UI를 구현한 앱 작동 및 구현 방법 설명
(비디오 30분 55초부터 재생하기)

• Almedia 컴포넌트는 플루언트 UI를 미리 반영해 두었으므로, 바로 사용하면 된다.
  • 예를 들어, TscStyledForm에는 FluentUIAcrylicColor, FluentUIBackground, FluentUIBorder…의 속성이 이미있다.
  • 라이선스 가격은 US$99 이며, 업데이트가 평생 무료로 제공된다. (다른 소프트웨어와 매우 다른 경우이다.)
  • 참고로, 발표자(Ian Barker)는 Almedia 컴포넌트와 아무 관련이 없고, 단지 좋아해서 소개하는 것일 뿐이다.
     
• 윈도우 10 테마에 사용할 수 있는 델파이 테마
  • 델파이의 'Windows 10' VCL 테마는 윈도우10 라이트 모드에 가장 잘 맞음
  • 델파이의 'Tablet Dark' VCL 테마는 윈도우10 다크 모드에 가장 잘 맞음
     
• Almedia 컴포넌트는 속성과 메소드가 매우 많아서 처음에 혼란스러울 수 있다.
  하지만, 일단 한번 하고 나면 훨씬 쉬울 것이고, 매우 유용한 컴포넌트임을 알 수 있을 것이다.
• 이와 별개로, FMX 역시 UI구현이 매우 유연하고 강력하므로 FMX만 가지고 (소스 코드를 쓰지 않고) 플루언트UI를 구현하는 것도 매우 쉬웠다.
• 플루언트 UI는 훨씬 더 많은 것들이 있다. 이 세션의 간단한 데모는 플루언트 UI의 핵심을 중심으로 다루었으므로 좋은 시작점이 될 것이다.
  이 세션에는 없지만 모션(Motion)을 구현하려면 Animation을 사용하면 된다.
   

// AlmediaDev 컴포넌트로 개발하는 경우에도, 윈도우 테마를 맞춰주는 코드가 필요하다
procedure TVCLCalculatorForm.FormCreate(Sender: TObject);
begin
  MatchWindowsTheme;
  ...
end;

// 윈도우 테마를 맞춰주는 코드
// [참고] Font.Color는 clWindows로, Font.Name은 Segoe로 되어 있어야 한다.
procedure TVCLCalculatorForm.MatchWindowsTheme;
var
  GoDark:  Boolean;
  iInt:    Integer;
  AButton: TComponent;
begin
  // 델파이의 'Tablet Dark' VCL 테마는 윈도우10 다크 모드에 가장 잘 맞음
  // 델파이의 'Windows10' VCL 테마는 윈도우10 라이트 모드에 가장 잘 맞음
  SetAppropriateThemeMode('Tablet Dark', 'Windows10');
  GoDark := DarkModeIsEnabled;

  // 이 코드는 Carbon 테마가, 윈도우 다크 테마와 잘 맞지 않기 때문임
  for iInt in cNumberButtons do
  begin
    AButton := FindComponent('scGPButton' + IntToStr(iInt));
    if (AButton <> Nil) then
      if (AButton is TscGPButton) then
        if GoDark then
          TscGPButton(AButton).Options.NormalColor := clBackground
        else
          TscGPButton(AButton).Options.NormalColor := clWindow;
  end;
end;

procedure SetAppropriateThemeMode(const DarkModeThemeName, LightModeThemeName: string);
begin
  SetSpecificThemeMode(DarkModeIsEnabled, DarkModeThemeName, LightModeThemeName);
end;

procedure SetSpecificThemeMode(const AsDarkMode: Boolean; const DarkModeThemeName, LightModeThemeName: string);
var
  ChosenTheme: string;
begin
  if AsDarkMode then
    ChosenTheme := DarkModeThemeName
  else
    ChosenTheme := LightModeThemeName;
  TStyleManager.TrySetStyle(ChosenTheme, False);
end;

2편의 관련 자료와 링크

• 2편 발표 자료 및 원본 아티클
• 사용된 Fluent UI 구현 소스 코드 다운로드 (깃허브)
• 마이크로소프트 공식 플루언트 UI 사이트
• 잘 정리된 블로그
• Almedia Dev Style Controls
• 한글 Wiki (Segoe UI)

<< UX Summit 2020 목록으로 이동