# InsuWiki 와이어프레임 설계 > **작성일**: 2026-02-08 21:17 > **작성자**: UX Agent, Frontend Agent > **상태**: 검토 대기 --- ## 1. 화면 목록 | # | 화면 | 경로 | 우선순위 | |---|------|------|----------| | 1 | 로그인 | `/login` | MVP | | 2 | 홈 (대시보드) | `/` | MVP | | 3 | 문서 목록 | `/docs` | MVP | | 4 | 문서 상세 | `/docs/:id` | MVP | | 5 | 문서 편집 | `/docs/:id/edit` | MVP | | 6 | 내 메모 | `/my` | MVP | | 7 | Daily Notes | `/daily` | MVP | | 8 | 설정 | `/settings` | MVP | | 9 | 관리자 | `/admin` | Phase 2 | | 10 | 온보딩 | `/onboarding` | Phase 2 | --- ## 2. 공통 레이아웃 ### 데스크톱 ``` ┌─────────────────────────────────────────────────────────┐ │ 🏠 InsuWiki [🔍 검색...] [👤 프로필 ▼] │ ├────────────┬────────────────────────────────────────────┤ │ │ │ │ 📁 홈 │ │ │ 📄 문서 │ Main Content │ │ 📝 내 메모 │ │ │ 📆 Daily │ │ │ ⚙️ 설정 │ │ │ │ │ └────────────┴────────────────────────────────────────────┘ ``` ### 모바일 ``` ┌─────────────────────────┐ │ ☰ InsuWiki 🔍 👤 │ ├─────────────────────────┤ │ │ │ Main Content │ │ │ │ │ ├─────────────────────────┤ │ [🏠] [📄] [📝] [📆] [⚙️] │ └─────────────────────────┘ ``` --- ## 3. 화면별 와이어프레임 ### 3.1 로그인 (`/login`) ``` ┌─────────────────────────────────────┐ │ │ │ 🏠 InsuWiki │ │ 보험 지식을 정리하는 위키 │ │ │ │ ┌─────────────────────────┐ │ │ │ 🔐 Google로 로그인 │ │ │ └─────────────────────────┘ │ │ │ │ 사내 직원만 접근 가능합니다 │ │ │ └─────────────────────────────────────┘ ``` ### 3.2 홈 / 대시보드 (`/`) ``` ┌─────────────────────────────────────────────────────────┐ │ Sidebar │ │ │ │ 📊 대시보드 │ │ │ │ │ │ ┌─────────────────┐ ┌─────────────────┐ │ │ │ │ 📝 오늘의 메모 │ │ 📈 내 활동 │ │ │ │ │ Quick Capture │ │ 작성: 5, 편집: 3 │ │ │ │ │ [+ 빠른 메모] │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ │ │ │ │ │ │ 📄 최근 문서 ───────────────────────────── │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ 보험용어 │ │ 청약 절차 │ │ 보장분석 │ │ │ │ │ 2시간 전 │ │ 어제 │ │ 3일 전 │ │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ 🔥 인기 문서 ───────────────────────────── │ │ │ 1. 실손보험 완전정복 │ │ │ 2. 종신보험 vs 정기보험 │ │ │ 3. 보험료 계산 공식 │ │ │ │ └──────────┴──────────────────────────────────────────────┘ ``` ### 3.3 문서 목록 (`/docs`) ``` ┌─────────────────────────────────────────────────────────┐ │ Sidebar │ 📄 문서 목록 │ │ │ │ │ │ [🔍 검색...] [📁 카테고리 ▼] [정렬 ▼] │ │ │ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ 📄 실손보험 완전정복 [Shared] │ │ │ │ │ #보험 #실손 #의료 조회 123 │ │ │ │ │ 김철수 · 2시간 전 │ │ │ │ └────────────────────────────────────────┘ │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ 📄 종신보험 가이드 [Shared] │ │ │ │ │ #종신 #사망보장 조회 89 │ │ │ │ │ 이영희 · 1일 전 │ │ │ │ └────────────────────────────────────────┘ │ │ │ │ │ │ [이전] 1 2 3 ... 10 [다음] │ │ │ │ └──────────┴──────────────────────────────────────────────┘ ``` ### 3.4 문서 상세 (`/docs/:id`) ``` ┌─────────────────────────────────────────────────────────┐ │ Sidebar │ 📄 실손보험 완전정복 │ │ │ ──────────────────────────────────────── │ │ │ 김철수 · 2시간 전 · [Shared] [✏️ 편집] │ │ │ │ │ │ 📑 목차 │ ## 개요 │ │ │ ├ 개요 │ 실손보험이란... │ │ │ ├ 보장 범위 │ │ │ │ ├ 청구 방법 │ ## 보장 범위 │ │ │ └ 주의사항 │ - 입원비 │ │ │ │ - 통원비 │ │ │ 🔗 백링크 │ - 약제비 │ │ │ ├ 의료보험 총정리 │ │ │ │ └ 보험 용어집 │ ## 청구 방법 │ │ │ │ 1. 서류 준비 │ │ │ 🏷️ 태그 │ 2. 앱에서 신청 │ │ │ #보험 #실손 │ │ │ │ │ └──────────┴──────────────────────────────────────────────┘ ``` ### 3.5 문서 편집 (`/docs/:id/edit`) ``` ┌─────────────────────────────────────────────────────────┐ │ 🔒 편집 중 (나) │ [💾 저장] [❌ 취소] [📤 공유설정] │ ├─────────────────────────────────────────────────────────┤ │ │ │ 📝 제목: [실손보험 완전정복 ] │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ B I U S │ H1 H2 H3 │ • - │ 🔗 📷 │ [[링크]] │ │ │ ├──────────────────────────────────────────────────┤ │ │ │ │ │ │ │ ## 개요 │ │ │ │ │ │ │ │ 실손보험이란 실제 발생한 의료비를 │ │ │ │ 보장하는 보험입니다. │ │ │ │ │ │ │ │ ## 보장 범위 │ │ │ │ - 입원비 │ │ │ │ - 통원비 │ │ │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ 상태: [🔴 Private ▼] 태그: [#보험] [#실손] [+ 추가] │ │ │ └─────────────────────────────────────────────────────────┘ ``` ### 3.6 Daily Notes (`/daily`) ``` ┌─────────────────────────────────────────────────────────┐ │ Sidebar │ 📆 Daily Notes │ │ │ │ │ │ ◀ 2026년 2월 ▶ │ │ │ ┌───┬───┬───┬───┬───┬───┬───┐ │ │ │ │ 일│ 월│ 화│ 수│ 목│ 금│ 토│ │ │ │ ├───┼───┼───┼───┼───┼───┼───┤ │ │ │ │ │ │ │ │ │ │ 1 │ │ │ │ │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │●8 │ │ │ │ └───┴───┴───┴───┴───┴───┴───┘ │ │ │ ● = 메모 있음 │ │ │ │ │ │ ───────────────────────────────────────── │ │ │ 📝 2026-02-08 (오늘) │ │ │ ┌──────────────────────────────────────┐ │ │ │ │ - 실손보험 문서 검토 완료 │ │ │ │ │ - 내일 고객 미팅 준비 │ │ │ │ │ - [[보험용어집]] 링크 추가 필요 │ │ │ │ └──────────────────────────────────────┘ │ │ │ [저장] │ │ │ │ └──────────┴──────────────────────────────────────────────┘ ``` ### 3.7 설정 (`/settings`) ``` ┌─────────────────────────────────────────────────────────┐ │ Sidebar │ ⚙️ 설정 │ │ │ │ │ │ 👤 프로필 ────────────────────────────── │ │ │ [📷] 김철수 │ │ │ kim@company.com │ │ │ 역할: Editor │ │ │ │ │ │ 🤖 AI 연동 (BYOK) ──────────────────────── │ │ │ ┌────────────────────────────────────────┐ │ │ │ │ Gemini API Key │ │ │ │ │ [AI-xxxxx... ] [저장]│ │ │ │ │ 📎 발급: aistudio.google.com │ │ │ │ │ │ │ │ │ │ Whisper API Key (선택) │ │ │ │ │ [sk-xxxxx... ] [저장]│ │ │ │ └────────────────────────────────────────┘ │ │ │ │ │ │ 🔔 알림 ──────────────────────────────── │ │ │ [✓] 문서 업데이트 알림 │ │ │ [✓] 댓글 알림 │ │ │ │ └──────────┴──────────────────────────────────────────────┘ ``` --- ## 4. 주요 컴포넌트 | 컴포넌트 | 용도 | |----------|------| | `Header` | 로고, 검색, 사용자 메뉴 | | `Sidebar` | 네비게이션 | | `DocumentCard` | 문서 카드 미리보기 | | `MarkdownEditor` | TipTap 기반 에디터 | | `TOC` | 문서 목차 | | `BacklinkPanel` | 백링크 표시 | | `TagInput` | 태그 입력/관리 | | `CalendarPicker` | Daily Notes 달력 | | `LockIndicator` | 편집 잠금 상태 표시 | --- ## 5. 반응형 브레이크포인트 | 기기 | 너비 | 레이아웃 | |------|------|----------| | 모바일 | ~768px | 바텀 네비 | | 태블릿 | 768~1024px | 접히는 사이드바 | | 데스크톱 | 1024px~ | 고정 사이드바 | --- ## 6. 에이전트 검토 ### UX Agent - 확인 필요: 사용자 플로우 명확성 ### Frontend Agent - 확인 필요: 컴포넌트 재사용성 ### Reflect Agent - 확인 필요: Daily Notes, 백링크 UI 적절성 --- **다음 단계**: 코드 없음 (디자인 문서), 검토 완료 후 커밋