플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 보험 상품별 요율 산정 공식의 복잡성 — 연령 구간·특약 조합 따라 계산 분기가 다양하며, 이를 단일 함수로 처리하면 유지보수가 어려워지는 리스크가 있어 요율 테이블 JSON 스키마와 전략 패턴으로 분리할 계획입니다. - iOS Safari의 100vh 뷰포트 단위 불일치 — 주소창 표시 여부에 따라 레이아웃이 틀어지는 문제가 있으며, dvh 단위와 CSS 변수 fall
프로젝트 성과
보험료 계산 로직 컴포넌트 분리 설계
비즈니스 로직을 UI 레이어와 완전히 분리하여, 상품 요율 변경 시 계산 모듈만 교체하면 되는 확장 가능한 구조를 설계합니다.
iOS Safari·Android Chrome 크로스 브라우저 대응 구조 구현
dvh 단위와 CSS 변수 조합으로 iOS Safari 뷰포트 버그를 해소하고, 터치 이벤트 영역 최소 기준을 코드 레벨에서 보장하는 스타일 시스템을 구축합니다.
번들 스플리팅 기반 초기 로딩 경로 최적화
Vite 코드 스플리팅과 Critical CSS 인라인화를 조합하여 첫 화면 렌더링에 필요한 리소스만 우선 로드하는 구조를 구현합니다.
자동화 배포 파이프라인 및 SSL 갱신 체계 구성
GitHub Actions + Certbot 자동 갱신 조합으로 수동 개입 없이 HTTPS 환경을 유지하는 CI/CD 파이프라인을 설계합니다.
헬스체크 기반 배포 검증 루틴 설계
배포 완료 직후 자동으로 헬스체크 엔드포인트를 호출하여 서비스 가용성을 확인하는 검증 스크립트를 파이프라인에 포함합니다.
핵심 기능
실시간 보험료 계산 엔진
연령·성별·건강상태 등 사용자 입력값을 기반으로 보험료를 즉시 산출하는 계산 엔진을 설계합니다
진행 단계
코드 구조 분석 및 리팩토링 설계
2026.04
기존 HTML/CSS/JS 코드베이스를 분석하고 컴포넌트 분리 및 모듈 구조를 설계합니다.
프로젝트 상세
1) 포트폴리오 소개 본 프로젝트의 요구사항(실시간 보험료 계산 엔진, 반응형 레이아웃 최적화, 성능 모듈 구성, HTTPS 배포 파이프라인)을 기반으로 직접 구현한 맞춤 데모입니다. HTML/CSS/JS 코드 리팩토링 및 모바일 호환성 확보에 초점을 맞춰 설계합니다. 2) 작업 범위 - 실시간 보험료 계산 엔진: 연령·성별·건강상태 등 사용자 입력값을 기반으로 보험료를 즉시 산출하는 계산 엔진을 설
