모퉁이 반경Corner radius

Windows UI 라이브러리(WinUI) 버전 2.2부터 많은 컨트롤의 기본 스타일이 둥근 모퉁이를 사용하도록 업데이트되었습니다.Starting with version 2.2 of the Windows UI Library (WinUI), the default style for many controls has been updated to use rounded corners. 이러한 새 스타일은 따뜻함과 신뢰감을 주기 위한 것으로, 사용자가 UI를 시각적으로 처리하기 쉽습니다.These new styles are intended to evoke warmth and trust, and make the UI easier for users to visually process.

다음은 두 개의 Button 컨트롤입니다. 첫 번째는 모퉁이가 둥글지 않고, 두 번째는 새로운 둥근 모퉁이 스타일을 사용합니다.Here are two Button controls, the first without rounded corners and the second using the new rounded corner style.

둥근 모퉁이가 있는 단추와 없는 단추

WinUI 2.2 이상을 위한 NuGet 패키지를 설치하는 경우 WinUI 컨트롤 및 플랫폼 컨트롤 모두에 대해 새로운 기본 스타일이 설치됩니다.When you install the NuGet package for WinUI 2.2 or later, new default styles are installed for both WinUI controls and platform controls. 이러한 스타일은 앱에서 WinUI 2.2를 사용할 때 자동으로 사용됩니다. 새 스타일을 사용하기 위해 수행해야 하는 추가 작업은 없습니다.These styles are used automatically when you use WinUI 2.2 in your app; there is no further action you need to take to use the new styles. 하지만 이 작업을 수행해야 하는 경우 둥근 모퉁이를 사용자 지정하는 방법이 이 문서의 뒷부분에 나와 있습니다.However, later in this article we show how to customize the rounded corners if you need to do so.

중요

일부 컨트롤은 플랫폼(Windows.UI.Xaml.Controls) 및 WinUI(Microsoft.UI.Xaml.Controls)에서 모두 사용할 수 있습니다(예: TreeView 또는 ColorPicker).Some controls are available both in the platform (Windows.UI.Xaml.Controls) and in WinUI (Microsoft.UI.Xaml.Controls); for example, TreeView or ColorPicker. 앱에서 WinUI를 사용하는 경우 컨트롤의 WinUI 버전을 사용해야 합니다.When you use WinUI in your app, you should use the WinUI version of the control. WinUI와 함께 사용하는 경우 모퉁이를 둥글게 조정하는 작업은 플랫폼 버전에서 일관되지 않게 적용될 수 있습니다.Corner rounding might be applied inconsistently in the platform version when used with WinUI.

중요 API: Control.CornerRadius propertyImportant APIs: Control.CornerRadius property

기본 컨트롤 디자인Default control designs

둥근 모퉁이 스타일을 사용하는 컨트롤에는 사각형 요소, 플라이아웃 요소 및 막대 요소의 세 가지 영역이 있습니다.There are three areas of the controls where the rounded corner styles are used: rectangular elements, flyout elements, and bar elements.

사각형 UI 요소의 모퉁이Corners of rectangle UI elements

  • 이러한 UI 요소에는 사용자에게 화면에서 항상 표시되는 단추와 같은 기본 컨트롤이 포함됩니다.These UI elements include basic controls like buttons that users see on screen at all times.
  • 이러한 UI 요소에 사용되는 기본 반경 값은 2px입니다.The default radius value we use for these UI elements is 2px.

둥근 모퉁이가 강조 표시된 단추

컨트롤Controls

  • AutoSuggestBoxAutoSuggestBox
  • 단추Button
    • ContentDialog 단추ContentDialog buttons
  • CalendarDatePickerCalendarDatePicker
  • CheckBoxCheckBox
    • TreeView 다중 선택 확인란TreeView multi-select check boxes
  • ComboBoxComboBox
  • DatePickerDatePicker
  • DropDownButtonDropDownButton
  • FlipViewFlipView
  • PasswordBoxPasswordBox
  • RichEditBoxRichEditBox
  • SplitButtonSplitButton
  • TextBoxTextBox
  • TimePickerTimePicker
  • ToggleButtonToggleButton
  • ToggleSplitButtonToggleSplitButton

플라이아웃 및 오버레이 UI 요소의 모퉁이Corners of flyout and overlay UI elements

  • 이러한 요소는 MenuFlyout과 같이 일시적으로 화면에 나타나는 일시적 UI 요소이거나 TabView 탭과 같은 다른 UI를 오버레이하는 요소일 수 있습니다.These can be transient UI elements that appear on screen temporarily, like MenuFlyout, or elements that overlay other UI, like TabView tabs.
  • 이러한 UI 요소에 사용되는 기본 반경 값은 4px입니다.The default radius value we use for these UI elements is 4px.

플라이아웃 예제

컨트롤Controls

  • CommandBarFlyoutCommandBarFlyout
  • ContentDialogContentDialog
  • 플라이아웃Flyout
  • MenuFlyout 비교MenuFlyout
  • TabView 탭TabView tabs
  • TeachingTipTeachingTip
  • ToolTipToolTip
  • 플라이아웃 부분(열려 있는 경우)Flyout part (when open)
    • AutoSuggestBoxAutoSuggestBox
    • CalendarDatePickerCalendarDatePicker
    • ComboBoxComboBox
    • DatePickerDatePicker
    • DropDownButtonDropDownButton
    • MenuBarMenuBar
    • SplitButtonSplitButton
    • TimePickerTimePicker
    • ToggleSplitButtonToggleSplitButton

막대 요소Bar elements

  • 이러한 UI 요소는 막대나 선처럼 모양이 지정됩니다(예: ProgressBar).These UI elements are shaped like bars or lines; for example, ProgressBar.
  • 여기서 사용하는 기본 반경 값은 2px입니다.The default radius values we use here are 2px.

진행률 표시줄 예제

컨트롤Controls

  • NavigationView 선택 표시기NavigationView selection indicator
  • Pivot 선택 표시기Pivot selection indicator
  • ProgressBarProgressBar
  • ScrollBar(IndicatorMode=TouchIndicator 경우)ScrollBar (when IndicatorMode=TouchIndicator)
  • 슬라이더Slider
    • ColorPicker 색 슬라이더ColorPicker color slider
    • MediaTransportControls 검색 표시줄 슬라이더MediaTransportControls seek bar slider

사용자 지정 옵션Customization options

제공되는 기본 모퉁이 반경 값은 고정되어 있지 않으며, 몇 가지 방법으로 모퉁이의 둥근 정도를 쉽게 수정할 수 있습니다.The default corner radii values that we provide are not set in stone and there are a few ways you can easily modify the amount of rounding on the corners. 이렇게 하려면 두 개의 글로벌 리소스를 통하거나, 원하는 사용자 지정 세분성 수준에 따라 컨트롤에서 직접 CornerRadius 속성을 통해 수행할 수 있습니다.This can be done through two global resources, or through the CornerRadius property directly on the control, depending on the level of customization granularity you want.

둥글게 하지 않는 경우When not to round

어떤 인스턴스는 컨트롤의 모퉁이를 둥글게 하지 않아야 합니다. 이 경우 기본적으로 둥글게 되어 있지 않습니다.There are instances where the corner of a control should not be rounded, and we don't round these by default.

  • SplitButton의 두 부분처럼 컨테이너 내에 있는 여러 UI 요소가 서로 닿아있는 경우입니다.When multiple UI elements that are housed inside a container touch each other, such as the two parts of a SplitButton. 닿은 곳에 공간이 없어야 합니다.There should be no space when they contact.

SplitButton

  • 컨트롤이 ScrollViewer의 일부이기도 한 ScrollBar 컨테이너의 일부인 ScrollBar의 막대같이 다른 컨테이너 내에 있는 경우입니다.When a control is housed inside another container, like a ScrollBar's bar and buttons that are part of the ScrollBar container, which is also part of a ScrollViewer.

둥근 모서리가 없는 세로 스크롤 막대의 스크린샷.

  • 플라이아웃 UI 요소의 한 쪽이 플라이아웃을 호출하는 UI에 연결된 경우입니다.When a flyout UI element is connected to a UI that invokes the flyout on one side.

일부 모서리가 둥글지 않은 AutoSuggest 플라이아웃의 스크린샷.

키보드 포커스 사각형 및 그림자Keyboard focus rectangle and shadow

기본 디자인은 키보드 포커스 사각형 또는 컨트롤 그림자의 모퉁이를 둥글게 하는 특별한 작업을 수행하지 않습니다.Our default design does not do any special work to round the corners of the keyboard focus rectangle or control shadow. 더 높은 모퉁이 반경 값을 사용하면 기능적으로 중단되지는 않습니다. 그러나 더 큰 값으로 인한 원치 않는 시각적 결함을 방지하기 위해 이 사실을 알고 있는 것이 좋습니다.Using a higher corner radius value will not break them functionally; however, it is good to be aware of this to avoid unwanted visual glitches that could be introduced with a larger value.

다음은 어떻게 모퉁이 반경이 크면 그림자가 바람직하지 않은 것처럼 보일 수 있는지에 관한 예제입니다.Here is an example of how a larger corner radius can make the shadow look undesirable:

ContentDialogShadow

둥근 모퉁이와 성능Rounded corners and performance

둥근 모퉁이를 자연스럽게 렌더링하기 위해서는 사각 모퉁이를 렌더링하는 데 비해 더 많은 그리기 성능이 사용됩니다.Rendering rounded corners naturally uses more drawing power than rendering square corners. 기본 모퉁이 반경 값을 선택할 때 디자인 원칙뿐 아니라 앱에서 사용하는 경우 기본 컨트롤이 제대로 작동하도록 하는 데에도 주의를 기울였습니다.When selecting the default corner radius values, we not only considered the design principles but we were also careful to ensure our default controls perform well when you use them in your apps.

이 컨텍스트에서 앱 성능에 대해 고려할 때 주로 페이지 로드 시간과 앱 시작 시간을 고려해야 합니다.When thinking about app performance in this context, you should primarily consider page load time and app launch time. 더 큰 UI 화면에서 모퉁이가 둥글면 성능에 더 큰 영향을 준다는 점을 고려하세요.Consider that rounded corners on a larger UI surface have a greater impact on performance. 전체 화면 앱 UI에서는 둥근 모퉁이 그리기를 피하세요.Avoid drawing rounded corners on a full screen app UI. ContentDialog와 같이 UI가 잠깐 표시되고 페이지가 로드된 후에는 별 문제가 되지 않습니다.This is less of an issue if the UI is displayed briefly and after the page is loaded, like a ContentDialog.

페이지 또는 앱 전체 CornerRadius 변경 사항Page or app-wide CornerRadius changes

모든 컨트롤의 모퉁이 반경을 제어하는 두 가지 앱 리소스가 있습니다.There are 2 app resources that control the corner radii of all the controls:

  • ControlCornerRadius - 기본값은 2px입니다.ControlCornerRadius - default is 2px.
  • OverlayCornerRadius - 기본값은 4px입니다.OverlayCornerRadius - default is 4px.

어느 범위에서든 이러한 리소스의 값을 재정의하면 그에 따라 해당 범위 내의 모든 컨트롤에 영향을 미칩니다.If you override the value of these resources at any scope, it will affect all controls within that scope accordingly.

즉, 원형을 적용할 수 있는 모든 컨트롤의 원형을 변경하려면 다음과 같이 새 CornerRadius 값을 사용하여 두 리소스를 앱 수준에서 정의할 수 있습니다.This means if you want to change the roundness of all controls where roundness could be applied, you can define both resources at the app level with the new CornerRadius values like this:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            <ResourceDictionary>
                <CornerRadius x:Key="OverlayCornerRadius">0</CornerRadius>
                <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

또는 페이지나 컨테이너 수준과 같이 특정 범위 내에서 모든 컨트롤의 원형을 변경하려는 경우에는 다음과 같이 유사한 패턴을 따를 수 있습니다.Alternatively, if you want to change all controls' roundness within a particular scope, like at a page or container level, you can follow a similar pattern:

<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>

참고

OverlayCornerRadius 리소스가 적용되기 위해서는 앱 수준에서 정의되어야 합니다.The OverlayCornerRadius resource must be defined at the app level in order to take effect.

팝업과 플라이아웃은 시각적 트리(Visual Tree)의 루트 요소에서 동적으로 생성되므로 이들이 사용하는 모든 리소스도 그곳에서 정의되어야 하기 때문입니다.This is because popups and flyouts are dynamic and created at the root element in the Visual Tree, so any resources that they use must also be defined there. 그렇지 않으면, 범위를 벗어나게 됩니다.Otherwise, they're out of scope.

컨트롤 기준 CornerRadius 변경 사항Per-control CornerRadius changes

컨트롤의 선택 번호에 대해서만 원형을 변경하려는 경우 컨트롤의 CornerRadius 속성을 직접 수정할 수 있습니다.You can modify the CornerRadius property on controls directly if you want to change the roundness of only a select number of controls.

DefaultDefault 수정된 속성Property modified
DefaultCheckBox CustomCheckBox
<CheckBox Content="Checkbox"/> <CheckBox Content="Checkbox" CornerRadius="5"/>

모든 컨트롤의 모퉁이가 수정된 CornerRadius 속성에 응답하는 것은 아닙니다.Not all controls' corners will respond to their CornerRadius property being modified. 모퉁이를 둥글게 만들려는 컨트롤이 실제로 예상한 대로 CornerRadius 속성에 응답하도록 하려면 먼저 ControlCornerRadius 또는 OverlayCornerRadius 글로벌 리소스가 해당 컨트롤에 영향을 미치는지 확인합니다.To ensure that the control whose corners you wish to round will indeed respond to their CornerRadius property the way you expect, first check that the ControlCornerRadius or OverlayCornerRadius global resources affect the control in question. 영향을 미치지 않는 경우 둥글게 만들려는 컨트롤에 모퉁이가 있는지 확인합니다.If they do not, check that the control you wish to round has corners at all. 대부분의 컨트롤은 실제 에지를 렌더링하지 않으므로 CornerRadius 속성을 제대로 사용할 수 없습니다.Many of our controls do not render actual edges and therefore cannot make proper use of the CornerRadius property.

WinUI 기반 사용자 지정 스타일Basing custom styles on WinUI

스타일에 올바른 BasedOn 특성을 지정하여 WinUI 둥근 모서리 스타일을 기준으로 사용자 지정 스타일을 만들 수 있습니다.You can base your custom styles on the WinUI rounded corner styles by specifying the correct BasedOn attribute in your style. 예를 들어, WinUI 단추 스타일을 기준으로 사용자 지정 단추 스타일을 만들려면 다음을 수행합니다.For example to create a custom button style based on WinUI button style, do the following:

<Style x:Key="MyCustomButtonStyle" BasedOn="{StaticResource DefaultButtonStyle}">
   ...
</Style>

일반적으로 WinUI 컨트롤 스타일은 일관된 명명 규칙 "DefaultXYZStyle"을 따릅니다. 여기서 "XYZ"는 컨트롤의 이름입니다.In general, WinUI control styles follow a consistent naming convention: "DefaultXYZStyle" where "XYZ" is the name of the control. 전체 내용을 참조하려면 WinUI 리포지토리에서 XAML 파일을 찾아볼 수 있습니다.For full reference, you can browse the XAML files in the WinUI repository.