전체 아키텍처 설계 개요
1. 백엔드 핵심 구성 요소 (Express 기반)
AI 쿼리 인터페이스
app.post('/api/query', async (req, res) => {
const { prompt, allowedFields } = req.body;
// AI 프롬프트 생성기
const contextPrompt = buildQueryPrompt({
schema: await fetchTableSchema(),
fields: allowedFields,
userRequest: prompt
});
// 외부 AI 엔진 호출
const rawResponse = await callLLM(contextPrompt);
const structuredQuery = parseAndValidate(rawResponse);
// 안전한 쿼리 실행
const result = await executeQuery(structuredQuery.sql);
res.json(transformResponse(result, structuredQuery.mapping));
});
- 자연어 이해 기반 SQL 생성: 사용자의 비정형 요청을 구조화된 쿼리로 변환
- 입력 필터링 메커니즘: 허용된 필드 목록(whitelist) 기반으로 AI 출력 제한
- 자동 매핑 시스템: 데이터베이스 컬럼명(snake_case)과 프론트엔드 필드(camelCase) 간 자동 변환
실시간 데이터 샘플 생성기
function generateOrderVolume() {
// 산업별 특성 반영 로그 정규 분포
const base = Math.max(1, Math.floor(Math.random() * 100));
const peakFactor = isPeakSeason() ? 2.5 : 1;
return Math.floor(base * peakFactor);
}
function generateTimeline() {
// 비즈니스 프로세스 시간 체인 생성
const stages = ['접수', '처리중', '출고'];
return stages.reduce((acc, stage, idx) => ({
...acc,
[stage]: new Date(Date.now() - (stages.length - idx) * 3600000)
}), {});
}
- 현실감 있는 데이터 패턴: 단순 난수 대신 통계 모델 기반 샘플 생성
- 비즈니스 흐름 일관성: 시간 순서 및 상태 전이 규칙 준수
2. 프론트엔드 렌더링 엔진 (Vue + Grid Framework)
다이나믹 헤더 렌더러
const createNestedHeaders = (dimensions, metrics) => {
return dimensions.map(dim => ({
title: dim.label,
children: metrics.map(met => ({
field: `${dim.key}.${met.key}`,
formatter: met.type === 'currency' ? formatCurrency : null
}))
}));
};
- 계층형 헤더 지원: 다차원 분석을 위한 중첩 가능한 컬럼 구조
- 데이터 타입 자동 감지: 수치형/카테고리형 필드에 따른 적절한 표시 방식 적용
- 실시간 집계 계산: 스크롤 없이 그룹 별 합계, 평균 제공
차트 연동 시스템
const syncVisualization = (gridData, config) => {
chartInstances.forEach(chart => {
chart.update({
source: extractDimensions(gridData, config.axes),
measure: config.metric
});
});
};
- 양방향 동기화: 테이블 선택 영역이 차트에 실시간 반영
- 드릴다운 탐색: 클릭을 통한 상세 데이터 계층 이동 기능
시스템 아키텍처 원칙
1. 하이브리드 쿼리 전략
POST /api/query → AI 기반 동적 SQL 생성
GET /api/reports/:id → 사전 정의된 복잡 쿼리 실행
- AI와 정형 쿼리를 병행 운영하여 유연성과 성능 균형
- 분석용 API 게이트웨이로서의 역할 수행
2. 지능형 처리 파이프라인
// AI 입력 문맥 생성
function buildQueryPrompt({ schema, fields, userRequest }) {
return `
다음 스키마 정보를 기반으로 SQL을 생성하세요:
- 허용 필드: ${fields.join(', ')}
- 요청 내용: "${userRequest}"
- 형식: { sql: "...", mapping: { db_col: 'uiLabel' } }
`;
}
- 제약 기반 프롬프트 엔지니어링: 출력 형식과 허용 범위를 명시적으로 정의
- 직접 실행 아키텍처: 중간 변환 단계 최소화로 응답 속도 향상
3. 데이터 모델 설계
// 핵심 도메인 모델 고정
const DOMAIN_MODELS = ['product', 'customer', 'order_log'];
- 폐쇄형 데이터 모델: 분석 범위를 명확히 제한하여 안정성 확보
- 런타임 스키마 검증: 각 요청 시점에 실제 테이블 구조 확인
4. 보안 및 안정성 설계
// 필드 접근 제어
if (!allowedFields.includes(userRequestedField)) {
throw new AccessDeniedError();
}
// 컬럼명 변환 미들웨어
app.use('/api', (req, res, next) => {
res.locals.transform = (rows) => camelCaseKeys(rows);
next();
});
- 동적 접근 제어: 클라이언트 요청에 포함된 필드 리스트 기반 권한 검사
- 투명한 데이터 변환: 비즈니스 로직에서 네이밍 컨벤션 문제 분리
5. 기술적 타협점
- SQL 인젝션 방어 미구현: 초기 버전에서는 AI의 출력 신뢰도에 의존
- 단순 연결 관리: 커넥션 풀링 미사용으로 코드 단순화
6. 확장성 설계
// 수동 SQL 오버라이드 기능
if (req.body.customSql && isAdmin(req)) {
query = req.body.customSql;
}
- 관리자 전용 우회 경로: 복잡한 분석 쿼리 수동 입력 가능
- 테스트 데이터 생성 엔드포인트: 부하 테스트 및 시나리오 검증용
7. 핵심 혁신 포인트
- 컨텍스트 기반 프롬프트 생성: 실시간 스키마 정보를 활용한 정밀한 AI 유도
- 자동 매핑 계층: 프론트엔드가 DB 스키마 변화에 무감각하게 작동
설계 사고와 코드 구조 매핑
| 코드 요소 |
설계 철학 |
| 미들웨어 체인 |
관심사 분리: 데이터 변환 로직을 라우트 핸들러 외부로 이동 |
| JOIN 쿼리 템플릿 |
AI 한계 보완: 복잡한 관계 조인은 사전 정의하여 정확도 확보 |
| 지수 분포 데이터 생성 |
테스트 데이터의 현실성 강화를 통한 유효성 검증 용이 |
| snake_case ↔ camelCase 변환 |
팀 간 컨벤션 충돌 방지 및 통합 효율화 |
| CRUD 전체 지원 |
분석 기능의 기반이 되는 데이터 관리 완전성 확보 |
향후 진화 방향
- 쿼리 검증 계층 추가:
function validateQuery(sql) {
if (sql.toUpperCase().includes('DROP')) {
throw new SecurityViolation('금지된 DDL 문');
}
}
- 모델 파라미터 튜닝:
const response = await fetch('/v1/chat', {
body: JSON.stringify({
model: 'deepseek',
temperature: 0.3,
frequency_penalty: 0.8
})
});
- 동적 스키마 탐지:
const tables = await db.execute('SHOW TABLES LIKE "report_%"');
현재 구현 기능
- AI 기반 분석
- 자연어 → SQL 변환
- 동적 필드 맵핑
- 기본 시각화 프레임워크
- 그리드 기능
- 푸터 기반 통계 집계
- CSV 형식 데이터 내보내기
차기 개발 예정 기능
- 시각화 확장
- 그리드 고급 기능
- 수평 그룹화 중첩
- 컬럼 설정 UI 컴포넌트
- 헤더 포함 전체 내보내기
- 동적 평균값 계산 강화
장기 로드맵
- 데이터 인텔리전스: 필드 결합 분석, 다차원 평균 계산
- 표시 향상: 고급 헤더 머지, 자동 열 너비 조정
- 특수 컴포넌트: 병합 항목 분석기, 동적 필터 생성기
- 시스템 확장: 사용자 정의 뷰 템플릿, 주기적 스냅샷