# 왜 대시보드 개선이 필요했나
여러 서비스를 운영하다 보면 대시보드가 여러 개 생기게 마련입니다. 인증 시스템용 대시보드, AI 챗봇 관리용 대시보드 등 각각의 목적에 맞게 분리되어 있죠. 하지만 이들이 제대로 통합되지 않으면 사용자 경험이 떨어지고, 헬스체크가 제대로 작동하지 않는 등의 문제가 발생합니다.
이번 글에서는 실제 프로덕션 환경에서 두 개의 대시보드를 개선하면서 겪은 문제와 해결 과정을 공유합니다.
## 인증 대시보드의 헬스체크 문제
### 문제 상황
Cloudflare Tunnel을 통해 접근하는 인증 관리 대시보드에서 PostgreSQL과 Redis가 계속 'Unreachable' 상태로 표시되는 문제가 있었습니다. 실제로는 정상 작동하는데도 불구하고요.
### 원인 분석
헬스체크 로직이 HTTP 200 응답만을 '연결됨'으로 간주하고 있었습니다. 하지만 인증이 필요한 엔드포인트의 경우 401(Unauthorized)이나 403(Forbidden) 응답이 오더라도 "서버가 응답한다"는 의미이므로 '연결됨' 상태로 처리해야 합니다.
```javascript
// 개선 전
if (response.status === 200) {
return 'Connected';
}
return 'Unreachable';
// 개선 후
if ([200, 401, 403].includes(response.status)) {
return 'Connected';
}
return 'Unreachable';
```
### 교훈
헬스체크는 단순히 "서비스가 살아있는가"를 확인하는 것입니다. 인증 실패는 서비스가 정상 작동한다는 증거입니다.
## AI 챗봇 대시보드 전면 개편
### 아키텍처 구성
- Nginx 리버스 프록시를 통한 라우팅
- 백엔드 API 서버 분리
- 외부 인증 시스템 연동
Cloudflare Tunnel 대신 전통적인 Nginx 프록시 방식을 사용한 이유는 레거시 시스템과의 호환성 때문이었습니다.
### 주요 개선 사항
#### 1. 네비게이션 정리
더 이상 사용하지 않는 메뉴를 제거하고, 외부 인증 시스템으로의 링크를 추가했습니다. 사용자가 한 곳에서 모든 관리 도구에 접근할 수 있도록 했습니다.
#### 2. 채팅 페이지 UI/UX 개선
기존의 단조로운 목록 형태에서 메신저 스타일로 전면 개편했습니다.
- **좌측 패널**: 조직 트리 구조로 봇 목록 표시
- **우측 패널**: 카카오톡 스타일의 메시지 피드
- **@멘션 기능**: 자동완성을 지원하는 멘션 시스템으로 다중 수신자 지정 가능
```javascript
// @멘션 자동완성 구현 예시
const handleInputChange = (text) => {
const mentionMatch = text.match(/@(\w*)$/);
if (mentionMatch) {
const query = mentionMatch[1];
const suggestions = bots.filter(bot =>
bot.name.toLowerCase().includes(query.toLowerCase())
);
setSuggestions(suggestions);
}
};
```
#### 3. 상태 대시보드
6가지 상태(대기중, 처리중, 완료, 실패, 보류, 만료)를 컬러 코딩된 카드로 표시했습니다. 각 카드를 클릭하면 최근 10개 메시지가 드롭다운으로 표시됩니다.
#### 4. 숫자 포맷팅
큰 숫자는 가독성을 위해 'k' 단위로 표시합니다 (예: 7,275 → 7.3k).
```javascript
const formatNumber = (num) => {
if (num >= 1000) {
return (num / 1000).toFixed(1) + 'k';
}
return num.toString();
};
```
### 배포 프로세스
Docker 컨테이너 환경에서 프론트엔드를 수정할 때는 다음 프로세스를 따랐습니다.
1. 로컬에서 파일 수정 및 테스트
2. `docker cp` 명령으로 컨테이너에 파일 복사
3. 컨테이너 재시작
4. 프로덕션 환경에서 검증
```bash
# 파일을 컨테이너로 복사
docker cp ./src/components/Dashboard.tsx container_name:/app/src/components/
# 컨테이너 재시작
docker restart container_name
```
### 세션 관리 주의사항
외부 인증 시스템과 연동할 때는 세션 유효성 체크가 중요합니다. 백그라운드 워커가 메시지를 처리하기 전에 `/api/v1/session/check-active` 같은 엔드포인트로 세션을 확인하는 로직을 추가해야 합니다.
## 다중 도메인 환경 관리
하나의 서비스가 여러 도메인으로 접근 가능할 때는 API_BASE 자동 감지 로직이 필요합니다.
```javascript
const detectApiBase = () => {
const hostname = window.location.hostname;
if (hostname.includes('cloudflare-domain.com')) {
return 'https://api.cloudflare-domain.com';
}
return 'https://api.nginx-domain.com';
};
```
## 핵심 요약
1. **헬스체크는 유연하게**: 401/403도 '연결됨'으로 처리
2. **UX 개선은 점진적으로**: 네비게이션 → 메인 UI → 상태 대시보드 순서로 진행
3. **배포는 안전하게**: docker cp + restart로 최소한의 다운타임
4. **세션 검증 필수**: 외부 인증 시스템 연동 시 항상 세션 체크
5. **다중 도메인 대비**: 환경에 따라 API 엔드포인트 자동 감지
## 다음 단계
- WebSocket 기반 실시간 업데이트 도입 검토
- 메시지 검색 기능 추가
- 모바일 반응형 디자인 개선
- 성능 모니터링 대시보드 통합
대시보드는 사용자가 가장 자주 보는 화면입니다. 작은 개선이 큰 생산성 향상으로 이어질 수 있으니, 사용자 피드백을 적극 반영하며 지속적으로 개선해나가시길 바랍니다.