아이들에게 "AI는 학습한다"는 추상적인 개념을 어떻게 **눈으로 보여줄 수 있을까요**?

제시어와 사진을 짝지어 주는 퀴즈 하나를 맞힐 때마다 학습 게이지가 20%씩 차오르고, 5번을 맞히면 100%가 되어 다음 단계로 넘어가며, 마지막에는 여섯 개의 단어를 드래그해서 관련 설명을 확인하는 체험으로 마무리된다면요. 이번 포스팅에서는 **멀티터치 드래그**와 **자식 자동 바인딩**, **CSV 외부화 텍스트 엔진** 세 축으로 구성된 인천 학생과학관 '인공지능이란' 학습 체험 콘텐츠의 기술적인 구현 과정을 공유합니다.

1. 시스템 아키텍처 개요

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

가이드 퀴즈: 2지선다 질문 한 개와 정답/오답 멘트, 캐릭터 표정으로 구성된 GuidePanel이 사용자의 첫 인터랙션을 유도

학습 게임: 제시어(예: "강아지")와 2개 이미지를 무작위 위치로 섞어 보여주고, 5번 정답 시 learningGauge.fillAmount가 1.0에 도달하여 다음 단계 활성화

단어 드래그 결과: 6개 단어를 드롭존에 드래그할 때마다 siblingIndex 기반으로 매핑된 CSV 설명이 화면에 표시되는 자유 탐색 모드

이 모든 과정은 Unity 2022 LTS의 단일 씬 구조에서 3개의 패널 매니저와 DragObjectDropObject 페어, 그리고 CSVManager가 협업하는 얕은 계층으로 동작합니다.

2. 주요 기술적 구현

2.1 크로스 퀴즈 오답 샘플링 (GamePanel_WhatisAI.cs)

"강아지" 제시어에 대해 정답 이미지와 오답 이미지를 모두 준비하려면 각 퀴즈마다 수동으로 오답 풀을 작성해야 하는데, 이는 데이터 관리 부담을 키웁니다. SetQuetion()은 대신 **다른 퀴즈questList)의 정답 스프라이트에서 오답을 가져오는** 크로스 샘플링 방식을 사용합니다. Random.Range로 현재 퀴즈가 아닌 다른 퀴즈를 최대 10회까지 시도해 찾고, 그 퀴즈의 correctSprites에서 다시 무작위 하나를 선택합니다. 덕분에 새 제시어를 추가할 때 오답 이미지를 별도로 준비할 필요 없이 **정답 이미지만 늘려도 퀴즈 품질이 자동으로 향상**됩니다.

2.2 자식 Button 자동 수집 바인딩 (GuidePanel_WhatisAI.cs)

퀴즈 패널에는 "다음" / "이전" / "선택지 A" / "선택지 B" 네 개의 버튼이 있고, 각자의 onClick에 서로 다른 핸들러가 연결되어야 합니다. 매번 Inspector에서 수동으로 연결하는 대신 Awake()에서 GetComponentsInChildren<Button>()으로 버튼을 순서대로 수집하고 인덱스 0~3에 의미를 부여하는 방식을 택했습니다. 디자이너가 패널 UI를 재구성해도 자식 순서만 지키면 코드 수정 없이 버튼이 정상 동작하며, 디자인 변경 시 편집 부담을 크게 낮췄습니다.

```csharp

Awake() {

buttons = GetComponentsInChildren<Button>();

// buttons[0] = 다음, [1] = 이전, [2] = 선택지 A, [3] = 선택지 B

anwserIndex = 1;

}

```

2.3 멀티터치 드래그 + siblingIndex 기반 CSV 조회 (DragObject + DropObject + ResultPanel)

6개 단어를 드래그해서 드롭존에 놓으면 해당 단어의 설명이 표시되는 인터랙션은 **멀티터치 안정성**과 **데이터 매핑 유연성** 두 가지를 동시에 요구합니다. DragObject_WhatisAI는 activeFingerIds 리스트로 여러 손가락의 터치를 추적하여 1손가락 단순 이동과 2손가락 중심점 이동을 모두 지원하며, DropObject.OnDrop은 드래그된 오브젝트의 transform.GetSiblingIndex()를 읽어 ResultPanel.key[] 배열의 해당 인덱스로 CSV 설명을 조회합니다. 단어의 순서를 씬에서 바꾸기만 하면 매핑도 따라 바뀌므로 기획 변경이 매우 가볍게 반영됩니다.

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

학습 게이지 보간 애니메이션 : 정답을 맞힐 때마다 fillAmount가 즉시 +0.2로 튀지 않고 CoIncraseFillAmount 코루틴이 Time.deltaTime * 0.5f 속도로 부드럽게 보간하여, "AI가 지식을 흡수하는 과정"을 시각적으로 표현했습니다.

정답 위치 랜덤화 : correntIndex = Random.Range(0, 2)로 정답 스프라이트의 좌/우 위치를 매번 무작위화해, 아이들이 "계속 왼쪽만 누르면 된다" 같은 패턴 암기 없이 실제로 이미지를 관찰하도록 유도했습니다.

캐릭터 표정 이원화 피드백 : 정답 시 밝은 표정, 오답 시 실망 표정으로 Sprite를 교체하여 텍스트를 읽지 않아도 결과를 인지할 수 있도록 했고, 선택지 버튼 이미지도 상태별로 전환해 **시각적 이중 피드백**을 제공합니다.

CSV 완전 외부화 : 모든 제시어·정답/오답 멘트·단어 설명이 StringTable.csv의 STR_WhatisAI_* 키로 외부화되어 있어, 교육 내용의 수정이나 다국어 확장이 코드 수정 없이 가능하도록 했습니다.

4. 마치며

이 프로젝트는 "AI 학습"이라는 눈에 보이지 않는 과정을 **학습 게이지라는 직관적 은유**로 시각화하고, 이를 퀴즈·드래그·설명이라는 세 가지 인터랙션 위에 쌓아 올려 아이들이 짧은 시간 안에 자연스럽게 개념을 체화하도록 만든 작업이었습니다. 크로스 퀴즈 오답 샘플링, 자식 버튼 자동 바인딩, siblingIndex 기반 CSV 조회 같은 작은 설계 결정들이 만들어낸 확장성은 기술적으로도 흥미로웠지만, 교육 현장의 기획자가 퀴즈를 자유롭게 추가·수정할 수 있게 되었다는 점에서 큰 의미가 있었습니다.

향후에는 실제 이미지 분류 **AI 모델을 Unity Sentis로 온디바이스 추론**하여 학생이 직접 업로드한 사진을 AI가 분류하는 라이브 데모 단계를 추가하고, 단어 드래그 결과 화면에서도 여러 단어를 조합한 문장 생성 시각화로 확장해 "AI가 학습한 지식을 활용하는" 다음 단계까지 경험시킬 예정입니다.