키오스크 테마 표준화와 배리어프리 입력 충돌을 해결한 과정

키오스크 화면은 버튼과 입력창이 여러 페이지에서 반복됐지만 초기에는 각 화면이 크기와 색상을 직접 정했다. 이후 배리어프리 모드까지 같은 기능을 제공하면서 단순한 스타일 통일보다 공통 컴포넌트와 입력 이벤트의 책임을 정리하는 일이 중요해졌다.

먼저 버튼·입력·프레임의 규격을 공통화했다

스타일 표준화 작업에서는 큰 버튼, 입력창, 페이지 프레임을 공통 컴포넌트로 만들고 전역 theme을 전체 화면에 적용했다. 개별 페이지가 색상 값을 직접 선택하는 대신 theme의 의미 있는 토큰을 사용하게 했다.

<ThemeProvider theme={theme}>
  <Frame>
    <LargeButton>확인</LargeButton>
  </Frame>
</ThemeProvider>

이후 기존 버튼과 모달, 키패드, 결제 화면을 공통 theme으로 옮겼다. 화면 수가 많은 키오스크에서는 한 번에 새 디자인 시스템을 선언하는 것보다 반복되는 원시 UI부터 교체하고 사용처를 넓히는 방식이 현실적이었다.

배리어프리는 색상만 바꾸는 별도 테마가 아니었다

배리어프리 화면에는 인증, 결제, 입·퇴실, 카메라, 지문, 원격 제어처럼 실제 동작이 함께 들어간다. 개발 브랜치의 개선 사항을 배리어프리 환경에 적용하면서 타입, 웹캠 Hook, 결제 모듈, 로거 등도 함께 정리했다.

특히 전맹 사용자의 키패드 입력에서 확인 버튼을 눌렀는데 QR 이벤트가 실행되는 문제가 있었다. 이는 접근성 스타일 문제가 아니라 여러 입력 경로가 같은 화면에서 경쟁한 이벤트 문제였다. 수정에서는 QR 코드 Hook과 사용자 로그인 Hook, 전화번호 인증 흐름을 함께 조정해 현재 입력 모드에 맞는 동작만 실행되게 했다.

공통 컴포넌트와 이벤트 경계가 함께 필요했다

공통 버튼이 있어도 키보드, QR 리더기, 지문 인식기 이벤트가 전역에 무분별하게 연결돼 있으면 접근성 문제가 다시 생길 수 있다. 키오스크 UI에서는 시각적 규격과 함께 다음 경계를 확인해야 했다.

• 현재 화면에서 어떤 입력 장치가 활성화되는가
• 확인 버튼이 어떤 인증 상태를 제출하는가
• 전역 이벤트 리스너가 모달이나 다른 입력 흐름과 충돌하지 않는가
• 배리어프리 모드에서도 동일한 공통 컴포넌트가 의미를 유지하는가

2024년에는 스타일과 theme을 표준화했고, 2025년에는 배리어프리 기능과 키패드 이벤트를 보완했다. 시각 규격을 통일한 뒤 실제 접근성 입력 문제를 후속으로 해결한 과정이었다.

접근성은 컴포넌트 색상표만으로 완성되지 않는다. 키오스크처럼 하드웨어 입력이 많은 환경에서는 보이는 UI와 보이지 않는 이벤트 라우팅을 같은 설계 범위로 다뤄야 한다.