김나래 4월 26일, 2022에 포스트됨 공유하기 4월 26일, 2022에 포스트됨 원문: https://blogs.embarcadero.com/windows-11-styles-and-effects-updating-your-gui-webinar 작성자: Jim McKeeth (2022.1) 2022년 1월 진행되었던 "윈도우 11 플루언트 UI 스타일&효과 - GUI를 업데이트하세요"의 다시보기 자료이다. Watch the replay of this webinar to understand the Windows design language, what’s changed, and how to make your applications look the best on the latest version of Windows11. 해당 온라인 세미나에서는 윈도우 디자인 언어, 변경된 사항들, 최신 버전의 윈도우 11에서 애플리케이션을 최상의 상태로 만드는 방법에 대해 다루었다. 목차 윈도우 UI의 5대 역사 (The Five Eras of Windows UI) 윈도우 클래식 (Windows Classic) 윈도우 Luna 윈도우 Aero 마이크로소프트 디자인 언어 마이크로소프트 플루언트 디자인 시스템 플루언트 vs. 메트로 vs. Aero 윈도우 10 플루언트의 핵심 요소 윈도우 11 디자인 요소 윈도우 11만의 시그니처 윈도우 11에서의 기하학 (Geometry in Windows 11) 기하학: 둥근 모서리 (Geometry: Rounded Corners) 윈도우 11 색상 (Color in Windows 11) 윈도우 11 VCL 스타일 (Windows 11 VCL Styles) 다크 모드 감지 (Detect Dark Mode) 윈도우 11에서의 계층화 (Layering in Windows 11) 윈도우 11에서의 (Elevation in Windows 11) 윈도우 11의 소재(Materials in Windows 11) 윈도우 11에서의 Acrylic (Acrylic in Windows 11) AlmediaDev 윈도우 11에서의 Mica Material 윈도우 11에서의 Smoke 효과 아이콘 (Overhauling Icons) Skia4Delphi – SVG 지원 (Skia4Delphi – SVG Support) 윈도우 UI의 5대 역사 (The Five Eras of Windows UI) 윈도우 클래식 윈도우 XP (Luna) 윈도우 Aero 메트로 (aka 마이크로소프트) 디자인 언어 마이크로소프트 플루언트 디자인 시스템 윈도우 클래식 (Windows Classic) 윈도우 3.11 이후 심플한 아웃라인과 색상 윈도우 95 이후 약간의 3D 표현을 위한 음영 윈도우 98에 도입된 그라데이션 제목 표시줄 윈도우 Luna 윈도우 XP 이후 더 다양한 그라데이션으로 더 멋진 3D 라운드 구현 윈도우 Aero Vista에 도입 투명 및 유리 효과 마이크로소프트 디자인 언어 메트로 디자인 언어로 알려져있었던 개념 윈도우 8/8.1에서 사용되고 대중화됨 윈도우 10과 함께 개발된 마이크로소프트 디자인 언어 2 (MDL2) 플루언트 디자인의 기초가 됨 마이크로소프트 플루언트 디자인 시스템 마이크로소프트가 2017년 개발 메트로 디자인 언어의 업그레이드 버전 모든 윈도우 10/11 기기의 디자인 지침으로 활용됨 플루언트로의 전환이 점진적인 장기 프로젝트 플루언트 vs. 메트로 vs. Aero 플루언트는 메트로가 도입한 깔끔한 룩앤필을 그대로 유지 메트로만큼 플랫하지는 않지만 여전히 심플함 Aero 비주얼을 리뉴얼함 Blurred Translucency Drop Shadow 마우스 포인트를 따라 표시되는 강조 효과 윈도우 10 플루언트의 핵심 요소 윈도우 11 디자인 요소 손쉬운 (Effortless) 사용자가 원하는 작업을 집중력과 정확성까지 놓치지 않고 쉽게 할 수 있다. 차분 (Calm) 배경을 페이드 처리하여 차분하면서도 집중력이 유지된다. 퍼스널 (Personal) 개인 요구와 선호에 따라 유연하게 대응한다. 친숙 (Familiar) 학습 곡선이 필요없는 룩앤필 완벽 + 일관성 (Complete + Coherent) 여러 디바이스 전반적으로 지속되는 윈도우 경험 윈도우 11만의 시그니처 기하학 (Geometry) 계층화 (Layering & Elevation) 색상 (Color) 소재 (Materials) 아이콘 그래픽 & 텍스트 기술 (Iconography & Typography) 모션 (Motion) 윈도우 11에서의 기하학 (Geometry in Windows 11) Geometry describes the shape, size and position of UI elements on screen 기하학은 화면에 표시되는 UI 요소의 모양, 크기, 위치를 의미한다. Progressively rounded corners 점차적인 둥근 모서리 Nested elements 중첩된 요소 Consistent gutters 일관된 여백 기하학: 둥근 모서리 (Geometry: Rounded Corners) Windows 11 applies rounded corners to all top-level app windows 윈도우 11은 모든 최상위 앱 화면에 둥근 모서리가 적용되었다. The same applies to most common controls such as Button and ListView 버튼, 리스트뷰와 같은 대부분의 컨트롤에 적용된다. 윈도우 11 색상 (Color in Windows 11) Color indicates a visual hierarchy and structure between user interface elements 색상은 UI 요소들 간의 시각적인 계층 및 구조를 나타내준다. Color is context appropriate, emphasizing significant items only when necessary 색상은 상황에 적합하게 표시되며, 필요한 경우에만 중요 항목을 강조한다. Both Light and Dark color modes use neutral colors for optimal contrast 라이트(Light), 다크(Dark) 모드는 최적의 대비를 표현하기 위해 뉴트럴한 색상을 사용한다. Accent color is used to emphasize important UI elements 중요한 UI 요소를 강조하기 위해서 악센트가 있는 색상을 사용한다. 윈도우 11 VCL 스타일 (Windows 11 VCL Styles) Available via GetIt Package Manager 겟잇 패키지 매니저에서 다운로드 받을 수 있다 다크 모드 감지 (Detect Dark Mode) 레지스트리 확인을 위한 오픈 소스 라이브러리 github.com/checkdigits/delphidarkmode 델파이 & C++빌더와 함께 작동 런타임 시 테마 변경 감지 윈도우 11에서의 계층화 (Layering in Windows 11) Layering is the concept of overlapping one surface with another, creating two or more visually distinguished areas within the same application 계층화는 한 표면을 다른 표면과 겹쳐 동일한 애플리케이션에서 두 개 이상의 시각적으로 구별된 영역을 만들어내는 개념이다. The base layer is an app’s foundation. It is the bottom most layer of every app, and contains controls related to app menus, commands, and navigation 기본 레이어는 앱 기반이다. 모든 앱의 가장 아래 레이어이며 앱 메뉴, 명령, 탐색 관련 컨트롤들이 여기에 해당된다. The content layer focuses the user on the app’s central experience. The content layer may be on contiguous element, or separated into cards that segment content 컨텐츠 레이어는 앱의 중심이 되는 중요한 경험에 사용자를 집중시킨다. 컨텐츠 레이어는 연속 요소에 존재하거나, 컨텐츠를 분할하는 카드에 분리되어 있을 수 있다. 윈도우 11에서의 (Elevation in Windows 11) Elevation is the depth component of the spatial relationship 엘레베이션은 공간 관계의 깊이 컴포넌트이다. Different elevations results from greater drop shadows 낙하 그림자가 더 커질수록 엘레베이션 결과가 달라진다. 윈도우 11의 소재(Materials in Windows 11) Materials are visual effects applied to UX surfaces 소재는 UX 표면에 적용되는 시각적 효과이다. Acrylic Mica Smoke 윈도우 11에서의 Acrylic (Acrylic in Windows 11) A semi-transparent material that replicates the effect of frosted glass 반투명 글래스 느낌을 주는 반투명 소재이다. Used for transient, light-dismiss surfaces such as flyouts and context menus 플라이아웃 및 컨택스트 메뉴와 같은 일시적으로 나타나는 표면 효과로 사용된다. AlmediaDev Most powerful, functional, unique solutions with Fluent UI, Themes, Styles, Skins, GDI+, DirectX for Delphi and C++ Builder 델파이, C++빌더 용의 플루언트 UI, 테마, 스타일, 스킨, GDI+, DirectX를 제공하는 가장 강력하고 기능적이며 독특한 솔루션 www.almdev.com 플루언트 UI 개발 youtu.be/uOpbLLDh1hc (Ian Barker) 플루언트 UI 축앤필 - 파트 2 youtu.be/lGcj8AG7M0o (Ian Barker) 윈도우 11에서의 Mica Material New opaque material 새로운 불투명 소재 Subtly tinted with the user’s desktop background color 사용자 바탕 화면 배경색으로 감지하기 쉽지 않을 정도로 색칠됨 Use for primary content areas 기본 컨텐츠 영역에 사용 윈도우 11에서의 Smoke 효과 Smoke emphasizes an important UI surface by dimming the surfaces beneath so that they recede into the background Smoke는 중요한 UI 표면을 강조한다. 아래쪽 표면을 어둡게 해서 배경이 흐릿하게 보이도록해서 강조하는 방식이다. Smoke is used to signal blocking interaction below a modal UI such as a dialog Smoke는 대화 상자와 같은 모달 UI 아래에서 신호 차단 인터랙션으로 사용된다. 아이콘 (Overhauling Icons) Skia4Delphi – SVG 지원 (Skia4Delphi – SVG Support) 오픈소스 및 크로스플랫폼 Skia wrapper (델파이 용) github.com/viniciusfbb/skia4delphi#svg 델파이 & Skia로 UI를 23세기 수준으로! 데이터 대시보드 구축 youtu.be/mGdeomuIP_M (이안 바커와 함께 진행) 인용하기 이 댓글 링크 다른 사이트에 공유하기 더 많은 공유 선택 사항
Recommended Posts
이 토의에 참여하세요
지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.