Windows 11의 아이콘 체계

아이콘 체계는 사용자가 앱을 이해하고 나아가는 데 도움이 되는 일련의 시각적 이미지와 기호의 집합입니다. 아이콘은 사용자 인터페이스 전체에서 개념, 작업 또는 상태를 나타내는 시각적 개체의 은유로 사용됩니다.

Windows 11은 응용 프로그램, 시스템 및 파일 형식의 세 가지 유형의 아이콘을 사용합니다. 이 문서에서는 처음 두 가지를 중점적으로 다룹니다.

응용 프로그램 아이콘

An abstract application icon for a hypothetical maps app.

응용 프로그램 아이콘은 Windows 셸에서 앱을 나타냅니다. 주로 응용 프로그램을 여는 데 사용되지만 Windows 셸에 표시되는 모든 위치에서 앱을 나타내기도 합니다.

앱 아이콘은 은유의 방법을 통해 앱의 핵심 기능을 나타내야 합니다. 앱의 아이콘을 디자인하고 생성하는 방법에 대한 자세한 내용은 Windows 의 아이콘을 참조하세요.

A shopping cart icon from Segoe Fluent Icons.

Windows 11에는 새로운 시스템 아이콘 글꼴, Segoe Fluent 아이콘이 도입되었습니다. 이 새로운 글꼴은 Windows 11의 기하 도형을 보완합니다.

Segoe Fluent 아이콘의 모든 글리프는 모노라인 스타일로 그려집니다. 즉, 1epx의 단일 스트로크를 통해 생성된다는 뜻입니다.

Segoe Fluent 아이콘의 글리프는 세 가지 미적 원칙을 따릅니다.

A properly sized printer icon.

Segoe Fluent Icons의 글꼴 메트릭은 디자이너와 개발자가 SVG 및 비트맵 아이콘으로 작업하는 데 익숙한 방식과 일치합니다.

각 글꼴 문자 모양은 아이콘 영역의 공간이 정사각형 em이 되도록 디자인되었습니다. 글꼴 크기가 16-epx 아이콘인 아이콘은 16x16-epx 아이콘과 동일하므로 크기 조정 및 위치를 보다 예측 가능하게 만듭니다.

기본 아이콘을 수정자 아이콘과 결합하여 시스템 아이콘 글리프를 시각적으로 구성할 수 있습니다.

기본 아이콘은 시각적 개체 은유 방법의 주요 요소입니다. 기본 요소는 전체 아이콘 공간을 차지해야 합니다.

수정 아이콘은 기본 아이콘의 의미를 수정합니다. 수정 요소는 아이콘 공간의 하단 사분면 중 하나에 배치해야 합니다.

A file icon.

기본 아이콘만
자체에서 용지 시트 아이콘은 파일의 개념을 전달합니다.

A file icon overlayed with an up arrow icon.

기본 아이콘 +수정 아이콘
파일 아이콘에 위쪽 화살표를 추가하면 업로드된 파일을 나타내는 아이콘으로 의미를 변경합니다.

아이콘 레이어링은 두 글리프를 겹치는 데 사용하는 기술입니다. 아이콘 레이어링을 사용하여 동일한 아이콘의 다른 상태(예: 활성 또는 선택한 상태)를 만드는 것이 좋습니다.

A black and white folder icon plus a beige folder icon with no outlines equals a beige folder icon with a black outline.

상징의 문화적 의미를 이해합니다. 대부분의 경우 아이콘 체계에 현지화가 필요한 것은 아니지만 특정 아이콘의 경우 한 문화권에서는 허용되지만 다른 문화권에서는 허용되지 않을 수 있습니다. 아이콘을 사용할 컨텍스트에 따라 아이콘 선택을 검증하세요.

팁

WinUI 3 갤러리 앱을 열고 실행 중인 실제 아이콘 원칙을 확인합니다. WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.