TK-FB-Project/개발로그/2026-01-19_UI_반응형_개선.md

UI 반응형 디자인 개선 작업

작업 일시

2026-01-19

작업 개요

전체 웹 애플리케이션의 UI/UX를 개선하여 모든 화면 크기에서 일관되고 안정적인 사용자 경험을 제공하도록 수정했습니다.

발견된 문제점

1. 네비게이션 바 문제

• 증상: 작업자 관리, 작업 관리 등 일부 페이지에서 헤더가 사라지거나 찌그러짐
• 원인:
  • JavaScript 모듈 로딩 방식 불일치 (type="module" 누락)
  • Flexbox 레이아웃의 flex-shrink/flex-grow 미설정으로 요소들이 부자연스럽게 늘어남
  • 고정된 픽셀 단위 사용으로 반응형 미지원
  • 사용자 정보 영역에 max-width 미설정으로 길쭉하게 변형

2. 페이지 헤더 문제

• 증상: 헤더 텍스트가 작은 화면에서 잘리거나 레이아웃이 깨짐
• 원인:
  • 고정된 font-size와 padding 값
  • word-wrap 미설정으로 긴 텍스트 처리 불가
  • 반응형 breakpoint 부재

3. 일관성 문제

• 증상: 각 페이지마다 스크립트 로딩 방식이 달라 일부 페이지에서 네비게이션 바가 작동하지 않음
• 원인: ES6 모듈 시스템을 일부 페이지에만 적용

해결 방안

1. 네비게이션 바 전면 개선 (web-ui/components/navbar.html)

A. Flexbox 레이아웃 개선

/* 변경 전 */
.navbar {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
}

/* 변경 후 */
.navbar {
  display: flex;
  flex-wrap: wrap;              /* 작은 화면에서 줄바꿈 허용 */
  justify-content: space-between;
  gap: 1rem;                    /* 요소 간 일관된 간격 */
  padding: 0.75rem 1.5rem;      /* rem 단위로 변경 */
  position: sticky;             /* 스크롤 시 상단 고정 */
  top: 0;
  min-height: 4rem;
}

B. 사용자 정보 영역 크기 제한

.user-info {
  max-width: 15rem;     /* 최대 너비 제한으로 늘어나는 문제 해결 */
  flex-shrink: 0;       /* 축소 방지 */
  min-width: 0;         /* 텍스트 overflow 정상 작동 */
}

.user-name {
  white-space: nowrap;          /* 한 줄 유지 */
  overflow: hidden;             /* 넘치는 텍스트 숨김 */
  text-overflow: ellipsis;      /* ... 표시 */
}

C. 모든 단위를 rem으로 변환

• 픽셀(px) → rem 단위로 전환하여 사용자의 브라우저 설정에 반응
• 예: 12px → 0.75rem, 36px → 2.25rem

D. 반응형 브레이크포인트 추가

/* 1200px 이하: 중앙 시계 숨김 */
@media (max-width: 1200px) {
  .navbar-center {
    display: none;
  }
}

/* 768px 이하: 태블릿 최적화 */
@media (max-width: 768px) {
  .navbar {
    padding: 0.625rem 1rem;
    gap: 0.75rem;
  }
  .user-info {
    max-width: 12rem;
  }
}

/* 640px 이하: 브랜드 텍스트 숨김, 아이콘만 표시 */
@media (max-width: 640px) {
  .brand-content {
    display: none;
  }
  .user-details {
    display: none;
  }
}

/* 480px 이하: 모바일 최적화 */
@media (max-width: 480px) {
  .logo-small {
    height: 2rem;
  }
  .dropdown-menu {
    min-width: 10rem;
  }
}

2. 공통 헤더 스타일 개선 (web-ui/css/common.css)

A. 반응형 폰트 크기 적용

/* 변경 전 */
.work-report-header h1 {
  font-size: 2.5rem;
}

/* 변경 후 - clamp()로 최소/선호/최대 크기 설정 */
.work-report-header h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.work-report-header .subtitle {
  font-size: clamp(0.875rem, 2vw, 1.1rem);
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

B. 반응형 패딩 조정

/* 기본 (데스크톱) */
.work-report-header {
  padding: 2rem 1.5rem;
}

/* 768px 이하 (태블릿) */
@media (max-width: 768px) {
  .work-report-header {
    padding: 1.5rem 1rem;
  }
}

/* 480px 이하 (모바일) */
@media (max-width: 480px) {
  .work-report-header {
    padding: 1.25rem 0.75rem;
  }
}

3. JavaScript 모듈 로딩 통일

모든 관리 페이지에 type="module" 속성을 추가하여 ES6 모듈 시스템 일관성 확보:

수정된 페이지 목록

1. web-ui/pages/management/worker-management.html
2. web-ui/pages/management/project-management.html
3. web-ui/pages/management/code-management.html
4. web-ui/pages/management/work-management.html
5. web-ui/pages/common/daily-work-report.html
6. web-ui/pages/common/worker-individual-report.html
7. web-ui/pages/common/daily-work-report-viewer.html

변경 내용

<!-- 변경 전 -->
<script src="/js/load-navbar.js?v=4"></script>
<script src="/js/api-config.js?v=1" defer></script>

<!-- 변경 후 -->
<script type="module" src="/js/load-navbar.js?v=5"></script>
<script type="module" src="/js/api-config.js?v=3"></script>

4. CSS 버전 업데이트

캐시 무효화를 위해 모든 관리 페이지의 CSS 버전 상향:

<!-- 변경 전 -->
<link rel="stylesheet" href="/css/common.css?v=1">

<!-- 변경 후 -->
<link rel="stylesheet" href="/css/common.css?v=2">

수정된 파일 목록

핵심 컴포넌트

• web-ui/components/navbar.html - 네비게이션 바 전면 리팩토링
• web-ui/css/common.css - 공통 헤더 스타일 반응형 개선

HTML 페이지 (모듈 로딩 및 버전 업데이트)

• web-ui/pages/management/worker-management.html
• web-ui/pages/management/project-management.html
• web-ui/pages/management/code-management.html
• web-ui/pages/management/work-management.html
• web-ui/pages/common/daily-work-report.html
• web-ui/pages/common/worker-individual-report.html
• web-ui/pages/common/daily-work-report-viewer.html

JavaScript 모듈

• web-ui/js/api-config.js - 에러 로깅 개선
• web-ui/js/component-loader.js - 컴포넌트 로더 개선
• web-ui/js/work-report-calendar.js - 캘린더 모듈 개선
• web-ui/js/modules/calendar/CalendarAPI.js - API 모듈 개선

테스트 방법

1. 화면 크기별 테스트

- 데스크톱 (1920px): 모든 요소 표시, 넓은 간격
- 노트북 (1366px): 중앙 시계 숨김
- 태블릿 (768px): 축소된 레이아웃, 작은 간격
- 모바일 가로 (640px): 브랜드 텍스트 숨김
- 모바일 세로 (375px): 최소 레이아웃

2. 기능 테스트

1. 각 페이지에서 네비게이션 바 정상 표시 확인
2. 사용자 드롭다운 메뉴 클릭 동작 확인
3. 대시보드/시스템 버튼 링크 동작 확인
4. 화면 크기 변경 시 자동 레이아웃 조정 확인

3. 브라우저 호환성 테스트

• Chrome (최신)
• Safari (최신)
• Firefox (최신)
• Edge (최신)

개선 효과

Before (개선 전)

• ❌ 일부 페이지에서 헤더 미표시
• ❌ 사용자 정보 영역이 과도하게 늘어남
• ❌ 작은 화면에서 레이아웃 깨짐
• ❌ 고정된 크기로 인한 가독성 저하
• ❌ 페이지별 스크립트 로딩 방식 불일치

After (개선 후)

• ✅ 모든 페이지에서 일관된 헤더 표시
• ✅ 사용자 정보 영역 크기 제한으로 안정적인 레이아웃
• ✅ 모든 화면 크기에서 최적화된 레이아웃
• ✅ 반응형 폰트 크기로 향상된 가독성
• ✅ 통일된 ES6 모듈 시스템
• ✅ rem 단위 사용으로 접근성 개선
• ✅ sticky 네비게이션으로 향상된 UX

추가 개선 사항

1. 디자인 일관성

• 모든 간격과 크기를 rem 단위로 통일
• transition 효과를 cubic-bezier로 통일하여 부드러운 애니메이션

2. 접근성 개선

• rem 단위 사용으로 브라우저 폰트 크기 설정 반영
• white-space, overflow 처리로 긴 텍스트도 안정적으로 표시

3. 성능 최적화

• sticky positioning으로 스크롤 성능 개선
• CSS transform 사용으로 GPU 가속 활용

배포 시 주의사항

1. 브라우저 캐시 클리어

   • 사용자들에게 강제 새로고침 안내 (Ctrl+F5 또는 Cmd+Shift+R)
   • 또는 모든 CSS/JS 파일의 버전을 일괄 상향

2. 테스트 환경 검증

   • 배포 전 스테이징 환경에서 모든 화면 크기 테스트
   • 실제 모바일 기기에서 테스트 권장

3. 롤백 계획

   • 이전 버전의 navbar.html, common.css 백업 보관
   • 문제 발생 시 즉시 롤백 가능하도록 준비

향후 개선 계획

1. 다크 모드 지원

   • CSS 변수를 활용한 테마 시스템 구축
   • prefers-color-scheme 미디어 쿼리 활용

2. 애니메이션 개선

   • 페이지 전환 애니메이션 추가
   • 로딩 상태 시각적 피드백 강화

3. PWA 기능 추가

   • 오프라인 지원
   • 모바일 앱처럼 설치 가능

4. 성능 모니터링

   • 실제 사용자 환경에서의 렌더링 성능 측정
   • Core Web Vitals 지표 개선

관련 이슈

• 작업자 관리 페이지 헤더 누락 문제
• 사용자 정보 영역 늘어나는 문제
• 일일 작업 보고서 페이지 네비게이션 누락 문제

참고 자료

• MDN: CSS Flexbox
• MDN: CSS clamp()
• MDN: Responsive Design
• CSS Units: rem vs em vs px