Windows 11의 아이콘 체계
아이콘 체계는 사용자가 앱을 이해하고 나아가는 데 도움이 되는 일련의 시각적 이미지와 기호의 집합입니다. 아이콘은 사용자 인터페이스 전체에서 개념, 작업 또는 상태를 나타내는 시각적 개체의 은유로 사용됩니다.
Windows 11은 응용 프로그램, 시스템 및 파일 형식의 세 가지 유형의 아이콘을 사용합니다. 이 문서에서는 처음 두 가지를 중점적으로 다룹니다.
이 문서에서는 Fluent 디자인 언어가 Windows 앱에 적용되는 방법을 설명합니다. 자세한 내용은 Fluent 디자인 아이콘을 참조 하세요.
응용 프로그램 아이콘
응용 프로그램 아이콘은 Windows 셸에서 앱을 나타냅니다. 주로 응용 프로그램을 여는 데 사용되지만 Windows 셸에 표시되는 모든 위치에서 앱을 나타내기도 합니다.
앱 아이콘은 은유의 방법을 통해 앱의 핵심 기능을 나타내야 합니다. 앱 아이콘을 디자인하고 구성하는 방법에 대한 자세한 내용은 앱 아이콘을 참조 하세요.
시스템 아이콘
명령 모음, 탐색 또는 상태 표시기 같은 항목에 대해 앱 UI 내의 시스템 아이콘을 사용합니다. Windows 11에는 새로운 시스템 아이콘 글꼴, Segoe Fluent 아이콘이 도입되었습니다. 이 새로운 글꼴은 Windows 11의 기하 도형을 보완합니다.
Segoe Fluent 아이콘의 모든 글리프는 모노라인 스타일로 그려집니다. 즉, 1epx의 단일 스트로크를 통해 생성된다는 뜻입니다.
Segoe Fluent 아이콘의 글리프는 세 가지 미적 원칙을 따릅니다.
- 최소: 글리프에는 개념을 전달하는 데 필요한 세부 정보만 포함됩니다.
- 조화: 글리프는 단순 및 기하학적 형태를 기반으로 합니다.
- 진화: 글리프는 쉽게 이해할 수 있는 최신 은유적 방법을 사용합니다.
앱 UI에서 아이콘을 사용하는 방법에 대한 자세한 내용은 Windows 앱의 아이콘을 참조하세요.
아이콘 크기
Segoe Fluent Icons의 글꼴 메트릭은 디자이너와 개발자가 SVG 및 비트맵 아이콘으로 작업하는 데 익숙한 방식과 일치합니다.
각 글꼴 문자 모양은 아이콘 영역의 공간이 정사각형 em이 되도록 디자인되었습니다. 글꼴 크기가 16-epx 아이콘인 아이콘은 16x16-epx 아이콘과 동일하므로 크기 조정 및 위치를 보다 예측 가능하게 만듭니다.
한정자
기본 아이콘을 수정자 아이콘과 결합하여 시스템 아이콘 글리프를 시각적으로 구성할 수 있습니다.
기본 아이콘은 시각적 개체 은유 방법의 주요 요소입니다. 기본 요소는 전체 아이콘 공간을 차지해야 합니다.
수정 아이콘은 기본 아이콘의 의미를 수정합니다. 수정 요소는 아이콘 공간의 하단 사분면 중 하나에 배치해야 합니다.
기본 아이콘만
자체에서 용지 시트 아이콘은 파일의 개념을 전달합니다.
기본 아이콘 +수정 아이콘
파일 아이콘에 위쪽 화살표를 추가하면 업로드된 파일을 나타내는 아이콘으로 의미를 변경합니다.
레이어링
아이콘 레이어링은 두 글리프를 겹치는 데 사용하는 기술입니다. 아이콘 레이어링을 사용하여 동일한 아이콘의 다른 상태(예: 활성 또는 선택한 상태)를 만드는 것이 좋습니다.
현지화
상징의 문화적 의미를 이해합니다. 대부분의 경우 아이콘 체계에 현지화가 필요한 것은 아니지만 특정 아이콘의 경우 한 문화권에서는 허용되지만 다른 문화권에서는 허용되지 않을 수 있습니다. 아이콘을 사용할 컨텍스트에 따라 아이콘 선택을 검증하세요.
예제
WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.
Windows developer