플러스프로젝트 배경
**1) 문제점** 보험 FA는 여러 보험사 상품을 실시간으로 비교하고 고객 포트폴리오를 관리해야 하지만, 범용 SaaS 템플릿으로는 이 업무에 필요한 정보 밀도·신뢰감·데이터 시각화를 재현하기 어려웠습니다. **2) 프로젝트 목표** 인증부터 상품 비교·상담까지 FA의 실제 업무 흐름을 하나의 일관된 UI로 설계·구현하는 것이 목표였습니다. **3) 주안점** Figma Make(Design
프로젝트 성과
9개 화면 단일 SPA 구현
인증·대시보드·CRM·상품비교·AI챗봇까지 FA 업무 전반을 9개 화면의 단일 SPA로 설계·구현했다.
shadcn/ui 46종 컴포넌트 기반 구축
Radix 기반 shadcn/ui 컴포넌트 46종을 금융 도메인에 맞게 커스터마이징해 개발 속도와 접근성을 동시에 확보했다.
18개사 상품 비교 테이블 구현
18개 보험사×10개 지표를 sticky 컬럼·정렬·최저가 하이라이트로 한 화면에서 비교 가능하게 구현했다.
실적·상품 비중 데이터 시각화
Recharts로 6개월 실적 Area 차트와 상품 비중 바를 구현해 핵심 지표를 한눈에 파악하게 했다.
핵심 기능
18개 보험사 상품 비교
18개사·10개 지표를 sticky 컬럼과 클릭 정렬, 최저가 하이라이트로 한눈에 비교할 수 있다.
진행 단계
기획 및 정보구조 설계
2026.07.
FA 업무 흐름 분석 후 인증·대시보드·CRM·상품비교 등 9개 화면의 정보구조와 플로우를 설계했다.
프로젝트 상세
**1) 포트폴리오 소개** 보험 설계사(FA)를 위한 B2B 금융 SaaS 웹 UI로, 인증부터 18개 보험사 상품 비교, 고객 CRM, AI 어시스턴트까지 9개 화면을 단일 SPA로 구현했습니다. Design-to-Code 파이프라인과 shadcn/ui 46종 컴포넌트를 기반으로 고밀도 금융 정보를 신뢰감 있게 시각화했습니다. **2) 작업 범위** - 기획: FA 실제 업무 흐름 분석 및 9개
