시스템 & UI/UX

NginxProxyGuard는 사용자 경험을 최우선으로 설계된 현대적인 웹 인터페이스를 제공합니다.

대시보드

대시보드는 시스템의 전체 상태를 한눈에 파악할 수 있는 중앙 허브입니다.

실시간 통계 카드

상단에 배치된 통계 카드는 핵심 지표를 실시간으로 보여줍니다:

시간별 트래픽 차트

24시간 동안의 요청 패턴을 시각화합니다:

• 시간대별 요청 수 추이
• 정상 요청 vs 차단된 요청 비교
• 피크 시간대 식별

세계 지도 시각화

GeoIP 데이터를 기반으로 트래픽 출처를 지도에 표시합니다:

• 국가별 요청 분포
• 차단된 국가 하이라이트
• 인터랙티브 지도 (클릭 시 상세 정보)

Docker 컨테이너 상태

시스템을 구성하는 컨테이너들의 상태를 모니터링합니다:

• nginx, API, DB 등 컨테이너 상태
• CPU/메모리 사용량
• 업타임 정보

보안 이벤트 요약

최근 보안 이벤트를 요약하여 보여줍니다:

• 최근 WAF 차단 이벤트
• 봇 필터 활동
• IP 차단 현황

다국어 지원 (i18n)

NginxProxyGuard는 완벽한 다국어 환경을 제공합니다.

지원 언어

언어 전환 방법

1. 자동 감지: 브라우저 언어 설정에 따라 자동 선택
2. 수동 전환: 상단 네비게이션의 언어 선택기 사용
3. 사용자 설정: 계정 설정에서 기본 언어 지정

번역 범위

모든 UI 요소가 번역되어 있습니다:

• 네비게이션 메뉴
• 버튼 및 레이블
• 폼 필드 및 플레이스홀더
• 에러 메시지 및 알림
• 도움말 텍스트

테마 및 디자인

다크 모드

눈의 피로를 줄이는 다크 모드를 지원합니다:

• 시스템 설정 자동 감지
• 수동 토글 가능
• 모든 컴포넌트에 최적화된 색상

라이트 모드

밝은 환경에 최적화된 라이트 모드:

• 선명한 대비
• 가독성 높은 디자인

테마 전환

상단 네비게이션 바의 테마 토글 버튼으로 즉시 전환할 수 있습니다.

반응형 디자인

모든 화면 크기에 완벽하게 대응합니다.

데스크탑 (1280px+)

• 넓은 사이드바 네비게이션
• 멀티 컬럼 레이아웃
• 확장된 테이블 뷰

태블릿 (768px - 1279px)

• 축소된 사이드바 (아이콘만 표시)
• 적응형 그리드
• 터치 친화적 버튼

모바일 (~ 767px)

• 햄버거 메뉴로 네비게이션
• 단일 컬럼 레이아웃
• 스와이프 가능한 카드

네비게이션 구조

메인 네비게이션

상단 탭 형태의 메인 메뉴:

1. Dashboard
2. Proxy Hosts
3. Redirects
4. WAF / Blocking
5. Access Control
6. Certificates
7. Logs
8. Settings

서브 네비게이션

각 메인 메뉴 아래에 하위 탭이 있습니다:

WAF / Blocking:

• WAF Policy
• IP Bans
• URI Blocks
• Exploit Rules
• Fail2ban
• WAF Tester

Certificates:

• Certificates
• Issue/Renewal History
• DNS Providers

Logs:

• Access Logs
• WAF Events
• Bot Filter
• Exploit Blocks
• System Logs
• Admin Audit
• Raw Files

Settings:

• Global Settings
• CAPTCHA
• GeoIP
• Bot Filter
• WAF Auto-Ban
• SSL / ACME
• Maintenance
• Backups
• System Logs

사용자 계정

로그인 화면

• 사용자명/비밀번호 인증
• 2FA (TOTP) 지원
• 로그인 시도 제한

계정 설정

• 비밀번호 변경
• 사용자명 변경
• 2단계 인증 설정/해제
• 언어 기본값 설정
• 폰트 설정

2단계 인증 (2FA)

TOTP 기반 2단계 인증:

1. 설정: QR 코드 스캔 또는 시크릿 키 입력
2. 활성화: 6자리 코드로 확인
3. 로그인: 비밀번호 + OTP 코드

지원 앱:

• Google Authenticator
• Authy
• Microsoft Authenticator
• 1Password
• 기타 TOTP 호환 앱

API 토큰 관리

외부 시스템과의 연동을 위한 API 토큰:

토큰 생성

• 토큰 이름 지정
• 권한 범위 설정 (읽기/쓰기)
• 만료일 설정 (선택)

토큰 관리

• 활성/비활성 토큰 목록
• 사용 통계 확인
• 토큰 폐기

권한 범위

초기 설정 마법사

첫 설치 시 가이드된 설정 프로세스:

1. 관리자 계정 생성

   • 사용자명 설정
   • 비밀번호 설정

2. 기본 설정

   • 언어 선택
   • 테마 선택

3. 보안 설정 (선택)

   • 2FA 활성화
   • GeoIP 설정

알림 시스템

토스트 알림

작업 결과를 즉시 피드백:

• 성공 (초록색)
• 경고 (노란색)
• 오류 (빨간색)
• 정보 (파란색)

인라인 알림

폼 검증 및 상태 메시지:

• 필드별 오류 표시
• 저장 상태 표시
• 동기화 상태 표시

키보드 단축키

효율적인 작업을 위한 단축키:

접근성

WCAG 2.1 가이드라인 준수:

• 키보드 네비게이션 지원
• 스크린 리더 호환
• 충분한 색상 대비
• 포커스 표시