Input Mask: 정의, 입력 마스크 및 형식 지정

입력 마스크란?

Input Mask(입력 마스크)는 입력 데이터의 템플릿을 정의하고 입력됨에 따라 텍스트를 자동으로 형식 지정하는 메커니즘입니다. 사용자는 중요한 문자(숫자, 문자)만 입력하고 시스템이 자동으로 구분 기호(공백, 하이픈, 괄호, 슬래시)를 추가합니다. 이는 입력 완료 후 데이터가 형식 지정되는 후처리와의 주요 차이점입니다.

입력 마스크는 사용자 경험의 세 가지 문제를 해결합니다. 첫째는 인지 부하입니다. 사용자가 데이터 형식을 기억하고 수동으로 구분 기호를 넣을 필요가 없습니다. 둘째는 입력 속도입니다. 구분 기호의 자동 삽입과 다음 문자 그룹으로의 이동이 입력을 빠르게 합니다. 셋째는 데이터 품질입니다. 마스크는 데이터가 변형 없이 통일된 형식으로 수집되도록 보장합니다.

이미 입력된 데이터의 표시 수준에서 작동하는 NSFormatter 포맷터와 달리 입력 마스크는 입력 수준에서 작동합니다. 입력되는 각 문자를 제어하고 해당 문자가 마스크의 현재 위치에서 허용되는지 여부를 결정합니다. 문자가 마스크와 일치하지 않으면 거부되거나 무시됩니다.

Apple UX 연구(2024)에 따르면 입력 마스크는 사용자가 익숙하지 않은 형식으로 데이터를 입력하는 필드에 가장 효과적입니다. 예를 들어 SNILS(000-000-000 00) 또는 INN(000000000000)의 경우 사용자가 정확한 자릿수나 구분 기호 위치를 모를 수 있으며 마스크가 시각적으로 올바른 형식을 제시합니다.

입력 마스크 구문

마스크 구문 InputMask 라이브러리에서 자리 표시자 문자와 상수 문자의 조합을 사용합니다. 자리 표시자는 각 위치에서 허용되는 문자 유형을 정의합니다. 숫자는 0 또는 9, 문자는 A, 모든 문자는 _입니다. 상수 문자는 자동으로 삽입되는 구분 기호입니다: 공백, 하이픈, 괄호, 점, 슬래시.

필수 및 선택적 블록

대괄호 [0]는 필수 문자를 나타냅니다. 사용자는 이 위치에 숫자를 입력해야 합니다. 중괄호 {0}는 선택적 문자를 나타냅니다. 사용자가 블록을 건너뛰면 마스크가 해당 구분 기호를 삽입하지 않습니다. 예를 들어 날짜의 마스크 [00]{.}[00]{.}[0000]에서 사용자가 월을 입력하지 않으면 일 다음의 구분 기호도 표시되지 않습니다.

마스크 접사

대괄호와 중괄호 밖의 상수 문자는 접사로, 필드가 비어 있어도 항상 표시됩니다. 예를 들어 마스크 +7 ([000]) [000]-[00]-[00]에서 +7, (, ), 공백, 하이픈은 접사이며 사용자가 삭제할 수 없습니다. 접사는 입력을 시작하기 전에도 사용자가 예상 형식을 이해하는 데 도움을 줍니다.

목적별 마스크 유형

입력 마스크는 설계된 데이터 유형에 따라 분류됩니다. 각 유형은 고유한 구조, 그룹 수 및 구분 기호 배치를 가지고 있습니다. 마스크의 올바른 선택은 사용자 경험에 매우 중요합니다. 마스크가 사용자의 기대와 일치하지 않으면 사용자는 자동 삽입된 문자를 삭제할 것입니다.

전화번호 마스크

전화 마스크는 가장 일반적인 유형입니다. 러시아 번호는 +7 ([000]) [000]-[00]-[00]으로, 미국 번호는 +1 ([000]) [000]-[0000]으로 형식 지정됩니다. 마스크는 국가 코드와 도시 코드의 다양한 자릿수를 지원해야 합니다. InputMask 라이브러리는 우선순위 마스크를 지원합니다. 첫 번째 마스크가 적합하지 않으면(사용자가 다른 국가 코드를 입력한 경우) 두 번째 마스크가 적용됩니다.

은행 카드 마스크

카드 번호의 경우 4자리 그룹 사이에 공백이 있는 마스크 [0000] [0000] [0000] [0000]이 사용됩니다. 추가로 만료일 [00]/[00] 및 CVV 코드 [000]의 마스크를 적용할 수 있습니다. 카드 번호 마스크는 결제 시스템에 따라 16~19자리를 지원합니다. Visa 및 Mastercard는 16자리, American Express는 15자리, Maestro는 12~19자리입니다.

날짜 및 코드 마스크

날짜 마스크는 구분 기호로 점 또는 슬래시를 사용하는 형식 [00]{.}[00]{.}[0000]을 사용합니다. INN, SNILS 및 기타 식별자에는 특수 마스크가 사용됩니다. INN은 [000000000000](12자리), SNILS는 [000]-[000]-[000] [00](하이픈 포함 11자리)입니다. 확인 코드의 경우 길이에 따라 [0000] 또는 [000000]입니다.

Swift에서 마스크 구현

Swift에서 마스크 구현은 InputMask 라이브러리를 사용하여 UITextFieldDelegate를 설정하는 방식으로 이루어집니다. 라이브러리는 MaskedTextFieldDelegate 클래스를 제공하며, 텍스트 필드에 연결하여 지정된 마스크에 따라 입력을 자동으로 형식 지정합니다.

import InputMask

class PaymentViewController: UIViewController {

    @IBOutlet var cardField: UITextField!
    @IBOutlet var dateField: UITextField!
    @IBOutlet var cvvField: UITextField!

    var cardListener: MaskedTextFieldDelegate!

    override func viewDidLoad() {
        super.viewDidLoad()
        cardListener = MaskedTextFieldDelegate()
        cardListener.primaryMaskFormat = "[0000] [0000] [0000] [0000]"
        cardField.delegate = cardListener
        dateField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[00]/[00]"
        )
        cvvField.delegate = MaskedTextFieldDelegate(
            primaryMaskFormat: "[000]"
        )
    }
}

자동 국가 감지가 있는 전화번호의 경우 우선순위 마스크를 사용하세요. MaskedTextFieldDelegate는 마스크 배열을 지원하며 첫 번째 일치하는 마스크가 적용됩니다. 사용자가 +1을 입력하면 미국 형식이, +7을 입력하면 러시아 형식이 적용됩니다.

let phoneListener = MaskedTextFieldDelegate()
phoneListener.primaryMaskFormat = "+7 ([000]) [000]-[00]-[00]"
phoneListener.affinityMask = [
    "+1 ([000]) [000]-[0000]",
    "+44 [000] [000] [0000]",
    "+49 [000] [0000] [0000]"
]

선택적 블록이 있는 날짜의 경우 중괄호를 사용하세요. 사용자가 일만 입력하면 마스크가 “21”을 표시합니다. 일과 월을 입력하면 “21.07”을 표시합니다. 세 구성 요소를 모두 입력하면 “21.07.2026”을 표시합니다. 선택적 블록은 마스크를 적응형으로 만들고 사용자가 제공하고 싶지 않은 데이터를 입력하도록 강제하지 않습니다.

let dateListener = MaskedTextFieldDelegate(
    primaryMaskFormat: "[00]{.}[00]{.}[0000]"
)
dateField.delegate = dateListener

붙여넣기 및 삭제 처리

올바른 붙여넣기 처리는 입력 마스크 구현의 가장 까다로운 측면 중 하나입니다. 텍스트를 붙여넣을 때(예: 클립보드에서 카드 번호) 라이브러리는 붙여넣은 텍스트에서 모든 구분 기호를 제거하고 중요한 문자만 추출하여 깨끗한 데이터에 마스크를 적용해야 합니다. RedMadRobot의 InputMask는 shouldChangeCharactersIn 메서드를 통해 이를 자동으로 수행합니다.

형식 지정된 텍스트(공백 또는 하이픈 포함)를 붙여넣을 때 라이브러리는 먼저 데이터를 정규화합니다. 마스크 패턴과 일치하지 않는 모든 문자를 제거한 다음 정규화된 문자열에 마스크를 적용합니다. 붙여넣은 텍스트에 유효하지 않은 문자(숫자 마스크의 문자)가 포함된 경우 무시됩니다.

마스크에서 삭제(백스페이스) 처리는 특별한 주의가 필요합니다. 백스페이스를 누르면 마스크는 상수 구분 기호가 아닌 마지막 중요한 문자를 삭제해야 합니다. 커서가 상수 문자 뒤에 있으면 백스페이스가 이를 건너뛰고 이전 중요한 문자를 삭제해야 합니다. InputMask는 입력된 문자 스택을 통해 이 동작을 구현합니다.

텍스트 선택 및 바꾸기의 경우 마스크는 사용자가 텍스트의 일부를 선택하고 새 콘텐츠로 바꾸는 상황을 올바르게 처리해야 합니다. InputMask 라이브러리는 MaskedTextFieldDelegate의 modifyString 메서드를 통해 이를 지원하며, 바꾸기 범위와 새 문자열을 허용합니다.

마스크 설계 모범 사례

마스크 설계는 사용자가 데이터를 어떻게 입력할지 분석하는 것에서 시작합니다. 대부분의 사용자가 형식을 암기하고 있는 경우(전화번호) 마스크는 최소한으로 해야 하며 그룹 사이의 구분 기호만 포함해야 합니다. 형식이 익숙하지 않은 경우(SNILS, INN) 마스크는 접사와 레이블을 포함하여 더 많은 정보를 제공해야 합니다.

많은 수의 상수 문자가 있는 과도한 마스크를 피하세요. 마스크 +7 ([000]) [000]-[00]-[00]은 10개의 중요한 문자에 대해 7개의 상수 문자를 포함하며 이는 허용 가능합니다. 그러나 사용자가 지속적으로 우회하는 과도한 구분 기호가 있는 마스크는 이익보다 해가 더 큽니다. 형식이 확실하지 않은 경우 자유 입력을 사용하세요.

국제 애플리케이션의 경우 데이터 형식이 국가마다 다를 수 있음을 고려하세요. 미국의 전화번호 형식은 +1 (XXX) XXX-XXXX이고 이탈리아는 +39 XXX XXX XXXX입니다. 코드로 자동 국가 감지가 있는 우선순위 마스크를 사용하거나 사용자가 번호를 입력하기 전에 국가를 선택할 수 있도록 하세요.

InputMask UX 테스트에 따르면 사용자는 입력 시작 전에 형식을 표시하고(자리 표시자 또는 접사를 통해) 문자 입력을 차단하지 않는 마스크를 선호합니다. 마스크는 힌트여야 하며 제한이 아니어야 합니다. 사용자가 마스크와 일치하지 않는 문자를 입력하는 경우 설명 없이 입력을 차단하는 것보다 허용하는 것이 좋습니다.