|
| 1 | +# 한국 법령 챗봇 웹 UI 개발 계획 |
| 2 | + |
| 3 | +## 목표 |
| 4 | + |
| 5 | +**MCP 서버는 이미 배포됨** → 웹 UI만 Vercel로 새로 만들기 |
| 6 | + |
| 7 | +**사용자**: 와이프 + 지인들 (법령 조회가 필요한 일반인) |
| 8 | +**배포**: Vercel (무료 Hobby 플랜) |
| 9 | +**LLM**: Gemini 2.0 Flash (무료 tier) |
| 10 | +**백엔드**: 기존 korean-law-mcp HTTP 엔드포인트 활용 |
| 11 | + |
| 12 | +--- |
| 13 | + |
| 14 | +## 사용자별 API 키 처리 방식 |
| 15 | + |
| 16 | +### 결정: 사용자가 직접 입력 |
| 17 | + |
| 18 | +**흐름:** |
| 19 | +1. 웹 UI 첫 접속 시 법제처 API 키 입력 모달 표시 |
| 20 | +2. 사용자가 본인의 API 키 입력 (법제처에서 무료 발급) |
| 21 | +3. API 키는 **브라우저 localStorage**에 저장 (서버 저장 X) |
| 22 | +4. 모든 MCP 요청 시 헤더 또는 파라미터로 API 키 전달 |
| 23 | +5. MCP 서버는 요청마다 전달받은 키로 법제처 API 호출 |
| 24 | + |
| 25 | +**장점:** |
| 26 | +- 서버에 민감 정보 저장 안 함 |
| 27 | +- 사용량 제한 걱정 없음 (각자 본인 할당량 사용) |
| 28 | +- GDPR/개인정보 이슈 없음 |
| 29 | + |
| 30 | +**MCP 서버 수정 필요:** |
| 31 | +- 요청 헤더/파라미터에서 `LAW_OC` 키 수신 |
| 32 | +- 환경변수 대신 요청별 키 사용 |
| 33 | + |
| 34 | +**웹 UI 추가 구현:** |
| 35 | +- API 키 입력 모달 컴포넌트 |
| 36 | +- localStorage 저장/로드 로직 |
| 37 | +- API 키 발급 안내 링크 (https://www.law.go.kr/DRF/lawService.do) |
| 38 | + |
| 39 | +--- |
| 40 | + |
| 41 | +## 전제 조건 |
| 42 | + |
| 43 | +- ✅ korean-law-mcp 서버는 이미 배포돼 있음 (HTTP 모드) |
| 44 | +- ✅ MCP 엔드포인트: `https://your-deployed-mcp.com/mcp` |
| 45 | +- ✅ Bearer Token 인증 이미 적용됨 |
| 46 | +- ⚠️ **MCP 서버 수정 필요** - 요청별 API 키 처리 추가 |
| 47 | + |
| 48 | +--- |
| 49 | + |
| 50 | +## 프로젝트 구조 |
| 51 | +**새 저장소**: `korean-law-chatbot` |
| 52 | + |
| 53 | +``` |
| 54 | +korean-law-chatbot/ |
| 55 | +├── app/ |
| 56 | +│ ├── api/ |
| 57 | +│ │ └── chat/ |
| 58 | +│ │ └── route.ts # Vercel AI SDK 엔드포인트 |
| 59 | +│ ├── page.tsx # 메인 채팅 UI |
| 60 | +│ └── layout.tsx |
| 61 | +├── lib/ |
| 62 | +│ ├── mcp-client.ts # korean-law-mcp HTTP 클라이언트 |
| 63 | +│ └── gemini.ts # Gemini API 설정 |
| 64 | +├── components/ |
| 65 | +│ ├── chat-interface.tsx # 카카오톡 스타일 채팅 |
| 66 | +│ ├── law-card.tsx # 법령 조회 결과 카드 |
| 67 | +│ └── message-bubble.tsx # 메시지 말풍선 |
| 68 | +└── package.json |
| 69 | +``` |
| 70 | + |
| 71 | +## 기술 스택 |
| 72 | +- **Frontend**: Next.js 15 App Router + Tailwind CSS |
| 73 | +- **LLM**: Gemini 2.0 Flash (무료 tier, Vercel AI SDK) |
| 74 | +- **MCP 연결**: 기존 korean-law-mcp HTTP 엔드포인트 |
| 75 | +- **배포**: Vercel (무료 Hobby 플랜) |
| 76 | +- **디자인**: 카카오톡 스타일 채팅 UI |
| 77 | + |
| 78 | +--- |
| 79 | + |
| 80 | +## 구현 단계별 작업 |
| 81 | + |
| 82 | +### 1단계: 프로젝트 초기 설정 (1시간) |
| 83 | +```bash |
| 84 | +npx create-next-app@latest korean-law-chatbot --typescript --tailwind --app |
| 85 | +cd korean-law-chatbot |
| 86 | +npm install ai @ai-sdk/google |
| 87 | +``` |
| 88 | + |
| 89 | +**package.json 의존성**: |
| 90 | +- `next`: ^15.0.0 |
| 91 | +- `react`: ^19.0.0 |
| 92 | +- `ai`: ^4.0.0 |
| 93 | +- `@ai-sdk/google`: ^1.0.0 |
| 94 | +- `tailwindcss`: ^3.4.0 |
| 95 | + |
| 96 | +### 2단계: MCP 클라이언트 구현 (2시간) |
| 97 | +**파일**: `lib/mcp-client.ts` |
| 98 | +- MCP HTTP 엔드포인트 연결 |
| 99 | +- Bearer Token 인증 헤더 |
| 100 | +- 33개 도구 → Vercel AI SDK 형식 변환 |
| 101 | +- JSON-RPC 2.0 호출 로직 |
| 102 | + |
| 103 | +### 3단계: 채팅 UI 컴포넌트 (3시간) |
| 104 | +**파일**: |
| 105 | +- `app/page.tsx` - 메인 레이아웃 |
| 106 | +- `components/chat-interface.tsx` - 메시지 리스트 + 입력창 |
| 107 | +- `components/message-bubble.tsx` - 카카오톡 스타일 말풍선 |
| 108 | +- `components/example-query.tsx` - 예제 질문 버튼 |
| 109 | + |
| 110 | +### 4단계: 법령 카드 렌더링 (1시간) |
| 111 | +**파일**: `components/law-card.tsx` |
| 112 | +- MCP tool 결과를 카드 UI로 표시 |
| 113 | +- 법령명, 조문 번호, 시행일, 내용 |
| 114 | +- 법제처 외부 링크 |
| 115 | + |
| 116 | +### 5단계: 스타일링 (2시간) |
| 117 | +**Tailwind 설정**: |
| 118 | +- 카카오톡 노란색 (#FFE812) |
| 119 | +- 그라데이션 배경 |
| 120 | +- 모바일 반응형 |
| 121 | + |
| 122 | +### 6단계: Vercel 배포 (1시간) |
| 123 | +1. GitHub Push |
| 124 | +2. Vercel Import |
| 125 | +3. 환경변수 설정 |
| 126 | +4. 테스트 및 검증 |
| 127 | + |
| 128 | +--- |
| 129 | + |
| 130 | +## 예상 소요 시간 |
| 131 | + |
| 132 | +**총합**: 약 10시간 (1-2일) |
| 133 | + |
| 134 | +--- |
| 135 | + |
| 136 | +## 성공 기준 |
| 137 | + |
| 138 | +- [ ] Vercel 배포 성공 (HTTPS 도메인 생성) |
| 139 | +- [ ] Gemini API 연동 정상 동작 |
| 140 | +- [ ] MCP 33개 도구 모두 호출 가능 |
| 141 | +- [ ] 카카오톡 스타일 UI 구현 |
| 142 | +- [ ] 모바일/데스크톱 반응형 |
| 143 | +- [ ] 와이프 + 지인 1명 이상 테스트 완료 |
0 commit comments