React 19TypeScriptTailwind CSSViteDockerNginxAWS EC2
프로젝트 개요
참여 기간2025.12
참여 인원1명 (개인 프로젝트)
담당 역할기획, 디자인, 퍼블리싱, 프론트엔드, 배포
프로젝트 유형프로필 소개 원페이지
페이지 구성
- Header - 프로필 사진 및 소개
- About - 설계사 경력 및 전문 분야
- Cases - 보험 가입 사례 카드
- Contact - 상담 연결 버튼 (카카오톡, 전화, 문자)
- Footer - 회사 정보 및 저작권
프로젝트 배경
지인 보험설계사의 요청으로 시작한 프로젝트입니다. 기존에는 명함만으로 고객에게 정보를 전달했지만, QR코드를 통해 접근할 수 있는 디지털 프로필 페이지가 필요했습니다.
고객이 명함의 QR코드를 스캔하면 설계사의 프로필, 전문 분야, 실제 보험 사례를 한눈에 확인하고, 바로 카카오톡이나 전화로 상담을 요청할 수 있습니다. 실제로 운영 중인 서비스로, 고객 상담 전환율 향상에 기여하고 있습니다.
주요 기능 및 기술
모바일 최적화
명함 QR코드 스캔을 통한 접근을 고려해 모바일 퍼스트로 설계. 터치 친화적 UI와 빠른 로딩 속도 구현.
원페이지 스크롤
부드러운 스크롤 애니메이션과 섹션 기반 네비게이션으로 직관적인 정보 탐색 경험 제공.
상담 연결 기능
카카오톡 1:1 채팅, 전화 연결, 문자 보내기 등 다양한 상담 채널을 원클릭으로 연결.
반응형 디자인
Tailwind CSS를 활용한 PC/태블릿/모바일 완벽 대응. 어떤 기기에서도 일관된 브랜드 경험 제공.
보험 사례 소개
실제 고객 케이스를 카드 형태로 시각화하여 보험의 필요성과 혜택을 직관적으로 전달.
Docker 배포
Docker 컨테이너화로 AWS EC2에 배포. Nginx 리버스 프록시와 SSL 인증서 적용으로 안정적인 서비스 운영.