Share via


Windows 11 레이어링의 및 상승

Windows 11은 레이어링 및 상승을 앱 계층 구조의 기반으로 사용합니다. 계층 구조는 앱 내에서 탐색하는 방법에 대한 중요한 정보를 전달하면서 가장 중요한 콘텐츠에 사용자의 주의를 집중시킵니다. 레이어링 및 상승은 환경을 현대화하며, Windows 내에서 일관된 느낌을 주는 강력한 시각적 개체의 신호입니다.

레이어링

An application window with a single content area

An application window with multiple content areas

레이어링은 하나의 표면을 다른 표면과 겹쳐서 동일한 애플리케이션 내에서 시각적으로 구분되는 둘 이상의 영역을 만드는 개념입니다.

참고

Windows 11 레이어링은 재료 사용과 밀접하게 결합되어 있습니다. 적용 방법에 대한 구체적인 지침은 재료 섹션을 참조하세요.

Windows 11은 애플리케이션에 2-레이어링 시스템을 사용합니다. 이러한 두 레이어는 계층 구조를 만들고 명확성을 제공하여 사용자가 가장 중요한 항목에 집중할 수 있도록 합니다.

  • 기본 레이어는 앱의 기반입니다. 모든 앱의 맨 아래 레이어이며 앱 메뉴, 명령 및 탐색과 관련된 컨트롤을 포함합니다.
  • 콘텐츠 레이어는 앱의 중앙 환경에 사용자의 주의를 집중시킵니다. 콘텐츠 레이어는 인접한 요소에 있거나 콘텐츠를 분할하는 카드로 구분될 수 있습니다.

상승

A variety of overlapping UI elements, each at a different elevation

상승은 데스크톱에서의 위치와 관련하여 한 표면이 다른 표면과 맺은 공간 관계의 깊이 구성 요소입니다. 두 개 이상의 개체가 화면에서 동일한 위치를 차지하는 경우 상승이 가장 높은 개체만 해당 위치에서 렌더링됩니다.

그림자 및 윤곽선(윤곽)은 컨트롤과 표면에서 개체의 상승을 미묘하게 전달하며, 환경 내에서 필요한 경우 주의를 끄는 용도로 사용됩니다. Windows 11은 다음 값으로 그림자 및 윤곽선으로 상승을 표현합니다.

An application window


상승 값: 128
스트로크 너비: 1

A modal dialog box

대화 상자
상승 값: 128
스트로크 너비: 1

A flyout menu

플라이아웃
상승 값: 32
스트로크 너비: 1

A tooltip for a combo box

도구 팁
상승 값: 16
스트로크 너비: 1

A UI surface that contains several content areas

카드
상승 값: 8
스트로크 너비: 1

A combo box

제어
상승 값: 2
스트로크 너비: 1

An empty UI surface

레이어
상승 값: 1
스트로크 너비: 1

Windows 11 컨트롤은 상승 및 윤곽선을 변경을 통해 상태를 나타냅니다. 렌더링된 그림자의 강도는 값의 패리티에 있는 테마에 따라 변경됩니다.

A button in the default state

레스트
상승 값: 2
스트로크 너비: 1

A button in the hover state

호버
상승 값: 2
스트로크 너비: 1

A button in the pressed state

누름
상승 값: 1
스트로크 너비: 1