Windows 앱의 입력 체계
언어의 시각적 개체 표현인 입력 체계의 주요 목적은 정보 전달입니다. 입력 체계의 스타일이 그 목표에 방해하는 행동과 같은 영향을 미쳐선 안됩니다. 이 문서에서는 사용자가 콘텐츠를 쉽고 효율적으로 이해할 수 있도록 Windows 앱에서 입력 체계 스타일을 지정하는 방법에 대해 설명합니다.
글꼴
앱의 UI 전체에서 한 가지 글꼴만 사용해야 하며 Windows 앱의 기본 글꼴인 Segoe UI Variable을 계속 사용하는 것이 좋습니다. 크기와 픽셀 밀도에 따라 최적의 가독성을 유지하도록 설계되었으며, 시스템의 콘텐츠를 보완하는 깔끔하고 가볍고 개방적인 디자인을 제공합니다.
영어 이외의 언어를 표시하거나 앱의 다른 글꼴을 선택하려면 Windows 앱의 권장 글꼴에서 언어 및 글꼴을 참조하세요.
UI에 사용할 하나의 글꼴을 선택합니다.
여러 글꼴을 혼합하지 않습니다.
Variable 글꼴 축
텍스트를 보다 세밀하게 제어하기 위해 Segoe UI Variable 글꼴에는 두 개의 축이 포함되어 있습니다. 이 글꼴에는 가중치가 가늘게(100)에서 굵게(700)까지 적용되는 가중치 축(wght)이 있습니다. 또한 광학 스케일링이 8pt에서 36pt까지 적용되는 광학 크기 축(opsz)이 있습니다. XAML 공용 컨트롤을 사용하는 경우 지원되는 언어에 대해 기본적으로 Segoe UI Variable 글꼴이 선택됩니다. 이 글꼴이나 광학 축이 있는 다른 가변 글꼴을 사용하면 광학 크기가 요청된 글꼴 크기와 자동으로 일치하게 됩니다. HTML을 사용하는 경우에는 광학 스케일링도 자동으로 수행되지만 CSS에서 Segoe UI Variable 글꼴을 지정해야 합니다.
크기 및 스케일링
UWP 앱의 글꼴 크기는 모든 디바이스에서 자동으로 조정됩니다. 스케일링 알고리즘은 3m 떨어져 있는 Surface Hub 10의 24픽셀 글꼴을 불과 몇 인치 떨어져 있는 5인치 휴대폰의 24픽셀 글꼴처럼 읽을 수 있게 해줍니다.
스케일링 시스템의 작동 방식 때문에 실제 픽셀이 아닌 유효 픽셀로 디자인하고 있으므로, 화면 크기나 해상도가 다른 경우에도 글꼴 크기를 변경할 필요가 없습니다.
Windows 유형 램프 크기 조정을 따릅니다.
12픽셀보다 작은 글꼴 크기를 사용하지 마십시오.
계층 구조
사용자는 페이지를 검색할 때 시각적 계층 구조를 사용합니다. 머리글은 콘텐츠를 요약하고, 본문 텍스트는 자세한 정보를 제공합니다. 앱에서 명확한 시각적 계층 구조를 만들려면 Windows 유형 램프를 따릅니다.
유형 램프
Windows 유형 램프는 페이지의 유형 스타일 간에 중요한 관계를 설정하므로 사용자가 콘텐츠를 쉽게 읽을 수 있습니다. 모든 크기는 유효 픽셀로 설정되며 모든 디바이스에서 실행되는 UWP 앱에 최적화되어 있습니다.
자세한 내용은 XAML 유형 램프 사용에 대한 지침을 확인하세요.
맞춤
TextAlignment 기본값은 왼쪽이고, 대부분의 경우 이 왼쪽 맞춤 방법은 일관된 콘텐츠 고정과 균일한 레이아웃을 제공합니다. RTL 언어에 대한 내용은 세계화를 지원하도록 레이아웃 및 글꼴 조정을 참조하세요.
<TextBlock TextAlignment="Left">
문자 수
읽기 쉽도록 줄당 50~60자를 유지합니다.
줄당 20자 미만 또는 60자 이상은 쉽게 읽을 수 없습니다. 초과하여 사용하지 마세요.
클리핑 및 줄임표
텍스트의 양이 사용 가능한 공간을 초과하는 경우 텍스트 잘라내고 줄임표[...]를 삽입하는 것이 좋으며, 이는 대다수 UWP 텍스트 컨트롤의 기본 동작입니다.
<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>
여러 줄을 사용하도록 설정되면 텍스트를 잘라내고 래핑합니다.
시각적 혼란을 피하기 위해 말줄임표를 사용하지 마십시오.
참고 항목
컨테이너가 잘 정의되지 않았거나(예: 차별화된 배경색 없음) 추가 텍스트를 볼 수 있는 링크가 있는 경우 줄임표를 사용하세요.
언어
Segoe UI Variable은 영어, 유럽어, 그리스어 및 러시아어의 글꼴입니다. 그 외의 언어는 다음 권장 글꼴을 확인하세요.
글꼴 세계화/현지화
LanguageFont 글꼴 매핑 API를 사용하여 특정 언어에 권장되는 글꼴 패밀리, 크기, 두께 및 스타일에 프로그래밍 방식으로 액세스할 수 있습니다. LanguageFont 개체는 UI 헤더, 알림, 본문 텍스트 및 사용자가 편집할 수 있는 문서 본문 글꼴을 비롯한 다양한 범주의 콘텐츠에 대한 올바른 글꼴 정보에 대한 액세스를 제공합니다. 자세한 내용은 세계화를 지원하도록 레이아웃 및 글꼴 조정을 참조하세요.
라틴어가 아닌 언어의 글꼴
| 글꼴 패밀리 | 스타일 | 주의 |
|---|---|---|
| Ebrima | Regular, 굵게 | User-interface font for African scripts (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai). |
| Gadugi | Regular, 굵게 | 북아메리카어 스크립트(캐나다 토착어, 체로키 문자, 오세이지족 문자)의 사용자 인터페이스 글꼴 |
| Leelawadee UI | Regular, Semilight, 굵게 | 동남 아시아어 스크립트(부기 문자, 크메르 문자, 태국 문자)의 사용자 인터페이스 글꼴 |
| Malgun Gothic | Regular | 한국어용 사용자 인터페이스 글꼴입니다. |
| Microsoft JhengHei UI | Regular, 굵게, 밝게 | 중국어 번체의 사용자 인터페이스 글꼴입니다. |
| Microsoft YaHei UI | Regular, 굵게, 밝게 | 중국어 간체의 사용자 인터페이스 글꼴입니다. |
| Myanmar Text | Regular | 미얀마 스크립트의 대체 글꼴입니다. |
| Nirmala UI | Regular, Semilight, 굵게 | 남아시아어 스크립트(벵골 문자, 차크마 문자, 데바나가리 문자, 구자라트 문자, 굴묵키 문자, 카나다 문자, 말라얄람 문자, 메이테이 문자, 오디아 문자, 올 치키 문자, 스리랑카 문자, 소라 솜펭 문자, 타밀 문자, 텔루구 문자)의 사용자 인터페이스 글꼴 |
| Segoe UI | Regular, Italic, Light Italic, Black Italic, Bold, Bold Italic, Light, Semilight, Semibold, Black | 아랍어, 아르메니아어, 그루지야어 및 히브리어의 사용자 인터페이스 글꼴입니다. |
| SimSun | Regular | 레거시 중국어 UI 글꼴입니다. |
| Yu Gothic UI | Light, Semilight, Regular, Semibold, 굵게 | 일본어용 사용자 인터페이스 글꼴입니다. |
글꼴
Sans-serif 글꼴
Sans-serif 글꼴은 제목 및 UI 요소에 적합합니다.
| 글꼴 패밀리 | 스타일 | 참고 |
|---|---|---|
| Arial | Regular, Italic, Bold, Bold Italic, Black | 유럽 및 중동 스크립트(라틴 문자, 그리스어, 키릴 자모, 아랍어, 아르메니아어 및 히브리어)를 지원합니다. 검은색 가중치는 유럽 스크립트도 지원합니다. |
| Calibri | Regular, Italic, Bold, Bold Italic, Light, Light Italic | 유럽 및 중동 스크립트(라틴어, 그리스어, 키릴 자모, 아랍어 및 히브리어)를 지원합니다. 아랍어는 수직으로만 사용할 수 있습니다. |
| Consolas | Regular, Italic, Bold, Bold Italic | 유럽 스크립트(라틴 문자, 그리스어 및 키릴 자모)를 지원하는 고정 너비 글꼴입니다. |
| Segoe UI | Regular, Italic, Light Italic, Black Italic, Bold, Bold Italic, Light, Semilight, Semibold, Black | 유럽 및 중동 스크립트(아랍어, 아르메니아어, 키릴 자모, 그루지야어, 그리스어, 히브리어, 라틴어) 및 Lisu 스크립트에 대한 사용자 인터페이스 글꼴입니다. |
| Selawik | Regular, Semilight, Light, 굵게, Semibold | Segoe UI와 계측적으로 호환되는 오픈 소스 글꼴이며 맑은 고딕을 번들로 만들지 않으려는 다른 플랫폼의 앱을 위한 글꼴입니다. Github에서 Selawik를 가져옵니다. |
Serif 글꼴
Serif 글꼴은 많은 양의 텍스트를 표시하는 데 적합합니다.
| 글꼴 패밀리 | 스타일 | 참고 |
|---|---|---|
| Cambria | Regular | 유럽 스크립트(라틴 문자, 그리스어, 키릴 자모)를 지원하는 Serif 글꼴입니다. |
| Courier 신규 | Regular, Italic, Bold, Bold Italic | 유럽 및 중동 스크립트(라틴 문자, 그리스어, 키릴 자모, 아랍어, 아르메니아어 및 히브리어)를 지원하는 Serif 고정 폭 글꼴입니다. |
| Georgia | Regular, Italic, Bold, Bold Italic | 유럽 스크립트(라틴어, 그리스어 및 키릴 자모)를 지원합니다. |
| Times New Roman | Regular, Italic, Bold, Bold Italic | 유럽 스크립트(라틴어, 그리스어, 키릴 자모, 아랍어, 아르메니아어, 히브리어)를 지원하는 레거시 글꼴입니다. |
Variable 글꼴
Variable 글꼴은 텍스트의 모양을 정확하게 제어하는 데 적합합니다.
| 글꼴 패밀리 | 축 | 참고 |
|---|---|---|
| Bahnschrift | 가중치, 너비 | 라틴 문자, 그리스어 및 키릴 자모를 지원하는 Variable 글꼴입니다. |
| Segoe UI Variable | 가중치, 광학 크기 | 라틴 문자, 그리스어 및 키릴 자모를 지원하는 Variable 글꼴입니다. |
기호 및 아이콘
| 글꼴 패밀리 | 스타일 | 참고 |
|---|---|---|
| Segoe MDL2 자산 | Regular | 앱 아이콘에 대한 사용자 인터페이스 글꼴입니다. 자세한 내용은 Segoe MDL2 자산 문서를 참조하세요. |
| Segoe UI 이모지 | Regular | 이모지의 사용자 인터페이스 글꼴입니다. |
| Segoe UI Symbol | Regular | 기호의 대체 글꼴입니다. |
관련된 문서
Windows developer