다음을 통해 공유

암호 상자

  • 아티클

암호 상자는 개인정보 목적으로 입력된 문자를 숨기는 텍스트 입력란입니다. 암호 상자는 텍스트 입력란처럼 보이지만 입력된 텍스트 대신 자리 표시자 문자를 렌더링합니다. 자리 표시자 문자를 구성할 수 있습니다.

암호 상자 포커스 상태 입력 텍스트

기본적으로 암호 상자는 사용자가 표시 버튼을 누른 채 암호를 볼 수 있는 방법을 제공합니다. 표시 버튼을 비활성화하거나 암호 표시에 대한 대체 메커니즘(예: 검사 상자)을 제공할 수 있습니다.

올바른 컨트롤인가요?

PasswordBox 컨트롤을 사용하여 암호 또는 주민 등록 번호 등의 기타 프라이빗 데이터를 수집합니다.

올바른 텍스트 컨트롤을 선택하는 방법에 대한 자세한 내용은 텍스트 컨트롤 문서를 참조하세요.

권장 사항

  • 암호 상자의 용도가 명확하지 않은 경우 레이블 또는 자리 표시자 텍스트를 사용하세요. 레이블은 텍스트 입력란에 값이 있는지 여부에 상관없이 표시됩니다. 개체 틀 텍스트는 텍스트 입력란 내에 표시되었다가 값을 입력하면 사라집니다.
  • 입력할 수 있는 값의 범위에 적절한 width를 암호 상자를 부여하세요. 단어 길이는 언어에 따라 달라지므로 앱을 세계화하려는 경우 지역화를 고려해야 합니다.
  • 암호 입력 상자 바로 옆에 다른 컨트롤을 배치하지 마세요. 암호 상자에는 사용자가 입력한 암호를 확인할 수 있는 암호 표시 버튼이 있으며, 암호 상자 바로 옆에 다른 컨트롤이 있으면 사용자가 다른 컨트롤과 상호 작용하려고 할 때 실수로 암호를 표시할 수 있습니다. 이러한 일이 발생하지 않도록 하려면 입력란에 있는 암호와 다른 컨트롤 사이에 약간의 간격을 두거나 바로 그 다른 컨트롤을 다음 줄에 배치합니다.
  • 계정 만들기를 위해 두 개의 암호 상자를 제시하는 것이 좋습니다. 하나는 새 암호용이고 다른 하나는 새 암호 확인용입니다.
  • 로그인에 필요한 단일 암호 상자만 표시합니다.
  • PIN을 입력하는 데 암호 상자를 사용하는 경우 확인 버튼을 사용하는 대신 마지막 번호를 입력하는 즉시 응답을 제공하는 것이 좋습니다.

예제

암호 상자에는 주목할 만한 상태를 포함하여 여러 상태가 있습니다.

미사용 암호 상자는 사용자가 용도를 알 수 있도록 힌트 텍스트를 표시할 수 있습니다.

힌트 텍스트가 있는 미사용 상태의 암호 상자

사용자가 암호 상자에 입력할 때, 기본 동작은 입력되는 텍스트를 숨기는 글머리 기호를 표시하는 것입니다.

암호 상자 포커스 상태 입력 텍스트

오른쪽의 "표시" 버튼을 누르면 입력되는 암호 텍스트를 미리 볼 수 있습니다.

암호 상자 텍스트가 표시됨

UWP 및 WinUI 2

Important

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

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

이 컨트롤용 API는 Windows.UI.Xaml.Controls 네임스페이스에 있습니다.

최신 WinUI 2를 사용하여 모든 컨트롤에 적용되는 최신 스타일과 템플릿을 가져오는 것이 좋습니다. WinUI 2.2 이상에는 둥근 모서리를 사용하는 이 컨트롤의 새 템플릿이 포함되어 있습니다. 자세한 내용은 모서리 반경을 참조하세요.

암호 상자를 만드십시오

WinUI 3 갤러리 앱을 열고 액션 중인 PassowrdBox를 확인합니다.

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

Password 속성을 사용하여 PasswordBox의 내용을 얻거나 설정합니다. 사용자가 암호를 입력하는 동안 PasswordChanged 이벤트를 위한 처리기에서 이 작업을 수행하여 유효성 검사를 수행할 수 있습니다. 또는, Click 버튼과 같은 다른 이벤트를 사용하여 사용자가 텍스트 항목을 완료한 후 유효성 검사를 수행할 수 있습니다.

다음은 PasswordBox의 기본 모양을 보여 주는 암호 상자 컨트롤의 XAML입니다. 사용자가 암호를 입력하면 암호가 리터럴 값인 "Password"인지 확인합니다. 이 경우, 사용자에게 메시지를 표시합니다.

<StackPanel>  
  <PasswordBox x:Name="passwordBox" Width="200" MaxLength="16"
             PasswordChanged="passwordBox_PasswordChanged"/>

  <TextBlock x:Name="statusText" Margin="10" HorizontalAlignment="Center" />
</StackPanel>   

private void passwordBox_PasswordChanged(object sender, RoutedEventArgs e)
{
    if (passwordBox.Password == "Password")
    {
        statusText.Text = "'Password' is not allowed as a password.";
    }
    else
    {
        statusText.Text = string.Empty;
    }
}

다음은 이 코드가 실행되고 사용자가 "Password"를 입력할 때의 결과입니다.

유효성 검사 메시지가 있는 암호 상자

암호 문자

PasswordChar 속성을 설정하여 암호를 마스킹하는 데 사용되는 문자를 변경할 수 있습니다. 여기서는 기본 글머리 기호가 파운드 기호로 바뀝니다.

<PasswordBox x:Name="passwordBox" Width="300" PasswordChar="#"/>

결과는 다음과 같습니다.

사용자 지정 문자가 있는 암호 상자

머리글 및 자리 표시자 텍스트

Header 및 PlaceholderText 속성을 사용하여 PasswordBox에 대한 컨텍스트를 제공할 수 있습니다. 이 기능은 암호 변경하는 폼처럼 상자 여러 개가 있는 경우에 특히 유용합니다.

<PasswordBox x:Name="passwordBox" Width="200" Header="Password" PlaceholderText="Enter your password"/>

힌트 텍스트가 있는 미사용 상태의 암호 상자

최대 길이

MaxLength 속성을 설정하여 사용자가 입력할 수 있는 문자 수 최대치를 지정합니다. 최소 길이를 지정하는 속성은 없지만 앱 코드에서 암호 길이를 확인하고 다른 유효성 검사를 수행할 수 있습니다.

암호 표시 모드

PasswordBox에는 사용자가 암호 텍스트를 표시하기 위해 누를 수 있는 빌트인 버튼이 있습니다. 사용자의 액션 결과는 다음과 같습니다. 사용자가 해제하면 암호가 자동으로 다시 숨겨집니다.

암호 상자 텍스트가 표시됨

피킹 모드

기본적으로 암호 표시 버튼(또는 "피킹" 버튼)이 표시됩니다. 사용자는 높은 수준의 보안이 유지되도록 버튼을 계속 눌러 암호를 확인해야 합니다.

암호 표시 버튼이 사용자에게 표시되는지 여부는 PasswordRevealMode 속성값을 결정짓는 유일한 요소가 아닙니다. 다른 요인으로는 컨트롤이 최소 너비 이상으로 표시되는지 여부, PasswordBox에 포커스가 있는지 여부 및 텍스트 입력 필드에 문자가 최소 하나 이상 포함되어 있는지 여부 등이 있습니다. 암호 표시 버튼은 PasswordBox가 처음으로 포커스를 받고 문자를 입력한 경우에만 표시됩니다. PasswordBox가 포커스를 잃었다가 다시 얻으면, 암호가 지워지고 문자 입력이 다시 시작되지 않는 한 표시 버튼이 다시 표시되지 않습니다.

Hidden 모드 및 Visible 모드

다른 PasswordRevealMode 열거형 값인 Hidden 및 Visible은 암호 표시 버튼을 숨기며, 암호가 가려지는지 여부를 프로그래밍 방식으로 관리할 수 있도록 합니다.

암호를 항상 가리려면, PasswordRevealMode를 Hidden으로 설정합니다. 암호를 항상 가려야 하는 경우가 아니면 사용자가 Hidden과 Visible 간에 PasswordRevealMode를 토글할 수 있도록 사용자 지정 UI를 제공할 수 있습니다. 예를 들어 다음 예제와 같이 확인란을 사용하여 암호를 가릴 것인지 여부를 전환할 수 있습니다. ToggleButton과 같은 다른 컨트롤을 사용하여 사용자가 모드를 전환하도록 할 수도 있습니다.

이 예제에서는 사용자가 PasswordBox의 표시 모드를 전환할 수 있도록 CheckBox를 사용하는 방법을 보여 줍니다.

<StackPanel Width="200">
    <PasswordBox Name="passwordBox1"
                 PasswordRevealMode="Hidden"/>
    <CheckBox Name="revealModeCheckBox" Content="Show password"
              IsChecked="False"
              Checked="CheckBox_Changed" Unchecked="CheckBox_Changed"/>
</StackPanel>

private void CheckBox_Changed(object sender, RoutedEventArgs e)
{
    if (revealModeCheckBox.IsChecked == true)
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Visible;
    }
    else
    {
        passwordBox1.PasswordRevealMode = PasswordRevealMode.Hidden;
    }
}

이 PasswordBox는 다음과 같습니다.

사용자 지정 표시 단추가 있는 암호 상자

텍스트 컨트롤에 맞는 키보드를 선택합니다.

사용자가 입력할 것으로 예상되는 데이터 종류와 일치하도록 텍스트 컨트롤의 입력 범위를 설정하여 터치 키보드나 SIP(Soft Input Panel)를 사용한 데이터 입력을 도울 수 있습니다. PasswordBox는 Password 및 NumericPin 입력 범위 값만 지원합니다. 다른 모든 값은 무시됩니다.

입력 범위를 사용하는 방법에 대한 자세한 내용은 입력 범위를 사용하여 터치 키보드 변경을 참조하세요.

샘플 코드 가져오기

텍스트 컨트롤