극한 체험! 이상한 키오스크 월드

초등학생이 불친절한 키오스크를 체험하며 배리어프리 설계의 필요성을 배우는 정적 웹앱입니다. Vercel에서는 별도 경로 /bias에 알파코 : 블랙박스 체험 앱도 함께 배포됩니다.

체험 구성

• 3초 뒤 사라지는 주문 키오스크
• 콩알 버튼 키오스크
• 외계어 메뉴 키오스크
• 흐릿흐릿 색깔 키오스크
• 소리만 알려주는 번호표 키오스크

각 체험은 어려운 모드와 개선 모드를 비교할 수 있게 구성되어 있습니다.

별도 웹앱

• /bias: 카메라 기반 인공지능 얼굴 분석처럼 보이는 알파코 : 블랙박스 편향 체험 시뮬레이터
• /bias/gs: 초등 4~6학년용 AI 동물 관상 체험. 얼굴 상자와 눈·코·입 위치에서 잰 숫자 몇 개로 동물 관상과 칭찬 풀이를 보여 준 뒤, 관상이 과학이 아니라는 비밀을 공개합니다. 외부 API를 쓰지 않고 영상도 저장하지 않습니다.
• /balance: 3차시 AI 윤리 밸런스 게임. 흰색 주문기 두 대에서 메뉴 선택, 수량·얼음 옵션, 장바구니, 카드 결제와 영수증까지 체험하며 1단계 다양성 vs 정확성, 2단계 심미성 vs 접근성, 3단계 공정성 vs 비용을 비교합니다.

로컬 확인

npm run check
npm run dev

브라우저에서 http://localhost:3100 또는 http://localhost:3100/balance를 열면 됩니다. 로컬 서버는 vercel.json의 /bias, /bias/gs, /balance 경로와 cleanUrls를 반영합니다. 다른 포트는 npm run dev -- --port 3101로 지정합니다.

/balance는 단계마다 비밀번호로 열립니다. 처음 접속하면 1단계 비밀번호 창이 뜨고, 화면 위 단계 버튼에서 잠긴 단계를 누르면 해당 비밀번호를 묻습니다(띄어쓰기 무시). 비밀번호는 저장소에 공개되지 않도록 문서에 적지 않고, balance.js의 STAGES[n].keys(단계마다 여러 개 허용)에 passKey() 해시로만 둡니다. 연 단계는 같은 탭의 세션 동안 유지되고 새 탭이나 브라우저를 닫으면 다시 잠깁니다. 수업 진행용 잠금일 뿐 보안 장치는 아닙니다. 단계 설정과 2·3단계 동작은 balance.js, 단계 탭·비밀번호 창·역할 전환·음성 안내 자막은 balance-stages.css, 2단계 디자인은 balance-themes.css가 담당합니다.

2단계(심미성 vs 접근성)에서 왼쪽은 파스텔 그라데이션과 작고 연한 글씨, 아이콘만 있는 분류 버튼의 예쁜 기기이고, 오른쪽은 큰 글씨·고대비 단색·두꺼운 테두리의 잘 보이는 기기입니다. 두 기기 모두 즉시 반응하고 정상 계산합니다. 미션 띠의 어르신 눈으로 보기는 두 화면에 노안 흐림 효과를 줍니다. 2단계에 들어올 때마다 꺼진 상태로 시작하므로, 먼저 그대로 써 본 뒤 켜서 비교합니다.

3단계(공정성 vs 비용)에서 왼쪽은 번역 기능(한국어·English·中文·日本語)에, 오른쪽은 음성 안내에 예산을 쓴 기기입니다. 미션 띠에서 역할을 고릅니다. 외국인 관광객은 한글을 읽지 못한다고 가정하고 주문합니다. 왼쪽 번역 기기는 English·中文·日本語로 바꿀 수 있고, 오른쪽 음성 안내 기기는 한국어 화면만 있습니다. 시각장애인 손님은 두 화면이 검게 가려지고, 음성 안내 기기만 누른 버튼을 읽어 줍니다(한 번 누르면 읽기, 같은 곳을 한 번 더 누르면 선택). 음성은 브라우저 내장 음성 합성(Web Speech API, 별도 API 키 없음)으로 내고, 소리가 꺼진 교실을 위해 같은 내용을 자막으로 보여 줍니다.

1단계 /balance의 왼쪽 기기는 표준어·전라도·경상도·제주도 표현으로 메뉴 분류, 음식 설명, 버튼, 장바구니, 옵션, 결제와 영수증을 전환합니다. 같은 개발비에서 지역말 지원에 투자한 가상 제품으로, 구형 화면과 동작당 0.9~2.1초의 지연, 150ms 단위로 끊기는 스크롤과 멈칫하는 로딩 표시, 3.2초의 결제 대기를 설정했습니다. 오른쪽은 표준어만 지원하며 즉시 반응하고 정상적으로 계산합니다. 두 기기의 메뉴와 단가는 같습니다. 성능 차이는 이 가상 제품의 개발 조건이며 사투리 자체의 특성이 아닙니다.

왼쪽은 비어 있지 않은 장바구니의 2·5·8번째 재계산에서 합계 오류를 재현합니다. 오차는 +1,000원과 −500원을 번갈아 사용하며 개별 메뉴의 가격·수량은 바꾸지 않습니다. 오류가 난 합계는 주문 확인·결제 화면·모의 영수증에도 그대로 이어지고, 다음 장바구니 재계산에서는 정상으로 돌아옵니다. 언어 변경과 확대·복귀는 오류 상태를 유지하며 처음으로에서 주문과 오류 순서를 초기화합니다. 이 조건은 왼쪽에서 선택한 언어와 관계없이 동일합니다.

화면 위 주문 미션 띠(포장 · 불고기덮밥 1 · 군만두 1 · 청포도에이드 1(얼음 적게) · 카드 결제)를 두 기기에 똑같이 제시하고, 결제가 끝나면 기기별로 미션 성공·주문 불일치·청구 금액 오류를 표시합니다. 수업 헤더·설명·성찰 설문은 표시하지 않습니다.

왼쪽 기기에서 지역말(전라도·경상도·제주도)을 고르면 한 번의 주문 안에서 시스템 오류가 납니다. 두 번째 메뉴 담기(E-102)와 첫 결제하기(E-204)는 오류 창 뒤 다시 시도할 수 있고, 첫 카드 결제(E-503)는 주문을 지우고 4초 뒤 처음 화면으로 돌아갑니다. 오류 창에는 한정된 개발비를 지역말 지원에 먼저 써서 오류 처리 기능이 부족하다는 안내를 함께 표시합니다. 표준어를 고르면 이 오류는 나지 않으며, 주문을 완료하고 처음으로를 누르면 오류 순서가 다시 시작됩니다.

결제 단계에서는 키오스크 옆에 나타나는 카드를 마우스·터치로 끌어 투입구에 넣습니다(키보드는 카드에 초점을 두고 Enter). 결제가 끝나면 영수증이 출구에서 출력되고, 영수증을 누르면 떼어 갑니다. 카드 레이어는 balance-card.js·balance-card.css가 담당합니다. 마이크 인식·실제 결제·서버 전송 없이 화면 안에서만 작동하며, 브라우저에는 연 단계만 세션 저장소에 남기고 새로고침하면 주문이 초기화됩니다. 음식 이름은 이해를 위해 일부 공통 명칭을 유지하고, 지역말 문장은 수업용으로 각색했습니다.

오른쪽은 청록·흰색을 바탕으로 둥근 화면과 메뉴 카드, 필 형태의 분류 버튼, 원형 음식 사진, 사진 장바구니로 구성합니다. 반투명한 유리층과 이중 테두리, 가장자리의 빛 반사와 작은 물방울 표현을 사용하며 음식과 글씨 위에는 장식 효과를 겹치지 않습니다. 상세·주문 확인·결제·영수증에도 같은 스타일을 적용하고, 오른쪽 화면에만 로컬 Pretendard 가변 글꼴을 사용합니다. 왼쪽은 네 개의 언어 버튼을 항상 보여 주는 별도 패널과 두꺼운 구형 구획으로 구성합니다. 지역 표현의 어휘와 버튼·옵션·결제 문구는 제작 기록의 참고 자료를 바탕으로 보강했습니다.

처음에는 두 기기를 함께 보여 줍니다. 한 기기를 누르면 해당 주문 화면이 확대되며, 왼쪽 위 돌아가기로 두 기기를 다시 볼 수 있습니다. 이동 중에도 각 기기의 장바구니·언어·진행 상태를 유지합니다. 확대 상태에서는 왼쪽은 2열, 오른쪽은 화면 폭에 따라 2~3열의 큰 메뉴와 터치 버튼을 사용하고, 빈 장바구니는 제목 한 줄만 표시합니다. 메뉴 목록은 화면 안에서 스크롤합니다.

메뉴 이미지 생성 프롬프트와 표현 참고 자료는 제작 기록에 정리했습니다.

Vercel 배포

정적 HTML/CSS/JS 앱이므로 Vercel에서 GitHub 저장소를 연결하면 바로 배포할 수 있습니다. vercel.json에는 확장자 없는 URL을 위한 cleanUrls와 /bias, /bias/gs, /balance rewrite를 포함했습니다.