# SmartAdmin 5.5 — Bootstrap 템플릿 종합 개선 프로젝트 **프로젝트 시작**: 2026-07-05 **목표 완료**: 2026-07-15 (11일) **상태**: 🚀 준비 완료 --- ## 📊 현재 상태 | 항목 | 수량 | 상태 | |------|------|------| | **총 HTML 페이지** | 160개 | 정적 (Node.js 없음) | | **대시보드** | 4개 | 개선 필요 | | **인증 페이지** | 5개 | 리팩토링 필요 | | **UI 컴포넌트** | 23개 | 최적화 필요 | | **폼 페이지** | 4개 | 개선 필요 | | **데이터 테이블** | 20개 | 반응형 최적화 필요 | | **CSS 파일** | 1개 (minified) | 모듈화 필요 | | **JavaScript** | core, optional, pages | 정리 필요 | **기술 스택**: - ✅ Bootstrap 5.x (이미 사용 중) - ✅ FontAwesome 6.x - ✅ SmartAdmin Icons - ✅ ApexCharts - ✅ SmartTables - ❌ CSS/JS 프리프로세서 없음 (순수 HTML/CSS/JS) --- ## 🎯 작업 범위 (4개 영역) ### **1️⃣ 기존 페이지 개선 (리팩토링)** #### Phase 1.1: 대시보드 최적화 (4개) - `dashboard-control-center.html` → Bootstrap Grid 개선 - `dashboard-marketing.html` → 카드 레이아웃 정리 - `dashboard-project-management.html` → Responsive 강화 - `dashboard-subscription.html` → 모바일 최적화 **체크리스트**: - [ ] 12-column Bootstrap Grid 정확성 검증 - [ ] 컨테이너 너비 최적화 - [ ] 반응형 클래스 추가 (sm, md, lg, xl, xxl) - [ ] 모바일 우선 설계 구현 - [ ] 다크모드 호환성 확인 **예상 시간**: 4시간 --- #### Phase 1.2: 인증 페이지 리디자인 (5개) - `auth-login.html` → 모던 디자인 - `auth-register.html` → 통일된 스타일 - `auth-forgetpassword.html` → 사용성 개선 - `auth-lockscreen.html` → 미니멀 디자인 - `auth-twofactor.html` → 보안 UX **체크리스트**: - [ ] 폼 검증 스타일 (Bootstrap is-invalid, is-valid) - [ ] 에러 메시지 표준화 - [ ] 비밀번호 강도 표시기 - [ ] 소셜 로그인 버튼 추가 - [ ] 모바일 반응형 **예상 시간**: 5시간 --- #### Phase 1.3: 폼 페이지 개선 (4개) - `forms-inputs.html` → 입력 필드 통일 - `forms-validation.html` → 검증 규칙 정리 - `forms-checkbox-radio.html` → 선택 컴포넌트 개선 - `forms-groups.html` → 필드 그룹화 **체크리스트**: - [ ] Bootstrap form-control 클래스 적용 - [ ] 라벨 정렬 (위/좌측) 옵션 - [ ] 입력 크기 (sm, lg) 다양성 - [ ] 장애인 접근성 (ARIA) - [ ] 인라인 폼 레이아웃 **예상 시간**: 4시간 --- #### Phase 1.4: 테이블 최적화 (20개) - `tables-basic.html` → Bootstrap Table 클래스 표준화 - `smarttables-*.html` → 반응형 테이블 패턴 - 스크롤 테이블 → 수평 스크롤 개선 - 모바일 스택 레이아웃 → 카드 형식 대체 안 제공 **체크리스트**: - [ ] 테이블 테마 (striped, hover, bordered) - [ ] 반응형 스크롤 (overflow-x-auto) - [ ] 모바일 카드 뷰 (선택 사항) - [ ] 데이터 정렬/필터 UI - [ ] 페이지네이션 스타일 **예상 시간**: 6시간 --- ### **2️⃣ 새 페이지/컴포넌트 추가** #### Phase 2.1: 사용자 관리 시스템 (신규 5개) - `users-list.html` → 사용자 목록 (필터, 검색) - `users-detail.html` → 사용자 상세 정보 - `users-edit.html` → 사용자 편집 - `users-roles.html` → 역할/권한 관리 - `users-audit.html` → 감사 로그 **기술**: - SmartTables (필터, 정렬, 검색) - 모달 폼 (부트스트랩 Modal) - 배치 작업 (선택 체크박스) - 상태 배지 (승인, 거부, 대기) **예상 시간**: 8시간 --- #### Phase 2.2: 설정/환경 페이지 (신규 4개) - `settings-general.html` → 일반 설정 - `settings-security.html` → 보안 설정 - `settings-notifications.html` → 알림 설정 - `settings-api.html` → API 키 관리 **기술**: - 탭 인터페이스 (Bootstrap Nav-tabs) - 토글 스위치 (Bootstrap Switch) - 폼 저장 (로딩 상태 표시) **예상 시간**: 5시간 --- #### Phase 2.3: 보고서/분석 (신규 3개) - `reports-dashboard.html` → 리포트 대시보드 - `reports-export.html` → 내보내기 옵션 - `reports-schedule.html` → 예약 리포트 **기술**: - ApexCharts 통합 - 데이트 피커 - 내보내기 옵션 (PDF, CSV, Excel) **예상 시간**: 6시간 --- ### **3️⃣ UI/UX 개선 (디자인 시스템)** #### Phase 3.1: 컴포넌트 표준화 - 버튼: 크기 (xs, sm, md, lg), 상태 (default, primary, danger) - 카드: 헤더, 바디, 풋터 구조 - 배지: 상태별 색상 (success, warning, danger, info) - 알림: 4가지 유형 (success, warning, danger, info) - 모달: 기본, 큰, 작은 사이즈 - 탭: 수평, 수직, 약 탭 **산출물**: - `components-showcase.html` (모든 컴포넌트 시연) - `style-guide.html` (스타일 가이드) - `css/components.css` (모듈화된 CSS) **예상 시간**: 8시간 --- #### Phase 3.2: 컬러/타이포그래피 시스템 - 기본 색상 (Primary, Secondary, Success, Warning, Danger, Info) - 중성 색상 (Gray, Dark, Light) - 텍스트 타이포그래피 (h1~h6, body, small, lead) - 간격 시스템 (패딩, 마진) **산출물**: - `css/colors.css` (색상 변수) - `css/typography.css` (타이포그래피) - `colors-palette.html` (색상 팔레트 페이지) **예상 시간**: 4시간 --- #### Phase 3.3: 아이콘 시스템 정리 - FontAwesome 6.x 최신 아이콘 - SmartAdmin 커스텀 아이콘 - 아이콘 크기 표준화 (16px, 20px, 24px, 32px) - 아이콘 색상 팔레트 **산출물**: - `icons-reference.html` (아이콘 라이브러리) **예상 시간**: 3시간 --- ### **4️⃣ 반응형 최적화** #### Phase 4.1: 모바일 우선 설계 - 화면 너비별 테스트 (320px, 375px, 425px, 768px, 1024px, 1440px) - 터치 대상 크기 최소 44x44px - 모바일 내비게이션 (햄버거 메뉴) - 모바일 폼 최적화 **예상 시간**: 6시간 --- #### Phase 4.2: 다크모드 완벽 지원 - Bootstrap 다크모드 변수 적용 - 모든 페이지 다크모드 테스트 - 이미지 다크모드 대응 (필터) - 색상 대비 WCAG AA 준수 **예상 시간**: 4시간 --- #### Phase 4.3: 성능 최적화 - CSS 파일 모듈화 (현재 1개 → 10개+) - JavaScript 최소화 - 이미지 최적화 - 폰트 로딩 최적화 (웹폰트) **예상 시간**: 5시간 --- ## 📅 전체 일정 | Phase | 작업 | 예상 시간 | 시작 | 완료 | |-------|------|----------|------|------| | **1** | 기존 페이지 개선 | 19시간 | 7/5 | 7/7 | | **2** | 신규 페이지 추가 | 19시간 | 7/7 | 7/9 | | **3** | UI/UX 개선 | 15시간 | 7/9 | 7/11 | | **4** | 반응형 최적화 | 15시간 | 7/11 | 7/13 | | **5** | 통합 테스트 | 8시간 | 7/13 | 7/14 | | **6** | 최종 문서화 | 4시간 | 7/14 | 7/15 | **총 예상 시간**: 80시간 (약 11일, 하루 7시간 기준) --- ## ✅ 성공 기준 ### 기존 페이지 - [ ] 모든 페이지 반응형 (320px ~ 1440px) - [ ] 모바일/태블릿/데스크톱 각각 검증 - [ ] 다크모드 호환성 100% - [ ] WCAG AA 접근성 준수 - [ ] 로딩 시간 < 3초 (LCP) ### 신규 페이지 - [ ] 5개 + 4개 + 3개 = 12개 새 페이지 생성 - [ ] 모두 Bootstrap 기반 - [ ] 모두 반응형 ### 디자인 시스템 - [ ] 컴포넌트 쇼케이스 완성 - [ ] 스타일 가이드 작성 - [ ] CSS 모듈화 (최소 10개 파일) - [ ] 컬러/타이포그래피 문서화 ### 반응형 - [ ] 6개 화면 크기별 완벽 동작 - [ ] 터치 인터랙션 최적화 - [ ] 모바일 내비게이션 구현 - [ ] 다크모드 전체 지원 --- ## 📂 결과물 구조 ``` smartadmin/ ├── index.html (개선됨) ├── dashboard/ │ ├── control-center.html (리팩토링) │ ├── marketing.html (리팩토링) │ ├── project-management.html (리팩토링) │ └── subscription.html (리팩토링) ├── auth/ │ ├── login.html (개선됨) │ ├── register.html (개선됨) │ ├── forgetpassword.html (개선됨) │ ├── lockscreen.html (개선됨) │ └── twofactor.html (개선됨) ├── users/ (신규) │ ├── list.html │ ├── detail.html │ ├── edit.html │ ├── roles.html │ └── audit.html ├── settings/ (신규) │ ├── general.html │ ├── security.html │ ├── notifications.html │ └── api.html ├── reports/ (신규) │ ├── dashboard.html │ ├── export.html │ └── schedule.html ├── forms/ (개선됨) │ ├── inputs.html │ ├── validation.html │ ├── checkbox-radio.html │ └── groups.html ├── tables/ (개선됨) │ ├── basic.html │ ├── smarttables/ (20개) ├── ui/ │ ├── components-showcase.html (신규) │ ├── style-guide.html (신규) │ └── ... ├── css/ (모듈화됨) │ ├── base.css │ ├── components.css │ ├── colors.css │ ├── typography.css │ ├── responsive.css │ ├── darkmode.css │ └── smartapp.min.css (유지) ├── docs/ │ ├── BOOTSTRAP_GUIDELINES.md │ ├── COMPONENT_DOCUMENTATION.md │ ├── ACCESSIBILITY_CHECKLIST.md │ └── MOBILE_TESTING_RESULTS.md └── BOOTSTRAP_MIGRATION_WBS.md (이 문서) ``` --- ## 🔄 다음 단계 ### 즉시 시작 (2026-07-05) 1. **Phase 1.1 시작** — 대시보드 최적화 - [ ] `dashboard-control-center.html` 검토 - [ ] Bootstrap Grid 정확성 확인 - [ ] 반응형 클래스 추가 - [ ] 모바일 테스트 2. **Git 저장소 설정** - [ ] SmartAdmin 프로젝트를 Git으로 초기화 (또는 기존 저장소 확인) - [ ] 분기 생성: `feature/bootstrap-migration` - [ ] 첫 커밋: "chore: Initialize SmartAdmin Bootstrap Migration WBS" 3. **개발 환경 설정** - [ ] 로컬 서버 시작 (Python SimpleHTTPServer 또는 Node.js) - [ ] 모바일 디버깅 도구 설정 (Chrome DevTools, responsive mode) --- ## 📝 커밋 규칙 ``` Format: [Phase].[Stage] Examples: - "1.1: Refactor dashboard-control-center Grid layout" - "2.1: Add users-list.html with SmartTables integration" - "3.1: Standardize component styles (buttons, cards, badges)" - "4.1: Implement mobile-first responsive design" ``` --- ## 🎓 참고 자료 - [Bootstrap 5 Docs](https://getbootstrap.com/docs/5.0/) - [SmartAdmin Docs](https://getwebora.com/smartadmin/) - [Web Accessibility (WCAG 2.1)](https://www.w3.org/WAI/WCAG21/quickref/) - [Mobile Testing Guide](https://developers.google.com/web/tools/chrome-devtools/device-mode) --- **작성자**: Claude Code **마지막 업데이트**: 2026-07-05 16:00 KST **상태**: 📋 로드맵 확정 → 🚀 준비 완료