Windows 앱의 아이콘

아티클
07/30/2024

아이콘은 작업, 개념 또는 제품에 대한 시각적 줄임 표기를 제공합니다. 의미를 기호 이미지로 압축하는 방식으로 아이콘은 언어 장벽을 넘어 중요한 리소스인 화면 공간을 절약할 수 있도록 합니다. 좋은 아이콘은 입력 체계 및 나머지 디자인 언어와 조화를 이룹니다. 은유를 혼합하지 않으며 필요한 사항만 가능한 빠르고 단순하게 전달합니다.

추가 아이콘이 있는 명령 모음 플라이아웃 - 기호, 편집 - 연필, 공유 - 페이지 및 화살표 및 설정 - 기어

아이콘은 앱 내 및 외부에 표시할 수 있습니다. 앱 내에서 아이콘을 사용하여 텍스트 복사 또는 설정 페이지로 이동과 같은 작업을 나타냅니다.

이 문서에서는 앱 UI 내의 아이콘에 대해 설명합니다. Windows에서 앱을 나타내는 아이콘(앱 아이콘)에 대해 알아보려면 앱 아이콘을 참조 하세요.

아이콘을 사용하는 경우의 이해

아이콘은 공간을 절약할 수 있지만 언제 사용해야 하나요?

잘라내기, 복사, 붙여 넣기 및 저장 같은 작업이나 탐색 메뉴 항목에 아이콘을 사용합니다. 사용자가 아이콘의 의미를 쉽게 이해할 수 있고 작은 크기로 분명할 만큼 충분히 단순한 경우 아이콘을 사용합니다.

의미가 명확하지 않거나 분명히 표시하기 위해 복잡한 도형이 필요한 경우에는 아이콘을 사용하지 마세요.

올바른 유형의 아이콘 사용

여러 가지 방법으로 아이콘을 만들 수 있습니다. Segoe Fluent 아이콘 글꼴과 같은 기호 글꼴을 사용할 수 있습니다. 자신의 벡터 기반 이미지를 만들 수 있습니다. 비트맵 이미지를 사용할 수도 있지만 권장하지 않습니다. 앱에 아이콘을 추가할 수 있는 방법에 대한 요약은 다음과 같습니다.

XAML 앱에서 아이콘을 추가하려면 IconElement 또는 IconSource 를 사용합니다.

이 표에서는 IconElement 및 IconSource에서 파생된 다양한 종류의 아이콘을 보여 줍니다.

IconElement	IconSource	설명
AnimatedIcon	AnimatedIconSource	사용자 상호 작용 및 시각적 상태 변경에 대응하여 애니메이션 효과를 주는 시각적 개체를 표시하고 제어하는 아이콘을 나타냅니다.
BitmapIcon	BitmapIconSource	비트맵을 콘텐츠로 사용하는 아이콘을 나타냅니다.
FontIcon	FontIconSource	지정된 글꼴의 문자 모양을 사용하는 아이콘을 나타냅니다.
IconSourceElement	해당 없음	IconSource를 콘텐츠로 사용하는 아이콘을 나타냅니다.
ImageIcon	ImageIconSource	이미지를 콘텐츠로 사용하는 아이콘을 나타냅니다.
PathIcon	PathIconSource	벡터 경로를 콘텐츠로 사용하는 아이콘을 나타냅니다.
SymbolIcon	SymbolIconSource	리소스의 문자 모양을 콘텐츠로 사용하는 아이콘을 `SymbolThemeFontFamily` 나타냅니다.

IconElement 및 IconSource

IconElement 는 FrameworkElement이므로 앱 UI의 다른 요소와 마찬가지로 XAML 개체 트리에 추가할 수 있습니다. 그러나 ResourceDictionary에 추가하고 공유 리소스로 다시 사용할 수는 없습니다.

IconSource는 IconElement와 유사하지만 FrameworkElement가 아니므로 UI에서 독립 실행형 요소로 사용할 수는 없지만 리소스로 공유할 수 있습니다. IconSourceElement 는 IconElement가 필요한 모든 곳에서 사용할 수 있도록 IconSource를 래핑하는 특수 아이콘 요소입니다. 이러한 기능의 예는 다음 섹션에 나와 있습니다.

IconElement 예제

IconElement 파생 클래스를 독립 실행형 UI 구성 요소로 사용할 수 있습니다.

이 예제에서는 아이콘 문자 모양을 단추의 콘텐츠로 설정하는 방법을 보여 줍니다. 단추의 FontFamily SymbolThemeFontFamily 와 해당 콘텐츠 속성을 사용하려는 문자 모양의 유니코드 값으로 설정합니다.

<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
        Content="&#xE768;"/>

SymbolIcon과 같이 이전에 나열된 아이콘 요소 개체 중 하나를 명시적으로 추가할 수도 있습니다. 이렇게 하면 더 많은 유형의 아이콘을 선택할 수 있습니다. 또한 원하는 경우 아이콘 및 텍스트와 같은 다른 유형의 콘텐츠를 결합할 수 있습니다.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play"/>
        <TextBlock Text="Play" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

이 예제에서는 ResourceDictionary에서 FontIconSource를 정의한 다음 IconSourceElement를 사용하여 앱의 다른 위치에서 리소스를 다시 사용하는 방법을 보여 줍니다.

<!--App.xaml-->
<Application
   ...>
    <Application.Resources>
        <ResourceDictionary>
            ...
            <!-- Other app resources here -->

            <FontIconSource x:Key="CertIconSource" Glyph="&#xEB95;"/>

        </ResourceDictionary>
    </Application.Resources>
</Application>

<StackPanel Orientation="Horizontal">
    <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
    <TextBlock Text="Certificate is expired" Margin="4,0,0,0"/>
</StackPanel>

<Button>
    <StackPanel>
        <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
        <TextBlock Text="View certificate" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

WinUI 3 갤러리 앱을 열어 IconElement의 작동을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 해당 Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

아이콘 속성

다른 XAML 요소의 속성에 아이콘을 할당하여 아이콘을 UI에 배치하는 icon 경우가 많습니다. Icon 이름에 포함된 Source 속성은 IconSource를 사용합니다. 그렇지 않으면 속성이 IconElement를 사용합니다.

이 목록에는 속성이 있는 icon 몇 가지 일반적인 요소가 표시됩니다.

명령/작업	탐색	상태/기타
AppBarButton.Icon AppBarToggleButton.Icon AutoSuggestBox.QueryIcon MenuFlyoutItem.Icon MenuFlyoutSubItem.Icon SwipeItem.IconSource XamlUICommand.IconSource	NavigationViewItem.Icon SelectorBarItem.Icon TabViewItem.IconSource	AnimatedIcon.FallbackIconSource AnimatedIconSource.FallbackIconSource IconSourceElement.IconSource InfoBadge.IconSource InfoBar.IconSource TeachingTip.IconSource

팁

WinUI 3 갤러리 앱에서 이러한 컨트롤을 확인하여 아이콘을 사용하는 방법의 예를 볼 수 있습니다.

이 페이지의 나머지 예제에서는 컨트롤의 속성에 아이콘을 icon 할당하는 방법을 보여 줍니다.

FontIcon 및 SymbolIcon

앱에 아이콘을 추가하는 가장 일반적인 방법은 Windows의 아이콘 글꼴에서 제공하는 시스템 아이콘을 사용하는 것입니다. Windows 11에는 Fluent 디자인 언어용으로 설계된 1,000개 이상의 아이콘을 제공하는 새 시스템 아이콘 글꼴 인 Segoe Fluent 아이콘이 도입되었습니다. 글꼴에서 아이콘을 가져오는 것이 직관적이지는 않을 수 있지만 Windows의 글꼴 표시 기술은 이 아이콘이 모든 디스플레이, 모든 해상도 및 크기에서 선명하고 날카롭게 보이게 합니다.

Important

기본 글꼴 패밀리

FontFamily를 직접 지정하는 대신 FontIcon 및 SymbolIcon은 XAML 테마 리소스로 정의된 글꼴 패밀리를 SymbolThemeFontFamily 사용합니다. 기본적으로 이 리소스는 Segoe Fluent 아이콘 글꼴 패밀리를 사용합니다. 앱이 Windows 10 버전 20H2 이하에서 실행되는 경우 Segoe Fluent 아이콘 글꼴 패밀리를 사용할 수 SymbolThemeFontFamily 없으며 리소스는 대신 Segoe MDL2 자산 글꼴 패밀리로 대체 됩니다 .

Symbol 열거형

기호 열거형에는 SymbolThemeFontFamily 일반적인 문자 모양이 많이 포함됩니다. 필요한 문자 모양을 기호로 사용할 수 있는 경우 기본 글꼴 패밀리와 함께 FontIcon을 사용하는 모든 위치에서 SymbolIcon 을 사용할 수 있습니다.

또한 다음과 같이 기호 이름을 사용하여 특성 구문을 사용하여 XAML에서 속성을 설정합니다icon.

<AppBarButton Icon="Send" Label="Send"/>

팁

기호 이름만 사용하여 단축된 특성 구문을 사용하여 속성을 설정할 icon 수 있습니다. 다른 모든 아이콘 형식은 이 페이지의 다른 예제와 같이 더 긴 속성 요소 구문을 사용하여 설정해야 합니다.

글꼴 아이콘

기호 열거형에서는 Segoe Fluent 아이콘 문자 모양의 작은 하위 집합만 사용할 수 있습니다. 사용 가능한 다른 문자 모양을 사용하려면 FontIcon을 사용합니다. 이 예제에서는 아이콘을 사용하여 AppBarButton을 SendFill 만드는 방법을 보여줍니다.

<AppBarButton Label="Send">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xE725;"/>
    </AppBarButton.Icon>
</AppBarButton>

FontFamily를 지정하지 않거나 런타임에 시스템에서 사용할 수 없는 FontFamily를 지정하면 FontIcon은 테마 리소스에서 정의한 SymbolThemeFontFamily 기본 글꼴 패밀리로 대체됩니다.

사용 가능한 모든 글꼴에서 문자 모양 값을 사용하여 아이콘을 지정할 수도 있습니다. 이 예제에서는 Segoe UI 이모지 글꼴에서 문자 모양을 사용하는 방법을 보여줍니다.

<AppBarToggleButton Label="FontIcon">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

자세한 내용 및 예제는 FontIcon 및 SymbolIcon 클래스 설명서를 참조하세요.

팁

WinUI 3 갤러리 앱의 아이콘 페이지를 사용하여 Segoe Fluent 아이콘에서 사용할 수 있는 모든 아이콘에 대한 코드를 보고, 검색하고, 복사할 수 있습니다.

아이콘 페이지로 WinUI 3 갤러리 앱 열기

AnimatedIcon

동작은 Fluent 디자인 언어의 중요한 부분입니다. 애니메이션 아이콘은 특정 진입점에 주의를 끌고, 상태 간에 피드백을 제공하고, 상호 작용에 만족스러움을 추가합니다.

애니메이션 아이콘을 사용하여 Lottie 애니메이션을 사용하여 모션으로 경량의 벡터 기반 아이콘을 구현할 수 있습니다.

자세한 내용 및 예제는 애니메이션 아이콘 및 AnimatedIcon 클래스 설명서를 참조하세요.

WinUI 3 갤러리 앱을 열어 애니메이션이 작동하는 모습을 확인합니다.

PathIcon

PathIcon을 사용하여 벡터 기반 셰이프를 사용하는 사용자 지정 아이콘을 만들 수 있으므로 항상 선명하게 보일 수 있습니다. 그러나 각 점과 곡선을 개별적으로 지정해야 하므로 XAML 기하 도형을 사용하여 셰이프를 만드는 것은 복잡합니다.

이 예제에서는 PathIcon에 사용되는 기하 도형을 정의하는 두 가지 방법을 보여줍니다.

<AppBarButton Label="PathIcon">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="Circles">
    <AppBarButton.Icon>
        <PathIcon>
            <PathIcon.Data>
                <GeometryGroup>
                    <EllipseGeometry RadiusX="15" RadiusY="15" Center="90,90" />
                    <EllipseGeometry RadiusX="50" RadiusY="50" Center="90,90" />
                    <EllipseGeometry RadiusX="70" RadiusY="70" Center="90,90" />
                    <EllipseGeometry RadiusX="100" RadiusY="100" Center="90,90" />
                    <EllipseGeometry RadiusX="120" RadiusY="120" Center="90,90" />
                </GeometryGroup>      
            </PathIcon.Data>
        </PathIcon>
    </AppBarButton.Icon>
</AppBarButton>

Geometry 클래스를 사용하여 사용자 지정 셰이프를 만드는 방법에 대한 자세한 내용은 클래스 설명서와 기하 도형에 대한 이동 및 그리기 명령을 참조하세요. WPF Geometry 설명서도 참조 하세요. WinUI Geometry 클래스에는 WPF 클래스와 동일한 기능이 모두 없지만 셰이프를 만드는 것은 둘 다 동일합니다.

자세한 내용 및 예제는 PathIcon 클래스 설명서를 참조하세요.

BitmapIcon 및 ImageIcon

다른 옵션을 사용할 수 있는 경우에는 권장하지 않지만 BitmapIcon 또는 ImageIcon을 사용하여 이미지 파일(예: PNG, GIF 또는 JPEG)에서 아이콘을 만들 수 있습니다. 비트맵 이미지는 원하는 아이콘의 크기와 화면의 해상도에 따라 확장할 수 있도록 특정 크기로 만들어집니다. 이미지가 축소(줄어듦)되면 흐리게 표시될 수 있습니다. 확장되면 차단되고 픽셀화될 수 있습니다.

BitmapIcon

기본적으로 BitmapIcon은 이미지의 모든 색 정보를 제거하고 투명하지 않은 모든 픽셀을 전경색으로 렌더링합니다. 단색 아이콘을 만들려면 PNG 형식의 투명한 배경에 단색 이미지를 사용합니다. 다른 이미지 형식은 오류 없이 로드되지만 전경색의 단색 블록이 생성됩니다.

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.png"/>
    </AppBarButton.Icon>
</AppBarButton>

ShowAsMonochrome 속성을 .로 설정하여 기본 동작을 재정의 할 false수 있습니다. 이 경우 BitmapIcon은 지원되는 비트맵 파일 형식에 대해 ImageIcon과 동일하게 동작합니다(SVG 파일은 지원되지 않음).

<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg" 
            ShowAsMonochrome="False"/>

자세한 내용 및 예제는 BitmapIcon 클래스 설명서를 참조하세요.

팁

BitmapIcon의 사용법은 BitmapImage 사용과 유사합니다. 코드에서 UriSource 속성을 설정하는 것과 같이 BitmapIcon에 적용되는 자세한 내용은 BitmapImage 클래스를 참조하세요.

ImageIcon

ImageIcon은 ImageSource 파생 클래스 중 하나에서 제공하는 이미지를 보여 줍니다. 가장 일반적인 것은 BitmapSource이지만 앞에서 설명한 것처럼 잠재적인 크기 조정 문제로 인해 아이콘에 대한 비트맵 이미지는 권장하지 않습니다.

SVG(Scalable Vector Graphics) 리소스는 모든 크기 또는 해상도에서 항상 선명하게 보이므로 아이콘에 적합합니다. SVG 사양에서 보안 정적 모드를 지원하지만 애니메이션이나 상호 작용을 지원하지 않는 ImageIcon과 함께 SVGImageSource를 사용할 수 있습니다. 자세한 내용은 SVGImageSource 및 SVG 지원을 참조하세요.

ImageIcon은 포그라운드 속성을 무시하므로 항상 원래 색으로 이미지를 표시합니다. 전경색은 무시되므로 단추 또는 기타 유사한 컨트롤에서 사용할 때 아이콘이 시각적 상태 변경에 응답하지 않습니다.

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
    </AppBarButton.Icon>
</AppBarButton>

자세한 내용 및 예제는 ImageIcon 클래스 설명서를 참조하세요.

팁

ImageIcon의 사용은 이미지 컨트롤과 비슷합니다. ImageIcon에 적용되는 자세한 내용은 Image 클래스를 참조하세요. 한 가지 주목할 만한 차이점은 ImageIcon에서는 멀티 프레임 이미지의 첫 번째 프레임(예: 애니메이션 GIF)만 사용된다는 것입니다. 애니메이션 아이콘을 사용하려면 AnimatedIcon을 참조하세요.

다음을 통해 공유

Windows 앱의 아이콘

아이콘을 사용하는 경우의 이해

올바른 유형의 아이콘 사용

IconElement 및 IconSource

IconElement 예제

아이콘 속성

FontIcon 및 SymbolIcon

Symbol 열거형

글꼴 아이콘

AnimatedIcon

PathIcon

BitmapIcon 및 ImageIcon

BitmapIcon

ImageIcon

추가 리소스

다음을 통해 공유

Windows 앱의 아이콘

아이콘을 사용하는 경우의 이해

올바른 유형의 아이콘 사용

IconElement 및 IconSource

IconElement 예제

아이콘 속성

FontIcon 및 SymbolIcon

Symbol 열거형

글꼴 아이콘

AnimatedIcon

PathIcon

BitmapIcon 및 ImageIcon

BitmapIcon

ImageIcon

관련된 문서

추가 리소스