Error State — 필드 오류 표시 및 Android 구현

Android에서 필드 오류 상태란?

Error State는 입력된 데이터가 유효성 검사에 실패할 때 활성화되는 입력 필드의 특수 표시 모드입니다. 시각적으로 Error State는 세 가지 구성 요소를 포함합니다: 필드 테두리 또는 배경색의 변경(보통 빨간색), 오류를 설명하는 텍스트 메시지가 필드 아래에 나타남, 선택적으로 아이콘 또는 강조 표시. Error State의 목적은 문제가 있는 필드로 사용자의 주의를 즉시 끌고 오류를 수정하는 방법을 제안하는 것입니다.

Android에서 Error State는 Material Design Components의 TextInputLayout 수준에서 구현됩니다. TextInputLayout은 EditText를 래핑하고 normal, focused, error, disabled 상태를 관리합니다. setError(String) 메서드는 필드를 오류 상태로 전환하고, 테두리 색상을 변경하며, 메시지를 표시합니다. 텍스트가 변경되거나 setError(null)이 호출되면 필드는 normal로 돌아갑니다.

Material Design Guidelines에 따르면 Error State는 눈에 띄지만 지배적이지 않아야 합니다. 빨간색 테두리 색상은 일반 상태와 대비되어야 하지만 인터페이스를 과부하시켜서는 안 됩니다. 오류 메시지에는 문제와 해결 방법에 대한 구체적인 정보가 포함되어야 합니다. 오류 아이콘(예: 느낌표가 있는 빨간색 원)은 시각적 신호를 강화합니다.

TextInputLayout에서 setError 작동 방식

setError(CharSequence errorText) 메서드는 TextInputLayout을 오류 상태로 전환합니다. errorText 매개변수는 필드 아래에 표시되는 텍스트입니다. null이 전달되면 오류가 지워집니다. TextInputLayout은 애니메이션을 관리합니다: 오류 텍스트가 부드러운 페이드인으로 나타나고 테두리가 빨간색으로 변경됩니다. 오류 아이콘(기본값: 원 안의 느낌표)이 필드 끝에 표시됩니다.

중요한 세부 사항: 오류 메시지 공간을 확보하려면 setError 전에 setErrorEnabled(true)를 호출해야 합니다. 그렇지 않으면 공간이 확보되지 않아 오류가 나타날 때 레이아웃이 "튀는" 현상이 발생할 수 있습니다. 레이아웃 이동을 방지하려면 XML에서 app:errorEnabled="true"를 통해 항상 오류 지원을 활성화하는 것이 좋습니다.

setErrorEnabled(true)가 활성화된 경우 setError 메서드는 필드 텍스트가 변경될 때 자동으로 지워집니다. 이 동작은 실시간 유효성 검사에 편리합니다: 사용자가 오류 수정을 시작하는 즉시 빨간색 테두리가 사라지고 필드가 정상 상태로 돌아갑니다. 그러나 복잡한 시나리오에서는 이 자동 지우기가 바람직하지 않을 수 있습니다. 이러한 경우 오류를 수동으로 관리하십시오.

val til = findViewById<TextInputLayout>(R.id.til_email)

// 오류 지원 활성화 (그렇지 않으면 XML에서 설정)
til.isErrorEnabled = true

// 오류 메시지 설정
til.error = "Invalid email address"

// 오류 지우기
til.error = null

// 오류가 있는지 확인
if (til.error != null) {
    // 필드가 오류 상태입니다
}

이 예제는 setError/isErrorEnabled에 액세스하기 위해 Kotlin 속성을 사용합니다. TextInputLayout은 자동으로 UI를 업데이트합니다: boxStrokeColor를 변경하고, 오류 아이콘을 표시하며, 오류 텍스트를 표시합니다. EditText의 텍스트가 변경되면 오류가 자동으로 지워집니다. 수동 재설정을 위해 error = null을 설정하십시오.

오류 표시의 대체 방법

모든 프로젝트가 Material Design Components를 사용하는 것은 아닙니다. 사용자 정의 오류 표시를 위해 EditText 아래에 별도의 TextView를 사용하여 오류 발생 시 표시되도록 할 수 있습니다. 이 접근 방식은 스타일과 메시지 배치에 대한 완전한 제어를 제공합니다. 예를 들어, 메시지를 필드 오른쪽에 배치하거나, 다른 배경색을 사용하거나, 텍스트 왼쪽에 아이콘을 추가할 수 있습니다.

Jetpack Compose에서 Error State는 OutlinedTextField 또는 TextField의 isError 매개변수를 통해 구현됩니다. isError = true이면 테두리가 빨간색으로 변하고 supportingText를 통해 오류 텍스트를 표시할 수 있습니다. Compose에는 텍스트 변경 시 내장된 자동 지우기 기능이 없습니다. 개발자는 remember와 mutableStateOf를 사용하여 오류 상태를 수동으로 관리합니다.

그룹 오류(여러 필드에 대한 단일 메시지, 예: "모든 필수 필드를 입력하십시오")의 경우 Snackbar, Dialog 또는 양식 상단의 인라인 블록을 사용하십시오. 그룹 오류는 개별 필드의 Error State를 대체하지 않고 보완합니다. 사용자는 먼저 일반 메시지를 본 다음 오류가 있는 특정 필드를 찾습니다.

오류 색상, 아이콘 및 애니메이션

Material Design Components에서 Error State의 색상은 boxStrokeErrorColor 속성 또는 테마의 colorError 속성을 통해 제어됩니다. 기본적으로 시스템 빨간색이 사용되지만 앱 테마에서 또는 TextInputLayout에서 직접 app:boxStrokeErrorColor="@color/customErrorColor"를 통해 재정의할 수 있습니다. 다크 테마 지원을 위해 라이트 모드와 다크 모드에 대해 다른 색상의 선택기를 사용하는 것이 좋습니다.

오류 아이콘은 app:errorIconDrawable을 통해 구성됩니다. 기본적으로 원 안에 느낌표가 표시됩니다. 사용자 정의 아이콘으로 바꾸거나 app:errorIconDrawable="@null"을 설정하여 완전히 제거할 수 있습니다. 아이콘은 TextInputLayout 끝에 표시되며 추가 시각적 표시기 역할을 합니다. Material Design 3에서는 접근성을 위해 오류 아이콘이 필수입니다.

오류 나타남 애니메이션은 TextInputLayout에 내장되어 있습니다: 텍스트가 부드러운 불투명도 변화와 함께 아래에서 위로 슬라이드됩니다. 사용자 정의 애니메이션을 위해 Transition API 또는 MotionLayout을 사용하십시오. 예를 들어, 오류 발생 시 필드를 흔들면 추가적인 주의를 끌 수 있습니다. 그러나 애니메이션을 과도하게 사용하면 UX가 저하됩니다. 부드러운 메시지 표시로 충분합니다.

유효성 검사 중 오류 상태 관리

Error State 관리는 두 단계로 나뉩니다: 필드 유효성 검사 중 오류 설정 및 수정 시 오류 지우기. 가장 간단한 경우, 유효성 검사는 TextWatcher.afterTextChanged에서 호출됩니다: 값이 유효하지 않으면 오류 메시지와 함께 setError가 호출됩니다. 유효하면 setError(null)이 호출됩니다. setError(null)이 상태를 지우면 TextInputLayout이 자동으로 오류를 숨깁니다.

양식 유효성 검사의 경우 양식 제출 단계에서 오류가 설정됩니다. 모든 필드를 반복하고, 각각을 검증하고, 유효하지 않은 필드에 오류를 설정하고, 첫 번째 오류 필드에 초점을 맞춥니다. 이 과정에서 제출 버튼이 차단됩니다. 양식이 큰 경우 첫 번째 오류 필드로 스크롤하고 자동으로 초점을 설정하는 것이 좋습니다.

단일 오류 포커스 규칙: 양식을 제출할 때 첫 번째 오류 필드에만 초점을 설정합니다. 사용자는 한 번에 하나의 오류를 수정하고, 수정 후 다음 오류 필드가 자동으로 초점을 받습니다. 이 단계별 접근 방식은 인지 부하를 줄입니다. Material TextInputLayout은 오류 설정 시 초점을 가로채지 않습니다. 이는 requestFocus()를 통해 수동으로 수행해야 합니다.

Error State 작업 시 일반적인 실수

첫 번째 실수 — isErrorEnabled 누락. setError 전에 setErrorEnabled가 호출되지 않으면 오류 메시지가 나타날 때 레이아웃이 이동할 수 있습니다. 필드가 화면 중간에 있는 경우 특히 중요합니다. 사용자는 스크롤 위치를 잃게 됩니다. 오류를 설정하기 전에 XML에서 app:errorEnabled="true"를 통해 또는 프로그래밍 방식으로 항상 setErrorEnabled(true)를 활성화하십시오.

두 번째 실수 — 너무 긴 오류 메시지. 긴 텍스트는 여러 줄로 줄바꿈되어 인접 필드를 덮을 수 있습니다. 권장 오류 메시지 길이는 20-40자입니다. 더 많은 정보가 필요한 경우 일반 상태에서 helperText 또는 추가 설명을 위한 도구 설명을 사용하십시오. 간결함이 좋은 Error State의 기초입니다.

세 번째 실수 — 접근성 무시. Error State는 스크린 리더가 접근할 수 있어야 합니다. TextInputLayout은 contentDescription을 통해 자동으로 오류를 알리지만 사용자 정의 구현은 수동으로 수행해야 합니다. 오류 메시지에 announceForAccessibility() 또는 android:importantForAccessibility를 사용하십시오. TalkBack 사용자는 오류가 나타난 즉시 들어야 합니다.