InfoBar

  • 아티클

InfoBar 컨트롤은 사용자에게 눈에 잘 띄지만 방해가 되지 않는 앱 전체의 상태 메시지를 표시하기 위한 것입니다. 표시되는 메시지 유형뿐만 아니라 사용자 고유의 동작 호출 또는 하이퍼링크 단추를 포함하는 옵션을 쉽게 표시할 수 있는 심각도 수준이 내장되어 있습니다. InfoBar는 다른 UI 콘텐츠와 인라인되어 있기 때문에 사용자가 컨트롤을 항상 표시하거나 닫을 수 있는 옵션이 있습니다.

A sample of an InfoBar in the default state with a close button and a message

올바른 컨트롤인가요?

사용자가 변경된 애플리케이션 상태에 대한 알림을 받거나, 확인하거나, 조치를 취해야 할 때 InfoBar 컨트롤을 사용합니다. 기본적으로 알림은 사용자가 닫을 때까지 콘텐츠 영역에 그대로 남아 있지만 사용자 흐름을 끊지는 않습니다.

InfoBar는 레이아웃에서 공간을 차지하고 다른 모든 자식 요소처럼 동작합니다. 다른 콘텐츠를 덮거나 그 위에 뜨지 않습니다.

앱의 상태를 변경하지 않거나, 시간에 민감한 경고 또는 중요하지 않은 메시지에 대해 직접 사용자 작업을 확인하거나 응답하는 데 InfoBar 컨트롤을 사용하지 마세요.

설명

앱 인식 또는 경험에 직접 영향을 미치는 시나리오에서 사용자가 닫거나 상태가 해결된 InfoBar를 사용합니다.

다음 몇 가지 예를 참조하세요.

  • 인터넷 연결 끊김
  • 특정 사용자 작업과 관련이 없이 자동으로 트리거된 경우 문서 저장 시 오류 발생
  • 녹음하려고 할 때 마이크가 연결되지 않음
  • 애플리케이션 구독이 만료됨

앱 인식 또는 경험에 직접 영향을 미치는 시나리오에서 사용자가 닫은 InfoBar를 사용합니다.

다음 몇 가지 예를 참조하세요.

  • 통화 녹음이 시작됨
  • 업데이트가 '릴리스 정보' 링크와 함께 적용됨
  • 서비스 약관이 업데이트되었으며 승인이 필요함
  • 앱 전체 백업이 비동기적으로 완료됨
  • 애플리케이션 구독이 만료에 가까움

다른 컨트롤을 사용해야 하는 경우

ContentDialog, Flyout 또는 TeachingTip을 사용하는 것이 더 적합한 몇 가지 시나리오가 있습니다.

  • 특정 UI 요소의 컨텍스트에 정보를 표시하는 등 지속적인 알림이 필요하지 않은 시나리오의 경우 Flyout이 더 나은 옵션입니다.
  • 애플리케이션에서 사용자 작업을 확인하고 user must read 정보를 표시하는 시나리오의 경우 ContentDialog를 사용합니다.
    • 또한 앱 상태가 너무 많이 변경되어 사용자가 앱과 상호 작용하는 모든 기능을 차단해야 하는 경우 ContentDialog를 사용합니다.
  • 알림이 일시적인 교육 모멘트인 시나리오의 경우 TeachingTip이 더 나은 옵션입니다.

올바른 알림 컨트롤을 선택하는 방법에 대한 자세한 내용은 대화 상자 및 플라이아웃 문서를 참조하세요.

권장 사항

유용성 입력 및 종료

깜박이는 콘텐츠

InfoBar가 화면에서 깜박이는 것을 방지하기 위해 보기에서 빠르게 나타나거나 사라지면 안 됩니다. 광과민성이 있는 사람들에게 시각적으로 반짝이는 것을 방지하고 애플리케이션의 유용성을 개선하세요.

앱 상태 조건을 통해 보기를 자동으로 들어오고 나가는 InfoBar의 경우, 콘텐츠가 연속적으로 빠르게 또는 여러 번 표시되거나 사라지는 것을 방지하기 위해 애플리케이션에 논리를 포함하는 것이 좋습니다. 그러나 일반적으로 이 컨트롤은 오래 표시되는 상태 메시지에 사용해야 합니다.

InfoBar 업데이트

컨트롤이 열리면 메시지 또는 심각도 업데이트와 같은 다양한 속성이 변경되어도 알림 이벤트가 발생하지 않습니다. 화면 판독기를 사용하는 사용자에게 InfoBar의 업데이트된 콘텐츠를 알리려면 컨트롤을 닫고 다시 열어 이벤트를 트리거하는 것이 좋습니다.

콘텐츠를 오프셋하는 인라인 메시지

다른 UI 컨텐츠와 인라인되는 InfoBar의 경우, 페이지의 나머지 부분이 요소 추가에 반응하는 방식을 염두에 둡니다.

상당한 높이의 InfoBar는 페이지 상의 다른 요소의 레이아웃을 크게 변경할 수 있습니다. InfoBar가 빠르게 특히 연속적으로 나타나거나 사라지는 경우, 사용자는 변화하는 시각적 상태를 혼동할 수 있습니다.

색상 및 아이콘

사전 설정된 심각도 수준을 벗어난 색상 및 아이콘을 사용자 지정할 때 표준 아이콘 및 색상 집합의 의미에 대한 사용자 기대를 염두에 둡니다.

또한 사전 설정된 심각도 색상은 테마 변경, 고대비 모드, 색상 혼동 접근성 및 전경색과의 대비를 위해 이미 디자인되었습니다. 가능한 경우 이러한 색상을 사용하고 다양한 색상 상태 및 접근성 기능에 맞게 애플리케이션에 사용자 지정 논리를 포함하는 것이 좋습니다.

메시지가 명확하게 전달되고 사용자가 액세스할 수 있도록 표준 아이콘 및 색상에 대한 UX 지침을 확인하세요.

심각도

제목, 메시지 또는 사용자 지정 콘텐츠에서 전달된 정보와 일치하지 않는 알림에 대해서는 심각도 속성을 설정하지 마세요.

함께 제공되는 정보는 해당 심각도를 사용하기 위해 다음 사항을 전달하는 것을 목표로 해야 합니다.

  • 오류: 오류 또는 문제가 발생했습니다.
  • 경고: 나중에 문제를 일으킬 수 있는 조건입니다.
  • 성공: 장기간 실행한 작업 및/또는 배경 작업이 완료되었습니다.
  • 기본: 사용자가 주의를 기울여야 하는 일반 정보입니다.

아이콘과 색상은 알림의 의미를 나타내는 유일한 UI 구성 요소가 되어서는 안 됩니다. 알림의 제목 및/또는 메시지에 텍스트를 포함하여 정보를 표시해야 합니다.

메시지

알림의 텍스트는 모든 언어에서 길이가 일정하지 않습니다. 제목 및 메시지 속성의 경우 이로 인해 알림이 두 번째 줄로 확장될 수도 있습니다. 메시지 길이 또는 특정 언어로 설정된 다른 UI 요소를 기준으로 위치를 지정하지 않는 것이 좋습니다.

알림은 오른쪽에서 왼쪽으로(RTL) 또는 왼쪽에서 오른쪽으로(LTR)로 지역화된 경우 표준 미러링 동작을 따릅니다. 아이콘은 방향성이 있는 경우에만 미러링됩니다.

알림의 텍스트 지역화에 대한 자세한 내용은 레이아웃 및 글꼴 조정, RTL 지원을 참조하세요.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 통상적으로 WinUI 2를 사용하는 UWP 앱에도 적용할 수 있습니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

UWP 앱용 InfoBar에는 Windows UI 라이브러리 2가 필요합니다. 설치 지침을 비롯한 자세한 내용은 Windows UI 라이브러리를 참조하세요. 이 컨트롤용 API는 Microsoft.UI.Xaml.Controls 네임스페이스에 있습니다.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작 섹션을 참조하세요.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBar />

InfoBar 만들기

WinUI 3 갤러리 앱을 열고 작동 중인 InfoBar를 확인합니다.

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

아래 XAML에서는 정보 알림에 대한 기본 스타일링이 있는 인라인 InfoBar에 대해 설명합니다. 정보 표시줄은 다른 요소처럼 배치할 수 있으며 기본 레이아웃 동작을 따릅니다. 예를 들어 세로 StackPanel에서 InfoBar는 가로로 확장되어 사용 가능한 너비를 채웁니다.

기본적으로 InfoBar는 표시되지 않습니다. InfoBar를 표시하려면 XAML 또는 코드 숨김에서 IsOpen 속성을 true로 설정합니다.

<InfoBar x:Name="UpdateAvailableNotification"
    Title="Update available."
    Message="Restart the application to apply the latest update.">
</InfoBar>

public MainPage()
{
    this.InitializeComponent();

    if(IsUpdateAvailable())
    {
        UpdateAvailableNotification.IsOpen = true;
    }
}

A sample of an InfoBar in the default state with a close button and a message

미리 정의된 심각도 수준 사용

알림의 중요도에 따라 일관된 상태 색상, 아이콘 및 보조 기술 설정을 자동으로 설정하도록 정보 표시줄의 유형을 심각도 속성을 통해 설정할 수 있습니다. 심각도가 설정되지 않은 경우 기본 정보 스타일이 적용됩니다.

<InfoBar x:Name="SubscriptionExpiringNotification"
    Severity="Warning"
    Title="Your subscription is expiring in 3 days."
    Message="Renew your subscription to keep all functionality" />

A sample of an InfoBar in a Warning state with a close button and a message

InfoBar에서 프로그래밍 방식으로 닫기

사용자가 닫기 단추를 통해 또는 프로그래밍 방식으로 InfoBar를 닫을 수 있습니다. 상태가 해결될 때까지 알림이 표시되어야 하며 사용자가 정보 표시줄을 닫는 기능을 제거하려는 경우 IsClosable 속성을 false로 설정할 수 있습니다.

이 속성의 기본값은 true이며, 이 경우 닫기 단추가 존재하며 'X' 형식을 취합니다.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working."
    IsClosable="False" />

A sample of an InfoBar in an Error state with no close button

사용자 지정: 배경색 및 아이콘

미리 정의된 심각도 수준을 벗어나면 Background 및 IconSource 속성을 설정하여 아이콘 및 배경색을 사용자 지정할 수 있습니다. InfoBar는 정의된 심각도의 보조 기술 설정을 유지하며, 심각도가 정의되지 않은 경우 기본값을 유지합니다.

사용자 지정 배경색은 표준 배경 속성을 통해 설정할 수 있으며 심각도에서 설정한 색상을 재정의합니다. 자신만의 색상을 설정할 때 콘텐츠 가독성과 접근성을 고려하세요.

사용자 지정 아이콘은 IconSource 속성을 통해 설정할 수 있습니다. 기본적으로 아이콘이 표시됩니다(컨트롤이 축소되지 않는다고 가정). 이 아이콘은 IsIconVisible 속성을 false로 설정하여 제거할 수 있습니다. 사용자 지정 아이콘의 경우 권장되는 아이콘 크기는 20px입니다.

<InfoBar x:Name="CallRecordingNotification"
    Title="Recording started"
    Message="Your call has begun recording."
    Background="{StaticResource LavenderBackgroundBrush}">
    <InfoBar.IconSource>
        <SymbolIconSource Symbol="Phone" />
    </InfoBar.IconSource>
</InfoBar>

A sample of an InfoBar in the default state with a custom background color, custom icon, and close button

작업 추가 버튼

ButtonBase를 상속하는 고유의 단추를 정의하고 ActionButton 속성에서 이를 설정하여 작업 단추를 추가할 수 있습니다. 사용자 지정 스타일은 일관성과 접근성을 위해 Button 및 HyperlinkButton 유형의 작업 단추에 적용됩니다. ActionButton 속성 외에도 사용자 지정 콘텐츠를 통해 작업 단추를 추가할 수 있으며 메시지 아래에 나타납니다.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working.">
    <InfoBar.ActionButton>
        <Button Content="Network Settings" Click="InternetInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

A sample of an InfoBar in the Error state with a single line message and an action button

<InfoBar x:Name="TermsAndConditionsUpdatedNotification"
    Title="Terms and Conditions Updated"
    Message="Dismissal of this message implies agreement to the updated Terms and Conditions. Please view the changes on our website.">
    <InfoBar.ActionButton>
        <HyperlinkButton Content="Terms and Conditions Sep 2020"
            NavigateUri="https://www.example.com"
            Click="UpdateInfoBarHyperlinkButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

A sample of an InfoBar with a message expanding multiple lines and a hyperlink

오른쪽 맞춤 작업 단추

기본적으로 작업 단추는 메시지의 오른쪽에 있는 사용 가능한 공간에 왼쪽 맞춤됩니다. 필요에 따라 단추에서 HorizontalAlignment를 "오른쪽"으로 설정하여 이 단추를 한 줄, 가로, 레이아웃의 닫기 단추 왼쪽에 직접 맞출 수 있습니다.

<InfoBar x:Name="RightAlignedButtonNotification"
    Title="Title"
    Message="Essential app message">
    <InfoBar.ActionButton>
        <Button Content="Hello" HorizontalAlignment="Right"/>
    </InfoBar.ActionButton>
</InfoBar>

A sample of an InfoBar with a right-aligned action button

콘텐츠 래핑

사용자 지정 콘텐츠를 제외하고 InfoBar 콘텐츠가 하나의 가로 줄에 맞출 수 없는 경우 세로로 배치됩니다. 제목, 메시지 및 ActionButton(있는 경우)은 각각 별도의 줄에 나타납니다.

<InfoBar x:Name="BackupCompleteNotification"
    Severity="Success"
    Title="Backup complete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Message="All documents were uploaded successfully. Ultrices sagittis orci a scelerisque. Aliquet risus feugiat in ante metus dictum at tempor commodo. Auctor augue mauris augue neque gravida.">
    <InfoBar.ActionButton>
        <Button Content="Action"
            Click="BackupInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

A sample of an InfoBar in the Success state multiline title and message InfoBar

사용자 지정 콘텐츠

Content 속성을 사용하여 XAML 콘텐츠를 InfoBar에 추가할 수 있습니다. 나머지 컨트롤 콘텐츠 아래의 자체 줄에 나타납니다. InfoBar는 정의된 콘텐츠에 맞게 확장됩니다.

<InfoBar x:Name="BackupInProgressNotification"
    Title="Backup in progress"
    Message="Your documents are being saved to the cloud"
    IsClosable="False">
    <InfoBar.Content>
        <ProgressBar IsIndeterminate="True" Margin="0,0,0,6" MaxWidth="200"/>
    </InfoBar.Content>
</InfoBar>

A sample of an InfoBar in its default state with an indeterminate progress bar

경량 스타일링

기본 스타일 및 ControlTemplate를 수정하여 컨트롤에 고유한 모양을 제공할 수 있습니다. 사용 가능한 테마 리소스 목록은 InfoBar API 문서의 컨트롤 스타일 및 템플릿 섹션을 참조하세요.

자세한 내용은 스타일링 컨트롤 문서의 경량 스타일 지정 섹션을 참조하세요.

예를 들어 다음은 특정 페이지에서 모든 정보성 InfoBar의 배경색을 파란색으로 설정합니다.

<Page.Resources>
    <x:SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="LightBlue"></x:SolidColorBrush>
</Page.Resources>

닫기 취소

Closing 이벤트를 사용하여 InfoBar의 닫기를 취소 및/또는 연기할 수 있습니다. 이 이벤트를 사용하여 InfoBar를 열어 두거나 사용자 지정 작업을 수행할 수 있는 시간을 허용할 수 있습니다. InfoBar 닫기가 취소되면 IsOpen은 다시 true로 돌아갑니다. 프로그래밍 방식 닫기도 취소할 수 있습니다.

<InfoBar x:Name="UpdateAvailable"
    Title="Update Available"
    Message="Please close this tip to apply required security updates to this application"
    Closing="InfoBar_Closing">
</InfoBar>

public void InfoBar_Closing(InfoBar sender, InfoBarClosingEventArgs args)
{
    if (args.Reason == InfoBarCloseReason.CloseButton) 
    {
        if (!ApplyUpdates()) 
        {
            // could not apply updates - do not close
            args.Cancel = true;
        }
    }
}