텍스트 크기 조정Text scaling

100%에서 225% 까지의 텍스트 크기 조정 예제를 보여 주는 주인공 이미지입니다.Hero image showing an example of text scaling from 100% to 225%.
Windows 10의 텍스트 크기 조정 예 (100% ~ 225%)Example of text scaling in Windows 10 (100% to 225%)

개요Overview

여러 사용자가 컴퓨터 화면에서 텍스트를 읽는 경우 (모바일 장치에서 노트북에서 데스크톱 모니터로 Surface Hub)Reading text on a computer screen (from mobile device to laptop to desktop monitor to the giant screen of a Surface Hub) can be challenging for many people. 반대로, 일부 사용자는 앱 및 웹 사이트에 사용 되는 글꼴 크기를 필요한 것 보다 더 많이 찾을 수 있습니다.Conversely, some users find the font sizes used in apps and web sites to be larger than necessary.

가장 광범위 한 사용자가 텍스트를 최대한 이해 하기 위해 Windows는 사용자가 OS와 개별 응용 프로그램 모두에서 상대적 글꼴 크기를 변경할 수 있는 기능을 제공 합니다.To ensure text is as legible as possible for the broadest range of users, Windows provides the ability for users to change relative font size across both the OS and individual applications. 일반적으로 화면 영역 내의 모든 항목을 확대하고 자체의 유용성 문제를 제기하는 돋보기 앱을 사용하거나, 디스플레이 해상도를 변경하거나, 디스플레이 및 일반 시청 거리에 따라 모든 항목의 크기를 조정하는 DPI 배율을 사용하는 대신, 사용자가 설정에 빠르게 액세스하여 텍스트 크기만 100%(기본 크기)에서 최대 225%까지 조정할 수 있습니다.Instead of using a magnifier app (which typically just enlarges everything within an area of the screen and introduces its own usability issues), changing display resolution, or relying on DPI scaling (which resizes everything based on display and typical viewing distance), a user can quickly access a setting to resize just text, ranging from 100% (the default size) up to 225%.

Support(지원)Support

유니버설 Windows 응용 프로그램 (표준 및 PWA 모두)은 기본적으로 텍스트 크기 조정을 지원 합니다.Universal Windows applications (both standard and PWA), support text scaling by default.

Windows 응용 프로그램에 사용자 지정 컨트롤, 사용자 지정 텍스트 표면, 하드 코드 된 컨트롤 높이, 이전 프레임 워크 또는 타사 프레임 워크가 포함 된 경우 사용자에 게 일관 되 고 유용한 환경을 유지 하기 위해 일부 업데이트를 수행 해야 할 수 있습니다.If your Windows application includes custom controls, custom text surfaces, hard-coded control heights, older frameworks, or 3rd party frameworks, you likely have to make some updates to ensure a consistent and useful experience for your users.

DirectWrite, GDI 및 XAML SwapChainPanels는 기본적으로 텍스트 크기 조정을 지원 하지 않지만 Win32 지원은 메뉴, 아이콘 및 도구 모음으로 제한 됩니다.DirectWrite, GDI, and XAML SwapChainPanels do not natively support text scaling, while Win32 support is limited to menus, icons, and toolbars.

사용자 환경User experience

사용자는 설정-내게 필요한 옵션 > 비전/디스플레이 화면 > 설정에서 텍스트 크게 만들기 슬라이더를 사용 하 여 텍스트 크기 조정을 조정할 수 있습니다.Users can adjust text scale with the Make text bigger slider on the Settings -> Ease of Access -> Vision/Display screen.

텍스트 크게 만들기 슬라이더를 표시 하는 액세스 편의성 비전/표시 설정 페이지의 스크린샷Screenshot of the Ease of Access Vision/Display settings page showing the Make text bigger slider.
설정에서 텍스트 크기 조정 설정-> 접근성-> 비전/디스플레이 화면Text scale setting from Settings -> Ease of Access -> Vision/Display screen

UX 지침UX guidance

텍스트 크기를 조정할 때 컨트롤과 컨테이너는 텍스트와 새 레이아웃을 수용할 수 있도록 크기를 조정 하 고 다시 흐르게 해야 합니다.As text is resized, controls and containers must also resize and reflow to accommodate the text and its new layout. 앞에서 설명한 것 처럼 앱, 프레임 워크 및 플랫폼에 따라이 작업은 대부분 수행 됩니다.As mentioned previously, depending on the app, framework, and platform, much of this work is done for you. 다음 UX 지침에서는 이러한 경우를 설명 합니다.The following UX guidance covers those cases where it's not.

플랫폼 컨트롤 사용Use the platform controls

이미 생각 하시 나요?Did we say this already? 반복 가능: 가능한 경우 항상 다양 한 Windows 앱 프레임 워크와 함께 제공 되는 기본 제공 컨트롤을 사용 하 여 최소한의 노력으로 가장 포괄적인 사용자 환경을 제공 합니다.It's worth repeating: When possible, always use the built-in controls provided with the various Windows app frameworks to get the most comprehensive user experience possible for the least amount of effort.

예를 들어 모든 UWP 텍스트 컨트롤은 사용자 지정 또는 템플릿 없이 전체 텍스트 크기 조정 환경을 지원 합니다.For example, all UWP text controls support the full text scaling experience without any customization or templating.

다음은 몇 가지 표준 텍스트 컨트롤을 포함 하는 기본 UWP 앱의 코드 조각입니다.Here's a snippet from a basic UWP app that includes a couple of standard text controls:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test" 
                HorizontalTextAlignment="Center" />
    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
        <StackPanel Grid.Column="1" 
                    HorizontalAlignment="Center">
            <TextBlock TextWrapping="WrapWholeWords">
                The quick brown fox jumped over the lazy dog.
            </TextBlock>
            <TextBox PlaceholderText="Type something here" />
        </StackPanel>
        <Image Grid.Column="2" 
                Source="Assets/StoreLogo.png" 
                Width="450" Height="450"/>
    </Grid>
    <TextBlock Grid.Row="2" 
                Style="{ThemeResource TitleTextBlockStyle}"
                Text="Text scaling test footer" 
                HorizontalTextAlignment="Center" />
</Grid>

100% ~ 225%의 텍스트 크기 조정 애니메이션입니다.Animation of text scaling 100% to 225%.
애니메이션 텍스트 크기 조정Animated text scaling

자동 크기 조정 사용Use auto-sizing

컨트롤의 절대 크기를 지정 하지 마세요.Don't specify absolute sizes for your controls. 가능 하면 플랫폼에서 사용자 및 장치 설정에 따라 컨트롤의 크기를 자동으로 조정 하도록 합니다.Whenever possible, let the platform resize your controls automatically based on user and device settings.

이전 예제의이 코드 조각에서는 Auto * 그리드 열 집합에 대 한 및 너비 값을 사용 하 고 플랫폼이 그리드 내에 포함 된 요소의 크기에 따라 앱 레이아웃을 조정 하도록 합니다.In this snippet from the previous example, we use the Auto and * width values for a set of grid columns and let the platform adjust the app layout based on the size of the elements contained within the grid.

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>

텍스트 줄 바꿈 사용Use text wrapping

응용 프로그램의 레이아웃을 최대한 유연 하 고 유연 하 게 유지 하기 위해 텍스트가 포함 된 모든 컨트롤에서 텍스트 잘림을 가능 하 게 합니다. 대부분의 컨트롤은 기본적으로 텍스트 잘림을 지원 하지 않습니다.To ensure the layout of your app is as flexible and adaptable as possible, enable text wrapping in any control that contains text (many controls do not support text wrapping by default).

텍스트 줄 바꿈을 지정 하지 않으면 플랫폼은 다른 메서드를 사용 하 여 클리핑 (이전 예제 참조)을 포함 하 여 레이아웃을 조정 합니다.If you don't specify text wrapping, the platform uses other methods to adjust the layout, including clipping (see previous example).

여기서는 AcceptsReturnTextWrapping 텍스트 상자 속성을 사용 하 여 레이아웃이 최대한 유연 하 게 작동 하는지 확인 합니다.Here, we use the AcceptsReturn and TextWrapping TextBox properties to ensure our layout is as flexible as possible.

<TextBox PlaceholderText="Type something here" 
          AcceptsReturn="True" TextWrapping="Wrap" />

텍스트 잘림 방지 100% ~ 225%의 텍스트 크기 조정 애니메이션입니다.Animation of text scaling 100% to 225% with text wrapping.
텍스트 줄 바꿈이 있는 애니메이션 텍스트 크기 조정Animated text scaling with text wrapping

텍스트 트리밍 동작 지정Specify text trimming behavior

텍스트 줄 바꿈이 기본 동작이 아닌 경우 대부분의 텍스트 컨트롤은 텍스트를 클리핑 하거나 텍스트 트리밍 동작에 대 한 줄임표를 지정할 수 있습니다.If text wrapping is not the preferred behavior, most text controls let you either clip your text or specify ellipses for the text trimming behavior. 타원이 공간 자체를 차지 하므로 자르기는 줄임표로 기본 설정 됩니다.Clipping is preferred to ellipses as ellipses take up space themselves.

참고

텍스트를 클리핑 해야 하는 경우 시작 부분이 아니라 문자열의 끝을 자릅니다.If you need to clip your text, clip the end of the string, not the beginning.

이 예제에서는 Texttrimming 속성을 사용 하 여 TextBlock의 텍스트를 자르는 방법을 보여 줍니다.In this example, we show how to clip text in a TextBlock using the TextTrimming property.

<TextBlock TextTrimming="Clip">
    The quick brown fox jumped over the lazy dog.
</TextBlock>

텍스트를 오려낸 텍스트 크기 조정 100% ~ 225%의 스크린샷Screenshot of text scaling 100% to 225% with text clipping.
텍스트를 오려낸 텍스트 크기 조정Text scaling with text clipping

도구 설명 사용Use a tooltip

텍스트를 자르는 경우 도구 설명을 사용 하 여 전체 텍스트를 사용자에 게 제공 합니다.If you clip text, use a tooltip to provide the full text to your users.

여기서는 텍스트 잘림을 지원 하지 않는 TextBlock에 도구 설명을 추가 합니다.Here, we add a tooltip to a TextBlock that doesn't support text wrapping:

<TextBlock TextTrimming="Clip">
    <ToolTipService.ToolTip>
        <ToolTip Content="The quick brown fox jumped over the lazy dog."/>
    </ToolTipService.ToolTip>
    The quick brown fox jumped over the lazy dog.
</TextBlock>

글꼴 기반 아이콘 또는 기호의 크기를 조정 하지 않음Don’t scale font-based icons or symbols

강조 또는 장식을 위한 글꼴 기반 아이콘을 사용 하는 경우 이러한 문자에 대 한 크기 조정을 사용 하지 않도록 설정 합니다.When using font-based icons for emphasis or decoration, disable scaling on these characters.

대부분의 XAML 컨트롤에 대해 IsTextScaleFactorEnabled 속성을로 설정 false 합니다.Set the IsTextScaleFactorEnabled property to false for most XAML controls.

기본적으로 텍스트 크기 조정 지원Support text scaling natively

사용자 지정 프레임 워크 및 컨트롤에서 TextScaleFactorChanged uisettings 시스템 이벤트를 처리 합니다.Handle the TextScaleFactorChanged UISettings system event in your custom framework and controls. 이 이벤트는 사용자가 시스템에서 텍스트 배율 인수를 설정 하는 때마다 발생 합니다.This event is raised each time the user sets the text scaling factor on their system.

요약Summary

이 항목에서는 Windows의 텍스트 크기 조정 지원에 대 한 개요를 제공 하 고 사용자 환경을 사용자 지정 하는 방법에 대 한 UX 및 개발자 지침을 제공 합니다.This topic provides an overview of text scaling support in Windows and includes UX and developer guidance on how to customize the user experience.

API 참조API reference