인터렉션 확장

눈 추적 시스템까지 구현하면서 하나 분명해졌다.

이 시스템은 단순히 데이터를 보여주는 것이 아니라
이미 “사용자와 상호작용하는 구조”로 넘어왔다는 것이다.

그렇다면 다음 질문은 자연스럽게 이어진다.

“사용자가 특정 대상을 선택하고, 시스템이 그 상태를 유지할 수 있을까?”

이 질문에서 시작된 것이 바로
타겟 선택 및 UI 인터랙션 시스템이다.

---

🖱️ 클릭 기반 타겟 선택 시스템

눈 추적만으로는 사용자가 무엇을 보고 있는지 완전히 판단하기 어렵다.
그래서 선택 기능은 의도적으로 “수동 입력”으로 설계했다.

사용자가 화면을 클릭하면
그 위치와 가장 가까운 객체를 선택하도록 했다.

이 과정에서 중요한 것은 단순 선택이 아니라
상태(state)를 가진 선택 구조를 만드는 것이었다.

그래서 다음과 같은 상태 구조를 설계했다.

1번째 클릭 → TRACKING
2번째 클릭 → LOCKED
3번째 클릭 → 제거

이 구조는 여러 번 테스트 끝에 정해졌는데,
생각보다 중요한 UX적인 의미를 가진다.

• 실수로 클릭해도 바로 삭제되지 않는다
• 사용자가 명확하게 “락(lock)”을 의도할 수 있다
• 현재 상태를 직관적으로 이해할 수 있다

즉, 단순한 토글이 아니라
단계형 인터랙션 설계다.

---

🎯 멀티 타겟 구조

처음에는 하나의 타겟만 선택하도록 구현했지만
곧 한계를 느꼈다.

“여러 개를 동시에 선택할 수 있어야 한다”

그래서 구조를 다음처럼 바꿨다.

target 하나 → list 구조

이 변경은 단순해 보이지만
시스템 구조를 완전히 바꿔버린다.

이제 가능한 기능은 다음과 같다.

• 여러 객체를 동시에 선택
• 각각 다른 상태 유지
• 개별적으로 LOCK / 해제

즉, 시스템은 단순 UI에서 벗어나
복수 객체를 관리하는 인터페이스가 된다.

---

 

🎯 타겟 추적 (Tracking)

초기 구현에서는 문제가 하나 있었다.

타겟을 선택하면
그 위치에 HUD가 “고정”되어 버렸다.

하지만 실제 객체는 계속 움직인다.

이 문제를 해결하기 위해
타겟을 “좌표”가 아니라 “대상”으로 정의했다.

그리고 매 프레임마다 다음 작업을 수행한다.

이전 타겟 중심 → 현재 detection 중 가장 가까운 객체 찾기

이 방식으로
HUD는 항상 실제 객체를 따라 움직이게 된다.

결과적으로 시스템은 다음 단계로 진화했다.

고정 UI → 동적 추적 UI

---

🧠 상태 기반 UI 설계 (TRACKING / LOCKED)

이 프로젝트의 핵심 중 하나는
상태를 시각적으로 표현하는 것이었다.

그래서 단순히 “텍스트”만 바꾸는 게 아니라
UI 전체가 상태를 반영하도록 설계했다.

---

✅ TRACKING 상태

• HUD 색상: 주황색
• 텍스트: TRACKING
• 의미: 대상 추적 중 (확정 아님)

---

 

✅ LOCKED 상태

• HUD 색상: 빨간색
• 텍스트: LOCKED
• 박스 색상도 빨간색 변경
• 의미: 대상이 확정됨

---

 

이 설계의 핵심은 이것이다.

“상태를 읽지 않아도, 보면 바로 이해되게 만든다”

텍스트는 보조 정보일 뿐
핵심은 색과 형태의 변화다.

---

🎯 HUD 시스템 구현

객체를 시각화하기 위해
단순 박스 이상의 표현이 필요했다.

그래서 원형 HUD를 구성했다.

구성 요소는 다음과 같다.

• 외곽 링 (큰 원)
• 중간 링
• 내부 링
• 십자선 (crosshair)
• 중앙 텍스트

이 구조는 단순하지만
정보를 직관적으로 전달하는 데 매우 효과적이다.

특히 중요한 포인트는 이것이다.

👉 “중심을 기준으로 모든 요소를 정렬한다”

이로 인해 사용자는 자연스럽게
HUD의 중심에 시선을 두게 된다.

---

🎯 크기 반응형 UI

HUD의 크기도 고정이 아니라
객체 크기에 따라 자동으로 변하도록 만들었다.

작은 객체 → 작은 HUD
큰 객체 → 큰 HUD

하지만 그대로 쓰면 문제가 생긴다.

너무 작거나, 너무 커지는 경우가 발생한다.

그래서 아래 조건을 추가했다.

최소 크기 제한 + 최대 크기 제한

이 결과 UI는 다음 특징을 갖게 된다.

• 항상 보인다
• 너무 과하지 않다
• 객체 크기를 직관적으로 반영한다

---

🎯 시스템 구조 변화

여기까지 오면서 시스템은 완전히 바뀌었다.

처음:

카메라 → AI → 결과 출력

지금:

카메라 → AI → 서버 → 웹 → UI → 사용자 입력 → 상태 변화 → 다시 AI 반영

이건 단순 파이프라인이 아니라

🔥 피드백 루프 시스템

이다.

---

💡 이번 단계에서 얻은 핵심 깨달음

이 단계에서 가장 중요했던 포인트는 이것 하나다.

“AI는 시작일 뿐이고, 실제 어려운 건 인터랙션이다”

문제는 더 이상 모델이 아니었다.

• 어떻게 선택할 것인가
• 상태를 어떻게 표현할 것인가
• 사용자에게 어떻게 피드백을 줄 것인가

이런 문제들이 더 중요해졌다.

---

✅ 현재 상태 (이번 단계 기준)

지금 시스템은 다음까지 구현된 상태다.

• 실시간 객체 인식
• 웹 기반 영상 스트리밍
• 클릭 기반 타겟 선택
• 멀티 타겟 지원
• 객체 추적
• 상태 기반 UI (TRACKING / LOCKED)
• HUD 시각화 시스템

즉,

“AI 기반 객체 추적 + 인터랙티브 HUD 시스템”

---

🚀 다음 단계 – 진짜 자동화로

지금까지는 사용자가 직접 선택한다.

다음 단계는 명확하다.

눈 → 시선 방향 → 자동 선택 → LOCK

즉,

“사용자가 보는 대상을 시스템이 먼저 선택하는 단계”

이 단계에 도달하면
진짜 JARVIS에 가까워진다.

---

 

이 프로젝트를 진행하면서 느낀 가장 큰 변화는 이 프로젝트를 진행하면서 문제를 바라보는 관점이었다.

앞으로는 단순히 기능을 하나씩 구현하는 것을 넘어, 

전체 구조를 먼저 설계하고 그 위에 필요한 기술을 쌓아가는 

탑다운(top-down) 방식으로 접근해보려고 한다.

물론, 기본적인 개념과 기초 지식을 탄탄하게 다지는 과정 또한 

함께 병행할 계획이다.

결국 중요한 것은 

설계 중심으로 접근하되, 기본기를 놓치지 않는 것이다.