투명한 AI 윈도우 구축: Gemini API와 함께한 나의 여정

Source: Dev.to

Introduction

저는 언제나 공상 과학 영화에서 보는 미래형 인터페이스에 매료되었습니다. 이 프로젝트는 멋진 외관을 제공할 뿐만 아니라 웹캠을 실시간 배경 화면으로 바꾸고, AI가 구동하는 동적 유리‑모피즘 웹 UI를 만들겠다는 비전에서 시작되었습니다.

The “Why”

주된 목표는 멀티모달 AI, 특히 Google의 Gemini API의 기능을 실험하고 이를 상황 인식 인터페이스에 어떻게 통합할 수 있는지 탐구하는 것이었습니다. 웹캠을 통해 보는 내용에 따라 반응하고 정보를 제공하는 UI를 만들 수 있는지 확인하고 싶었습니다.

The “How” (Tech Stack)

• Google Gemini API: AI 기반 실시간 분석 및 응답을 담당합니다.
• Vanilla JavaScript: 웹캠 피드, UI 상호작용, Gemini API와의 통신을 처리합니다. 동적 프롬프트와 컨텍스트 주입이 AI 모드 전환의 핵심이었습니다.
• Tailwind CSS & Modern CSS: 유리‑모피즘 UI를 스타일링하고 반응형을 보장합니다.
• BroadcastChannel API: 창의 상태와 웹캠 피드를 여러 브라우저 탭/창에 동기화합니다.

Key Features

• Transparent Window: 웹캠 실시간 피드를 배경으로 하는 투명 오버레이 역할을 합니다.
• Cross‑Tab Syncing: BroadcastChannel API를 사용해 웹캠 피드와 UI 상태를 서로 다른 브라우저 탭 간에 동기화합니다.
• AI Modes: 통합된 Gemini AI가 웹캠 피드에 기반해 다양한 상호작용 모드를 제공합니다. 예를 들어 Futuristic HUD는 유용한 정보를 제공하고, Snarky Critic은 유머러스한 논평을 제공합니다.
• 웹캠 피드 확대 및 위치 조정을 위한 UI 요소 조절 가능.

Lessons Learned

이 프로젝트를 통해 멀티모달 모델인 Gemini의 다재다능함을 깊이 이해하게 되었습니다. 선택한 AI 모드에 따라 프롬프트를 동적으로 구성하고 컨텍스트를 주입하는 것이 다양한 상황에 맞는 적절한 응답을 얻는 데 핵심이었습니다. 또한 웹 기술을 결합해 진정으로 인터랙티브하고 새로운 사용자 경험을 만들 수 있음을 보여주었습니다.