OTP 입력 필드를 구축하는 두 가지 접근 방식이 제시됩니다. 첫 번째는 ‘단일 입력 필드 사용’으로, 하나의 숨겨진 입력 필드와 여러 개의 시각적인 슬롯을 CSS로 분할하여 구현합니다. 이 방식은 기본적으로 접근성이 뛰어나며, 추가적인 ARIA 레이블 없이도 스크린 리더가 쉽게 접근할 수 있습니다. 사용자가 입력하는 값을 정규식으로 필터링하고, 슬롯에 시각적으로 표시하며, 코드 붙여넣기 기능도 지원합니다. 이 방식은 간결하고 CSS만으로 시각적 효과를 구현할 수 있다는 장점이 있습니다.
두 번째 접근 방식은 ‘다중 입력 필드 사용’입니다. 이 방식은 여러 개의 개별 입력 필드를 사용하여 각 숫자를 입력받고, 이 값들을 하나의 숨겨진 필드에 통합합니다. 이 방식은 사용자에게 익숙한 패턴이지만, 기본적으로 접근성이 낮을 수 있어 ARIA 속성, 역할, 레이블 등을 사용하여 접근성을 보완해야 합니다. 구현 시에는 각 입력 필드에 한 문자만 입력되도록 제한하고, 입력 후 다음 슬롯으로 자동 포커스 이동, 화살표 키를 이용한 슬롯 간 이동, 백스페이스 키를 이용한 삭제 및 이전 슬롯으로 이동 기능 등을 포함합니다. 코드 붙여넣기 기능 또한 지원되어 사용 편의성을 높입니다.
두 방식 모두 Rails 애플리케이션 환경에서 Stimulus 컨트롤러 설정을 통해 구현됩니다. Stimulus 컨트롤러는 static targets, static values, static classes를 사용하여 DOM 요소에 접근하고, connect, input, paste, navigate와 같은 액션 메서드를 통해 사용자 인터랙션을 처리합니다. 특히, navigate 액션에서는 Stimulus의 키 매핑을 활용하여 키보드 내비게이션을 구현하며, 백스페이스와 같은 특정 키에 대한 사용자 정의 매핑도 가능하게 합니다. 접근성 향상을 위해 HTML 요소에 id, sr-only 클래스, fieldset 및 legend, aria-describedby, aria-label, maxlength, pattern, required 등의 속성을 추가하여 스크린 리더 사용자에게 더 나은 경험을 제공하는 방법을 상세히 설명합니다.