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


윈도우10에 멋진 플루언트UI 룩앤필을 델파이로 구현하기 (Giving your Apps the Fluent UI Look and Feel with Delphi ) 1편에 이어, 2편의 핵심을 요약 번역하였습니다. (이 요약 번역은 Q&A등 일부 생략되었을 수 있습니다. 1편 링크: https://devgear.co.kr/archives/3680)

1편에서는,
마이크로소프트의 새 표준 디자인 컨셉인 플루언트UI가 무엇인지이 무엇인지, 핵심 요소는 무엇인지, 윈도우10에 어떻게 반영되었는지를 설명하였습니다. 더 세련되진 윈도우10의 룩앤필과 UX를 델파이 앱에 적용하기 위해 개발자가 꼭 알아야할 핵심 개념과 관련 델파이 기술이 정리되어 있습니다.

이번 2편에서는,

  • 델파이 개발자들이 플루언트UI를 구현하는 방법을 데모와 함께 설명합니다. (써드파티를 사용할 수도 있고, 순수 델파이 코드만으로도 가능합니다.)
  • 소스 코드는 깃허브(https://github.com/checkdigits/fancy_ui)에 무료로 공개되어 있습니다.
  • 비디오를 보면 훨씬 이해가 잘될 것입니다. [비디오]와 함께 보기를 권합니다.

목차

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

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

마이크로소프트 플루언트UI의 핵심 요소 5가지 1편의 내용을 정리 요약한 것입니다.
더 자세한 내용은 1편에서 확인하세요: https://tech.devgear.co.kr/467866

그림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를 통해 값을 받는다.

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

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

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

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

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

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

유용한 링크



AI
api
C++
c++빌더
cpp
database
Delphi
DelphiCon
Firedac
fmx
IDE
ideas
interbase
ios
migration
modernization
news
RAD스튜디오
tips
UI
UIUX
vcl
windows
개발
개발사례
개발팁
겟잇
기술레터
기술백서
데이터
데이터베이스
델파이
마이그레이션
모바일
보안
안드로이드

윈도우
윈도우10
인공지능
인터베이스
출시
파이어몽키
프로젝트
현대화