[WIP] UI 컴포넌트 하드코딩 제거 및 CSS 통합 (진행 중) #20

New Issue

Taehoon · 2026-06-12T15:59:21+09:00

Taehoon commented

2026-06-12 15:59:21 +09:00

1. 개요

현재 ux_setting 브랜치에서 시스템 전반의 UI/UX 일관성을 확보하고 유지보수성을 높이기 위한 스타일 리팩토링 및 CSS 통합 작업이 진행 중입니다.

⚠️ 본 이슈는 작업 완료가 아닌, 디자인 검토를 위한 진행 중(WIP) 상태를 기록하기 위해 작성되었습니다.

2. 현재까지의 주요 진행 상황 (진행 중)

🎨 하드코딩 스타일 제거 및 CSS 통합

HWModal, SWModal, ListFactory, Dashboard 등 TypeScript 파일 내부에 직접 작성되어 있던 인라인 스타일(style="...") 변수를 전면 제거했습니다.
분산되어 있던 스타일을 common.css, modal.css, table.css, dashboard.css 내의 공통 클래스로 통합하여 관리 효율성을 높였습니다.

📐 타이포그래피 스케일업 (시인성 강화)

최소 폰트 사이즈: 기존 10~13px 혼용에서 가독성 보장을 위해 최소 14px 기준으로 전체 스케일업을 진행했습니다. (비례하여 대제목 등도 확장됨)
폰트 굵기(Font Weight): ExtraBold를 900으로 설정하는 등, 전반적인 텍스트의 굵기를 한 단계씩 상향(+100)하여 정보의 명확성을 강화했습니다.

🚀 GNB(상단바) 레이아웃 2단 개편

구조 변경: 단일 행이었던 상단바를 로고/사용자 영역(1단)과 내비게이션 메뉴 영역(2단)으로 분리하여 공간감을 확보했습니다.
메뉴 그룹화: '하드웨어', '소프트웨어' 등의 대분류 텍스트 라벨을 삭제하고, 여백(Gap)을 활용한 박스리스 디자인으로 메뉴를 그룹화했습니다.
로고 교체: 신규 로고(image_92.png)로 이미지를 교체하고 경로를 /img 폴더로 일원화했습니다.

📄 디자인 정책 문서화

README.md에 길게 작성되어 있던 디자인 가이드를 분리하여 별도의 design_rule.md 문서로 독립시켰습니다.

3. 향후 과제 및 검토 요청 사항

스케일업된 폰트 사이즈가 각 모달 및 대시보드에서 레이아웃 붕괴(Overflow)를 일으키지 않는지 세부 검토
GNB 2단 구조 개편에 따른 사용자 동선 편의성 확인
디자인 확정 후 design_rule.md에 최종 사이즈 스케일 룰 업데이트 예정

작업 브랜치: ux_setting
상태: 진행 중 (WIP - Work In Progress)

## 1. 개요 현재 `ux_setting` 브랜치에서 시스템 전반의 UI/UX 일관성을 확보하고 유지보수성을 높이기 위한 **스타일 리팩토링 및 CSS 통합 작업**이 진행 중입니다. ⚠️ **본 이슈는 작업 완료가 아닌, 디자인 검토를 위한 진행 중(WIP) 상태를 기록하기 위해 작성되었습니다.** --- ## 2. 현재까지의 주요 진행 상황 (진행 중) ### 🎨 하드코딩 스타일 제거 및 CSS 통합 - `HWModal`, `SWModal`, `ListFactory`, `Dashboard` 등 TypeScript 파일 내부에 직접 작성되어 있던 인라인 스타일(`style="..."`) 변수를 전면 제거했습니다. - 분산되어 있던 스타일을 `common.css`, `modal.css`, `table.css`, `dashboard.css` 내의 공통 클래스로 통합하여 관리 효율성을 높였습니다. ### 📐 타이포그래피 스케일업 (시인성 강화) - **최소 폰트 사이즈**: 기존 10~13px 혼용에서 가독성 보장을 위해 최소 **14px** 기준으로 전체 스케일업을 진행했습니다. (비례하여 대제목 등도 확장됨) - **폰트 굵기(Font Weight)**: `ExtraBold`를 900으로 설정하는 등, 전반적인 텍스트의 굵기를 한 단계씩 상향(+100)하여 정보의 명확성을 강화했습니다. ### 🚀 GNB(상단바) 레이아웃 2단 개편 - **구조 변경**: 단일 행이었던 상단바를 로고/사용자 영역(1단)과 내비게이션 메뉴 영역(2단)으로 분리하여 공간감을 확보했습니다. - **메뉴 그룹화**: '하드웨어', '소프트웨어' 등의 대분류 텍스트 라벨을 삭제하고, 여백(Gap)을 활용한 박스리스 디자인으로 메뉴를 그룹화했습니다. - **로고 교체**: 신규 로고(`image_92.png`)로 이미지를 교체하고 경로를 `/img` 폴더로 일원화했습니다. ### 📄 디자인 정책 문서화 - `README.md`에 길게 작성되어 있던 디자인 가이드를 분리하여 별도의 **`design_rule.md`** 문서로 독립시켰습니다. --- ## 3. 향후 과제 및 검토 요청 사항 - [ ] 스케일업된 폰트 사이즈가 각 모달 및 대시보드에서 레이아웃 붕괴(Overflow)를 일으키지 않는지 세부 검토 - [ ] GNB 2단 구조 개편에 따른 사용자 동선 편의성 확인 - [ ] 디자인 확정 후 `design_rule.md`에 최종 사이즈 스케일 룰 업데이트 예정 **작업 브랜치**: `ux_setting` **상태**: **진행 중 (WIP - Work In Progress)**

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Taehoon/ITAM#20