Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started
한국스마트선거
프로젝트 유형
웹솔루션 - 전자투표 SaaS
날짜
2021년 2Q
역할
자체 개발 및 운영 사업
기술스택
ReactJS, Spring Boot, Spring security, Oracle cloud, AWS
온라인 선거 웹 서비스 개발 및 운영, 선출 투표/안건투표등 다양한 투표 유형 제공, 모바일투표 및 현장투표 제공. 간편한 SaaS방식 투표 개설, 암호화 및 검증 기능을 적용하여 강화된 보안과 안정성을 확보하고 알림톡/MMS 기반 유권자 인증 기술 적용하여 편리한 사용경험 제공합니다.
SMS 인증, 전자서명, 실시간 결과 집계, AI 챗봇 지원 등 엔터프라이즈급 기능을 제공하는 풀스택 시스템입니다.
[시스템 구성]
백엔드 API: Spring Boot 기반 RESTful API
AI 서버: FastAPI 기반 WebSocket 채팅 서비스
사용자 프론트엔드: React 기반 투표 참여 인터페이스
관리자 프론트엔드: React/Next.js 기반 투표 생성 및 관리 시스템
[백엔드 API 서버]
*핵심 기능
투표 관리: 투표 생성, 수정, 삭제, 상태 관리
사용자 관리: 회원가입, 로그인, 프로필 관리
SMS 인증: OTP 기반 본인 인증 (6자리 코드)
전자서명: 디지털 서명 수집 및 검증
파일 관리: 투표 자료 업로드/다운로드
실시간 집계: 투표 결과 실시간 조회
관리 기능: 공지사항, FAQ, 쿠폰 관리
자동화 작업: 스케줄링된 데이터 정리
*기술적 특징
1. 3계층 아키텍처 Controller (REST API) ↓ Service (비즈니스 로직) ↓ Mapper (MyBatis - SQL) ↓ Database (MySQL)
2. 이중 데이터베이스 구성 - votedb (메인): 투표, 사용자, 결과 데이터 - smsdb (SMS): SMS 인증 전용 데이터베이스 - HikariCP 커넥션 풀링 - MyBatis XML 매퍼 기반 SQL 관리
3. 세션 기반 인증 - LoginCheckInterceptor를 통한 커스텀 인증 - 세션 ID 기반 사용자 식별 - 공개/보호 엔드포인트 분리
4. SMS 인증 보안 yaml 코드 유효시간: 5분 재전송 대기시간: 60초 최대 시도 횟수: 5회 계정 잠금 시간: 10분
5. 자동화 작업 - 투표 완료 보고 (매분 실행) - 투표자 목록 삭제 (완료 후 7일) - 투표 데이터 삭제 (완료 후 90일)
[AI 챗봇 서버]
*핵심 기능
실시간 채팅: WebSocket 기반 스트리밍 응답
AI 에이전트: MCP (Model Context Protocol) 기반 에이전트 시스템
문서 검색: RAG (Retrieval-Augmented Generation) 기반 정보 검색
멀티 LLM: OpenAI GPT 및 Anthropic Claude 지원
도구 호출: 문서 검색 도구를 사용한 컨텍스트 강화
*기술적 특징
1. MCP 에이전트 시스템 python MCP Server (mcp_server.py) ↓ 문서 검색 도구 제공 MCP Client (mcp_client.py) - AI 에이전트 ↓ 도구 활용하여 답변 생성 LLM (OpenAI/Anthropic)
2. WebSocket 프로토콜 SOT (Stream of Text) - 텍스트 스트리밍 시작 EOT (End of Text) - 텍스트 스트리밍 종료 SMS (System Message Start) - 시스템 메시지 시작 SME (System Message End) - 시스템 메시지 종료
3. 대화 흐름 사용자 질문 수신 ↓ MCP 에이전트 초기화 ↓ 필요시 문서 검색 (docs/vote-doc.txt) ↓ LLM 응답 생성 (최대 3회 반복) ↓ 스트리밍 방식으로 전송
4. 히스토리 관리 - 최근 2쌍(만 유지 - 메모리 효율성 및 컨텍스트 최적화
[사용자 Web]
*핵심 기능
투표 생성/관리: 전체 CRUD 기능
대시보드: 통계 및 현황 시각화
사용자 관리: 관리자 권한 관리
게시판 관리: 공지사항, 뉴스
결제 통합: 토스페이먼츠 연동
견적 관리: 서비스 견적서 시스템
리포트 생성: PDF 보고서 생성
투표자 관리: CSV/Excel 업로드
*기술적 특징
1. Next.js 기반 SSR/SSG - 서버 사이드 렌더링으로 초기 로딩 속도 개선 - SEO 최적화 - 파일 기반 라우팅 시스템
2. Redux Toolkit 상태 관리
3. RTK Query 데이터 페칭 - 자동 캐싱 및 재검증 - 낙관적 업데이트 지원 - 로딩/에러 상태 자동 관리
4. 컴포넌트 구조 components/ atom/ # 원자 단위 컴포넌트 molecules/ # 복합 컴포넌트 customControl/ # 커스텀 폼 컨트롤
5. 인증 플로우 로그인 → Session ID 저장 (Redux) ↓ AuthProvider가 토큰 유효성 검증 ↓ 모든 API 요청에 자동으로 Session ID 추가 ↓ 로그아웃 시 세션 및 상태 초기화
6. 고급 UI 라이브러리 - Nivo Charts: 데이터 시각화 (바, 파이, 라인 차트) - Framer Motion: 애니메이션 - React Hook Form: 폼 관리 및 검증 - React-PDF: 서버 사이드 PDF 생성 - MUI Data Grid: 고성능 테이블 - Swiper: 캐러셀/슬라이더
[투표자 인터페이스]
*핵심 기능
투표 참여: 진행중인 선거 투표
SMS 인증: OTP 본인 인증
결과 조회: 실시간 투표 결과
전자서명: 서명 수집
투표 이력: 개인 투표 기록
분석: Google Analytics 4 통합
[기술 스택]
*백엔드
언어 Java 17
프레임워크 Spring Boot 2.4.2
ORM MyBatis 2.1.4
데이터베이스 MySQL 5.x
커넥션 풀 HikariCP -
문서화 SpringDoc OpenAPI 1.6.15
유틸리티 Lombok 1.18.32
보안 BCrypt -
*AI 서버 (ai-server)
언어 Python 3.11+
프레임워크 FastAPI 0.108.0+
WebSocket Uvicorn 0.25.0+
LLM OpenAI 1.10.0+
LLM Anthropic (Claude) -
에이전트 MCP/FastMCP 0.9.0+
RAG LangChain 0.1.0+
벡터 DB ChromaDB 0.4.0+
문서 처리 pdfplumber, python-docx -
*프론트엔드
프레임워크 Next.js latest
라이브러리 React latest
상태 관리 Redux Toolkit latest
데이터 페칭 RTK Query latest
UI 프레임워크 Material-UI (MUI) latest
차트 Nivo latest
애니메이션 Framer Motion latest
폼 관리 React Hook Form latest
PDF @react-pdf/renderer 4.3.0
결제 Toss Payments latest
HTTP Axios latest
*프론트엔드 (투표자 모바일웹)
라이브러리 React 19
빌드 도구 Webpack 5
UI 프레임워크 Material-UI (MUI) v7
라우팅 React Router 7.9.3
HTTP Axios 1.12.2
차트 Chart.js 3.9.1
분석 React GA4 2.1.0
[주요 기능]
1. 투표 관리
투표 생성: 제목, 설명, 기간, 선택지 설정
투표 수정: 진행 전/중 수정 가능
투표 삭제: 상태별 삭제 규칙 적용
상태 관리: 작성중 → 대기 → 진행중 → 종료
선택지 관리: 단일/복수 선택, 이미지 첨부
투표자 관리: CSV/Excel 업로드, 개별 추가
2. 사용자 인증
회원가입: 이메일, 휴대폰번호 기반
SMS 인증: 6자리 OTP 코드 (5분 유효)
로그인: 세션 기반 인증
권한 관리: 일반 사용자 / 관리자 구분
3. 투표 참여
본인 인증: SMS OTP 인증
투표 실행: 선택지 선택 및 제출
중복 방지: IP, 사용자 ID 기반 중복 체크
전자서명: 디지털 서명 수집
오프라인 모드: rkey/token 기반 투표
4. 결과 조회
실시간 집계: 투표 결과 실시간 업데이트
통계 시각화: 차트(바, 파이, 라인) 표시
엑셀 다운로드: 투표 결과 엑셀 내보내기
PDF 리포트: 투표 결과 PDF 생성
5. AI 챗봇
질의응답: 선거/투표 관련 질문 답변
문서 검색: RAG 기반 정보 검색
스트리밍 응답: 실시간 답변 생성
컨텍스트 유지: 대화 히스토리 관리
6. 관리 기능
대시보드: 투표 현황, 통계 시각화
공지사항: 뉴스, FAQ, Q&A 관리
쿠폰 관리: 할인 쿠폰 생성 및 관리
견적 관리: 서비스 견적서 시스템
결제 통합: 토스페이먼츠 연동
7. 자동화
완료 보고: 투표 완료 시 외부 API 호출
데이터 정리: 개인정보 보호를 위한 자동 삭제
투표자 목록: 완료 후 7일
투표 데이터: 완료 후 90일
스케줄링: Cron 기반 자동 실행
[기술적 특징 및 장점]
1. 견고한 아키텍처
3계층 분리 (백엔드) Controller (API 엔드포인트) ↓ Service (비즈니스 로직) ↓ Mapper (데이터 액세스) - 명확한 책임 분리 - 유지보수 용이성 - 테스트 가능한 구조
이중 데이터베이스 - 메인 DB와 SMS DB 분리 - 부하 분산 및 성능 최적화 - 독립적인 스케일링 가능
2. 보안
SMS 인증 - 6자리 OTP 코드 - 5분 유효시간 - 재전송 제한 (60초 쿨다운) - 실패 시 계정 잠금 (5회 초과 시 10분)
세션 관리 - 커스텀 인터셉터 기반 인증 - 공개/보호 엔드포인트 분리 - 세션 타임아웃 관리
BCrypt 암호화 - Salt 라운드: 12 - 비밀번호 안전한 해싱
3. 성능 최적화
커넥션 풀링 (HikariCP) - 데이터베이스 연결 재사용 - 빠른 응답 시간 - 리소스 효율적 관리
Redux 캐싱 (RTK Query) - 자동 데이터 캐싱 - 불필요한 API 호출 감소 - 낙관적 업데이트
WebSocket 스트리밍 - 실시간 양방향 통신 - 청크 단위 데이터 전송 - 사용자 경험 개선
Next.js SSR/SSG - 서버 사이드 렌더링 - 정적 사이트 생성 - 초기 로딩 속도 향상 - SEO 최적화
4. 확장성
모듈형 구조 - 기능별 패키지/모듈 분리 - 독립적인 개발 및 배포 - 마이크로서비스 전환 용이
멀티 프론트엔드 - 사용자/관리자 인터페이스 분리 - 각 페르소나에 최적화된 UX - 독립적인 개발 및 배포
MCP 에이전트 시스템 - 확장 가능한 도구 시스템 - 새로운 기능 추가 용이 - LLM 모델 교체 가능
5. 개발자 경험
타입 안정성 - Java 17 타입 시스템 - Lombok으로 보일러플레이트 감소 - MyBatis 타입 매핑
API 문서 자동화 - Swagger/OpenAPI 통합 - 실시간 API 테스트 - 명확한 엔드포인트 문서
상태 관리 - Redux Toolkit으로 간소화 - 타임 트래블 디버깅 - Redux DevTools 지원
빌드 도구 - Webpack 5 (React) - Next.js 내장 빌드 시스템 - 빠른 개발 서버
6. 데이터 관리
MyBatis ORM - 세밀한 SQL 제어 - XML 기반 쿼리 관리 - 복잡한 조인 쿼리 최적화
파일 업로드 - 멀티파트 업로드 지원 - URL 기반 업로드 - 30MB 제한 - 확장자 제한 없음
Excel/CSV 처리 - 투표자 목록 일괄 업로드 - 결과 데이터 엑셀 내보내기 - React-Papaparse 통합
7. 사용자 경험
실시간 업데이트 - WebSocket 실시간 통신 - 투표 결과 즉시 반영 - 스트리밍 AI 응답
반응형 디자인 - Material-UI 기반 UI - 모바일/태블릿/데스크톱 지원 - 디바이스 감지 (react-device-detect)
시각화 - Nivo/Chart.js 차트 라이브러리 - 인터랙티브 그래프 - 색상 커스터마이징
애니메이션 - Framer Motion - React Reveal - 부드러운 전환 효과
8. 통합 기능
결제 통합 - 토스페이먼츠 SDK - 안전한 결제 처리
전자서명 - Canvas 기반 서명 수집 - 서명 이미지 저장 - 검증 기능
Google Analytics - GA4 통합 - 사용자 행동 추적 - 전환율 분석
우편번호 검색 - Daum 우편번호 API - 주소 자동 완성
9. 코드 품질
Lombok - Getter/Setter 자동 생성 - Builder 패턴 - 로깅 어노테이션
React Hook Form - 선언적 폼 관리 - 검증 규칙 - 에러 핸들링
ESLint/Prettier - 코드 스타일 통일 - 자동 포맷팅 - 베스트 프랙티스 적용
10. 모니터링
Spring Actuator - 헬스 체크 엔드포인트 - 메트릭 수집 - 애플리케이션 상태 모니터링
로깅 - Loguru (Python) - SLF4J (Java) - 구조화된 로그



















