목록으로 돌아가기
AI 도슨트 키오스크 인터페이스
반 고흐 미술관 방문객을 위한 AI 도슨트 키오스크 애플리케이션
작품 검색, AI 대화형 해설, 작가의 생애 스토리 탐색 기능을 제공합니다.
1 / 5
담당 역할
기획디자인프론트엔드백엔드
기술 스택
React
TypeScript
Vite
TanStack Query
Framer Motion
Tailwind CSS
Zod
Swiper
주요 기능
- AI 도슨트 채팅: 자연어로 반 고흐 작품에 대해 질문하고 음성으로 답변을 들을 수 있는 AI 대화 기능
- 작품 컬렉션 갤러리: 무한 스크롤이 적용된 Masonry 레이아웃으로 작품을 탐색하고 상세 정보 확인
- 음성 검색: 브라우저 Speech Recognition API를 활용한 음성 인식 검색 기능
- 한글 가상 키보드: 터치스크린 키오스크를 위한 한글 자모 조합 가상 키보드
- 스토리/생애 탐색: 세로 슬라이더를 통한 반 고흐의 스토리와 생애 연대기 탐색
수행 업무
- 한글 IME 가상 키보드 구현: hangul-js 라이브러리를 활용하여 자모 단위 입력과 조합을 처리하는 터치스크린용 키보드 개발
- AI 응답 음성 출력: 백엔드에서 받은 Base64 인코딩 오디오 데이터를 실시간으로 재생하여 도슨트 경험 제공
- 무한 스크롤 최적화: TanStack Query의 useInfiniteQuery와 Intersection Observer를 조합하여 대규모 작품 데이터 효율적 로딩
- 타입 안전 API 레이어: Zod 스키마를 활용한 런타임 응답 검증과 TypeScript 타입 자동 추론으로 API 통신 안정성 확보
- 키오스크 유휴 상태 관리: 사용자 활동 감지를 통한 자동 대기 화면 전환으로 미술관 환경에 최적화
- 부드러운 페이지 전환: Framer Motion의 AnimatePresence를 활용한 페이지 간 자연스러운 전환 애니메이션
#React
#키오스크
#AI 도슨트
#미술관
#Framer Motion
#TanStack Query