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

[세미나 자료] 윈도우 11 스타일과 효과 – 여러분의 GUI를 업데이트하세요!


Recommended Posts

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)

  1. 윈도우 클래식
  2. 윈도우 XP (Luna)
  3. 윈도우 Aero
  4. 메트로 (aka 마이크로소프트) 디자인 언어
  5. 마이크로소프트 플루언트 디자인 시스템

 

윈도우 클래식 (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 플루언트의 핵심 요소

spacer.png

 

윈도우 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)

 

윈도우 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를 제공하는 가장 강력하고 기능적이며 독특한 솔루션
  • 플루언트 UI 개발
  • 플루언트 UI 축앤필 - 파트 2

 

윈도우 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)

spacer.png

 

Skia4Delphi – SVG 지원 (Skia4Delphi – SVG Support)

  • 오픈소스 및 크로스플랫폼 Skia wrapper (델파이 용)
    • github.com/viniciusfbb/skia4delphi#svg 
  • 델파이 & Skia로 UI를 23세기 수준으로! 데이터 대시보드 구축
    • youtu.be/mGdeomuIP_M (이안 바커와 함께 진행)

 

 

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

이 토의에 참여하세요

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

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...

중요한 정보

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