<< 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편)
플루언트 UI란?
- 마이크로소프트 디자인 요소를 정의한 디자인 언어의 최신판
- 이미 윈도우 10, 오피스 365 등 마이크로소프트 최신 제품들에 적용되어 있다.
-
마이크로소프트가 수많은 UX연구를 통해 실현한 미적인 새 디자인
(윈도우 96, 98, Me, 비스타를 거치면서 실패했거나 성공한 경험이 반영되었다.) - 이미 멋지다고 알려졌던 바로 그 네온 프로젝트이다.
- 마이크로소프트 디자인 공식 웹페이지에서 무엇을 염두에 두었는지, 왜 그랬는지를 포함한 정확한 정보를 볼 수 있다.
-
한글 Wiki (플루언트 디자인 시스템) (다소 부정확한 내용도 있으므로 공식 웹사이트를 권장한다.)
플루언트 UI가 중요한 이유?
-
윈도우 애플리케이션 개발자라면 윈도우다운 룩앤필에 익숙해져야 한다.
- 사용자 입장에서, 윈도우 사용 경험과 여러분이 만든 윈도우 앱 경험이 일치해야 혼란을 느끼지 않는다.
- 이 디자인 표준을 벗어난 윈도우 애플리케이션은 구식으로 보이거나 윈도우와 충돌이 나서 사용자에게 불편을 줄 수 있다.
-
마이크로소프트가 잡는 디자인 방향이 주류가 되므로, 윈도우에서 작동되는 애플리케이션이라면 따를 수 밖에 없다.
-
윈도우 뿐만 아니라 마이크로소프트가 만드는 많은 개발 도구, API, SDK 등에서도 이 방향이 적용된다.
-
윈도우 뿐만 아니라 마이크로소프트가 만드는 많은 개발 도구, 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:
Reveal Highlight:
|
Depth (깊이) |
Z축을 이용하여 튀어나오게 만들어 내용을 차별화한다. 그림자가 다시 도입 - 여전히 기본적으로 평평한 디자인을 유지하지만, 깊이를 이용해 원하는 곳을 강조한다.
|
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초부터 데모 보기)
- 델파이로 Material (아크릴), Light (하이라이트, 포커스) 등 플루언트 UI를 모두 구현할 수 있다.
-
이 데모는 델파이 10.4에서 AlMediaDev 라는 써드파티 컨트롤 세트를 사용했으므로 손쉽게 만들었다. (써드파티를 사용하지 않은 구현은 2편에 소개한다)
-
AlMediaDev 컨트롤은 많은 프로퍼티를 통해 플루언트 UI를 반영 수 있도록 한다. 가격도 상당히 저렴하다.
- 예를 들어, FluentUIBackground 프로퍼티에서 Acrylic을 선택하면 Material에서 아크릴 효과를 줄 수 있다.
- FluentUIBorder, FluentUIInactiveAcrylicColorOpaq 등 플루언트 UI 구현 관련 속성이 많이 있다.
-
AlMediaDev 컨트롤은 많은 프로퍼티를 통해 플루언트 UI를 반영 수 있도록 한다. 가격도 상당히 저렴하다.
- 이 세션은 델파이 세션이기에 앞서 플루언트 UI에 대한 일반 세션이므로 델파이 부분은 생략한다
- 하지만, 내 블로그에는 다크 모드 / 화이트 모드를 탐지하는 법, 화면 해상도에 맞게 크기 변경 등 여러 코드와 안내가 있다.
델파이 코드 구현 보기: (24분 33초부터 데모 보기)
1편의 관련 자료와 링크
정말 멋진 윈도우 10 플루언트 UI를 델파이로 구현하기 (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 폰트) 와 아이콘으로 통일됨
-
Segoe UI 폰트 (평소에는 Segue UI의 light 폰트) 와 아이콘으로 통일됨
-
재질 (Material)
-
아크릴 바탕(Acrylic), 뒤에 있는 화면을 완전히 가리지 않고 반투명으로 표현, 투명도 적용
-
아크릴 바탕(Acrylic), 뒤에 있는 화면을 완전히 가리지 않고 반투명으로 표현, 투명도 적용
데모: 델파이로 구현한 플루언트UI를 델파이로 구현한 앱 실행 화면 보기
(비디오 19분 51초부터 재생하기)
그림2. 플루언트UI가 적용된 Almedia에서 제공하는 데모 앱
그림3. 이 세션에서 사용한 플루언트 UI의 핵심 요소들을 구현한 앱 (델파이만으로 만든 앱과 Almedia를 사용한 앱 모두 깃허브에 소스 코드가 공개되어 있음)
데모: 델파이 내장 컴포넌트로만 플루언트 UI를 구현한 앱 작동 및 구현 방법 설명
(비디오 19분 49초부터 재생하기)
-
플루언트 UI의 빛(Light) - 포커스를 버튼에 표현하기: 우측 상단의 최소화 버튼 (비디오 20분 43초부터 재생하기)
-
TRectangle [최소화 버튼] 이미지를 넣고, 그 안에 TFillRGBEffect를 넣고 마우스 오버일 때 작동하도록 설정한다.
-
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 이벤트를 사용한다.
-
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 목록으로 이동
Recommended Comments
There are no comments to display.