다국어 터치 설문 상담 키오스크

아이패드에서 동작하는 다국어(한/영/일/중) 터치 설문 상담 키오스크를 구현합니다.

다국어 리소스 아키텍처 설계i18next 네임스페이스 분리로 설문·메뉴판 텍스트를 4개 언어팩으로 관리하는 구조를 구현합니다

터치 최적화 스텝 폼 엔진 구현단계별 응답 상태 관리와 진행률 스텝퍼를 결합한 재사용 가능한 설문 폼 컴포넌트를 설계합니다

화면 전환 트랜지션 시스템 구축Framer Motion 기반 스텝 간 전환 애니메이션을 컴포넌트 레벨에서 재사용 가능하게 설계합니다

서비스 타입Web

업종플랫폼

기술 스택

React (Vue.js 후보 검토 후 선택)TypeScriptTailwind CSSi18nextFramer MotionReact Context APIVite

주요 기능

다국어 언어 선택
터치 기반 설문조사
설문 진행 화면 전환
맞춤 메뉴판 연결

Overview

프로젝트 개요

범위: 개발, 디자인, 기획

아이패드에서 동작하는 다국어(한/영/일/중) 터치 설문 상담 키오스크를 구현합니다. 오프라인 뷰티 클리닉·시술 상담 서비스 매장을 찾은 고객이 언어를 선택한 뒤 터치 기반 설문에 응답하면, 화면 전환 트랜지션과 함께 응답 결과에 맞는 메뉴판(카탈로그)으로 자연스럽게 연결되는 반응형 웹앱 구조를 React + TypeScript 기반으로 설계합니다.

요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

4개 언어 리소스 간 텍스트 길이 차이로 인한 터치 버튼 레이아웃 깨짐 방지 전략

설문 단계별 응답에 따라 다음 질문 분기가 달라지는 조건부 플로우 로직 설계

아이패드 가로/세로 모드 전환 시 스텝퍼와 카드 레이아웃의 일관된 반응형 대응

터치 오조작을 방지하기 위한 버튼 간격과 히트 영역(hit area) 최소 기준 설계

구현 내용

핵심 기능 상세

핵심 기능 1

다국어 언어 선택

고객이 매장 방문 시 아이패드 초기 화면에서 한국어·영어·일본어·중국어 중 원하는 언어를 큰 터치 카드로 선택하면, 이후 모든 설문·메뉴판 화면이 즉시 해당 언어로 전환됩니다

핵심 기능 2

터치 기반 설문조사

고객이 사진과 텍스트로 구성된 선택지를 터치해 시술·상담 관련 설문에 응답하는 화면입니다. 큰 카드형 버튼과 명확한 선택 피드백으로 태블릿 환경에서 직관적으로 조작할 수 있습니다

핵심 기능 3

설문 진행 화면 전환

설문 단계를 넘어갈 때 스텝퍼 진행률이 갱신되며 부드러운 화면 전환 애니메이션과 함께 다음 질문으로 이동합니다. 현재 진행 상태를 한눈에 파악할 수 있는 상단 스텝 인디케이터를 포함합니다

핵심 기능 4

맞춤 메뉴판 연결

설문 완료 후 고객의 응답 조합을 분석해 관련성이 높은 시술·서비스 카테고리로 분류된 메뉴판(카탈로그) 화면으로 자동 연결합니다. 상담 시 직원이 바로 활용할 수 있도록 가격과 소요 시간을 함께 노출합니다

구현 과정

프로젝트 진행 단계

STEP 1

터치 UI/UX 와이어프레임 및 디자인 시스템 설계

아이패드 해상도 기준 터치 타겟·타이포 스케일 정의, 잉크 네이비 컬러 시스템 구축

STEP 2

다국어 리소스 구조 및 언어 선택 화면 개발

i18next 네임스페이스 설계, 4개 언어 리소스 스캐폴딩, 언어 선택 카드 UI 구현

STEP 3

설문 스텝퍼 및 화면 전환 트랜지션 구현

Framer Motion 기반 단계별 화면 전환, 동적 진행률 스텝퍼 컴포넌트 개발

STEP 4

설문 결과-메뉴판 연동 로직 구현

응답-카테고리 룰 기반 매핑 설계, 결과에 따른 맞춤 메뉴판 자동 스크롤 구현

STEP 5

반응형 QA 및 크로스 디바이스 검증

아이패드 다양한 해상도·가로세로 모드 대응, 터치 인터랙션 히트 영역 검증

프로젝트 성과

주요 성과