Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

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

Kori
 공유하기

Recommended Posts

Kori Proficient

Kori

에 포스트됨
에 포스트됨

<< UX Summit 2020 목록으로 이동

 

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

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 현재 버전에 그 특징이 잘 나타났다.
    (역자주: 아래 내용은 비디오를 보면 보다 명확히 이해할 수 있습니다.)
     

핵심 요소

주요 사항

Light (빛)

다크 모드 / 라이트 모드

Reveal Focus:
(버튼, 윈도우 등) 클릭할 수 있는 요소가 포커스를 받으면 (마우스가 위치하거나 탭키로 포커스를 받으면) 그 테두리가 드러난다. 

FluentUIRevealFocus.png
 

Reveal Highlight:
마우스가 가리키고 있는 곳이 가장 밝고, 옆으로 가면서 점차 미세하게 옅어진다. (테두리 색상도 마찬가지로 미세하게 옅어지는 효과가 적용된다.)

FluentUIRevealHighlight.png

Depth (깊이)

Z축을 이용하여 튀어나오게 만들어 내용을 차별화한다.

그림자가 다시 도입 - 여전히 기본적으로 평평한 디자인을 유지하지만, 깊이를 이용해 원하는 곳을 강조한다.

FluentUIDepth.png

Motion
(움직임)

애니메이션 효과를 통해 사용자가 전환 내용을 이해할 수 있도록 한다.

Fonts / Icons
 (폰트와 아이콘)

Segoe* UI 폰트로 통일됨

Segoe 아이콘이 윈도우 10에 내장됨 

아이콘은 윈도우에 맞게 통일감있게 사용하는 것이 좋다. 
사람들은 이미 학습된 아이콘 모습을 보면 자동으로 기존 학습대로 인식한다. 
따라서 윈도우의 아이콘을 다른 용도로 사용하면 사용자에게 혼란을 준다. 

(Font-Awesome 프로젝트에도 유사한 것들이 많이 있다.)

Material
(재질)

반투명한 시스루 룩을 윈도우 10에서 많이 경험했을 것이다. 이것이 대표적 재질인 아크릴 재질이다.
아크릴 재질은 뿌연 효과를 주기 위해 알파 투명도를 사용한다.

 

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

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


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

FluentUIDemo.png

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

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

1편의 관련 자료와 링크

 

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

(2편 비디오 보기)

목차

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

UX-FluentUI2-1Win10Settings.png
그림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초부터 재생하기)

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

 

UX-FluentUI2-3SampleApps.png
그림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;

  

// 창에 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)’ 알아내는 코드
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;

 

UX-FluentUI2-4RegEdit4AccentColor.png
그림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편의 관련 자료와 링크

 

 

<< UX Summit 2020 목록으로 이동


View full 엠바카데로 기술자료

이 댓글 링크
다른 사이트에 공유하기

이 토의에 참여하세요

지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.

Guest
이 토픽(기고/질문)에 답하기

×   서식있는 텍스트로 붙여넣기.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   이전에 작성한 콘텐츠가 복원되었습니다..   편집창 비우기

×   You cannot paste images directly. Upload or insert images from URL.

×
 공유하기
토픽(기고/질문) 목록으로 가기
×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.

  수락합니다