텍스트 크기 조정

Windows 11에서 텍스트 크기 조정의 예(100개% 225개%)

개요

컴퓨터 화면에서 텍스트 읽기(모바일 장치에서 노트북, 데스크톱 모니터, Surface Hub의 거대한 화면까지)는 많은 사람들에게 어려울 수 있습니다. 반대로 일부 사용자는 앱 및 웹 사이트에 사용되는 글꼴 크기가 필요 이상으로 커야 합니다.

텍스트가 가장 광범위한 사용자에 대해 가능한 한 읽기 쉬운지 확인하기 위해 Windows는 사용자가 OS 및 개별 애플리케이션 모두에서 상대 글꼴 크기를 변경할 수 있는 기능을 제공합니다. 돋보기 앱(일반적으로 화면 영역 내의 모든 항목을 확대하고 고유한 유용성 문제를 도입함), 디스플레이 해상도 변경 또는 DPI 크기 조정(디스플레이 및 일반적인 보기 거리에 따라 모든 크기 조정)을 사용하는 대신, 사용자는 설정에 빠르게 액세스하여 100개의%(기본 크기)에서 최대 225개의%범위까지 텍스트 크기를 조정할 수 있습니다.

Support

유니버설 Windows 애플리케이션(표준 및 PWA 모두)은 기본적으로 텍스트 크기 조정을 지원합니다.

Windows 애플리케이션에 사용자 지정 컨트롤, 사용자 지정 텍스트 화면, 하드 코딩된 컨트롤 높이, 이전 프레임워크 또는 타사 프레임워크가 포함된 경우 사용자에게 일관되고 유용한 환경을 보장하기 위해 일부 업데이트를 수행해야 할 수 있습니다.

DirectWrite, GDI 및 XAML SwapChainPanels는 기본적으로 텍스트 크기 조정을 지원하지 않지만 Win32 지원은 메뉴, 아이콘 및 도구 모음으로 제한됩니다.

사용자 환경

사용자는 설정 - 접근성> -> 시각/디스플레이 화면에서 텍스트를 더 크게 만들기 슬라이더를 사용하여 텍스트 배율을 조정할 수 있습니다.

설정에서 텍스트 크기 조정 설정 -> 접근성 -> 비전/디스플레이 화면

UX 지침

텍스트 크기가 조정되면 컨트롤과 컨테이너도 텍스트와 새 레이아웃을 수용할 수 있도록 크기를 조정하고 재배치해야 합니다. 앞에서 설명한 것처럼 앱, 프레임워크 및 플랫폼에 따라 이 작업의 대부분이 사용자를 위해 수행됩니다. 다음 UX 지침에서는 그렇지 않은 경우를 다룹니다.

플랫폼 컨트롤 사용

우리는 이미 이것을 말했습니까? 가능한 경우 항상 다양한 Windows 앱 프레임워크와 함께 제공되는 기본 제공 컨트롤을 사용하여 최소한의 노력으로 가능한 가장 포괄적인 사용자 환경을 얻을 수 있습니다.

예를 들어 모든 UWP 텍스트 컨트롤은 사용자 지정 또는 템플릿 없이 전체 텍스트 크기 조정 환경을 지원합니다.

다음은 몇 가지 표준 텍스트 컨트롤을 포함하는 기본 UWP 앱의 코드 조각입니다.

<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>

애니메이션 텍스트 크기 조정

자동 크기 조정 사용

컨트롤의 절대 크기를 지정하지 마세요. 가능하면 플랫폼이 사용자 및 디바이스 설정에 따라 컨트롤의 크기를 자동으로 조정하도록 합니다.

이전 예제의 이 코드 조각에서는 그리드 열 집합에 대한 너비 값과 Auto 너비 값을 사용하고 * 플랫폼이 그리드에 포함된 요소의 크기에 따라 앱 레이아웃을 조정할 수 있도록 합니다.

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

텍스트 줄바꿈 사용

앱의 레이아웃이 최대한 유연하고 적응 가능한지 확인하려면 텍스트를 포함하는 모든 컨트롤에서 텍스트 줄 바꿈을 사용하도록 설정합니다(대부분의 컨트롤은 기본적으로 텍스트 줄 바꿈을 지원하지 않음).

텍스트 줄 바꿈을 지정하지 않으면 플랫폼은 다른 메서드를 사용하여 클리핑을 포함하여 레이아웃을 조정합니다(이전 예제 참조).

여기서는 AcceptsReturn 및 TextWrapping TextBox 속성을 사용하여 레이아웃이 최대한 유연하도록 합니다.

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

텍스트 줄 래핑을 사용하여 애니메이션 텍스트 크기 조정

텍스트 트리밍 동작 지정

텍스트 줄 바꿈이 기본 동작이 아닌 경우 대부분의 텍스트 컨트롤을 사용하면 텍스트를 잘라내거나 텍스트 트리밍 동작의 줄임표를 지정할 수 있습니다. 클리핑은 줄임표보다 공간을 덜 차지하기 때문에 줄임표 대신 사용하는 것이 좋습니다.

이 예제에서는 TextTrimming 속성을 사용하여 TextBlock에서 텍스트를 잘라내는 방법을 보여 드립니다.

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

텍스트 클리핑을 사용하여 텍스트 크기 조정

툴팁을 사용하세요

텍스트를 잘라내는 경우 툴팁을 사용하여 사용자에게 전체 텍스트를 제공하세요.

여기서는 텍스트 래핑을 지원하지 않는 TextBlock에 도구 설명을 추가합니다.

<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>

글꼴 기반 아이콘 또는 기호 크기 조정 안 함

강조 또는 장식에 글꼴 기반 아이콘을 사용하는 경우 이러한 문자에 대한 크기 조정을 사용하지 않도록 설정합니다.

대부분의 XAML 컨트롤에 대해 IsTextScaleFactorEnabled 속성을 false 설정합니다.

기본적으로 텍스트 크기 조정 지원

사용자 지정 프레임워크 및 컨트롤에서 TextScaleFactorChanged UISettings 시스템 이벤트를 처리합니다. 이 이벤트는 사용자가 시스템에서 텍스트 배율 인수를 설정할 때마다 발생합니다.

요약

이 항목에서는 Windows에서 텍스트 크기 조정 지원에 대한 개요를 제공하고 사용자 환경을 사용자 지정하는 방법에 대한 UX 및 개발자 지침을 포함합니다.

관련 문서

API 참고 자료

• IsTextScaleFactorEnabled
• 텍스트 크기 설정값 변경 됨 (TextScaleFactorChanged)