SvelteKit으로 관리자 대시보드 만들기 — 차트, 테이블, 권한
기업 내부 시스템에서 관리자 대시보드는 핵심 인프라입니다. 매출 현황을 한눈에 파악하고, 사용자를 효율적으로 관리하며, 권한에 따라 기능 접근을 제어하는 것은 모든 B2B 서비스의 기본 요구사항이죠. 이번 글에서는 SvelteKit과 Chart.js를 활용해 실무에서 바로 적용 가능한 어드민 대시보드를 구현한 경험을 공유합니다.
왜 SvelteKit을 선택했는가
관리자 대시보드 프레임워크로 SvelteKit을 선택한 이유는 명확합니다. 첫째, 컴파일 타임 최적화로 번들 사이즈가 작아 로딩 속도가 빠릅니다. 둘째, 보일러플레이트 코드가 적어 개발 생산성이 높습니다. 셋째, 서버 사이드 렌더링과 API 라우트를 기본 지원하여 백엔드 연동이 수월합니다.
특히 어드민 페이지는 수많은 데이터 테이블과 차트를 렌더링해야 하는데, Svelte의 반응성 시스템은 복잡한 상태 관리 없이도 실시간 데이터 업데이트를 깔끔하게 처리합니다. React나 Vue에서 필요한 상태 관리 라이브러리 의존성을 크게 줄일 수 있었습니다.
매출 차트 구현: Chart.js 통합
대시보드의 핵심인 매출 차트는 Chart.js를 SvelteKit에 통합하여 구현했습니다. 일별, 주별, 월별 매출 추이를 시각화하고, 전년 동기 대비 비교 차트까지 제공합니다.
주요 구현 포인트
- SSR 호환성 처리: Chart.js는 브라우저 환경에서만 동작하므로 onMount 훅 내에서 동적 임포트를 활용했습니다.
- 반응형 차트: 컨테이너 크기 변화에 따라 자동으로 리사이즈되도록 ResizeObserver를 적용했습니다.
- 데이터 캐싱: SvelteKit의 load 함수에서 서버 사이드 데이터 페칭과 캐싱을 처리하여 초기 로딩 속도를 개선했습니다.
- 실시간 업데이트: 5분 간격으로 최신 매출 데이터를 폴링하여 차트를 갱신하는 로직을 구현했습니다.
차트 컴포넌트는 재사용 가능하도록 설계하여 라인 차트, 바 차트, 도넛 차트를 props만 변경해 활용할 수 있게 만들었습니다. 이를 통해 매출 외에도 가입자 추이, 트래픽 분석 등 다양한 지표 시각화에 동일한 컴포넌트를 적용하고 있습니다.
사용자 관리 테이블 설계
수천 명의 사용자를 관리하는 테이블은 성능과 사용성 모두 중요합니다. 단순히 데이터를 나열하는 것을 넘어, 검색, 필터링, 정렬, 페이지네이션, 일괄 작업까지 지원해야 합니다.
테이블 핵심 기능
- 서버 사이드 페이지네이션: 전체 데이터를 불러오지 않고 필요한 페이지만 API로 요청하여 메모리 효율을 높였습니다.
- 복합 필터링: 가입일, 구독 상태, 역할 등 여러 조건을 조합한 필터를 URL 쿼리 파라미터로 관리하여 필터 상태가 공유 가능합니다.
- 인라인 수정: 테이블 셀을 클릭하면 바로 수정 모드로 전환되어 별도 페이지 이동 없이 빠른 수정이 가능합니다.
- 일괄 작업: 체크박스로 여러 사용자를 선택하고 역할 변경, 계정 비활성화 등을 한 번에 처리합니다.
테이블 컴포넌트는 가상 스크롤링을 적용하여 1만 건 이상의 데이터도 버벅임 없이 렌더링됩니다. Svelte의 each 블록과 key 바인딩을 최적화하여 DOM 업데이트를 최소화한 것이 성능 향상의 핵심이었습니다.
역할 기반 권한 관리 시스템
기업 환경에서 권한 관리는 보안의 기본입니다. 저희는 역할 기반 접근 제어 방식을 채택하여 유연하면서도 관리하기 쉬운 권한 시스템을 구축했습니다.
권한 체계 설계
- 슈퍼 관리자: 모든 기능 접근 및 다른 관리자 권한 설정 가능
- 운영 관리자: 사용자 관리, 콘텐츠 관리 가능, 시스템 설정 불가
- 조회 전용: 대시보드 및 리포트 조회만 가능, 수정 권한 없음
- 부서별 관리자: 특정 부서 소속 사용자만 관리 가능
권한 검증은 세 단계로 이루어집니다. 먼저 SvelteKit의 hooks에서 세션 유효성을 검증합니다. 다음으로 레이아웃 컴포넌트에서 페이지 접근 권한을 확인하여 권한 없는 페이지는 아예 렌더링하지 않습니다. 마지막으로 개별 API 엔드포인트에서 액션별 권한을 다시 한번 체크하여 클라이언트 우회 공격을 방지합니다.
UI 측면에서는 권한이 없는 버튼이나 메뉴는 숨기거나 비활성화 처리하여 사용자 경험을 해치지 않으면서도 보안을 유지합니다. 권한 변경 시에는 관리자에게 이메일 알림이 발송되어 감사 추적이 가능합니다.
실무 적용 시 고려사항
프로젝트를 진행하며 얻은 몇 가지 실무 인사이트를 공유합니다.
- 에러 바운더리 필수: 차트나 테이블에서 예외 발생 시 전체 페이지가 깨지지 않도록 컴포넌트별 에러 처리를 적용하세요.
- 로딩 상태 명시: 데이터 페칭 중임을 명확히 표시하여 사용자가 시스템 오류로 오해하지 않도록 합니다.
- 감사 로그: 관리자의 모든 액션을 기록하여 추후 문제 발생 시 추적이 가능하도록 합니다.
- 다크 모드: 어드민 페이지는 장시간 사용하므로 눈의 피로를 줄이는 다크 모드 지원을 권장합니다.
문의하기
더 자세한 상담이 필요하시면 코드벤터로 문의해주세요.
- 이메일: [email protected]
- 웹사이트: codepick.kr
