[Phase 1] Implementation Plan

# UI/UX 리팩토링 및 디자인 정리 계획 ## 목표 CSS 아키텍처를 정리하고, 일관된 폰트와 색상 체계를 적용하며, 게시판 스킨을 부트스트랩 스타일로 통일하고 기기별 반응형 동작을 검증합니다. ## 사용자 검토 필요 > [!IMPORTANT] > **CSS 정리**: `color-1.css`를 제거하고 G5 기본 스타일 순서를 재조정할 예정입니다. 레거시 스타일에 의존하는 기존 페이지에 영향을 줄 수 있습니다. > **단위 변환**: `px`를 `rem`으로 변환(16px 루트 기준)할 때 정확한 픽셀 렌더링이 미세하게 변경될 수 있습니다. ## 변경 제안 ### 1. 스타일 및 폰트 수정 (즉시) - **`skin/board/docs/markdown.css`**:     - Prism Dark 테마가 보이도록 `pre` 블록의 `background-color: transparent !important` 제거.     - `font-family`를 전체 사이트 폰트(`Montserrat`, `Noto Sans KR`)와 일치시킵니다. - **`theme/custemplate/head.sub.php`**:     - 불필요한 `color-1.css` 링크 제거.     - `color-set-*.css`, `et-common.css`, `et-contents.css`가 올바른 순서로 로드되도록 조정 (기본값 이후, 오버라이드 이전). ### 2. CSS 리팩토링 (Px -> Rem) - **`theme/custemplate/css/et-common.css`**:     - 모든 `px` 값을 `rem`으로 변환 (16px = 1rem).     - 예: `font-size: 16px` -> `1rem`, `margin: 20px` -> `1.25rem`.     - 표준 간격 클래스(`mt10`, `pd20` 등)도 `rem`을 사용하도록 조정. ### 3. 게시판 스킨 표준화 - **대상 스킨**: `docs` (현재 활성). 기타 활성 게시판(`free`, `notice`) 확인. - **변경 사항**:     - `list.skin.php`를 Bootstrap `.table`, `.btn` 클래스를 사용하도록 업데이트.     - `view.skin.php` 및 `write.skin.php`를 Bootstrap 그리드 및 버튼을 사용하도록 업데이트.     - 일반 아이콘을 일관된 `FontAwesome` 아이콘으로 교체. ### 4. 레이아웃 및 여백 - **`et-common.css` / `et-contents.css`**:     - 전역 컨테이너 너비 및 마진 검토.     - 대형 레이아웃 요소는 `%` (50%, 100%) 또는 `rem` 사용.     - 식별된 특정 레이아웃 문제 수정 (예: 헤더/푸터 틀어짐). ### 5. 미디어 쿼리 및 반응형 점검 - `et-common.css`에 모바일 분기점(max-width: 768px)에 대한 미디어 쿼리 추가/보완. - 브라우저 도구를 사용하여 시뮬레이션 검증. ## Phase 3: 아이콘 디자인 및 수정 ### 문제점 - 레퍼런스 템플릿은 FontAwesome 5+ (`fas`, `fab` 등)를 사용. - 현재 사이트는 FontAwesome 4.4 (`fa`) 로드. - 결과: 아이콘 누락 또는 깨진 문자로 표시됨. ### 해결 방안 - [x] **업그레이드**: `head.sub.php`에서 로컬 FA4를 FontAwesome 6 Free (CDN)로 교체. - [x] **호환성**: 필요한 경우 v4-shims 포함 또는 모든 `fa` 클래스를 `fas`/`far`로 업데이트. - [x] **디자인**: '직관적인' 요구사항에 맞춰 무료 세트 내에서 'Pro-like' 아이콘 선정. ## Phase 4: 게시판 디자인 고도화 (신규) 특정 레퍼런스에 맞춰 일반 게시판의 디자인을 개선합니다. ### 목록 화면 (DataTables 스타일) 참조: `dashboard_876/datatables.html` - [ ] `.table-flush` 및 `.table-hover` 클래스 적용. - [ ] `thead` 스타일을 레퍼런스와 일치시킵니다 (연한 회색 배경, 대문자/강조 텍스트). - [ ] 정렬 아이콘 및 페이지네이션 연동 확인. ### 상세 화면 (블로그 스타일) 참조: `Etertech Blog` - [ ] 헤더 영역(제목, 날짜, 작성자)을 블로그 스타일로 여백 있게 재설계. - [ ] 가독성을 위해 본문 영역의 타이포그래피(글자 크기, 줄 간격) 조정. - [ ] 댓글 섹션 및 하단 버튼 그룹 단순화. ## 검증 계획 (Verification Plan) - [x] 홈, 게시판 목록, 상세, 글쓰기 페이지에서 아이콘 표시 확인. - [x] 아이콘 크기 변경으로 인한 레이아웃 깨짐 없음 확인. - [ ] 포트폴리오 게시판 연결 및 디자인 확인. ### 자동/수동 검증 - **Prism 확인**: `p_docs` 방문하여 코드 블록의 어두운 배경 확인. - **폰트 확인**: 요소 검사로 `Montserrat` 사용 여부 확인. - **반응형 확인**: 브라우저 도구로 다양한 너비(375px, 768px, 1920px)에서 스크린샷 캡처. ### 테스트 커맨드 1. **Prism**: `http://custemplate/bbs/board.php?bo_table=p_docs&wr_id=3` 2. **목록 스킨**: `http://custemplate` (또는 특정 게시판 URL)