손끝으로 여는 여섯 가지 양자 미래

아이콘 하나를 끌어다 중앙에 놓으면, 화면은 양자컴퓨터가 바꿀 여섯 가지 미래 중 한 장면으로 바뀝니다. 이번 포스팅에서는 '양자컴퓨터와 미래생활' 콘텐츠의 기술적인 구현 과정을 공유합니다.

1. 시스템 아키텍처 개요

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

- 입력 수신: 인공지능·의료·산업·환경·우주·과학 여섯 개 카테고리 아이콘을 터치 드래그로 집어 올립니다.

- 상태 판정: 드롭 위치를 판정해 확대 애니메이션 재생 후 해당 카테고리의 설명 콘텐츠로 진입합니다.

- 화면 송출: 키오스크 화면을 실시간 캡처해 외부 디스플레이로 UDP 스트리밍합니다.

메인 플랫폼은 Unity 2023.2.20f1 이며, 단일 씬 안에서 9단계 상태를 오브젝트 토글 방식으로 전환하는 구조입니다.

2. 주요 기술적 구현

2.1 드래그&드롭 인터랙션 DraggableUI.cs)

Unity UI 의 IBeginDragHandlerIDragHandler 인터페이스를 구현해 카테고리 프리팹을 직접 집어올 수 있게 했습니다. OnBeginDrag 에서 GameManager.IsDragging 플래그로 이중 드래그를 차단하고, 유도용 손 이미지와 "드래그해주세요" 안내 UI 를 동시에 숨겨 시야를 정리합니다. OnDrag 에서는 rectTransform.position 을 포인터 위치로 갱신해 손끝을 그대로 따라오게 만들었습니다.

드롭 실패 시에는 형제 오브젝트인 BackGroundUI.cs 가 OnDrop 을 가로채 ResetPosition() 을 호출하여 아이콘을 원 위치로 되돌리고, 유도 이미지와 가이드 팝업을 다시 표시합니다. 각 아이콘에 assignedIndex 를 부여해 두었기 때문에, 어떤 아이콘을 놓았는지에 따라 이동할 GameStep 이 정확히 대응됩니다.

2.2 상태 머신 기반 화면 전환 GameManager.cs)

전체 흐름은 Title → Lobby → Main → Contents_0~5 의 9단계 GameStep enum 으로 정의되어 있습니다. GameManager 는 Thread-safe 싱글톤으로 등록되어 DontDestroyOnLoad 로 살아남으며, LoadAndUnLoadAllContents(int) 호출 시 내부 배열 중 해당 인덱스 하나만 SetActive(true) 로 활성화하는 방식으로 씬 로드 없이 상태를 즉시 전환합니다.

매 프레임 Update() 가 터치·마우스 입력을 감시하고, 무입력 시간이 LoadTitleTime 을 초과하면 자동으로 Title 화면으로 복귀합니다. 전시 환경 특성상 반드시 필요한 동작으로, 복귀 시간과 종료 연타 횟수endCount)는 모두 인스펙터에서 조정할 수 있도록 외부화했습니다.

- MoveNextStep() / MovePrevStep() — 순차 이동 및 뒤로가기

- MoveStep(GameStep) — 드롭 판정 성공 후 강제 점프

- IncreaseEndCount() — 관리용 종료 버튼을 N회 연타하면 Application.Quit()

2.3 실시간 화면 스트리밍 UDPClient.cs)

키오스크 화면을 외부 디스플레이에 동시 송출하기 위해, 별도 RenderTexture 로 카메라를 복사한 뒤 해상도를 1/4 로 다운샘플하고 JPG(품질 50)로 인코딩해 UDP 소켓으로 전송합니다. 송신 주기는 WaitForSecondsRealtime(0.2f), 즉 초당 5프레임입니다. 패킷 맨 앞에는 1바이트 id 를 붙여 다중 키오스크 환경에서 수신측이 발신지를 구분할 수 있게 했습니다.

해상도는 Screen.SetResolution(1080, 1920, true) 로 세로 모드를 강제하며, 종료 시에는 {127 + id} 1바이트 종료 신호 패킷을 송신해 수신측이 연결 종료를 인지하도록 프로토콜을 설계했습니다. 송신 대상 IP 는 빌드 시 StreamingAssets 의 외부 텍스트 파일에서 읽어 들여, 동일 빌드를 여러 현장에 배포할 수 있도록 했습니다.

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

직관적 '끌어서 선택' : 버튼 클릭 대신 아이콘을 드래그해 중앙에 놓는 방식으로, 여섯 가지 선택지를 한 화면에서 비교하며 고를 수 있게 했습니다.

드래그 유도 손 애니메이션 : 사용자가 처음 접근했을 때 각 아이콘 위에 움직이는 손 이미지와 안내 UI 가 함께 뜨고, 드래그가 시작되는 순간 모두 사라져 조작에 집중하도록 했습니다.

가이드 팝업 자동 표시 : Main 진입 시 GuidePopUp 이 자동으로 떠올라 첫 사용자도 사용법을 즉시 파악할 수 있고, 드롭이 성공하는 순간 자연스럽게 숨겨집니다.

유휴 자동 복귀 : 일정 시간 동안 입력이 없으면 Title 화면으로 자동 복귀해, 다음 관람객이 항상 동일한 시작 지점에서 체험을 시작할 수 있도록 했습니다.

4. 마치며

기술적으로 이 프로젝트는 단일 씬 + 오브젝트 토글이라는 가장 단순한 구조로 9단계 상태 머신을 구현하고, 그 위에 드래그&드롭 인터랙션과 실시간 UDP 스트리밍을 얹은 사례입니다. 씬 로드 비용 없이 즉시 반응하는 키오스크를 만들 수 있었고, 관람객 입장에서는 "아이콘을 끌어다 놓으면 미래가 열린다" 는 단순한 은유를 손끝으로 체감할 수 있도록 했습니다.

향후에는 현재 두 개로 분기된 빌드를 단일 빌드 + 런타임 설정으로 통합해 배포 관리 비용을 줄일 계획입니다. 또한 드롭 애니메이션 파라미터와 카테고리별 위치 오프셋을 ScriptableObject 기반 설정으로 외부화해, 카테고리를 추가·변경할 때 코드 수정 없이 기획자가 직접 조정할 수 있는 구조로 확장할 예정입니다.