서비스 목표

역할과 범위

• Full Stack Development: 프론트엔드(React)부터 백엔드(Spring Boot)까지 전 과정 1인 개발
• AI Integration: Google Gemini API를 활용한 클라이언트 사이드 튜터링 로직 설계 및 구현
• System Architecture: 확장성을 고려한 백엔드 멀티 모듈 구성 및 프론트엔드 컴포넌트 시스템 설계

1. Client-Side AI Orchestration (Serverless AI)

• Zero-Latency: 사용자의 브라우저에서 직접 Gemini API를 호출하여, 네트워크 홉(Hop)을 최소화하고 즉각적인 피드백을 제공합니다.
• Context Management: 데이터베이스 스키마(Schema) 정보와 사용자의 쿼리(Query)를 프롬프트 컨텍스트에 효율적으로 주입하여, AI가 마치 실제 DB 구조를 아는 것처럼 정확한 답변을 생성하도록 유도했습니다.
• Security: (Note: 프로덕션 환경에서는 Proxy 서버를 통한 호출로 전환 예정이나, 현재 데모 단계에서는 빠른 프로토타이핑을 위해 클라이언트 직접 호출 방식을 채택했습니다.)

1// AiTutorView.tsx (Simplified)
2const genAI = new GoogleGenAI({ apiKey });
3const model = genAI.getGenerativeModel({ model: "gemini-3-pro-preview" });
4
5const prompt = `
6  Context: ${schemaContext}
7  User Query: ${userQuery}
8  Task: Explain this query and find errors.
9`;
10
11const result = await model.generateContent(prompt);

2. Modern Frontend Architecture

• Component Driven Development: SqlEditor, AiTutorView, ChatInterface 등 기능 단위로 컴포넌트를 분리하여 재사용성을 높였습니다.
• Radix UI & Tailwind: 접근성(Accessibility)이 보장된 Headless UI 라이브러리인 Radix UI를 기반으로, Tailwind CSS를 사용하여 일관되면서도 커스터마이징 가능한 ZQL Design System​을 구축했습니다.
• Performance: React Query를 도입하여 비동기 데이터 상태를 관리하고, 불필요한 리렌더링을 방지했습니다.

3. Spring Boot Multi-Module (Domain-Driven Design)

• api-domain: 외부 의존성이 배제된 순수 비즈니스 로직 및 엔티티
• api-application: 유스케이스(Use Case) 및 서비스 흐름 제어
• api-datasource: 데이터베이스 구현체 (JPA 등)
• api-container: 실제 실행 가능한 Spring Boot 애플리케이션

4. Code Quality Automation

• Spotless: Java 및 Kotlin 코드에 대해 저장 시점에 자동으로 Google Style Guide 포맷팅을 적용하여 일관된 코드 스타일을 강제했습니다.
• TypeScript Strict Mode: 프론트엔드 전반에 엄격한 타입 체크를 적용하여 런타임 오류를 최소화했습니다.