SOHEE KIMWEB DEVELOPER

어떤 경험이 궁금하세요?

PROJECT 02

BARRIER-FREE KIOSK / ACCESSIBILITY

여러 현장에 적용한 개발 경험

접근성 요구를
실제 조작 규칙으로

화면을 보고, 듣고, 조작하는
서로 다른 방법을 연결했습니다

접근성 요구사항을 실제 사용 흐름에 맞는 인터랙션 규칙으로 정의하고, 다양한 키오스크 환경에 적용했습니다. 키오스크 프론트엔드와 CMS를 담당하며 필요한 Java 백엔드 작업도 함께 수행했습니다.

담당
키오스크 프론트엔드 · CMS
추가 범위
Java 백엔드 · 통계 배치
기술
JavaScript · React · Java · PHP

01 / CONTEXT

일반 키오스크에서
접근 가능한 키오스크로

기존 키오스크 개발 경험을 바탕으로 배리어프리 개발로 영역을 확장했습니다. 화면 확대·고대비·낮은 화면과 함께, 물리 키패드의 포커스 이동과 TTS 음성 안내가 실제 사용 흐름에서 동작하도록 구현했습니다.

담당자가 달라져도 같은 기준으로 개발하도록

기획 담당자가 바뀌면서 요구사항의 해석과 화면 동작 기준도 달라졌습니다. 영역 이동, 요소 선택, 음성 안내 시점처럼 구현에 필요한 내용을 공통 규칙으로 정리하고 문서화했습니다.

화면 적용 예시 / 신세계 안내 키오스크

정보를 읽는 방식과 조작 높이에 맞춘 화면

일반 모드는 층별안내, 낮은 화면과 고대비 모드는 매장안내 화면입니다. 같은 화면의 전후 비교 대신 각 모드의 실제 적용 모습을 보여줍니다.

지도와 층·시설 선택, 하단 메뉴를 기본 화면에 배치했습니다.
일반 모드 · 층별안내

지도와 층·시설 선택, 하단 메뉴를 기본 화면에 배치했습니다.

상단을 비우고 검색과 목록을 아래쪽에 재배치해 조작 영역을 낮췄습니다.
낮은 화면 · 매장안내

상단을 비우고 검색과 목록을 아래쪽에 재배치해 조작 영역을 낮췄습니다.

검정 바탕과 밝은 글자, 노란 강조색을 적용한 화면입니다. 큰 글씨 설정도 함께 켜져 있습니다.
고대비 · 큰 글씨 · 매장안내

검정 바탕과 밝은 글자, 노란 강조색을 적용한 화면입니다. 큰 글씨 설정도 함께 켜져 있습니다.

02 / ACCESSIBILITY ENGINEERING

포커스와 음성 안내를
하나의 조작 흐름으로

01

FOCUS & VOICE NAVIGATION

현재 위치와 다음 행동을 알 수 있도록

물리 키패드를 사용하는 사람이 화면을 보지 않고도 현재 영역과 실행 가능한 기능을 이해할 수 있도록, 포커스 이동 순서와 TTS 안내 시점을 함께 정의했습니다.

  1. 01화면 진입
  2. 02영역 안내
  3. 03첫 조작 요소 포커스
  4. 04키패드 이동
  5. 05요소 음성 안내
  6. 06선택
  7. 07상태 변화 안내

영역을 이동할 때

새 영역의 맥락과 포커스가 놓인 요소를 함께 안내하도록 기준을 정리했습니다.

요소를 탐색할 때

같은 영역 안에서 이동하는 경우와 영역 경계를 넘는 경우를 구분했습니다.

선택 결과가 달라질 때

선택 이후의 상태 변화를 안내하고, 화면별 구현과 확인에 사용할 동작 기준을 마련했습니다.

직접 정리한 키패드·음성 안내 기준

조작 키와 현재 상태, 이동 결과, 읽어줄 문구를 함께 정리한 문서 일부입니다.

같은 영역 이동, 영역 경계, 비활성 버튼 실행과 HOME 동작을 조건별로 정의했습니다.
키패드 사용 규칙 · 문서 발췌

같은 영역 이동, 영역 경계, 비활성 버튼 실행과 HOME 동작을 조건별로 정의했습니다.

화면 안내와 영역 안내를 구분하고, 요소별 안내 형식과 실제 발화 예시를 정리했습니다.
음성 안내 규칙 · 문서 발췌

화면 안내와 영역 안내를 구분하고, 요소별 안내 형식과 실제 발화 예시를 정리했습니다.

같은 영역의 좌우 이동
이전·다음 버튼으로 이동하며 포커스 요소를 안내
화면의 첫·마지막 경계
현재 포커스를 유지하고 첫번째·마지막 요소임을 안내
비활성 버튼에서 실행
동작을 실행하지 않고 비활성 상태를 음성으로 설명

다른 프로젝트의 적용 예시

현재 포커스가 놓인 요소를 표시

전체 화면에서는 작게 보이는 포커스 표시를 확인할 수 있도록 별도 프로젝트의 메뉴 영역을 확대했습니다. ‘지점 행사’ 버튼의 파란 점선 테두리가 현재 포커스 위치입니다.

앞의 모드별 화면과는 다른 프로젝트에서 적용한 포커스 표시 예시입니다.
키패드 포커스 · 메뉴 영역 확대

앞의 모드별 화면과는 다른 프로젝트에서 적용한 포커스 표시 예시입니다.

화면마다 다르게 해석되던 접근성 요구를 개발과 확인에 사용할 공통 규칙으로 정리했습니다.
02

LOCAL TTS CACHE

같은 안내 문구는 저장된 음성으로

접근성 안내가 늘어나면서 같은 문구의 음성을 반복 생성하는 구조를 개선했습니다. 안내 텍스트의 해시값으로 파일을 조회하고, 이미 저장된 MP3는 다시 재생하도록 구성했습니다.

  1. 01안내 텍스트
  2. 02해시 키 생성
  3. 03로컬 MP3 확인
파일이 있으면

로컬 음성 바로 재사용

저장된 MP3를 재생합니다. 이미 생성한 문구는 네트워크 연결 없이도 안내할 수 있습니다.

파일이 없으면

TTS 생성 후 저장

TTS API로 음성을 생성하고 PHP를 통해 키오스크에 MP3로 저장해 다음 안내에서 재사용합니다.

동일 문구의 반복적인 API 호출과 네트워크 의존성을 줄였습니다.
포커스 규칙과 TTS 캐시구현 과정 펼치기구현 과정 접기

포커스 이동과 안내 문구를 함께 정의

같은 영역에서 좌우 이동
이전·다음 버튼으로 이동하고 포커스가 놓인 요소를 읽습니다.
영역 경계를 넘어 이동
이전·다음 영역으로 전환하며 영역 안내와 포커스 요소를 함께 읽습니다.
화면의 첫·마지막 경계
현재 포커스를 유지하고 첫번째·마지막 요소임을 안내합니다.
위아래 영역 이동
대상 영역의 첫 활성 버튼으로 진입하고, 영역과 첫 포커스 요소를 안내합니다.

텍스트 해시를 기준으로 로컬 음성 조회

  1. 01

    파일 조회

    안내 문구를 해시해 TTS_해시값.mp3 파일명을 만들고, /TTS_FILE 경로에 HEAD 요청으로 파일이 있는지 확인합니다.

  2. 02

    없는 문구만 합성

    파일이 있으면 바로 재생합니다. 파일이 없을 때만 Tovair TTS API로 음성을 합성합니다.

  3. 03

    키오스크에 저장

    upload.php를 통해 MP3를 TTS_FILE 폴더에 저장합니다. Windows 키오스크의 읽기 권한을 맞춰 이후 같은 문구를 로컬에서 재생합니다.

오프라인 재생은 이미 저장한 문구를 대상으로 합니다. 처음 요청하는 문구의 음성을 생성할 때는 원격 TTS 연결이 필요합니다.

03 / FIELD ADAPTATION

같은 접근성 원칙을
현장별 서비스 흐름에 적용

정보를 탐색하는 화면과 상품을 등록하고 결제하는 화면은 사용자의 행동이 다릅니다. 현재 위치와 상태를 알 수 있게 한다는 원칙을 유지하면서 서비스 목적에 맞게 화면과 연동 동작을 구성했습니다.

유형사용 경험적용 내용
박물관·전시국립중앙박물관 및 소속관콘텐츠 탐색과 정보 안내메뉴와 콘텐츠를 탐색하며 현재 영역과 선택한 요소를 안내
유통·안내신세계백화점 · 프리미엄 아울렛매장·시설 검색과 길찾기카테고리 탐색과 화면 이동 과정에 포커스·음성 안내 적용
결제형현대 SCO 결제형 키오스크상품 등록·장바구니·결제바코드 입력과 결제 단계의 상태·실패 응답을 화면 흐름으로 연결

04 / BEYOND ACCESSIBILITY

음성 안내 경험을
음성 검색과 화면 동작으로 확장

키패드 조작에 맞춰 음성을 제공하던 경험을 바탕으로, 사용자의 음성을 입력받고 검색 결과를 화면에서 실행하는 인터랙션까지 개발했습니다.

음성 접근성

키패드 → 포커스 → TTS 안내

AI 음성 검색

음성 → STT → LLM 보정 → RAG 검색 → 화면 동작·TTS

음성 인식 결과의 오탈자와 표현을 보정하고 관련 데이터를 선별해 검색합니다. 응답의 JSON 액션 규칙을 맞춰 화면 이동과 콘텐츠 실행, 음성 안내로 이어지도록 연결했습니다.

음성 검색 파이프라인구현 과정 펼치기구현 과정 접기

검색 전에 인식 결과를 보정

짧은 발화의 오탈자와 표현 차이가 메뉴 검색 누락으로 이어졌습니다. Whisper의 STT 결과를 바로 검색하지 않고, 사내 GPU에서 구동되는 LLM으로 문맥을 보정하고 검색 문장을 정규화하도록 구성했습니다.

관련 데이터만 RAG 컨텍스트로 구성

보정된 문장에서 연관 키워드를 확장하고, 메뉴 제목뿐 아니라 콘텐츠 내용과 연결된 메뉴의 키워드로 관련 데이터를 선별했습니다. 전체 데이터를 전달하는 대신 질문과 연결된 메뉴·콘텐츠를 응답 생성 범위로 사용했습니다.

JSON 응답을 화면 동작으로 연결

CMS/API 담당자와 응답 형식과 액션별 처리 기준을 조율했습니다. 프론트엔드는 응답 타입에 따라 화면 동작과 Google TTS 안내를 연결합니다.

검색 결과
관련 메뉴 또는 콘텐츠 목록 표시
화면 이동
지정된 메뉴·상세 화면으로 이동
콘텐츠 실행
영상·지도·상세 콘텐츠 실행
안내 응답
답변 텍스트 표시와 TTS 재생
예외 응답
검색 실패 또는 재질문 안내

결제형 웹–앱 연동

웹 화면과 키오스크 앱 사이의 요청·응답을 command와 messageId로 정리했습니다. 바코드 이벤트와 결제 응답, 실패 코드에 따라 화면 상태와 다음 동작을 구분했습니다.

웹–앱 연동 규약구현 과정 펼치기구현 과정 접기

기능마다 같은 command와 type 사용

상품은 product, 장바구니는 cart, 결제는 payment로 정리했습니다. 수기 조회는 manual, 낱개 등록은 unit, 앱에서 전달하는 바코드는 barcode로 구분해 문서와 코드의 호출 기준을 맞췄습니다.

요청 응답과 앱 이벤트를 분리

응답을 기다리는 요청
setCallWebToAppWithResponse로 messageId를 붙여 전송하고, 같은 ID가 돌아오면 대기 중인 Promise를 완료합니다.
전달만 하는 명령
장바구니 초기화처럼 응답을 기다리지 않는 명령은 setCallWebToApp으로 보냅니다.
앱이 먼저 보낸 이벤트
대기 중인 ID가 없으면 바코드 입력, 결제 알림, 웹 예외 등 앱 이벤트로 처리합니다.

실패 코드에 따라 다음 동작 결정

미등록 상품은 등록을 중단하고, 마감 경고는 사용자 확인 후 진행합니다. 품절 음식이 있으면 주문 확인으로 돌아가며, 직원 확인이 필요한 상품은 별도 확인 흐름으로 연결합니다.

상품 유효성·단가·장바구니 원장과 결제 진행은 앱이 담당합니다. 웹은 앱이 반환한 목록으로 화면을 그리고 ItemPriceSum을 합산해 표시합니다.

05 / CMS & BACKEND

현장의 키오스크를
운영하는 관리 화면까지

키오스크 프론트엔드와 함께 CMS 화면 및 Java 백엔드 작업을 수행했습니다. 디바이스 상태 확인과 원격 명령 전달, 이용 통계 집계, 콘텐츠 스케줄 설정 등 운영자가 사용하는 기능을 개발했습니다.

아래 화면은 아이파크몰 키오스크·DID 운영 CMS의 작업 사례입니다. 앞서 소개한 BF 화면과는 별도 프로젝트입니다.

01

디바이스 상태 확인과 원격 제어

30초마다 전달받는 상태 정보로 접속 상태와 CPU·메모리, 최종 접속 시각을 확인할 수 있게 했습니다. 관리 화면에서 재실행·재부팅 명령을 요청하면 WebSocket 명령을 전달하는 애플리케이션을 거쳐 단말로 전달됩니다.

상태 확인

키오스크 상태 전송 · 30초 주기 → CMS에서 확인

원격 명령

CMS 요청 → 명령 전달 애플리케이션 → 키오스크

단말별 상태와 자원 사용량, 최종 접속 시각을 확인하고 재실행·재부팅을 요청하는 관리 화면입니다.
디바이스 모니터링과 원격 명령

단말별 상태와 자원 사용량, 최종 접속 시각을 확인하고 재실행·재부팅을 요청하는 관리 화면입니다.

02

키오스크 이용 기록을 일일 배치로 집계

키오스크가 전송한 TXT 파일의 이용 기록을 하루 한 번 배치 작업으로 처리해 통계 테이블에 일괄 반영했습니다. CMS에서는 집계된 데이터로 시간대별 사용량과 검색 매장, 카테고리 이용 현황 등을 확인할 수 있습니다.

  1. 01키오스크 TXT 파일 전송
  2. 02하루 한 번 배치 처리
  3. 03통계 테이블 일괄 반영
  4. 04CMS 통계 조회
단말 접속 현황과 이용 통계를 함께 보여주는 화면입니다. 이용 기록은 실시간 집계가 아닌 일일 배치 기준으로 반영됩니다.
운영 현황과 이용 통계 대시보드

단말 접속 현황과 이용 통계를 함께 보여주는 화면입니다. 이용 기록은 실시간 집계가 아닌 일일 배치 기준으로 반영됩니다.

03

스크린세이버와 광고 콘텐츠 스케줄 설정

운영자가 콘텐츠와 재생 순서를 구성할 수 있는 설정 화면을 개발했습니다. 콘텐츠 목록의 운영 기간을 확인하고, 재생할 항목을 스케줄에 배치해 스크린세이버와 광고 운영에 활용합니다.

아이파크몰 DID 미디어월의 스케줄 설정 예시입니다. 콘텐츠 목록과 선택된 재생 순서를 나란히 확인합니다.
콘텐츠 스케줄과 재생 순서 설정

아이파크몰 DID 미디어월의 스케줄 설정 예시입니다. 콘텐츠 목록과 선택된 재생 순서를 나란히 확인합니다.

06 / PROJECT COVERAGE

여러 현장으로 이어진 구축 경험

박물관·공공기관, 유통·결제, 복지시설의 키오스크를 개발했습니다. Vanilla JS 기반 구축부터 React·Vite 적용 프로젝트까지 경험을 확장했습니다.

구축 항목
18개
적용 분야
3개 분야
개발 기간
2023년 11월부터

구축 항목은 아래 목록 기준이며, 여러 지점에 적용한 항목도 한 항목으로 집계했습니다.

BF 키오스크 · Vanilla JS

박물관 · 공공기관4

  • 국립중앙박물관서울관 + 5개 소속관
  • 국회의원회관
  • 서울시립대학교
  • 수원 보건소

유통 · 결제5

  • 신세계백화점통합 7개 지점
  • 신세계 프리미엄 아울렛부산 · 파주
  • 현대 · SCO 결제형 키오스크
  • 27인치 결제 키오스크
  • 보급형 BF 키오스크 가로형 · 세로형

복지시설5

  • 성민복지관
  • 강동어울림복지관
  • 성모자애복지관
  • 시립발달장애인복지관
  • 수원복지관3개관

BF 키오스크 · React / Vite

  • 서남권 추모공원
  • 광주역사민속박물관
  • 이천시립추모의집
  • 신세계면세점통합 3개점

프로젝트별 상세 화면과 공개 가능한 자료는 순차적으로 추가됩니다.