# task-1364.1: InsuRo 사이트 디자인 전체 감사 — Phase 1

**작성자**: 비슈누 (개발4팀장)
**작성일**: 2026-04-03
**작업 유형**: 디자인 감사/분석 (코드 변경 없음)
**분석 팀원**: 사라스바티(프론트엔드), 락슈미(UX/UI), 하누만(테스터)

---

## SCQA

**S**: InsuRo는 React + shadcn/ui + Tailwind CSS 기반 보험 설계사 대상 B2B SaaS로, 44개 페이지 라우트, 50개 이상 UI 컴포넌트, 하이브리드 네비게이션(task-1363.1 구현 완료)을 갖추고 있다. 최근 프리미엄 디자인(골드 배지, Electric Blue 컬러 시스템)이 적용되었으며, premiumOnly 기능에 의도적 미완성 UI를 적용하여 맥스플랜 가입을 유도하는 전략이 운영 중이다.

**C**: 27개 주요 페이지 전수 분석 결과, 디자인 품질 평균 점수가 **6.4/10**으로 프리미엄 SaaS 기대 수준(8.0+)에 미달한다. CSS 변수 완전 준수율 44%, Toast 라이브러리 이중화, 플랜 게이팅 패턴 5종 난립, ErrorBoundary 부재, 모바일 premiumOnly CTA 단절 등 **CRITICAL 6건 + MAJOR 15건**의 UX 이슈가 확인되었다. 또한 태스크 설명의 폰트(Pretendard)와 실제 코드(Inter + Calistoga)가 불일치한다.

**Q**: 현재 디자인 상태를 프리미엄 SaaS 수준으로 업그레이드하기 위한 우선순위와 로드맵은 무엇인가?

**A**: 3단계 로드맵을 제안한다. **즉시(P0)**: 모바일 premiumOnly UpgradeModal 연결(5줄), ErrorBoundary 추가, Toast 단일화, h1 크기 표준화 — 난이도 낮고 임팩트 최대. **단기(P1)**: CRM 색상 시스템화, 플랜 게이팅 단일화, 사이드바 너비 CSS 변수화. **중기(P2)**: 디자인 토큰 시스템 구축, 컴포넌트 사용 표준화(Table/Form/Card 통일). Phase 2(디자인 시스템 정립) 진행 시 이 감사 보고서를 기초 자료로 활용.

---

## 1. 페이지별 현황 분석표

### 디자인 점수 기준
- 색상 일관성 (2점), 타이포그래피 (2점), 컴포넌트 (2점), 간격 (2점), 기타 (2점)

### 점수표 (27개 페이지 + 네비게이션/코어 컴포넌트)

**랜딩/인증 (평균 6.8/10)**
- `Intro.tsx` — **7.5/10** — 하드코딩 색상 2건, font-display 올바르게 사용, Hero CTA 전무
- `Login.tsx` — **6.5/10** — HSL 하드코딩, 블롭 인라인 스타일, 모바일 브랜드 패널 제거
- `Pricing.tsx` — **6.5/10** — `bg-blue-500` 하드코딩(primary 아닌), font-display 적절, FAQ 커스텀 구현

**대시보드 (평균 6.25/10)**
- `Dashboard.tsx` — **7.0/10** — 이모지 아이콘 혼용, font-display 부분 적용
- `CrmDashboard.tsx` — **5.5/10** — STAGE_COLORS HEX 7종, "불러오는 중..." 텍스트 로딩

**AI 마케팅 (평균 6.9/10)**
- `KeywordAnalysis.tsx` — **7.0/10** — 네이티브 table, 로컬 PremiumLocked
- `Generate.tsx` — **5.5/10** — 채널 탭 네이티브 button, 버튼 높이 3종 혼용
- `Contents.tsx` — **8.0/10** — CSS 변수 완전 준수, 가장 일관적

**CRM 4페이지 (평균 5.25/10)**
- `CrmCustomers.tsx` — **5.0/10** — 스테이지 배지 5종 하드코딩, sonner 불일치
- `CrmPipeline.tsx` — **5.0/10** — 칸반 컬럼 배경 7종 하드코딩
- `CrmMessenger.tsx` — **5.5/10** — h2 크기 클래스 없음, yellow-600 하드코딩
- `CrmCustomerDetail.tsx` — **5.5/10** — Card 서브컴포넌트 적절 사용

**시장분석 (평균 5.75/10)**
- `MarketNewsletter.tsx` — **6.0/10** — h1 `text-base`로 비정상 소형, h2와 계층 역전
- `PremiumComparison.tsx` — **5.5/10** — 동일한 h1 역전 문제, ReactMarkdown 코드 완전 중복

**도구 3페이지 (평균 5.33/10)**
- `InsurancePortal.tsx` — **4.5/10** — 30개+ HEX 하드코딩, 인라인 스타일, 최저 점수
- `Calculators.tsx` — **6.5/10** — BMI 결과 색상 5종 하드코딩
- `ExternalSites.tsx` — **5.0/10** — 11개 사이트 HEX 배경, 인라인 스타일

**계정/설정 (평균 7.0/10)**
- `MyPage.tsx` — **6.5/10** — sonner 사용, 이모지 표시, 네이티브 table
- `Settings.tsx` — **7.5/10** — CSS 변수 주 사용, 네이티브 button 다수

**안내 (평균 7.0/10)**
- `HelpGuide.tsx` — **7.5/10** — framer-motion 적절, 네이티브 button TOC
- `ApiGuide.tsx` — **7.0/10** — CSS 변수 준수
- `Notices.tsx` — **6.0/10** — 커뮤니티 탭 3색 하드코딩, 네이티브 button 탭
- `FcpaGuide.tsx` — **7.5/10** — CSS 변수 주 사용

**프리미엄 전용 (평균 8.0/10)**
- `AiOnestop.tsx` — **8.0/10** — CSS 변수 완전 준수, 구조 중복
- `AiAutomation.tsx` — **8.0/10** — 동일

**네비게이션 컴포넌트 (평균 8.5/10)**
- `TopNavBar.tsx` — **8.5/10** — gradient-text 로고, 아이콘 크기 불일치(15px)
- `ContextSubMenu.tsx` — **9.0/10** — CSS 변수 완전 준수, w-[180px] 하드코딩
- `MobileBottomNav.tsx` — **8.5/10** — 아이콘 크기 불일치(18px)
- `PremiumCtaCard.tsx` — **8.0/10** — gradient-border 적절

---

## 2. 디자인 일관성 보고

### 2.1 컬러 팔레트

**CSS 변수 시스템**: `index.css:5-56`에 17개 시멘틱 토큰 정의 (primary=#0052FF Electric Blue)

| 준수 상태 | 파일 수 | 비율 |
|-----------|---------|------|
| 완전 CSS 변수 준수 | 12 | 44% |
| 주로 준수 + 소량 하드코딩 | 7 | 26% |
| 구조적 하드코딩 의존 | 8 | 30% |

**하드코딩 핫스팟 (위험도 높음)**:
- `InsurancePortal.tsx:36-87` — 30개+ 보험사 브랜드 HEX
- `ExternalSites.tsx:19-90` — 11개 사이트 HEX
- `CrmDashboard.tsx:22` — Recharts 차트 7색
- `CrmCustomers.tsx:34-41` — 스테이지 배지 5색
- `CrmPipeline.tsx:13-20` — 칸반 컬럼 배경 7색
- `Pricing.tsx:218,368,373` — `bg-blue-500` (primary 대신)
- `Login.tsx:154,162-175` — HSL 하드코딩, 블롭 인라인 스타일

### 2.2 타이포그래피

**폰트 불일치 발견**:
- 태스크 설명: Pretendard
- 실제 `index.css:88`: `font-family: "Inter", "Noto Sans KR", system-ui, sans-serif`
- 헤딩 `index.css:92-94`: `font-family: "Calistoga", "Noto Sans KR", Georgia, serif`

**h1 크기 분포 (비표준)**:

| 크기 | 페이지 수 | 파일 |
|------|-----------|------|
| `text-2xl font-bold` | 9 | Dashboard, CrmDashboard, CrmCustomers, CrmPipeline, KeywordAnalysis, Generate, Settings, AiOnestop, AiAutomation — **사실상 표준** |
| `text-xl font-bold` | 4 | InsurancePortal, Calculators, ExternalSites, Notices |
| `text-3xl+` | 3 | Intro, Pricing, Login |
| `text-base font-bold` | 2 | MarketNewsletter:130, PremiumComparison:224 — **계층 역전(h2보다 작음)** |

**font-display 사용**: 전역 CSS로 h1-h3에 Calistoga 지정되었으나, 명시적 `.font-display` 클래스 사용은 7개 파일에 불과 (Intro, Login, Dashboard, TopNavBar, HelpGuide, Pricing만)

### 2.3 컴포넌트 스타일

**플랜 게이팅 5종 난립**:

| 패턴 | 위치 |
|------|------|
| `<PlanGuard requiredPlan="pro">` (블러 오버레이) | CrmCustomers.tsx |
| 로컬 `<PremiumLocked>` 컴포넌트 | KeywordAnalysis.tsx:23-50 |
| `<UpgradeModal>` (사이드바 트리거) | DashboardLayout.tsx |
| 커스텀 `checkAccess` async + 조건 렌더링 | PremiumComparison.tsx:47-91 |
| `useUserPlan` + 인라인 Lock UI | AiOnestop, AiAutomation, Calculators |

**Toast 이중화**: `useToast`(7개 파일) vs `sonner`(4개 파일) — UI 포지션/애니메이션/스타일 불일치

**Card 사용 이원화**: `<Card className="p-6">` vs `<Card><CardContent>` 혼용. 또한 `card.tsx` `rounded-lg` vs 커스텀 div `rounded-xl` border-radius 불일치

**Table 컴포넌트**: `table.tsx`에 전체 시스템 정의되어 있으나 pages에서 사용 0건. 모두 raw `<table>` 사용

**Form 시스템**: `form.tsx`에 react-hook-form 통합 시스템 완성되어 있으나 pages에서 거의 미사용. AdminSubscriptions에서 Input 스타일을 raw `<select>`에 복사-붙여넣기

### 2.4 간격/패딩

**max-width 5종 분산**: `max-w-5xl`(3), `max-w-4xl`(4), `max-w-3xl`(2), `max-w-2xl`(2), 없음(9) — 공식 표준 미정의

**사이드바 너비 분리 정의**: `DashboardLayout.tsx:54` `md:ml-[180px]` + `ContextSubMenu.tsx:29` `w-[180px]` — 한 쪽 변경 시 레이아웃 붕괴

### 2.5 아이콘

- **lucide-react 단일 사용**: 일관성 유지됨
- **이모지 혼용**: Dashboard(💼), HelpGuide(DB emoji), Settings(✨🏛), MyPage(✅❌) — OS별 렌더링 차이, 접근성 문제
- **아이콘 크기 불일치**: TopNavBar `size={15}`, ContextSubMenu `size={16}`, MobileBottomNav `size={18}`

---

## 3. UX 문제점 목록 (심각도별)

### CRITICAL (6건)

| # | 문제 | 위치 | 비즈니스 임팩트 |
|---|------|------|----------------|
| 1 | ErrorBoundary 전무 — JS 에러 시 White Screen | `App.tsx` | 앱 전체 크래시, B2B 신뢰도 치명타 |
| 2 | 모바일 premiumOnly 클릭 시 UpgradeModal 미연결 | `MobileBottomNav.tsx:29-37` | 모바일 프리미엄 전환 접점 완전 상실 |
| 3 | PlanUpgradeDialog 결제 버튼 미구현 (toast만) | `PlanUpgradeDialog.tsx:261-264` | 전환 퍼널 마지막 단계 단절 |
| 4 | Intro.tsx Hero CTA 전무 | `Intro.tsx:94-114` | 소개 페이지 이탈 유발 |
| 5 | 전체 40+ 라우트에 단일 Suspense + 제네릭 스피너 | `App.tsx:53-57` | CLS 발생, 로딩/에러 구분 불가 |
| 6 | 전체 앱에 h1 시맨틱 태그 1개만 존재 | `CrmDashboard.tsx:197` | 접근성/SEO 구조 붕괴 |

### MAJOR (15건)

| # | 문제 | 위치 |
|---|------|------|
| 1 | Toast 라이브러리 이중화 (useToast vs sonner) | CRM 4파일 vs 나머지 |
| 2 | h1 크기 표준 부재 (text-base~text-4xl 혼재) | 전체 |
| 3 | 플랜 게이팅 5종 난립 | 전체 |
| 4 | CrmDashboard 로딩: "불러오는 중..." 텍스트 | `CrmDashboard.tsx:190` |
| 5 | Generate 저장/복사 버튼 h-7 (WCAG 터치 타겟 미달) | `Generate.tsx:402-409` |
| 6 | UpgradeModal에 가격 정보 없음 | `UpgradeModal.tsx` |
| 7 | Login 모바일에서 브랜드 패널 완전 제거 | `Login.tsx:152` |
| 8 | Pricing 기능 비교표 모바일 가로 스크롤 | `Pricing.tsx:347` |
| 9 | 가격 정보 MyPage ↔ Pricing 중복 하드코딩 | `MyPage.tsx:318+`, `Pricing.tsx` |
| 10 | CrmDashboard 빈 알림: 이모지만, 다음 액션 없음 | `CrmDashboard.tsx:310` |
| 11 | KeywordAnalysis 빈 결과: 텍스트만, 제안 없음 | `KeywordAnalysis.tsx:211-215` |
| 12 | FloatingGuide Step 1 항상 완료 (진행률 부정확) | `FloatingGuide.tsx` |
| 13 | PremiumCtaCard ArrowRight 기본 숨김 | `PremiumCtaCard.tsx:29-31` |
| 14 | 사회적 증명 완전 부재 | Login, Pricing, UpgradeModal |
| 15 | 긴급성/희소성 신호 없음 | Pricing, UpgradeModal |

### MINOR (8건)

| # | 문제 | 위치 |
|---|------|------|
| 1 | Pricing Pro 플랜 border 색상만으로 강조 | `Pricing.tsx:363-376` |
| 2 | AuthForm 테스트 로그인 버튼 프로덕션 노출 | `AuthForm.tsx:65-79` |
| 3 | Generate 빈 상태: Sparkles 아이콘만, CTA 없음 | `Generate.tsx:426-429` |
| 4 | TopNavBar 플랜 뱃지 모바일 미노출 | `TopNavBar.tsx:139` |
| 5 | ContextSubMenu 섹션 레이블 10px | `ContextSubMenu.tsx:31-34` |
| 6 | Pricing FAQ 열림 애니메이션 없음 | `Pricing.tsx:130-154` |
| 7 | AuthForm 에러 메시지 한/영 혼재 가능성 | `AuthForm.tsx` |
| 8 | 이모지 아이콘 혼용 (OS별 렌더링 차이) | Dashboard, MyPage, Settings |

---

## 4. 의도적 미완성 기능 목록

**중요**: 아래 항목들은 맥스플랜 가입 유도 장치로 의도적으로 미완성 상태를 유지하며, 개선 대상에서 **제외**한다.

| # | 기능 | 위치 | 처리 방식 |
|---|------|------|-----------|
| 1 | AI 원스탑 포스팅 (비프리미엄) | `AiOnestop.tsx:52-76` | Lock 아이콘 + 기능 소개 + 업그레이드 버튼 |
| 2 | AI 포스팅 자동화 (비프리미엄) | `AiAutomation.tsx:52-76` | Lock 아이콘 + 기능 소개 + 업그레이드 버튼 |
| 3 | 사이드바 premiumOnly 메뉴 잠금 | `AppSidebar.tsx:302-319` | `#` href + UpgradeModal + PREMIUM 배지 |
| 4 | ContextSubMenu premiumOnly 흐림 | `ContextSubMenu.tsx:42-57` | 흐린 텍스트 + PREMIUM 배지 |
| 5 | KeywordAnalysis 탭 잠금 (비프리미엄) | `KeywordAnalysis.tsx:220-228` | Lock 아이콘 + "Premium 이상" 안내 |
| 6 | PlanGuard 블러 처리 | `PlanGuard.tsx:71-88` | 콘텐츠 블러 8px + 업그레이드 오버레이 |
| 7 | PremiumCtaCard | `PremiumCtaCard.tsx:9-37` | 비프리미엄 사이드바 하단 CTA 카드 |

**참고 — 실제 미완성 (프리미엄 사용자도 사용 불가)**:
- `AiOnestop.tsx:39-50` — 프리미엄 사용자에게 "현재 개발 중" 표시
- `AiAutomation.tsx:39-50` — 동일
- `KeywordAnalysis.tsx:26-35` — 3개 탭 "로직 개선 중"
- `PlanUpgradeDialog.tsx:260-264` — `// TODO: Stripe 결제 연동`

---

## 5. 개선 우선순위 로드맵 (임팩트 x 난이도)

### P0 — 즉시 처리 (난이도 1-2, 임팩트 4-5)

| 순위 | 항목 | 임팩트 | 난이도 | 점수 | 파일 |
|------|------|--------|--------|------|------|
| 1 | 모바일 premiumOnly → UpgradeModal 연결 | 5 | 1 | 5.00 | `MobileBottomNav.tsx:29` |
| 2 | Intro.tsx Hero CTA 버튼 추가 | 4 | 1 | 4.00 | `Intro.tsx:94` |
| 3 | ErrorBoundary 추가 | 5 | 2 | 2.50 | `App.tsx` |
| 4 | h1 크기 표준화 (`text-2xl font-bold`) | 3 | 1 | 3.00 | MarketNewsletter:130, PremiumComparison:224 |
| 5 | CrmDashboard 로딩 → Skeleton 교체 | 3 | 1 | 3.00 | `CrmDashboard.tsx:190` |
| 6 | `Pricing.tsx` `bg-blue-500` → `bg-primary` | 2 | 1 | 2.00 | `Pricing.tsx:218,368,373` |

### P1 — 단기 처리 (난이도 2-3)

| 순위 | 항목 | 임팩트 | 난이도 | 파일 |
|------|------|--------|--------|------|
| 7 | Toast 라이브러리 단일화 | 3 | 2 | CRM 4파일 |
| 8 | 플랜 게이팅 단일화 (PlanGuard 기준) | 4 | 3 | 5개 패턴 → 1개 |
| 9 | UpgradeModal에 가격 정보 추가 | 4 | 2 | `UpgradeModal.tsx` |
| 10 | 사이드바 너비 CSS 변수화 | 2 | 1 | DashboardLayout, ContextSubMenu |
| 11 | CRM 섹션 색상 시스템화 | 3 | 2 | CrmDashboard, CrmCustomers, CrmPipeline |
| 12 | MarketNewsletter ↔ PremiumComparison 공통 컴포넌트 추출 | 2 | 2 | 2파일 |

### P2 — 중기 처리 (난이도 3-4)

| 순위 | 항목 | 임팩트 | 난이도 | 파일 |
|------|------|--------|--------|------|
| 13 | 디자인 토큰 시스템 구축 (max-w, spacing 표준) | 4 | 4 | tailwind.config.ts |
| 14 | shadcn Table 컴포넌트 전체 적용 | 2 | 3 | KeywordAnalysis, MyPage, AdminSubscriptions |
| 15 | Form 시스템 통합 (react-hook-form) | 3 | 4 | CrmCustomers, AdminOrganizations, AdminSubscriptions |
| 16 | 이모지 아이콘 → lucide-react 교체 | 2 | 2 | Dashboard, MyPage, Settings |
| 17 | InsurancePortal/ExternalSites 색상 CSS 변수화 | 2 | 3 | 2파일 |
| 18 | 라우트별 Skeleton 분리 | 3 | 3 | `App.tsx` |

---

## 6. 프리미엄 SaaS 레퍼런스 격차 분석

### 현대적 SaaS 기대 수준 vs 현재 상태

| 차원 | 프리미엄 SaaS 기준 | InsuRo 현재 | 격차 |
|------|-------------------|-------------|------|
| 디자인 토큰 | CSS 변수 100% + 문서화 | 44% 준수, 30% 하드코딩 | 높음 |
| 컴포넌트 일관성 | 디자인 시스템 기반 단일 패턴 | 5종 게이팅, 2종 Toast, 2종 Card | 높음 |
| 에러/빈 상태 | 일러스트 + 맥락적 CTA | 텍스트만 또는 이모지 | 높음 |
| 로딩 상태 | 페이지별 Skeleton | 단일 스피너 + 텍스트 혼재 | 중간 |
| 반응형 | 모바일 최적화 레이아웃 | 기본 반응형만 (CTA 단절) | 중간 |
| 마이크로인터랙션 | 부드러운 전환 + hover 피드백 | 일부 framer-motion, 대부분 미적용 | 중간 |
| 사회적 증명 | 고객 후기 + 로고월 + 통계 | 완전 부재 | 높음 |
| 온보딩 | 인터랙티브 가이드 + 체크리스트 | FloatingGuide 1개 (진행률 부정확) | 높음 |
| 결제 퍼널 | 원클릭 결제 + 환불 보장 | 미구현 (toast만) | 치명적 |

### CRO 전환 퍼널 진단

```
[신규 방문] → Login.tsx (브랜드 패널 모바일 제거)
     ↓
[소개] → Intro.tsx (CTA 전무 → 이탈)
     ↓
[탐색] → Dashboard/Generate (기능 체험)
     ↓
[프리미엄 관심] → premiumOnly 클릭
     ↓ (데스크탑)                    ↓ (모바일)
UpgradeModal → /pricing     Drawer 닫힘 → 이탈 (연결 끊김)
     ↓
PlanUpgradeDialog → "결제 기능 준비 중" toast → 전환 실패
```

**퍼널 이탈 3대 포인트**: Intro CTA 부재, 모바일 premiumOnly 단절, 결제 미구현

---

## 발견 이슈 및 해결

### 범위 외 미해결 (3건)
1. **폰트 불일치(Pretendard vs Inter+Calistoga)** — 범위 외 사유: 의도적 변경인지 미기록 확인 필요. 제이회장님 확인 후 Phase 2에서 결정
2. **결제 시스템 미연동(Stripe TODO)** — 범위 외 사유: 백엔드 연동 작업 별도 태스크 필요
3. **프리미엄 기능 3건 실제 미구현** — 범위 외 사유: 기능 개발 태스크 별도 관리

---

## 셀프 QC

- [x] 1. 다른 파일 영향: 코드 변경 없음 — 분석 전용 → 영향 없음
- [x] 2. 엣지 케이스: 모바일, 프리미엄/비프리미엄, 관리자, 빈 상태 등 모든 사용자 경로 분석
- [x] 3. 작업 지시 일치: 7개 산출물 모두 충족 (페이지별 분석표, 일관성 보고, UX 문제 목록, 의도적 미완성 목록, 우선순위 로드맵, SaaS 격차 분석, 보고서)
- [x] 4. 에러 처리/보안: N/A (코드 변경 없음)
- [x] 5. 테스트 커버리지: N/A (코드 변경 없음)
- [x] 6. 발견 이슈: 범위 외 3건 사유 명시, 나머지 전수 분류 완료
- [x] 7. 아키텍처 원칙: N/A (분석 전용)
- [x] 8. 인터페이스 변경 문서: N/A (코드 변경 없음)

---

## 산출물

- `/home/jay/workspace/memory/reports/task-1364.1.md` — 본 보고서

---

## 모델 사용 기록

- 팀원: 사라스바티(프론트엔드) / 작업: 27개 페이지 디자인 일관성 전수 분석 / 모델: sonnet / 정당성: -
- 팀원: 락슈미(UX/UI) / 작업: UX 문제점 진단 + CRO 분석 + SaaS 레퍼런스 격차 / 모델: sonnet / 정당성: -
- 팀원: 하누만(테스터) / 작업: premiumOnly 기능 분류 + 컴포넌트 일관성 검증 / 모델: sonnet / 정당성: -