---
task_id: task-2074
type: context
scope: task
created: 2026-04-22
updated: 2026-04-22
status: in-progress
---

# 맥락 노트: task-2074

**task**: task-2074

---

## 결정 근거

### 3 Step Why

**1st Why: "왜 이 설계가 필요한가?"**
→ 베타 사용자 피드백에서 5개 UX 불편 사항이 확인됨. 키워드 분석이 에러를 표시하고, 기능 설명이 부족하며, 사이드바가 텍스트만 있어 네비게이션이 어렵고, 콘텐츠 유형 선택 피드백이 미약하고, AI 주제 추천이 비활성화 상태.

**2nd Why: "왜 이 접근(5건 일괄 UX 개선)이 최선인가?"**
→ 5건 모두 프론트엔드 중심 변경이고 서로 독립적. 하나의 PR로 일괄 처리하면 리뷰/QA 비용 절감. 각 개선은 2-5분 수준의 마이크로태스크로 분해 가능.

**3rd Why: "왜 이 방식이 다른 대안보다 나은가?"**
→ 대안 1: 디자이너에게 먼저 와이어프레임 요청 → 시간 지연. 대안 2: 각각 별도 PR → 머지 충돌 가능성 + 리뷰 오버헤드. 현재 접근: shadcn/ui 패턴 기반 코드 레벨 개선으로 즉시 구현 가능하고, 디자인팀 의존 없이 완료 가능.

### 개선 1: 키워드 분석 UX 설계
- 네이버: 검색량 수치 + 경쟁 강도 (정량적) → 기존 테이블 유지 + 서버 키 fallback 확인
- 구글 트렌드: 트렌드 추이 (시계열적) → 별도 섹션으로 분리 (Coming Soon placeholder)
- **결정**: 탭 분리가 아닌 섹션 분리. 이유: 네이버/구글 데이터 성격이 다르므로 나란히 비교하기보다 각각의 맥락에서 해석하도록 유도

### 개선 2: 포스팅 설명 페이지
- 기존: 간단한 팝업 → 기능 차이 이해 불가
- **결정**: 전용 설명 페이지로 교체. 플로우 시각화 + 비교 카드 + CTA 버튼
- 원스탑: 3단계 플로우 (키워드→AI글작성→블로그발행), CTA: 맥스플랜 업그레이드
- 자동화: 예약→반복 루프 설명, CTA: 가족 합류 문의

### 개선 3: 사이드바 헤더
- **결정**: 각 도메인 탭 헤더에 아이콘 + 한 줄 설명 추가. 구분선으로 시각적 분리.

### 개선 4: 콘텐츠 유형 선택 하이라이트
- **결정**: 선택 시 배경색 변경 + 체크마크 아이콘 + 그림자 효과 (shadcn 패턴 참고)

### 개선 5: AI 주제 추천 UX
- **결정**: 빠른 주제 선택 → 입력란 위로 이동, AI 주제 추천 버튼 canUseSuggest 조건 유지하되 안내 문구 추가

## 참조 자료

- KeywordAnalysis.tsx: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/src/pages/KeywordAnalysis.tsx`
- Generate.tsx: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/src/pages/Generate.tsx`
- DashboardLayout.tsx: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/src/components/DashboardLayout.tsx`
- AiOnestop.tsx: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/src/pages/AiOnestop.tsx`
- AiAutomation.tsx: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/src/pages/AiAutomation.tsx`
- ContextSubMenu.tsx: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/src/components/navigation/ContextSubMenu.tsx`
- navigationConfig.ts: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/src/components/navigation/navigationConfig.ts`
- GenerateSettingsPanel.tsx: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/src/components/GenerateSettingsPanel.tsx`

## 주의사항

- 프로젝트 경로: `/home/jay/projects/InsuRo/`
- worktree: `/home/jay/projects/InsuRo/.worktrees/task-2074-dev5/`
- AiAutomation.tsx의 canStart는 isHidden 조건. 이 로직은 변경하지 않음.
- 디자인 작업은 직접 수행 금지. 코드 기반 UX 개선만 수행.