플러스프로젝트 배경
봉은사 외국인 관광객 증가에 따라 언어 장벽 없이 자율 관람과 불교 문화 체험을 동시에 제공하려는 요구에서 출발했습니다. next-intl 로케일 라우팅(/ko, /en, /zh, /ja)으로 4개국어를 단일 코드베이스에서 지원하고, 무인 키오스크 특화 UX(사찰 지도 위치 안내, QR 없는 자기 페이스 진행)와 어드민 데이터 수집까지 파일럿으로 전 기능을 구현하고 동작을 확인했습니다.
프로젝트 성과
4개국어 동시 지원 — next-intl 로케일 라우팅
한/영/중/일 4개 언어를 /ko, /en, /zh, /ja 경로로 분리. 방문자 정보 입력 폼부터 전각 소개·설문 문항·결과 화면까지 전 UI 번역 완료. 언어 전환 시 애니메이션 리셋 없이 즉시 반영
연꽃 SVG bloom + ripple 체크마크 오버레이 자체 구현
CDN 없이 Framer Motion만으로 8개 꽃잎 stagger bloom(LotusIcon), 설문 완료 ripple 3단 확산 + pathLength 체크마크(SuccessOverlay) 구현. 사찰 금색(#
원형 클립패스·spring 물리 기반 화면전환 분리 구현
clip-path circle 확장 전환(전각 소개 진입)과 spring 기반 x축 슬라이드 전환(설문 문항 이동) 2가지 방식을 컨텍스트에 맞게 분리 적용. AnimatePresence로 진입·이탈 애니메이션 동기
무인 키오스크 특화 UX — 사찰 지도 현재 위치 안내
6개 전각(일주문·천왕문·대웅전 등)을 순서대로 진행하며, 각 전각 소개 화면에서 사찰 배치도에 현재 위치를 하이라이트. QR 스캔 없이 자기 페이스로 30문항을 완료하는 UX
어드민 대시보드 — 수집 데이터 실시간 조회 + CSV 내보내기
NextAuth 인증 기반 어드민 페이지에서 응답 데이터 MongoDB 집계 및 CSV 내보내기 제공. QR 코드 생성 API(/api/qr)로 각 전각 설치용 QR을 즉시 생성 가능
핵심 기능
4개국어 동시 지원 투어 앱 (한·영·중·일)
next-intl 로케일 라우팅(/ko, /en, /zh, /ja)으로 단일 코드베이스에서 4개 언어를 지원합니다. 인트로부터 전각 소개·설문 문항·결과 화면까지 전 UI가 번역되며, 상단 언어 토글로 즉시 전환 가
진행 단계
1단계: 기획 및 다국어 기반 구축
2026.04.
봉은사 투어 플로우 설계(6전각 × 5문항). next-intl 로케일 라우팅 설정, 한/영/중/일 4개 언어 번역 파일 구축. Next.js 15 App Router + TypeScript + Tailwind CS
프로젝트 상세
봉은사(서울 강남) 무인 관람 투어를 위한 다국어(한/영/중/일) 설문 앱입니다. 방문자가 6개 전각을 순서대로 돌며 30문항에 답하면 AI가 불교 성향 유형(지혜형·자비형·선정형 등)을 분석해 결과를 제공합니다. QR 스캔 없이 자기 페이스로 진행하며, 사찰 지도로 현재 위치를 안내합니다. 연꽃 SVG 애니메이션·원형 클립패스 전환·설문 완료 ripple 오버레이 등 사찰 분위기에 맞는 애니메이션을 F
