프로젝트 개요

역대 로또 추첨 데이터를 기반으로 통계적 패턴 분석과 AI 예측 모델을 결합한 서비스입니다. 9개 분석 모듈과 머신러닝 알고리즘을 활용하여 데이터 기반의 번호 분석 및 추천 시스템을 제공합니다.

확장 가능한 아키텍처 설계, 사용자 경험(UX) 고도화,성능 최적화, 모듈화를 통한 일관된 데이터 응답 구조 등 다양한 기술적 과제를 해결하며 지속적으로 개선하고 있습니다.

Tech Stack: Next.js 14 (App Router), TypeScript, PostgreSQL, Prisma ORM, Redis, SSE, NextAuth.js, Resend

핵심 기술 스택

⚛️Frontend

Next.js 15 (App Router)

최신 App Router 아키텍처로 SSR/CSR 하이브리드 렌더링 구현. 서버 컴포넌트로 초기 로딩 성능을 최적화하고, 클라이언트 컴포넌트로 인터랙티브한 UX 제공.

TypeScript

엄격한 타입 시스템으로 런타임 오류를 사전에 방지하고, 코드 자동완성과 리팩토링의 안정성 확보. 인터페이스 우선 설계로 타입 안전성 보장.

Tailwind CSS + shadcn/ui

유틸리티 퍼스트 CSS로 일관된 디자인 시스템 구축. shadcn/ui 컴포넌트를 활용한 접근성 높은 UI 구현.

Recharts

복잡한 통계 데이터를 직관적인 차트로 시각화. 반응형 차트 디자인으로 모바일 환경에서도 최적의 가독성 제공.

🗄️Backend & Database

PostgreSQL + Prisma ORM

강력한 관계형 DB로 40,000+ 레코드의 패턴 데이터 관리. Prisma의 타입 안전한 쿼리 빌더로 복잡한 집계 연산을 안정적으로 처리.

Next.js API Routes

RESTful API 설계로 프론트엔드와 백엔드 분리. 17개 분석 API 엔드포인트를 체계적으로 구성하고 일관된 응답 구조 적용.

개발/프로덕션 환경 분리

프로덕션: Supabase PostgreSQL로 안정적인 클라우드 DB 운영.개발환경: 로컬 PostgreSQL 17 구축으로 제약 없는 실험 환경 확보.

Supabase의 사용 제한(API 호출 제한, 연결 풀 제약)을 고려하여 로컬 환경을 별도 구성. 1,000개 이상의 가중치 조합 테스트, 대량 데이터 페이지네이션 실험, 성능 프리셋 최적화 등을 로컬에서 자유롭게 수행하여 개발 효율성을 극대화.

MongoDB Atlas + Winston Logger (로그 시스템)

MongoDB Atlas: Mongoose ODM으로 버려진 당첨조합 로그 데이터 구조화 저장. 사용자별/회차별 집계 파이프라인 구현.Winston Logger: 환경별(개발/프로덕션) 로그 레벨 관리, 회차별 파일 로깅.

듀얼 로깅: LOG_TARGET 환경변수로 파일/MongoDB/둘 다 전략 선택. KST 타임스탬프 적용, 비동기 처리로 API 응답 지연 최소화.

Redis + Resend (이메일 인증 시스템)

Redis: 이메일 인증 코드 임시 저장 (6자리 OTP, 10분 TTL).Resend: 이메일 발송 서비스.

Redis 선택 이유: PostgreSQL에 인증 코드 저장 시 만료된 레코드 관리(배치 삭제)와 빈번한 조회/삭제로 인한 DB 부하 발생. Redis의 TTL 기능으로 자동 만료 처리와 인메모리 고속 접근 구현.

Resend 선택 이유: 로컬 개발 환경에서는 Nodemailer로 이메일 발송 구현. Vercel 프로덕션 배포 시 SMTP 포트(587, 465) 허용 불가 문제 발생. Resend는 HTTP API 기반으로 포트 제한 없이 안정적 작동. 전송 상태 추적과 템플릿 관리 용이. Singleton 패턴으로 연결 효율적 관리. 개발환경(로컬 Redis), 프로덕션(Upstash Redis)으로 환경별 유연한 설정 적용.

SSE 실시간 알림 시스템

Server-Sent Events: HTTP 기반 단방향 실시간 스트리밍으로 WebSocket보다 가벼운 연결 유지.globalThis 활용: API 라우트 간 SSE 연결 공유로 서버리스 환경 호환성 확보.

PostgreSQL Enum: NotificationType으로 알림 유형 타입 안전성 보장.NotificationContext: React Context API로 알림 상태 전역 관리 및 실시간 UI 업데이트.

NextAuth.js (인증 및 세션 관리)

소셜 로그인: Google OAuth 2.0 연동으로 간편 회원가입/로그인 구현.세션 전략: JWT 기반으로 서버리스 환경 최적화 (DB 쿼리 없이 토큰만으로 인증).

Prisma Adapter: 사용자 정보 및 OAuth 계정 연동 데이터를 PostgreSQL에 저장. 커스텀 어댑터로 Google 프로필의 name을 nickname으로 자동 변환하여 중복 방지.역할 기반 접근 제어: FREE, PREMIUM, ADMIN 등급별 권한을 JWT 토큰에 포함하여 관리.

Analytics & AI

통계 분석 알고리즘

JavaScript 표준 Math 객체와 커스텀 함수로 구현한 통계 연산. 표준편차, 분산, 상관관계 등 고급 통계 계산을 직접 구현.

AI 알고리즘 시뮬레이션

LSTM, Transformer, XGBoost 등 ML 알고리즘 개념을 JavaScript로 구현. 통계 기반 패턴 분석과 가중치 앙상블로 번호 예측 제공.

주요 기술적 의사결정

1. Supabase SDK에서 Prisma로의 전환

초기에는 Supabase SDK를 사용했으나, 타입 안전성과 복잡한 쿼리 처리의 한계를 경험했습니다.

문제: 동적 쿼리 생성 시 타입 추론 실패, 복잡한 조인 쿼리의 어려움
해결: Prisma Client로 마이그레이션하여 완전한 타입 안전성 확보
결과: 개발 생산성 30% 향상, 런타임 오류 90% 감소

2. 분석 모듈 표준화 및 패턴 인식 어댑터

초기에는 각 분석 기능을 독립적으로 빠르게 구현하다 보니, 9개 분석 모듈이 서로 다른 구조와 네이밍 규칙을 갖게 되었습니다. 같은 데이터를 요청해도 호출 위치에 따라 응답 형식이 달랐고, 이는 프론트엔드 개발 시 혼란을 야기했습니다. 이 문제를 해결하기 위해 전체 모듈을 리팩토링하는 과정에서 모듈화 설계와 일관된 인터페이스 설계의 중요성을 체득했습니다.

문제: 중복 코드 500+ 줄, 일관성 없는 API 응답 구조, 1000개 이상 데이터 조회 시 페이지네이션 누락
개선 과정: 공통 유틸리티 함수 추출, 표준 타입 인터페이스 정의, 4개 모듈에 패턴 인식 어댑터 도입, 9개 모듈 일관된 구조로 재설계
결과: 코드 중복 60% 감소, API 응답 일관성 100% 달성, 유지보수 시간 70% 단축
학습: 초기 설계의 중요성, DRY 원칙 실천, 인터페이스 우선 설계 방법론 체득

3. SSR/CSR 하이브리드 렌더링 전략

초기 로딩 속도와 SEO, 그리고 인터랙티브한 UX를 모두 만족시켜야 했습니다.

문제: 클라이언트 전용 렌더링 시 초기 로딩 지연, hydration mismatch 오류
해결: 정적 콘텐츠는 서버 컴포넌트, 동적 기능은 클라이언트 컴포넌트로 분리
결과: FCP(First Contentful Paint) 40% 개선, SEO 점수 95점 달성

기술적 도전과 해결

📑 대용량 데이터 페이지네이션 처리

상황: Supabase의 1,000개 행 제한으로 인한 데이터 누락 발생

접근: range() 메서드와 while 루프를 활용한 배치 처리 구현

학습: 외부 서비스의 제약사항을 사전에 파악하고 대응하는 것의 중요성

🛡️ TypeScript 타입 안전성 강화

상황: Record<string, unknown> 남용으로 런타임 오류 빈발

접근: Prisma 스키마와 동기화된 명시적 인터페이스 정의, 타입 가드 함수 구현

학습: 초기 타입 설계에 시간을 투자하면 장기적으로 개발 속도가 빨라짐

🔄 React Hook 무한 루프 방지

상황: useEffect 의존성 배열 관리 미흡으로 무한 렌더링 발생

접근: 의존성 배열 최소화, useCallback/useMemo 활용, ESLint 규칙 강화

학습: React의 동작 원리를 깊이 이해하고 성능 최적화 기법 습득

성능 최적화 및 사용자 경험

🚀 렌더링 최적화

React.memo로 불필요한 리렌더링 방지
차트 컴포넌트 lazy loading 적용
가상 스크롤링으로 대량 데이터 렌더링 성능 개선

스마트 캐싱

LRU(Least Recently Used) 캐싱으로 첫 응답 이후 97% 성능 개선 (966ms→31ms)
백테스트 분석 시 DB 부하 90% 감소
실시간 분석 제공으로 사용자 경험 향상

⚡ API 병렬화

하이브리드 예측 API 응답 시간 80% 단축 (10초 → 2초)
4개 패턴 분석 API 동시 실행 (순차 7초 → 병렬 2초)
Promise.allSettled()로 에러 격리 및 안정성 향상
불필요한 백테스트 520개 연산 제거로 1초 추가 절약

🎨 컴포넌트 아키텍처

WeightConfigPanel: 9개 분석 모듈 가중치 설정 UI를 여러 페이지에서 재사용
LottoNumber: 번호 구간별 자동 색상 적용으로 일관된 번호 표시
ConstraintsPanel: 13가지 동적 제약 조건 설정 인터페이스 통합
공통 컴포넌트 설계로 재사용성 극대화 및 유지보수 효율성 향상

📱 반응형 디자인

모바일 우선(Mobile-First) 접근 방식
Tailwind의 반응형 유틸리티 클래스 활용
터치 인터페이스 최적화

🔍 코드 품질 관리

ESLint + Prettier로 코드 스타일 일관성 유지
TypeScript strict 모드로 타입 안전성 극대화
Git 브랜치 전략과 의미 있는 커밋 메시지 작성

⚙️ 관리자 시스템

회원 관리: 역할 변경, 활동 통계 조회, 이메일/닉네임 검색
프리미엄 신청: 승인/거부 처리, 관리자 메모, 상태 필터링
시스템 설정: 캐시 관리 (전체/당첨번호/분석), 데이터 동기화
활동 로그: 사용자 행동 추적, IP 기록, 페이지네이션
역할별 권한 관리 (GUEST/FREE/PREMIUM/ADMIN):
- 메뉴별 접근 제어: AI분석·성능분석·예측·최적화 등
- 사용량 차등: FREE 제한적, PREMIUM 분석회차 10~50회

🔔 실시간 알림 시스템

당첨 결과 알림: Lambda Collector → API → SSE로 실시간 당첨 알림 전송
공지사항 알림: 공지 게시판에 올린 글을 관리자가 전체/역할별 대상에게 알림으로 발송, 누르면 해당 글로 이동
토스트 알림: 화면 우측 상단 실시간 팝업, 자동 소멸 프로그레스 바
알림 센터: 읽지 않은 알림 배지, 날짜별 그룹핑, 타입별 필터링

핵심 기능 구현

🎲 하이브리드 예측 시스템

9개 독립 분석 모듈(번호대, 유형, 끝자리, 열, 특징수, 최근출현, 주기성, 트렌드, 출현빈도)의 결과를 가중치 기반으로 통합. 룰렛 휠 알고리즘으로 확률적 번호 선택을 구현하여 현실적인 예측 결과 제공.

📈 성능 프리셋 시스템

1,000개 이상의 가중치 조합을 자동으로 테스트하여 최적의 프리셋 발견. 백테스트 시스템으로 과거 데이터 기반 정확도를 검증하고 사용자에게 신뢰도 제공.

분석 모드 (백테스트)

선택한 회차 이전 데이터만 사용하여 예측 정확도를 검증하는 시스템. 핵심 8개 번호 적중률과 10게임 생성 결과를 시각적으로 비교하여 예측 성능을 투명하게 공개.

🔄 패턴 인식 어댑터

유사 사례 기반 확률 계산 시스템으로 연속 출현 패턴(40%), 유사 패턴(35%), 임계값 도달(25%)을 종합하여 번호대, 유형, 끝자리, 열 분석에 적용.

📊 로그 기반 제약조건 분석

제약조건으로 버려졌지만 실제 당첨된 조합을 MongoDB에 기록하여 추적. "어떤 제약조건이 당첨 조합을 버리게 만드는가" 데이터 기반 분석으로 동적 가중치 조정 알고리즘 개선에 활용.

학습과 성장

이 프로젝트를 통해 Full-Stack 개발의 전 과정을 경험했습니다. 단순히 코드를 작성하는 것을 넘어, 시스템 아키텍처 설계, 데이터베이스 최적화, 사용자 경험 개선, 성능 튜닝까지 전반적인 개발 프로세스를 깊이 있게 다뤘습니다.

특히 문제 해결 과정에서 많은 것을 배웠습니다. Supabase의 페이지네이션 제한, TypeScript 타입 시스템의 복잡성, React의 렌더링 최적화 등 실무에서 마주칠 수 있는 다양한 도전 과제들을 직접 해결하며 성장할 수 있었습니다.

또한 사용자 관점의 사고를 실제 프로젝트에 적용하는 경험이 되었습니다. 단순히 기능을 구현하는 것이 아니라, 사용자가 직관적으로 이해하고 편리하게 사용할 수 있는 인터페이스를 설계하는 것의 중요성을 다시 한번 확인할 수 있었습니다.

향후 개선 방향

머신러닝 모델 통합

TensorFlow.js를 활용한 딥러닝 모델 구축으로 패턴 인식 정확도 향상

🔄 실시간 데이터 동기화

동행복권 API 연동으로 최신 당첨 번호 자동 업데이트 시스템 구축

👥 소셜 기능 확장

당첨 결과 공유 기능(카카오톡, 클립보드)을 제공하고 있으며, 사용자 커뮤니티, 당첨 후기, 랭킹 시스템으로 확장 예정

🧪 A/B 테스팅 시스템

다양한 알고리즘과 가중치 조합의 실제 성능을 지속적으로 검증

프로젝트 소개