OTP 입력 컴포넌트 구축을 위한 첫 번째 접근 방식은 단일 숨겨진 입력 필드를 사용하고 CSS를 통해 시각적으로 여러 개의 슬롯(상자)처럼 보이게 하는 것입니다. 이 방식은 기본적으로 접근성이 우수하며, 스크린 리더 사용자가 일반 텍스트 입력 필드처럼 인식할 수 있다는 장점이 있습니다. 구현 시에는 투명한 텍스트 색상을 가진 단일 입력 필드를 사용하고, CSS로 슬롯을 분할하며, StimulusJS 컨트롤러를 통해 입력된 값을 정규 표현식으로 검증하고 각 슬롯에 시각적으로 표시합니다. 또한, 클립보드에서 코드를 붙여넣는 기능도 지원하여 사용자 편의성을 높입니다.
두 번째 접근 방식은 다수의 개별 입력 필드를 사용하여 OTP를 입력받는 방식입니다. 이 방식은 웹에서 널리 사용되어 사용자에게 친숙하지만, 기본적으로 접근성이 떨어질 수 있어 추가적인 작업이 필요합니다. 각 숫자마다 별도의 입력 필드를 사용하며, 숨겨진 필드에 최종 코드를 통합합니다. StimulusJS 컨트롤러는 각 입력 필드의 값을 제어하고, 정규 표현식을 통한 유효성 검사, 다음 슬롯으로의 자동 포커스 이동 기능을 제공합니다. 특히, 이 방식에서는 키보드 탐색(좌우 화살표 키) 및 백스페이스 키를 이용한 삭제 기능을 구현하여 사용자가 값을 쉽게 편집할 수 있도록 지원합니다. 또한, 클립보드 붙여넣기 기능을 통해 전체 코드를 한 번에 입력할 수 있도록 합니다.
두 가지 방식 모두에서 중요한 것은 접근성 확보입니다. 단일 입력 방식은 기본적으로 접근성이 좋지만, 다중 입력 방식에서는 aria-label, aria-describedby와 같은 ARIA 속성, fieldset 및 legend 태그를 사용하여 스크린 리더 사용자에게 명확한 컨텍스트와 지침을 제공하는 것이 필수적입니다. 또한, maxlength="1", inputmode="numeric", autocomplete="one-time-code" 등의 HTML 속성을 활용하여 사용자 경험과 접근성을 동시에 개선합니다. 본문에서는 Rails 애플리케이션 환경에서 StimulusJS 컴포넌트를 설정하는 예시를 제공하여 실제 개발 환경에서의 적용 가능성을 보여줍니다.