Windows 앱의 입력 체계
언어의 시각적 표현인 입력 체계의 주요 목적은 정보 전달입니다. 입력 체계의 스타일이 그 목표를 방해해서는 안 됩니다. 이 문서에서는 사용자가 콘텐츠를 쉽고 효율적으로 이해할 수 있도록 Windows 앱에서 입력 체계 스타일을 지정하는 방법에 대해 설명합니다.
글꼴
앱의 UI 전체에서 한 가지 글꼴만 사용해야 하며 Windows 앱의 기본 글꼴인 맑은 고딕 가변을 계속 사용하는 것이 좋습니다. 크기와 픽셀 밀도에 따라 최적의 가독성을 유지하도록 설계되었으며, 시스템의 콘텐츠를 보완하는 깔끔하고 가볍고 개방적인 디자인을 제공합니다.
영어 이외의 언어를 표시하거나 앱의 다른 글꼴을 선택하려면 Windows 앱의 권장 글꼴에서 언어 및 글꼴을 참조하세요.
UI에 사용할 하나의 글꼴을 선택합니다.
여러 글꼴을 혼합하지 않습니다.
가변 글꼴 축
텍스트를 보다 세밀하게 제어하기 위해 맑은 고딕 가변 글꼴에는 두 개의 축이 포함되어 있습니다. 이 글꼴에는 가중치가 가늘게(100)에서 굵게(700)까지 적용되는 가중치 축(wght)이 있습니다. 또한 광학 스케일링이 8pt에서 36pt까지 적용되는 광학 크기 축(opsz)이 있습니다. XAML 공용 컨트롤을 사용하는 경우 지원되는 언어에 대해 기본적으로 맑은 고딕 가변 글꼴이 선택됩니다. 이 글꼴이나 광학 축이 있는 다른 가변 글꼴을 사용하면 광학 크기가 요청된 글꼴 크기와 자동으로 일치하게 됩니다. HTML을 사용하는 경우에는 광학 스케일링도 자동으로 수행되지만 CSS에서 맑은 고딕 가변 글꼴을 지정해야 합니다.
크기 및 스케일링
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"/>
여러 줄을 사용하도록 설정되면 텍스트를 잘라내고 래핑합니다.
시각적 혼란을 방지하기 위해 줄임표를 사용하지 않도록 합니다.
참고
컨테이너가 잘 정의되지 않았거나(예: 차별화된 배경색 없음) 추가 텍스트를 볼 수 있는 링크가 있는 경우 줄임표를 사용하세요.
언어
맑은 고딕 가변은 영어, 유럽어, 그리스어 및 러시아어의 글꼴입니다. 그 외의 언어는 다음 권장 글꼴을 확인하세요.
글꼴 세계화/지역화
특정 언어에 대한 권장 글꼴 패밀리, 크기, 두께 및 스타일에 프로그래밍 방식으로 액세스하려면 LanguageFont 글꼴 매핑 API를 사용합니다. LanguageFont 개체는 UI 헤더, 알림, 본문, 사용자 편집 가능한 문서 본문 글꼴을 비롯하여 콘텐츠의 다양한 범주에 대한 올바른 글꼴 정보에 액세스합니다. 자세한 내용은 세계화를 지원하도록 레이아웃 및 글꼴 조정을 참조하세요.
라틴어가 아닌 언어용 글꼴
| 글꼴 패밀리 | 스타일 | 참고 |
|---|---|---|
| Ebrima | 보통, 굵게 | 아프리카어 스크립트(ADLaM, 게에즈 문자, 은코 문자, 오스만 문자, 티푸나구 문자, 바이 문자)의 사용자 인터페이스 글꼴 |
| Gadugi | 보통, 굵게 | 북아메리카어 스크립트(캐나다 토착어, 체로키 문자, 오세이지족 문자)의 사용자 인터페이스 글꼴 |
| Leelawadee UI | 보통, Semilight, 굵게 | 동남 아시아어 스크립트(부기 문자, 크메르 문자, 태국 문자)의 사용자 인터페이스 글꼴 |
| Malgun Gothic | Regular | 한국어의 사용자 인터페이스 글꼴 |
| Microsoft JhengHei UI | 보통, 굵게, 가늘게 | 중국어(번체)의 사용자 인터페이스 글꼴 |
| Microsoft YaHei UI | 보통, 굵게, 가늘게 | 중국어(간체)의 사용자 인터페이스 글꼴 |
| Myanmar Text | Regular | 미얀마 문자 스크립트의 대체 글꼴 |
| Nirmala UI | 보통, Semilight, 굵게 | 남아시아어 스크립트(벵골 문자, 차크마 문자, 데바나가리 문자, 구자라트 문자, 굴묵키 문자, 카나다 문자, 말라얄람 문자, 메이테이 문자, 오디아 문자, 올 치키 문자, 스리랑카 문자, 소라 솜펭 문자, 타밀 문자, 텔루구 문자)의 사용자 인터페이스 글꼴 |
| Segoe UI | 보통, 기울임꼴, 가는 기울임꼴, 검은 기울임꼴, 굵게, 굵은 기울임꼴, 가늘게, Semilight, Semibold, 검은색 | 아랍어, 아르메니아어, 그루지야어 및 히브리어의 사용자 인터페이스 글꼴입니다. |
| SimSun | Regular | 레거시 중국어 UI 글꼴입니다. |
| Yu Gothic UI | 약간 가늘게, Semilight, 보통, Semibold, 굵게 | 일본어의 사용자 인터페이스 글꼴 |
Fonts
Sans-serif 글꼴
Sans-serif 글꼴은 제목 및 UI 요소에 적합합니다.
| 글꼴 패밀리 | 스타일 | 참고 |
|---|---|---|
| Arial | 보통, 기울임꼴, 굵게, 굵은 기울임꼴, 블랙 | 유럽 및 중동 스크립트(라틴 문자, 그리스어, 키릴 자모, 아랍어, 아르메니아어 및 히브리어)를 지원합니다. 검은색 두께는 유럽 스크립트도 지원합니다. |
| Calibri | 보통, 기울임꼴, 굵게, 굵은 기울임꼴, 가늘게, 가는 기울임꼴 | 유럽 및 중동 스크립트(라틴 문자, 그리스어, 키릴 자모, 아랍어 및 히브리어)를 지원합니다. 아랍어는 직립으로만 사용할 수 있습니다. |
| Consolas | 보통, 기울임꼴, 굵게, 굵은 기울임꼴 | 유럽 스크립트(라틴 문자, 그리스어 및 키릴 자모)를 지원하는 고정 폭 글꼴입니다. |
| Segoe UI | 보통, 기울임꼴, 가는 기울임꼴, 검은 기울임꼴, 굵게, 굵은 기울임꼴, 가늘게, Semilight, Semibold, 검은색 | 유럽 및 중동 스크립트(아랍 문자, 아르메니아 문자, 키릴 자모, 그루지야 문자, 그리스 문자, 히브리 문자, 라틴 문자) 및 리쑤 문자 스크립트의 사용자 인터페이스 글꼴입니다. |
| Selawik | 보통, Semilight, 가늘게, 굵게, Semibold | 맑은 고딕과 계측적으로 호환되는 오픈 소스 글꼴이며 맑은 고딕을 번들로 만들지 않으려는 다른 플랫폼의 앱을 위한 글꼴입니다. Github에서 Selawik를 가져옵니다. |
Serif 글꼴
Serif 글꼴은 대량 텍스트를 표시하는 데 적합합니다.
| 글꼴 패밀리 | 스타일 | 참고 |
|---|---|---|
| Cambria | Regular | 유럽 스크립트(라틴 문자, 그리스어, 키릴 자모)를 지원하는 Serif 글꼴입니다. |
| Courier New | 보통, 기울임꼴, 굵게, 굵은 기울임꼴 | 유럽 및 중동 스크립트(라틴 문자, 그리스어, 키릴 자모, 아랍어, 아르메니아어 및 히브리어)를 지원하는 Serif 고정 폭 글꼴입니다. |
| 그루지야 | 보통, 기울임꼴, 굵게, 굵은 기울임꼴 | 유럽 스크립트(라틴 문자, 그리스어 및 키릴 자모)를 지원합니다. |
| Times New Roman | 보통, 기울임꼴, 굵게, 굵은 기울임꼴 | 유럽 스크립트(라틴 문자, 그리스어, 키릴 자모, 아랍어, 아르메니아어, 히브리어)를 지원하는 레거시 글꼴입니다. |
가변 글꼴
가변 글꼴은 텍스트의 모양을 정확하게 제어하는 데 적합합니다.
| 글꼴 패밀리 | Axes | 참고 |
|---|---|---|
| Bahnschrift | 두께, 너비 | 라틴 문자, 그리스어 및 키릴 자모를 지원하는 가변 글꼴입니다. |
| Segoe UI 변수 | 두께, 광학 크기 | 라틴 문자, 그리스어 및 키릴 자모를 지원하는 가변 글꼴입니다. |
기호 및 아이콘
| 글꼴 패밀리 | 스타일 | 참고 |
|---|---|---|
| Segoe MDL2 자산 | Regular | 앱 아이콘의 사용자 인터페이스 글꼴 자세한 내용은 Segoe MDL2 자산 문서를 참조하세요. |
| Segoe UI Emoji | Regular | 이모지의 사용자 인터페이스 글꼴입니다. |
| Segoe UI Symbol | Regular | 기호의 대체 글꼴입니다. |