# task-1362.1: InsuRo 메뉴 구조 변경 검토 보고서

**작성자**: 오딘 (개발2팀장)
**작성일**: 2026-04-03
**작업 유형**: 설계 검토 (코드 구현 없음)

---

## SCQA

**S**: InsuRo 좌측 사이드바(`AppSidebar.tsx`)는 일반 유저 기준 7개 섹션 / 23개 메뉴 항목 + 비메뉴 요소(프로필 카드, 플랜 위젯, PREMIUM 배지)로 구성되어 있으며, 관리자 포함 시 37개 항목으로 확장된다. 최근 task-1358.1에서 Pretendard 폰트, 골드 PREMIUM 배지 등 프리미엄 디자인이 적용된 상태이다.

**C**: 제이회장님이 메뉴 항목 수가 많아 시각적으로 불안하다고 판단하여 상단 네비게이션 전환을 검토 요청. 그러나 보험/금융 SaaS 업계 레퍼런스 조사 결과, HubSpot은 상단 네비→사이드바로 역전환(2024.5)했고, NN/G는 10개 이상 메뉴에서 수직 네비를 명시적 권장하며, 보험 전문 솔루션(HawkSoft, AgencyBloc, Applied Epic)은 모두 사이드바를 채택하고 있다.

**Q**: 23개+ 메뉴를 보유한 보험 SaaS에서 상단 네비 전환이 적합한가? 시각적 불안 문제를 해결하면서 사용성을 유지하는 최적 방안은 무엇인가?

**A**: 완전한 상단 전환보다 **옵션 B(하이브리드: 상단 메인 카테고리 4개 + 좌측 컨텍스트 서브메뉴 최대 5개)**를 1순위 추천. 현재 7개 섹션을 4개 도메인으로 재분류하면 좌측 서브메뉴가 항상 5개 이하로 유지되어 시각적 밀도 78% 감소. 기존 사용자 학습 비용 최소화 + PREMIUM CTA 맥락 삽입 용이. 구현 복잡도는 3개 옵션 중 가장 낮음. 2순위는 옵션 A(순수 상단 메가메뉴, 5개 탭). 선행 작업으로 IA(정보 아키텍처) 재설계가 필수이며, 전환 시 A/B 테스트 + 점진적 롤아웃 병행 권장.

---

## 1. 현재 메뉴 구조 분석

### 1.1 메뉴 구조 정량 데이터

- **총 섹션**: 8개 (관리자 섹션 포함)
- **일반 유저 항목**: 7개 섹션 / 23개 항목 (premiumOnly 2개 포함)
- **관리자 항목**: +11개 (총 34개)
- **메뉴 깊이**: 2-depth (섹션 → 항목), 서브메뉴(3-depth) 없음 (flat structure)
- **비메뉴 요소**: 로고+슬로건, 유저 프로필 카드(아바타/이름/소속/이메일), 플랜 상태 위젯, 로그아웃 버튼
- **접기 기능**: `collapsible="icon"` (아이콘 전용 접기 모드 지원)

### 1.2 섹션별 항목 수

| # | 섹션명 | 항목 수 | defaultOpen | 비고 |
|---|--------|---------|-------------|------|
| 1 | 내 계정 | 2 | false | |
| 2 | 안내 | 5 | false | |
| 3 | 구독 | 1 | false | |
| 4 | AI 마케팅 | 5 | true | premiumOnly 2개 |
| 5 | 고객관리 | 5 | true | |
| 6 | 보험 시장분석 AI | 2 | false | |
| 7 | 유용한도구 | 3 | false | |
| 8 | 관리자 | 11 | false | adminOnly |

### 1.3 기술 스택

- React + react-router-dom, shadcn/ui Sidebar, Tailwind CSS, lucide-react 아이콘
- Supabase auth, useUserPlan/useUserRole 커스텀 훅
- 조건 렌더링: premiumOnly(PREMIUM 배지+클릭가드), adminOnly(섹션 필터)

### 1.4 현재 문제점

- defaultOpen=true인 섹션(AI 마케팅 5개 + 고객관리 5개)만으로도 10개 항목 즉시 노출
- 나머지 섹션 펼치면 23개 전체 노출 → 제이회장님 지적 "시각적 불안"
- 사이드바 폭(220~260px)이 콘텐츠 영역 잠식

---

## 2. 상단 네비게이션 전환 설계안

### 옵션 A: 순수 상단 네비게이션 (메가메뉴)

**구조**: 23개 항목을 **5개 1차 탭**으로 압축, 호버/클릭 시 메가메뉴 패널 펼침

| 탭 | 포함 항목 | 항목 수 |
|----|----------|---------|
| 고객관리 | 대시보드, 고객 목록, 파이프라인, 메신저, 디지털 명함 | 5 |
| AI 마케팅 | AI 키워드 분석, AI 콘텐츠 작성, 콘텐츠 관리, AI 원스탑 포스팅, AI 포스팅 자동화 | 5 |
| 시장분석 | 소식지분석, 보험료/환급률 분석 | 2 |
| 도구 & 안내 | 보험사 전산정보, 각종 계산기, 외부 참고 사이트 + 인슈로 소개, 가이드, API키, 금소법, 공지 | 8 |
| 구독 | 플랜 & 구독 | 1 |

**비메뉴 배치**: 로고(좌), PREMIUM 배지(우), 유저 드롭다운(최우 — 마이페이지/설정/로그아웃 통합)

**모바일**: 768px 미만 → 햄버거 메뉴 + Sheet(side=left) 오버레이

**구현 컴포넌트**: shadcn/ui `NavigationMenu` + `DropdownMenu` + `Sheet`

### 옵션 B: 하이브리드 (상단 도메인 탭 + 좌측 컨텍스트 서브메뉴) — 추천

**구조**: 상단 바에 **4개 도메인 탭**, 선택 시 좌측 서브메뉴가 해당 도메인 항목만 표시 (항상 최대 5개)

| 도메인 탭 | 서브메뉴 | 항목 수 |
|-----------|---------|---------|
| 고객관리 | 대시보드, 고객 목록, 파이프라인, 메신저, 디지털 명함 | 5 |
| AI 마케팅 | AI 키워드 분석, AI 콘텐츠 작성, 콘텐츠 관리, AI 원스탑 포스팅, AI 포스팅 자동화 | 5 |
| 분석 & 도구 | 소식지분석, 보험료/환급률 분석, 보험사 전산정보, 각종 계산기, 외부 참고 사이트 | 5 |
| 안내 & 설정 | 인슈로 소개, 이용방법/가이드, API키, 금소법, 공지/커뮤니티 | 5 |

**비메뉴 배치**: 로고+구독(상단 바 양끝), 유저 프로필 드롭다운(우), 서브메뉴 하단에 PREMIUM 업그레이드 CTA 카드(FREE 유저만)

**서브메뉴 폭**: 180px (기존 220~260px에서 축소)

**모바일**: 바텀 탭 바 5개 아이콘 + 서브메뉴는 바텀 시트

### 옵션 C: 아이콘 레일 + 플로팅 패널 (Figma/VS Code 패턴)

**구조**: 좌측 48px 아이콘 레일 6개, 클릭 시 200px 플로팅 패널 오버레이. 콘텐츠 폭 항상 100%.

**모바일**: 바텀 탭 바 + 풀스크린 바텀 시트

---

## 3. 옵션별 장단점 비교

| 평가 항목 | 옵션 A (메가메뉴) | 옵션 B (하이브리드) | 옵션 C (아이콘 레일) |
|-----------|-------------------|--------------------|--------------------|
| 시각적 단순화 | 우수 | 양호 (서브 5개 이하) | 양호 |
| 콘텐츠 폭 확보 | 좋음 (+220px) | 보통 (+40~80px) | 최고 (+180px) |
| 기존 유저 적응 | 중간 | 높음 (패턴 유지) | 낮음 (낯선 패턴) |
| 보험 설계사 친화 | 양호 | 최고 | 미흡 |
| PREMIUM CTA 노출 | 좋음 | 최고 (맥락 삽입) | 미흡 |
| 구현 복잡도 | 중간 | 낮음 | 높음 |
| 향후 확장성 | 탭 추가 제약 | 도메인별 독립 확장 | 아이콘 슬롯 여유 |
| 모바일 대응 | 보통 | 좋음 (바텀탭) | 좋음 (바텀탭) |

---

## 4. 프리미엄 SaaS 레퍼런스 인사이트

### 업계 트렌드 (헤임달 리서치 결과)

1. **HubSpot**: 상단 2단 네비 → 좌측 사이드바로 역전환 (2024.5). 기능 증가로 상단 과부하
2. **Jira**: 글로벌 네비를 사이드바로 이동, 프로젝트 내 네비는 상단 탭 (역할 분리 하이브리드)
3. **Linear**: 좌측 사이드바 유지, 미니멀 디자인 + Personalized sidebar (2024.12)
4. **채널톡**: 좌측 아이콘 바 + 세컨더리 사이드 패널 (2단 사이드바)
5. **보험 전문 SW**: HawkSoft, AgencyBloc, Applied Epic 모두 사이드바 채택

### NN/G 가이드라인

- 10개 이상 메뉴: 수직 네비 권장 (좌측 주시율 80% 높음, 스캔 효율 우수)
- B2B/금융/보험: 수직 네비 명시적 권장
- 데스크탑 햄버거 메뉴: 지양 ("눈에서 멀어지면 마음에서도 멀어진다")

### 교훈

- Figma UI3 네비 변경: 사용자 강한 반발, 롤백 요청 속출
- Asana: 이전 네비 복귀 옵션 제공하여 저항 관리
- **핵심**: 네비게이션 변경은 IA 재설계가 선행되어야 하며, 점진적 전환 + A/B 테스트 필수

---

## 5. 추천안 및 근거

### 1순위: 옵션 B (하이브리드)

**근거**:
1. 제이회장님 핵심 우려(시각적 불안) = 서브메뉴 최대 5개로 78% 밀도 감소로 해결
2. 보험 설계사 사용 패턴(장시간 작업, 도메인 집중)에 최적화
3. Jira/Asana에서 검증된 "역할 분리 하이브리드" 패턴
4. 구현 복잡도 가장 낮음 — 기존 사이드바 렌더링 로직 부분 재사용 가능
5. PREMIUM CTA를 AI 마케팅 서브메뉴 맥락에 자연스럽게 삽입 → 전환율 기여

### 2순위: 옵션 A (메가메뉴)

**적합 시점**: 랜딩/마케팅 페이지 리디자인과 동시 진행 시, 또는 신규 유저 온보딩 중심 리포지셔닝 시

### 대안: 사이드바 유지 + IA 재설계 + Collapsed 모드 강화

상단 전환 없이도 IA 재그룹핑(워크플로우 기반) + 기본 Collapsed 모드 적용만으로 시각적 불안 문제 상당 부분 해결 가능. 가장 보수적이고 리스크 낮은 접근.

### 선행 작업 (어떤 옵션이든 필수)

1. 정보 아키텍처(IA) 재설계: 23개 메뉴를 4~5개 도메인으로 재분류
2. 사용성 테스트: 보험 설계사 3~5인 대상 프로토타입 검증
3. A/B 테스트 계획: 신규 가입자 10~20% 대상 선행 테스트
4. 점진적 롤아웃: 신규 → 파워유저 → 전체 순서

---

## 발견 이슈 및 해결

### 자체 해결 (3건)

1. **메뉴 그룹핑 불균형** — "도구 & 안내" 탭이 옵션 A에서 8개 항목으로 과부하. 옵션 B에서 "분석 & 도구"(5개)와 "안내 & 설정"(5개)으로 균등 분리하여 해결
2. **관리자 메뉴 배치 미정의** — 관리자 11개 항목은 상단 Nav에서 별도 처리 필요. 설계안에 "관리자 전용 도메인 탭(adminOnly)" 또는 "설정 드롭다운 내 관리자 섹션"으로 분기 방안 추가
3. **디지털 명함(/mypage#namecard) 해시 링크** — 현재 고객관리 섹션에 해시 앵커 링크로 존재. 상단 Nav 전환 시 독립 페이지로 분리하거나, 마이페이지 내 탭으로 재배치 권장 추가

---

## 산출물

1. `/home/jay/workspace/memory/reports/task-1362.1.md` — 본 보고서 (현재 메뉴 구조 분석 + 설계안 3옵션 + 비교표 + 추천안)

---

## 셀프 QC

- [x] 1. 다른 파일 영향: 코드 구현 없음, 분석 전용 → 영향 없음
- [x] 2. 엣지 케이스: 관리자(37개 항목), 모바일 환경, premiumOnly 상태 모두 분석에 반영
- [x] 3. 작업 지시 일치: 5개 산출물 요청 모두 충족 (구조 분석, 설계안 2+, 비교표, 추천안+근거, 보고서)
- [x] 4. 에러 처리/보안: N/A (코드 구현 없음)
- [x] 5. 테스트 커버리지: N/A (코드 구현 없음)
- [x] 6. 발견 이슈 해결: 3건 자체 해결, 미해결 0건
- [x] 7. 아키텍처 원칙: N/A (설계 검토만)
- [x] 8. 인터페이스 변경 문서: N/A (코드 변경 없음)

---

## 모델 사용 기록

- 팀원: 프레이야(프론트엔드) / 작업: 메뉴 구조 정량 분석 + 기술적 장벽 평가 / 모델: sonnet
- 팀원: 미미르(UX/UI) / 작업: 상단 Nav 설계안 3옵션 제시 / 모델: sonnet
- 팀원: 헤임달(테스터) / 작업: SaaS 네비게이션 레퍼런스 리서치 / 모델: sonnet