# 멀티에이전트 미팅: UI 레이아웃 비교 분석

> **일시**: 2026-02-09 17:54
> **안건**: 노션 스타일 사이드바 UI vs 현재 카드 리스트 UI 비교

---

## 참석 에이전트

| 역할 | 에이전트 | 관점 |
|------|----------|------|
| 🎨 UX Designer | Lily | 사용자 경험, 인터랙션 |
| 🖥️ Frontend | Alex | 구현 복잡도, 기술 |
| 📱 Mobile | Sam | 반응형, 모바일 UX |
| 🔗 Reflect | Ray | 백링크, 지식 그래프 |
| 📋 PM | Coordinator | 최종 판단 |

---

## 비교 대상

### Option A: 노션 스타일 (사이드바 + 콘텐츠)
```
┌──────────────────────────────────────┐
│ Header                               │
├─────────────┬────────────────────────┤
│ 📁 문서1    │                        │
│ 📁 문서2    │    문서 내용 표시      │
│ 📁 문서3    │                        │
│ 📁 문서4    │                        │
├─────────────┴────────────────────────┤
│ Footer                               │
└──────────────────────────────────────┘
```

### Option B: 현재 스타일 (카드 리스트 → 상세 페이지)
```
[메인 페이지]          →          [상세 페이지]
┌─────────────────┐               ┌─────────────────┐
│ [Wiki] [Daily]  │               │ ← 목록으로       │
├─────────────────┤               ├─────────────────┤
│ ┌───┐ ┌───┐    │               │ 문서 제목        │
│ │문서│ │문서│    │    클릭      │                 │
│ │ 1 │ │ 2 │    │    ───→      │ 문서 내용        │
│ └───┘ └───┘    │               │                 │
│ ┌───┐ ┌───┐    │               │                 │
│ │문서│ │문서│    │               └─────────────────┘
│ │ 3 │ │ 4 │    │
│ └───┘ └───┘    │
└─────────────────┘
```

---

## 각 에이전트 의견

### 🎨 UX Designer (Lily)

**노션 스타일 장점:**
- ✅ 동시 탐색: 목록 보면서 내용 확인 가능
- ✅ 컨텍스트 유지: 페이지 이동 없이 빠른 전환
- ✅ 파워 유저 선호: 키보드 네비게이션에 유리

**노션 스타일 단점:**
- ⚠️ 폭 제한: 사이드바가 콘텐츠 영역을 줄임
- ⚠️ 모바일 불리: 작은 화면에서 레이아웃 어려움
- ⚠️ 정보 과부하: 한눈에 너무 많은 정보

**현재 스타일 장점:**
- ✅ 집중 모드: 한 번에 하나에 집중
- ✅ 모바일 친화적: 화면 전체 활용
- ✅ 단순함: 초보자도 쉽게 이해

**현재 스타일 단점:**
- ⚠️ 컨텍스트 상실: 목록 보려면 뒤로가기 필요
- ⚠️ 비교 어려움: 여러 문서 비교 시 불편

**Lily 결론:**
> **1인 사용자 + 보험 전문 지식 위키**라면 현재 스타일이 적합.
> 문서를 깊게 읽는 패턴 > 빠르게 훑는 패턴.

---

### 🖥️ Frontend Developer (Alex)

**구현 복잡도 비교:**

| 항목 | 노션 스타일 | 현재 스타일 |
|------|------------|------------|
| 라우팅 | 복잡 (동적 렌더링) | 단순 (페이지 기반) |
| 상태 관리 | 많음 (선택 상태) | 적음 |
| 반응형 | 중간~높음 | 낮음 |
| 구현 시간 | 3~5일 추가 | 완료됨 |

**Alex 결론:**
> 노션 스타일은 구현 가능하지만 **추가 3~5일** 필요.
> 현재는 MVP로 충분하며, 나중에 사용 패턴 보고 결정 권장.

---

### 📱 Mobile Specialist (Sam)

**모바일에서의 고려:**

| 화면 크기 | 노션 스타일 | 현재 스타일 |
|----------|------------|------------|
| 375px (모바일) | ❌ 사이드바 접힘 필요 | ✅ 자연스럽게 작동 |
| 768px (태블릿) | ⚠️ 좁은 두 패널 | ✅ 적절한 카드 크기 |
| 1024px+ (데스크톱) | ✅ 쾌적 | ✅ 쾌적 |

**Sam 결론:**
> InsuWiki는 **PC 메인 사용**이라면 노션 스타일 고려 가능.
> 모바일도 중요하다면 **현재 스타일 유지 권장**.

---

### 🔗 Reflect Agent (Ray)

**백링크/지식 그래프 관점:**

**노션 스타일 장점:**
- ✅ 위키링크 클릭 시 사이드에서 바로 표시
- ✅ 연결 문서 빠른 탐색
- ✅ 그래프 뷰와 조합 시 강력

**노션 스타일 단점:**
- ⚠️ 중첩 백링크 탐색 시 혼란
- ⚠️ 히스토리 관리 복잡

**현재 스타일 + 개선안:**
- ✅ 위키링크 호버 시 미리보기 팝업 추가
- ✅ 백링크 섹션을 상세 페이지 하단에 배치
- ✅ 허브 문서에서 관계 파악

**Ray 결론:**
> 노션 스타일은 **Obsidian/Roam 느낌**으로 백링크에 유리하지만,
> **호버 미리보기 + 백링크 섹션**으로 현재 스타일도 충분히 보완 가능.
> 당장 레이아웃 변경보다 **미리보기 기능 추가**가 더 효과적.

---

### 📋 PM (Coordinator) - 최종 정리

**평가 매트릭스:**

| 평가 항목 | 노션 스타일 | 현재 스타일 | 권장 |
|----------|------------|------------|------|
| 1인 사용자 적합성 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | 현재 ✓ |
| 구현 복잡도 | ⭐⭐ | ⭐⭐⭐⭐⭐ | 현재 ✓ |
| 모바일 호환성 | ⭐⭐ | ⭐⭐⭐⭐⭐ | 현재 ✓ |
| 백링크 탐색 | ⭐⭐⭐⭐ | ⭐⭐⭐ | 개선 필요 |
| 파워 유저 효율 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | 노션 ✓ |

---

## 결론 및 권장 사항

### 🏆 최종 결정: **현재 스타일 유지 + 점진적 개선**

**이유:**
1. 1인 사용자에게 과도한 복잡성 불필요
2. 모바일 호환성 우수
3. 이미 구현 완료되어 안정적
4. 추가 개발 시간 절약

### 📝 권장 개선 사항

| 우선순위 | 개선 사항 | 효과 | 상태 |
|---------|----------|------|------|
| 1 | 위키링크 호버 미리보기 | 백링크 탐색 개선 | ✅ 구현 완료 |
| 2 | 상세 페이지 백링크 섹션 | 관계 문서 파악 | ✅ 기존 구현 |
| 3 | 키보드 단축키 | 파워 유저 효율 | ⏳ 나중에 |
| 4 | (장기) 사이드바 옵션 제공 | 사용자 선택 | ⏳ 나중에 |

---

## 구현 완료: 위키링크 호버 미리보기 (2026-02-09 18:04)

**생성/수정된 파일:**
- `WikiLinkPreview.tsx` (신규) - 호버 미리보기 컴포넌트
- `docs/[id]/page.tsx` - 마크다운 링크에 미리보기 적용

**기능:**
- 문서 내 `/docs/` 링크에 마우스 300ms 호버 시 팝업 표시
- 제목 + 타입 + 수정일 + 내용 미리보기 (150자)

---

## 참고: 노션 스타일 구현 시 예상 작업

만약 나중에 도입한다면:
- `SidebarLayout.tsx` 컴포넌트 생성
- 문서 선택 상태 관리 (Context 또는 Zustand)
- 반응형 브레이크포인트 재설계
- 라우팅 구조 변경 (동적 렌더링)
- **예상 공수: 3~5일**