실시간 보험료 계산 엔진
입력 조건에 따른 보험료를 실시간으로 산출하는 계산기 구현 데모입니다.
8종
지원 보험 상품
15+
보장 항목
0.3초
계산 응답 시간
B2C
주요 타깃 사용자
보험 가입 정보 입력
정확한 보험료 산출을 위해 아래 정보를 입력해 주세요.
기본 정보
상품 선택
특약 선택
+₩12,400
+₩8,200
+₩3,100
+₩5,800
+₩4,600
+₩7,300
2급
월 납입 보험료 (예상)
87,200원
20년 납 · 종신 보장 · 1억원 기준
기본 보험료
₩62,100
특약 보험료
₩25,200
연간 예상 납부
₩1,046,400
주요 보장 내용
선택 특약 포함
사망 보험금
기본
1억원
암 진단비
기본
2,000만원
뇌졸중 진단비
기본
1,500만원
수술비 (1종~5종)
특약
100~500만원
재해사망 추가
특약
5,000만원
본 계산 결과는 입력하신 조건을 기반으로 한 예상 금액이며, 실제 보험료는 청약 심사 결과에 따라 다를 수 있습니다.
구현 기술 스택
반응형 레이아웃 시스템
PC·태블릿·모바일 3환경을 하나의 코드베이스로 커버하는 반응형 설계 체계를 구현합니다.
4단계
브레이크포인트 체계
iOS / Android
크로스 브라우저 대응
20~25개
재사용 UI 컴포넌트
Desktop · 1280px+
Tablet · 768px
Mobile · 375px
브레이크포인트 시스템
| 구간 | 범위 | 레이아웃 | 주요 변경 |
|---|---|---|---|
| 640px~ | 1열 | 사이드바 숨김 | |
| 768px~ | 2열 | 탭 네비게이션 | |
| 1024px~ | 사이드바 | 계산기 2열 | |
| 1280px~ | 풀 레이아웃 | 통계 4열 |
크로스 브라우저 대응 현황
Chrome (Android)
대응 완료
Safari (iOS)
대응 완료
Firefox
정상 동작
Edge
정상 동작
Samsung Internet
검증 예정
Chrome (PC)
정상 동작
성능 최적화 모듈
Core Web Vitals 기준을 설계 단계부터 고려한 프론트엔드 성능 최적화 구조를 구성합니다.
94
LCP
최대 콘텐츠 렌더링 · 1.2초
96
FID / INP
입력 지연 · 18ms
78
CLS
레이아웃 이동 · 0.08
번들 크기 분석
Vite 최적화 적용
React 런타임
42.3 KB
계산기 로직
16.8 KB
UI 컴포넌트
23.1 KB
Tailwind CSS
11.2 KB
기타 (폰트 제외)
7.4 KB
총 번들 크기
100.8 KB (gzip: 32.4 KB)
최적화 전/후 비교
최적화 전
번들 크기312 KB
LCP3.8초
이미지PNG (미압축)
렌더 블로킹4개 리소스
CSS 미사용62%
최적화 후
번들 크기100.8 KB
LCP1.2초
이미지WebP + Lazy
렌더 블로킹0개
CSS 미사용4%
최적화 구현 체크리스트
코드 스플리팅 적용
Vite 번들러 기반 동적 import로 초기 로드 JS 분리
이미지 WebP 변환 + Lazy Loading
Intersection Observer 기반 지연 로딩 구현
Critical CSS 인라인화
첫 화면 렌더링에 필요한 CSS만 head 인라인 처리
Tree Shaking 적용
미사용 코드 제거로 번들 크기 최소화
useMemo / useCallback 메모이제이션
보험료 계산 결과 캐싱으로 불필요한 재연산 차단
Service Worker 캐시 전략
오프라인 지원 및 정적 리소스 캐싱 (구현 예정)
배포 파이프라인 구성
GitHub Actions CI/CD + SSL 자동 갱신으로 수동 개입 없는 배포 자동화 구조를 설계합니다.
GitHub Actions 파이프라인
✓ 마지막 배포 성공
코드 체크아웃 & 의존성 설치
git checkout + npm ci로 의존성 설치 (캐시 활용)
린트 & 타입 체크
ESLint + TypeScript tsc --noEmit 검증
프로덕션 빌드
Vite build — 코드 스플리팅, 트리 쉐이킹, 압축 포함
서버 배포 & 헬스체크
rsync로 빌드 결과 전송 → Nginx reload → /health 검증
슬랙 알림 발송
배포 결과를 개발팀 채널에 자동 통보
서버 상태 모니터링
Web (Nginx)
CPU12%
메모리284 MB
업타임99.97%
API (Node)
CPU8%
메모리196 MB
응답 시간38ms
DB (Postgres)
연결 수4/20
쿼리/초23
디스크1.2 GB
SSL 인증서 상태
Let's Encrypt · 자동 갱신 활성화
발급 기관Let's Encrypt
유효 기간D-67 남음
자동 갱신활성화
갱신 주기90일 → 60일
최근 배포 로그
14:23:41SUCCESS헬스체크 통과 — /health 200 OK (38ms)
14:23:38INFONginx 설정 재로드 완료 (nginx -s reload)
14:23:25INFO빌드 파일 rsync 완료 — 24개 파일 (100.8 KB)
14:23:18INFOGitHub Actions 배포 스텝 시작 — main 브랜치
14:22:44SUCCESSVite 프로덕션 빌드 완료 — 총 34초
14:22:36INFOTypeScript 타입 체크 통과 — 에러 0개
14:22:28SUCCESSESLint 린트 통과 — 경고 0개
14:22:16INFO의존성 설치 완료 (캐시 HIT) — npm ci 12초