세무사가 만든 세금 챗봇 — 범용 AI와 다른 전문 AI 서비스를 만든 여정

김 김상문2026. 4. 7.조회 0

소개

세금은 누구에게나 어렵습니다. 특히 상속세·증여세는 한 번의 실수가 수천만 원의 차이를 만들 수 있습니다. ChatGPT에 물어보면 "세율은 10~50%입니다"처럼 두루뭉술한 답변만 돌아옵니다.

**AI.TaxBot**은 이 문제를 해결하기 위해 만들었습니다. 세무사의 실무 판단과 코드 기반의 정확한 계산을 결합한, 범용 AI와 명확히 다른 전문 세금 상담 서비스입니다.

진행 방법

## 1단계: 코드 점검 및 핵심 버그 수정

프로젝트는 이미 MVP 코드가 존재했지만, 실제 서비스 수준으로 끌어올리기 위한 전면 점검이 필요했습니다.

### 발견한 주요 문제들

**React 상태 업데이트 버그**
스트리밍 응답을 화면에 실시간으로 표시하는 로직에서 stale state 문제가 발생했습니다. AI 답변이 누적되지 않고 덮어써지는 현상이었습니다.

```typescript
// 문제: 직접 참조로 인한 stale state
setMessages([...messages, newMsg]);

// 수정: 함수형 업데이트로 항상 최신 상태 보장
setMessages(prev => [...prev.slice(0, -1), { role: "assistant", content: fullText }]);
```

**Function Call 루프 설계**
Gemini API의 Function Calling 기능을 활용해 AI가 세금 계산기를 직접 호출하도록 설계했습니다. 최대 4회 반복 루프를 구현해 복잡한 계산도 안정적으로 처리합니다.

**보안 강화**
- HTTP 보안 헤더 추가 (CSP, X-Frame-Options, HSTS 등)
- 민감정보 패턴 감지 (주민번호, 카드번호)
- 메시지 길이·개수 제한으로 API 남용 방지

**RAG 분류 키워드 오류**
`"억"` 키워드가 너무 광범위하게 매칭되는 문제를 `"억원"`으로 수정해 분류 정확도를 높였습니다.

## 2단계: 디자인 시스템 구축

### Black & Lime 브랜드 컬러 선정

초기 설계는 코랄(Coral) 색상 기반이었으나, AI 전문 서비스의 신뢰감과 기술적 세련미를 위해 **Black & Lime(#C8FF00)** 시스템으로 전면 전환했습니다.

```css
--color-brand-black:  #0F0F0F   /* 기본 배경 */
--color-brand-lime:   #C8FF00   /* 핵심 브랜드 컬러 */
--color-brand-white:  #F5F5F5   /* 메인 텍스트 */
--color-brand-gray:   #888888   /* 서브 텍스트 */
```

라임색은 단순히 예쁜 색상이 아닙니다. 어두운 배경에서 강한 대비로 CTA 버튼과 핵심 정보를 즉각적으로 눈에 띄게 만들어, 사용자가 다음 행동을 자연스럽게 유도합니다.

### 폰트 시스템

- **Clash Grotesk:** 헤딩과 본문에 사용. 기하학적이고 굵은 자형이 기술적 신뢰감을 줍니다.
- **General Sans:** 버튼, 라벨, 네비게이션에 사용. 고급스럽고 정제된 느낌을 더합니다.
- **Pretendard:** 한글 폰트 폴백. 한국어 가독성을 보장합니다.

### 섹션별 배경색 차별화

단순히 구분선으로 섹션을 나누는 대신, 미묘하게 다른 검정색 톤을 사용해 시각적 깊이감을 만들었습니다.

| 섹션 | 배경 | 효과 |
|------|------|------|
| Hero, FAQ | #0F0F0F | 기본 베이스 |
| 비교, 서비스 | #131313 | 살짝 밝아 섹션 구분 |
| 네비, 푸터 | #0A0A0A | 약간 어두워 프레임 역할 |

## 3단계: 랜딩 페이지 재설계

### 네비게이션 바

Sticky 네비게이션으로 어느 위치에서도 바로 상담을 시작할 수 있게 했습니다.
- 좌측: 로고 (클릭 시 상단으로 복귀)
- 우측: 섹션 앵커 링크 + "무료 상담 시작" CTA

앵커 링크 클릭 후 로고 클릭 시 홈으로 돌아오지 않는 Next.js의 동일 경로 인식 문제는, `<Link>` 대신 `<a href="/">` 태그를 사용해 해결했습니다.

### Hero 섹션

```
AI.TaxBot
```

`AI.`는 흰색, `TaxBot`은 라임색으로 분리해 브랜드명 자체가 색상으로 의미를 전달합니다. 108px 크기의 극대화된 타이포그래피로 첫 인상을 압도합니다.

### 비교 섹션 (핵심 차별화)

범용 AI vs AI.TaxBot의 차이를 3가지 포인트로 명확하게 대비시켰습니다. 빨간 ✕와 라임 ✓의 시각적 대비가 메시지를 즉각적으로 전달합니다.

### 섹션 배치 최적화

초기 버전에서 Expert CTA(세무사 감수 섹션)의 위치를 여러 차례 조정했습니다. 최종적으로 FAQ 다음, 최종 CTA 직전에 배치해 "신뢰 형성 → 의심 해소 → 행동 유도"의 자연스러운 흐름을 만들었습니다.

## 4단계: 채팅 UI 개선

### 사용자 경험 세부 조정

- AI 로고 + 브랜드명 전체를 클릭 가능한 홈 링크로 구성
- 로딩 중 bouncing dots 애니메이션 (라임 색상)
- 전문가 상담 키워드 감지 시 배너 자동 표시
- 복사 버튼으로 AI 답변 쉽게 공유

### 에러 처리 고도화

단순한 "오류가 발생했습니다" 대신 실제 서버 에러 메시지를 사용자에게 표시해 문제 원인을 즉시 파악할 수 있게 했습니다. 특히 Google AI API Spending Cap 초과 시 전용 안내 메시지를 표시합니다.

## 5단계: 배포

### Vercel 배포

GitHub 저장소를 Vercel에 연결해 `git push`만으로 자동 배포가 이루어지도록 구성했습니다.

```
GitHub Push → Vercel 자동 빌드 → 프로덕션 배포
```

### Cloudflare + 커스텀 도메인 설정

단순 Vercel 배포를 넘어, 보안과 성능을 위해 Cloudflare를 중간에 배치했습니다.

```
사용자 → Cloudflare (보안/CDN) → Vercel (앱 서버)
```

**설정 과정:**
1. Cloudflare에 `taxbot.kr` 도메인 등록
2. DNS 레코드 설정 (A 레코드 → Vercel IP, CNAME → Vercel)
3. 가비아에서 네임서버를 Cloudflare로 변경
4. Vercel에 커스텀 도메인 연결

Cloudflare의 Proxied 모드를 활성화해 DDoS 방어, WAF(웹 방화벽), SSL/TLS 자동 갱신을 모두 무료로 적용했습니다.

**결과:**
- `https://taxbot.kr` 정상 서비스
- `https://www.taxbot.kr` 리다이렉트 처리
- HTTP → HTTPS 자동 강제

---

## 기술적 선택과 이유

### Next.js App Router
서버 컴포넌트와 클라이언트 컴포넌트를 명확히 분리해 초기 로딩 성능을 최적화했습니다. 랜딩 페이지는 서버 컴포넌트로, 채팅 페이지만 클라이언트 컴포넌트로 구성했습니다.

### Tailwind CSS v4
CSS 변수 기반의 `@theme` 설정 방식을 사용해 디자인 토큰을 코드와 완전히 분리했습니다. 컬러, 폰트 등 모든 브랜드 요소를 한 곳에서 관리합니다.

### 경량 RAG (Retrieval Augmented Generation)
벡터 DB 없이 JSON/MD 파일 기반의 경량 RAG를 구현했습니다. 질문 유형을 분류해 관련 세법 자료만 선택적으로 AI에게 주입합니다. 이를 통해 "환각(Hallucination)" 없이 정확한 법 조문을 인용한 답변이 가능합니다.

### Gemini Function Calling
세금 계산을 AI가 직접 하지 않고, AI가 계산기 함수를 호출하도록 설계했습니다. 계산은 TypeScript 코드로 100% 정확하게 처리하고, AI는 그 결과를 해석해 설명합니다. AI의 장점(자연어 이해)과 코드의 장점(정확한 계산)을 결합한 구조입니다.

결과와 배운점

## 결과

| 항목 | 내용 |
|------|------|
| 서비스 URL | https://taxbot.kr |
| 호스팅 | Vercel (서울 엣지) |
| 보안 | Cloudflare (DDoS, WAF, SSL) |
| 도메인 | taxbot.kr (가비아 구매) |
| 기술 스택 | Next.js 16 + Gemini AI + Tailwind v4 |
| 주요 기능 | 상속세·증여세 코드 기반 정확 계산, RAG 전문 지식 |

---

## 배운 점

**1. 디자인은 색상 선택부터**
브랜드 컬러 하나가 서비스의 성격 전체를 결정합니다. Black & Lime 선택 이후 나머지 디자인 결정이 훨씬 쉬워졌습니다.

**2. AI의 역할 정의가 핵심**
AI에게 모든 것을 맡기지 않고, AI가 해야 할 것(자연어 이해, 상담 흐름)과 코드가 해야 할 것(정확한 계산)을 명확히 분리하는 것이 서비스 신뢰도의 핵심이었습니다.

**3. 배포는 초기부터 설계**
Cloudflare + Vercel 조합은 무료로 엔터프라이즈급 보안과 성능을 제공합니다. 처음부터 이 아키텍처를 목표로 설계하면 나중에 마이그레이션 비용이 없습니다.

**4. 에러 메시지도 UX**
"오류가 발생했습니다" 대신 "API 사용 한도에 도달했습니다. Google AI Studio에서 Spending Cap을 확인해주세요."처럼 구체적인 에러 메시지 하나가 사용자와 개발자 모두의 시간을 아껴줍니다.

댓글 0개

로그인하고 댓글을 작성하세요