VisualLang

프로젝트/팀 기본정보

팀명: 서브웨이
프로젝트명: VisualLang
GitHub 저장소: https://github.com/g00hyun/okky-vibe

제품 링크 또는 실행 방법

https://okky-vibe.vercel.app

문제 정의 (Problem)

언어 학습 시 단순 번역에 그치지 않고, 문장의 의미를 직관적으로 시각화하여 연상 기억을 돕는 방법이 없었습니다. 기존 플래시카드 앱들은 정적 이미지에 의존하거나, AI 이미지 생성을 별도 절차로 요구하여 학습 몰입을 방해했습니다.

해결 방식 (Solution)

사용자가 입력한 문장을 Google Gemini LLM이 시각적 의미 단위(VSU)로 분해하고, 각 단위에 대해 이미지 생성 API를 Promise.all로 병렬 호출하여 플래시카드 캐러셀로 즉시 제공합니다. SSE 스트리밍으로 첫 VSU 완성 즉시 이미지 요청을 시작해 지연을 최소화하고, Graceful Degradation으로 이미지 생성 실패 시 플레이스홀더를 표시합니다.

한 줄 소개

입력 한 번으로 다국어 문장이 AI 생성 이미지 플래시카드로 변환되는 시각적 언어 학습 서비스

데모 설명 (3분 이내 기준)

메인 화면에서 학습할 문장을 입력하면 (예: 'Time flies like an arrow'), Gemini LLM이 문장을 3~4개의 시각적 의미 단위로 분해하고, 각 단위에 맞는 이미지를 병렬 생성합니다. 생성이 완료되면 이미지+텍스트 플래시카드 캐러셀이 표시됩니다. 화면에는 입력창 위로 추천 문장들이 비눗방울처럼 떠오르는 FloatingBubbles UI도 포함됩니다.

팀 소개 및 역할

jeongjihun: Full Stack (FE/BE/AI Integration)

기술 스택

Framework: Next.js 15+ (App Router, Turbopack), React 19, TypeScript 5 (strict)
Styling: Tailwind CSS 4, Glassmorphism 디자인
AI/LLM: Google Gemini API (VSU 분해), Image Generation API (병렬 이미지 생성)
최적화: Promise.all 병렬 처리, SSE 스트리밍, Skeleton UI
Deployment: Vercel

실행/검증 방법

git clone https://github.com/g00hyun/okky-vibe
cd okky-vibe-web
npm install
.env.local 에 GEMINI_API_KEY, IMAGE_GEN_API_KEY 설정
npm run dev → http://localhost:3000