Windows 앱용 아이콘

아이콘은 작업, 개념 또는 제품에 대한 시각적 줄임 표기를 제공합니다. 의미를 기호 이미지로 압축하는 방식으로 아이콘은 언어 장벽을 넘어 중요한 리소스인 화면 공간을 절약할 수 있도록 합니다.

좋은 아이콘은 입력 체계 및 나머지 디자인 언어와 조화를 이룹니다. 은유를 혼합하지 않으며 필요한 사항만 가능한 빠르고 단순하게 전달합니다.

아이콘은 앱의 내부와 외부에서 나타날 수 있습니다.

앱 내의 아이콘

앱 내부에서는 아이콘을 사용하여 텍스트 복사 또는 설정 페이지 이동과 같은 작업을 나타냅니다.

앱 외부 아이콘

앱 외부에서 Windows는 아이콘을 사용하여 시작 메뉴와 작업 표시줄에 앱을 나타냅니다. 사용자가 앱을 시작 메뉴에 고정하도록 선택하면 앱의 시작 타일에는 앱 아이콘이 포함될 수 있습니다. 앱 아이콘은 제목 표시줄에 표시되며 앱 로고를 사용하여 시작 화면을 만들 수도 있습니다.

이 문서에서는 앱 내부 아이콘을 설명합니다. 앱 외부 아이콘(앱 아이콘)에 대한 자세한 내용은 Iconography in Windows를 참조하세요.

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

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

잘라내기, 복사, 붙여 넣기 및 저장 같은 작업이나 탐색 메뉴 항목에 아이콘을 사용합니다.

표시할 개념에 대한 아이콘이 이미 있는 경우에는 아이콘을 사용합니다. (아이콘이 있는지 확인하려면 Segoe 아이콘 목록을 확인합니다.)

사용자가 아이콘의 의미를 쉽게 이해할 수 있고 작은 크기로 분명할 만큼 충분히 단순한 경우 아이콘을 사용합니다.

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

올바른 유형의 아이콘 사용

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

미리 정의된 아이콘

Microsoft는 Segoe MDL2 자산 글꼴의 형식으로 1000개가 넘는 아이콘을 제공합니다. 글꼴에서 아이콘을 가져오는 것이 직관적이지는 않을 수 있지만 Windows의 글꼴 표시 기술은 이 아이콘이 모든 디스플레이, 모든 해상도 및 크기에서 선명하고 날카롭게 보이게 합니다. 자세한 내용은 Segoe MDL2 자산 아이콘을 참조하세요.

글꼴

Segoe MDL2 자산 글꼴을 사용할 필요는 없습니다. Wingdings 또는 Webdings와 같이 사용자가 시스템에 설치한 모든 글꼴을 사용할 수 있습니다.

SVG file

SVG(Scalable Vector Graphics) 리소스는 모든 크기 또는 해상도에서 항상 선명하게 보이므로 아이콘에 적합합니다. 대부분의 그리기 애플리케이션은 SVG로 내보낼 수 있습니다. 자세한 내용은 SVGImageSource를 참조하세요.

Geometry 개체

SVG 파일과 같이 기하 도형은 벡터 기반 리소스이므로 항상 선명하게 보입니다. 그러나 각 점과 곡선을 개별적으로 지정해야 하므로 기하 도형 만들기는 복잡합니다. 실제로는 앱을 실행(예: 애니메이션)하는 동안 아이콘을 수정해야 하는 경우에만 좋은 선택입니다. 지침은 기하 도형용 이동 및 그리기 명령을 참조하세요.

비트맵 이미지

PNG, GIF 또는 JPEG와 같은 비트맵 이미지를 사용할 수 있지만 이를 권장하지는 않습니다.

비트맵 이미지는 원하는 아이콘의 크기와 화면의 해상도에 따라 확장할 수 있도록 특정 크기로 만들어집니다. 이미지가 축소(줄어듦)되면 흐리게 표시될 수 있습니다. 확장되면 차단되고 픽셀화될 수 있습니다. 비트맵 이미지를 사용하는 경우 JPEG보다 PNG 또는 GIF를 이용하는 것이 좋습니다.

아이콘으로 작업을 수행하도록 설정

아이콘이 있고나면, 다음 단계는 명령이나 탐색 작업과 연결하여 작업을 수행하도록 설정하는 것입니다. 이 작업을 수행하는 가장 좋은 방법은 단추나 명령 모음에 아이콘을 추가하는 것입니다.

아이콘에 애니메이션을 적용하여 자습서의 다음 버튼과 같은 UI 구성 요소에 주의를 집중시키거나 아이콘과 관련된 작업을 재미있고 흥미로운 방식으로 반영할 수도 있습니다. 자세한 내용은 AnimatedIcon을 참조하세요.

아이콘 버튼 만들기

표준 버튼에 아이콘을 넣을 수 있습니다. 더 다양한 장소에서 버튼을 사용할 수 있으므로 이러한 방식으로 아이콘을 사용하면 작업 아이콘이 표시되는 위치에 좀 더 많은 유연성을 제공합니다.

버튼에 아이콘을 추가하는 한 가지 방법은 다음과 같습니다.

1단계
버튼의 글꼴 패밀리를 Segoe MDL2 Assets으로 설정하고 이 콘텐츠 속성을 사용할 문자 모양의 유니코드 값으로 설정합니다.

<Button FontFamily="Segoe MDL2 Assets" Content="&#xE102;" />

2단계
아이콘 요소 개체인 BitmapIcon, FontIcon, PathIcon, ImageIcon 또는 SymbolIcon 중 하나를 사용합니다. 이 기술은 선택할 수 있는 더 많은 유형의 아이콘을 제공합니다. 또한 원하는 경우 아이콘과 텍스트와 같은 다른 유형의 콘텐츠를 결합할 수 있습니다.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play" />
        <TextBlock>Play the movie</TextBlock>
    </StackPanel>
</Button>

명령 모음에서 일련의 아이콘 만들기

잘라내기/복사/붙여넣기 또는 사진 편집 프로그램에 대한 그리기 명령 세트와 같이 함께 사용하는 일련의 명령이 있는 경우, 명령 모음에 함께 배치합니다. 명령 모음에는 각각 작업을 나타내는 하나 이상의 앱 바 버튼 또는 앱 바 토글 단추가 있습니다. 각 단추에는 표시하는 아이콘을 제어하는 데 사용하는 Icon 속성이 있습니다. 아이콘을 지정하는 다양한 방법이 있습니다.

가장 쉬운 방법은 미리 정의된 아이콘 목록을 사용하는 것입니다. Back 또는 Stop와 같은 아이콘 이름을 지정하기만 하면 시스템에서 이 이름을 그립니다.

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>
</CommandBar>

아이콘 이름의 전체 목록은 기호 열거형 참조를 참조하세요.

명령 모음에 있는 버튼의 아이콘을 제공하는 다른 방법은 다음과 같습니다.

• FontIcon - 아이콘은 지정된 글꼴 패밀리의 문자 모양을 기반으로 합니다.
• BitmapIcon - 아이콘은 지정된 URI가 포함된 비트맵 이미지 파일을 기반으로 합니다.
• PathIcon - 아이콘은 경로 데이터를 기반으로 합니다.
• ImageIcon: 아이콘은 Image 클래스에서 지원하는 이미지 파일 형식을 기반으로 합니다.

명령 모음에 대한 자세한 내용은 명령 모음 문서를 참조하세요.

관련된 문서

• 앱 아이콘 및 로고
• AnimatedIcon