Windows의 입력 체계

언어의 시각적 개체 표현인 입력 체계의 주요 목적은 정보 전달입니다. Windows 형식 시스템을 사용하면 UI에서 가독성과 가독성을 최대화하기 위해 콘텐츠의 구조 및 계층 구조를 만들 수 있습니다.

Segoe UI 변수는 Windows에 대한 새 시스템 글꼴입니다. 클래식 Segoe를 새롭게 재해석한 것으로, 변수 글꼴 기술을 사용하여 매우 작은 크기에서 동적으로 뛰어난 가독성을 제공하고, 표시 크기에서 향상된 개요를 제공합니다.

팁

이 문서에서는 Fluent 디자인 언어가 Windows 앱에 적용되는 방법을 설명합니다. 자세한 내용은 Fluent 디자인 - 입력 체계를 참조 하세요.

Segoe Fluent 변수 사용

Segoe UI 변수는 텍스트 의 세밀한 제어를 위해 무게와 광학 크기의 두 축을 지원합니다.

• 가중치 축(wght)은 씬(100)에서 굵게(700)로 가중치가 증분됩니다.
• 광학 크기 축(opsz)은 자동이며 기본적으로 설정되어 있습니다. 글꼴에서 카운터의 모양과 크기를 제어하여 작은 크기와 성격의 가독성을 큰 크기(8pt에서 36pt로 광학 크기 조정)로 우선 순위를 지정합니다.

XAML 공용 컨트롤을 사용하는 경우 지원되는 언어에 대해 기본적으로 Segoe UI Variable 글꼴이 선택됩니다. 이 글꼴이나 광학 축이 있는 다른 가변 글꼴을 사용하면 광학 크기가 요청된 글꼴 크기와 자동으로 일치하게 됩니다. HTML을 사용하는 경우에는 광학 스케일링도 자동으로 수행되지만 CSS에서 Segoe UI Variable 글꼴을 지정해야 합니다.

가중치

가중치 이름	가중치 축 값	시각적 개체
밝게	300
Semilight	350
Regular	400
Semibold	600
Bold	700

옵티컬 축

Windows 11의 입력 체계 모범 사례

Windows 11은 텍스트가 표시되는 컨텍스트를 기반으로 다음 특성을 통해 Segoe UI 변수를 사용합니다.

특성	값	참고
가중치	Regular, Semibold	대부분의 텍스트에 기본 가중치를 사용하고 제목에는 Semibold를 사용합니다.
맞춤	왼쪽, 가운데	기본적으로 왼쪽 맞춤, 아이콘 아래 텍스트와 같은 드문 경우에만 가운데 맞춤
최솟값	14px Semibold, 12px Regular	이러한 크기와 가중치보다 작은 텍스트는 일부 언어에서 읽을 수 없습니다.
대/소문자 구분	문장 사례	제목을 포함한 모든 UI 텍스트에 대/소문자 구분 문구 사용
잘림	줄임표 및 클리핑	대부분의 경우에는 줄임표를 사용합니다. 드물게 클리핑을 사용하기도 합니다.

예제

WinUI 3 갤러리 앱을 열고 실행 중인 타이포그래피 원칙을 확인합니다.

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

Windows 앱의 입력 체계

언어의 시각적 개체 표현인 입력 체계의 주요 목적은 정보 전달입니다. 입력 체계의 스타일이 그 목표에 방해하는 행동과 같은 영향을 미쳐선 안됩니다. 이 문서에서는 사용자가 콘텐츠를 쉽고 효율적으로 이해할 수 있도록 Windows 앱에서 입력 체계 스타일을 지정하는 방법에 대해 설명합니다.

글꼴

앱의 UI 전체에서 한 가지 글꼴만 사용해야 하며 Windows 앱의 기본 글꼴인 Segoe UI Variable을 계속 사용하는 것이 좋습니다. 크기와 픽셀 밀도에 따라 최적의 가독성을 유지하도록 설계되었으며, 시스템의 콘텐츠를 보완하는 깔끔하고 가볍고 개방적인 디자인을 제공합니다.

영어 이외의 언어를 표시하거나 앱의 다른 글꼴을 선택하려면 Windows 앱의 권장 글꼴에서 언어 및 글꼴을 참조하세요.

크기 및 스케일링

XAML 앱의 글꼴 크기는 모든 디바이스에서 자동으로 확장됩니다. 크기 조정 알고리즘은 10피트 떨어진 큰 화면에서 24픽셀 글꼴이 몇 인치 떨어진 작은 화면에서 24픽셀 글꼴처럼 읽을 수 있도록 합니다.

스케일링 시스템의 작동 방식 때문에 실제 픽셀이 아닌 유효 픽셀로 디자인하고 있으므로, 화면 크기나 해상도가 다른 경우에도 글꼴 크기를 변경할 필요가 없습니다.

계층 구조

사용자는 페이지를 검색할 때 시각적 계층 구조를 사용합니다. 머리글은 콘텐츠를 요약하고, 본문 텍스트는 자세한 정보를 제공합니다. 앱에서 명확한 시각적 계층 구조를 만들려면 Windows 유형 램프를 따릅니다.

유형 램프

Windows 유형 램프는 페이지의 유형 스타일 간에 중요한 관계를 설정하므로 사용자가 콘텐츠를 쉽게 읽을 수 있습니다. 모든 크기는 유효 픽셀 단위이며 모든 화면 크기에서 실행되는 Windows 앱에 최적화되어 있습니다.

Windows 11은 UI의 다양한 텍스트 형식에 대해 다음 값을 사용합니다.

예제	Weight	크기/줄 높이
	작게	12/16epx
	Text	14/20epx
	텍스트 semibold	14/20epx
	Text	18/24epx
	semibold 표시	20/28epx
	semibold 표시	28/36epx
	semibold 표시	40/52epx
	semibold 표시	68/92epx

자세한 내용은 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, 굵게	일본어용 사용자 인터페이스 글꼴입니다.

Fonts

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 Fluent 아이콘 글꼴 문서를 참조하세요.
Segoe UI 이모지	Regular	이모지의 사용자 인터페이스 글꼴입니다.
Segoe UI Symbol	Regular	기호의 대체 글꼴입니다.

관련된 문서

• 텍스트 컨트롤
• XAML 테마 리소스
• XAML 스타일
• Microsoft 입력 체계
• Variable 글꼴