세로형 키오스크에서 세 번의 터치로 도착하는 안내

방문객이 로비에 들어서자마자 세로형 화면을 마주합니다. 언어를 고르고, 부서를 고르고, 시설을 고르는 세 번의 터치만으로 원하는 정보에 도착합니다. 이번 포스팅에서는 인천 국립환경과학원 안내 키오스크의 기술적인 구현 과정을 공유합니다.

1. 시스템 아키텍처 개요

본 프로젝트는 크게 세 가지 단계로 구성됩니다.

언어 선택과 씬 로딩: 타이틀 씬에서 한국어/영어를 선택하면, Additive 방식으로 본편 씬이 로드되고 타이틀 씬은 Unload됩니다.

3단계 네비게이션: 본편 씬에서는 HUD 상태 머신(State Machine)이 부서(1차) → 시설(2차) → 상세(3차)의 흐름을 관리합니다.

상세 페이지 인터랙션: 슬라이드, 가이드 라인 애니메이션, 스크롤 마스크 등 페이지마다 다른 인터랙션이 펼쳐집니다.

Unity 2023.2.20f1 기반의 세로형(Portrait) 키오스크 환경에서 동작합니다.

2. 주요 기술적 구현

2.1 오디오와 동기화되는 Additive 씬 로딩 GameSceneManager.cs)

타이틀에서 본편으로 전환할 때 클릭 사운드가 도중에 끊기면 체감상 어색해집니다. 이를 해결하기 위해 씬 매니저는 Additive 로드 → 오디오 재생 완료 대기 → 이전 씬 Unload 순서로 코루틴(Coroutine)을 구성했습니다. ESceneType 열거형Title=0, KorVersion=1, EngVersion=2)과 Build Settings의 씬 인덱스를 1:1로 일치시켜, 언어별 본편 씬을 단일 APILoadScene(ESceneType))로 로드합니다. 싱글톤(Singleton) 패턴과 DontDestroyOnLoad를 함께 적용해 씬이 바뀌어도 상태와 오디오 핸들을 유지합니다.

2.2 HUD 상태 머신과 가이드 라인 애니메이션 EnvSciFlowController.cs)

본편 씬의 모든 UI 흐름은 4개 상태Title, Info, Select, Detail)를 갖는 HUD 상태 머신으로 관리합니다. ChangeStatus() 한 번의 호출로 이전 캔버스(Canvas) 비활성화, 새 캔버스 활성화, 상태별 초기화가 한꺼번에 이루어집니다. 특히 시설 가이드 라인은 사용자의 선택 순서에 따라 웨이포인트(waypoint)를 누적하고, 10px 간격으로 보간(interpolation)한 경로를 AnimatePath() 코루틴이 0.06초 간격으로 따라 그립니다. 작은 점이 경로를 따라 흘러가는 시각적 효과로 "어디로 가야 하는지"를 직관적으로 보여줍니다.

- 가이드 라인 점 간격: 10px

- 애니메이션 프레임 간격: 0.06초

- 경로 포인트: 버튼 클릭으로 런타임 누적

2.3 마스크와 스크롤바가 맞물린 텍스트 스크롤 ScrollMaskImage.cs)

세로형 화면에서 긴 협약 내용을 읽기 편하게 보여주기 위해, 마스크(Mask) 영역과 스크롤바(Scrollbar)를 직접 연동했습니다. 스크롤바의 onValueChanged 이벤트 핸들러가 스크롤 대상 RectTransform의 Y 위치를 (rect.height - maskAreaHeight) × value 공식으로 실시간 갱신합니다. maskAreaHeight = 1000.0f 기본값을 인스펙터(Inspector)에 노출해 콘텐츠 크기에 맞춰 조정할 수 있고, 한국어/영어 전환 시에는 각각의 마스크와 스크롤 패널을 따로 두고 플래그 하나로 토글합니다.

3. 사용자 경험(UX) 최적화

세로형 강제 모드 : 앱 시작과 동시에 Screen.orientation을 Portrait로 고정해, 키오스크 설치 환경에서 화면이 회전하거나 잘려 보이는 일을 원천 차단합니다.

10초 무입력 자동 복귀 : 관람객이 사용 중간에 자리를 떠도, 10초 뒤 자동으로 메인 화면으로 복귀해 다음 사용자에게 깨끗한 첫 화면을 제공합니다.

7회 연타 종료 제스처 : 일반 관람객이 실수로 앱을 종료할 수 없도록, 1초 이내 7회 연속 터치라는 숨겨진 제스처로만 종료를 허용합니다.

첫 진입 튜토리얼 : 본편 씬에 처음 들어올 때 한 번만 안내 배경을 표시해, 초보 사용자가 조작법을 자연스럽게 익히도록 유도합니다.

4. 마치며

3단계 네비게이션이라는 단순한 구조 뒤에는, 씬 로딩과 사운드의 동기화, 상태 머신 기반 UI 흐름, 그리고 세밀한 인터랙션 최적화가 녹아 있습니다. 관람객 입장에서는 "한 번 누르면 바로 열린다"는 가벼운 경험이지만, 내부적으로는 키오스크 운영 환경 특유의 조건(세로 고정, 유휴 복귀, 오작동 방지)을 하나씩 풀어낸 결과입니다.

향후에는 상세 페이지 인덱스를 enum 또는 ScriptableObject 기반 데이터로 정식 구조화해 페이지 추가와 순서 변경에 대한 확장성을 높이고, 일본어·중국어 등 추가 언어 씬을 손쉽게 얹을 수 있도록 다국어 로딩 구조를 일반화할 계획입니다.