프로토타입 UI 개선 및 이미지 추가

- 대시보드 프로토타입 수정
- Todo 관리 프로토타입 수정
- 회의록 목록조회 프로토타입 수정
- 공통 CSS 스타일 업데이트
- 이미지 리소스 추가 (cicle.png, hi.png)
- UI/UX 설계서 업데이트

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

design/uiux/prototype/02-대시보드.html

@@ -6,240 +6,64 @@
   <title>대시보드 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
   <style>
-    /* 레이아웃 */
+    /* 대시보드 헤더 커스터마이징 */
-    body {
+    .header-title {
-      display: flex;
+      font-size: 15px;
-      flex-direction: column;
-    }
-
-    /* 사이드바 (데스크톱) */
-    .sidebar {
-      display: none;
-    }
-
-    /* 모바일: 하단 네비게이션 표시 */
-    .bottom-nav {
-      display: flex;
-    }
-
-    /* 데스크톱 */
-    @media (min-width: 768px) {
-      body {
-        flex-direction: row;
-      }
-
-      .sidebar {
-        display: flex;
-        flex-direction: column;
-        position: fixed;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 240px;
-        background: var(--white);
-        border-right: 1px solid var(--gray-300);
-        padding: var(--space-lg) 0;
-        z-index: 100;
-      }
-
-      .sidebar-logo {
-        display: flex;
-        align-items: center;
-        gap: var(--space-sm);
-        padding: 0 var(--space-lg);
-        margin-bottom: var(--space-xl);
-      }
-
-      .sidebar-logo-icon {
-        width: 40px;
-        height: 40px;
-        background: var(--primary);
-        border-radius: var(--radius-md);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 20px;
-        color: white;
-      }
-
-      .sidebar-logo-text {
-        font-size: var(--font-h3);
-        font-weight: var(--font-weight-bold);
-        color: var(--gray-900);
-      }
-
-      .sidebar-nav {
-        flex: 1;
-        padding: 0 var(--space-md);
-      }
-
-      .sidebar-nav-item {
-        display: flex;
-        align-items: center;
-        gap: var(--space-md);
-        padding: var(--space-md) var(--space-lg);
-        margin-bottom: var(--space-xs);
-        border-radius: var(--radius-md);
-        text-decoration: none;
-        color: var(--gray-700);
-        font-weight: var(--font-weight-medium);
-        transition: all var(--transition-fast);
-      }
-
-      .sidebar-nav-item:hover {
-        background: var(--gray-100);
-        color: var(--primary);
-      }
-
-      .sidebar-nav-item.active {
-        background: var(--primary-light);
-        color: var(--primary);
-      }
-
-      .sidebar-nav-icon {
-        font-size: 20px;
-        width: 24px;
-        text-align: center;
-      }
-
-      .sidebar-user {
-        padding: var(--space-md) var(--space-lg);
-        border-top: 1px solid var(--gray-300);
-        display: flex;
-        align-items: center;
-        gap: var(--space-md);
-      }
-
-      .sidebar-user-info {
-        flex: 1;
-      }
-
-      .sidebar-user-name {
-        font-weight: var(--font-weight-medium);
-        color: var(--gray-900);
-        font-size: var(--font-small);
-      }
-
-      .sidebar-user-email {
-        font-size: var(--font-xsmall);
-        color: var(--gray-500);
-      }
-
-      /* 하단 네비게이션 숨기기 */
-      .bottom-nav {
-        display: none;
-      }
-
-      /* 메인 콘텐츠 왼쪽 여백 */
-      .main-content {
-        margin-left: 240px;
-        padding-bottom: var(--space-xl);
-      }
-    }
-
-    /* 헤더 - 개선안 A: 간결한 인사 + 실질적 정보 */
-    .header {
-      background: var(--white);
-      border-bottom: 1px solid var(--gray-300);
-      padding: var(--space-md) var(--space-md);
-    }
-
-    @media (min-width: 768px) {
-      .header {
-        padding: var(--space-lg) var(--space-xl);
-      }
-    }
-
-    .header-greeting {
-      font-size: var(--font-h3);
-      font-weight: var(--font-weight-bold);
-      color: var(--gray-900);
-      margin-bottom: var(--space-xs);
       display: flex;
       align-items: center;
-      gap: var(--space-xs);
-    }
-
-    .header-info {
-      font-size: var(--font-body);
-      color: var(--gray-600);
-    }
-
-    /* 메인 콘텐츠 */
-    .main-content {
-      flex: 1;
-      padding: var(--space-md);
-      padding-bottom: 80px;
-      background: var(--gray-50);
     }
 
     @media (min-width: 768px) {
-      .main-content {
+      .header-title {
-        padding: var(--space-xl);
+        font-size: var(--font-h2);
+      }
+
+      .header-title img {
+        width: 28px !important;
+        height: 28px !important;
       }
     }
 
-    /* 통계 카드 - 개선안 A: 컴팩트 수평 배치 */
+    .header-subtitle {
-    .stats-compact {
+      font-size: 13px;
+    }
+
+    @media (min-width: 768px) {
+      .header-subtitle {
+        font-size: var(--font-small);
+      }
+    }
+
+    /* 통계 카드 */
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: var(--space-md);
+      margin-bottom: var(--space-xl);
+    }
+
+    .stat-card {
       background: var(--white);
       border-radius: var(--radius-lg);
-      padding: var(--space-md);
+      padding: var(--space-lg);
-      margin-bottom: var(--space-lg);
       box-shadow: var(--shadow-sm);
     }
 
-    .stats-compact-title {
+    .stat-icon {
-      font-size: var(--font-small);
+      font-size: 32px;
-      font-weight: var(--font-weight-semibold);
-      color: var(--gray-700);
       margin-bottom: var(--space-sm);
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
     }
 
-    .stats-compact-items {
+    .stat-label {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      gap: var(--space-md);
-    }
-
-    .stats-compact-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-xs);
       font-size: var(--font-small);
-      color: var(--gray-600);
+      color: var(--gray-500);
+      margin-bottom: var(--space-xs);
     }
 
-    .stats-compact-icon {
+    .stat-value {
-      font-size: 20px;
+      font-size: var(--font-h2);
-    }
-
-    .stats-compact-value {
       font-weight: var(--font-weight-bold);
       color: var(--gray-900);
-      margin-left: 2px;
-    }
-
-    @media (min-width: 768px) {
-      .stats-compact {
-        padding: var(--space-lg);
-      }
-
-      .stats-compact-items {
-        justify-content: flex-start;
-        gap: var(--space-xl);
-      }
-
-      .stats-compact-item {
-        font-size: var(--font-body);
-      }
-
-      .stats-compact-icon {
-        font-size: 24px;
-      }
     }
 
     /* 섹션 헤더 */
@@ -528,64 +352,53 @@
     }
   </style>
 </head>
-<body>
+<body class="layout-sidebar-header">
   <!-- 사이드바 (데스크톱) -->
   <aside class="sidebar">
-    <div class="sidebar-logo">
+    <a href="02-대시보드.html" class="sidebar-logo">
-      <div class="sidebar-logo-icon">M</div>
+      <img src="img/cicle.png" alt="로고" class="sidebar-logo-icon-img">
       <div class="sidebar-logo-text">회의록 서비스</div>
-    </div>
+    </a>
 
     <nav class="sidebar-nav">
-      <a href="02-대시보드.html" class="sidebar-nav-item active">
-        <span class="sidebar-nav-icon"><img src="img\home.png" width="32"></span>
-        <span>대시보드</span>
-      </a>
       <a href="12-회의록목록조회.html" class="sidebar-nav-item">
-        <span class="sidebar-nav-icon"><img src="img\edit.png" width="32"></span>
+        <span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
         <span>회의 목록</span>
       </a>
       <a href="09-Todo관리.html" class="sidebar-nav-item">
-        <span class="sidebar-nav-icon"><img src="img\list.png" width="32"></span>
+        <span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
         <span>Todo 관리</span>
       </a>
     </nav>
-
-    <div class="sidebar-user">
-      <div class="avatar avatar-green">김</div>
-      <div class="sidebar-user-info">
-        <div class="sidebar-user-name">김민준</div>
-        <div class="sidebar-user-email">minjun.kim@example.com</div>
-      </div>
-    </div>
   </aside>
 
+  <!-- 헤더 -->
+  <header class="header">
+    <div class="header-left">
+      <h1 class="header-title"><img src="img/hi.png" alt="" style="width: 18px; height: 18px; vertical-align: middle; margin-right: 6px;">안녕하세요, 김민준님!</h1>
+      <p class="header-subtitle">오늘의 일정을 확인하세요</p>
+    </div>
+  </header>
+
   <!-- 메인 콘텐츠 -->
   <main class="main-content">
-    <!-- 헤더 - 개선안 A: 간결한 인사 + 실질적 정보 -->
-    <header class="header">
-      <h1 class="header-greeting">
-        안녕하세요 👋
-      </h1>
-      <p class="header-info" id="header-meeting-info">오늘 <strong id="header-meeting-count">2</strong>건의 회의가 예정되어 있어요</p>
-    </header>
 
-    <!-- 통계 - 개선안 A: 컴팩트 수평 배치 -->
+    <!-- 통계 -->
-    <section class="stats-compact">
+    <section class="stats-grid">
-      <div class="stats-compact-title">📊 오늘의 현황</div>
+      <div class="stat-card">
-      <div class="stats-compact-items">
+        <div class="stat-icon">📅</div>
-        <div class="stats-compact-item">
+        <div class="stat-label">예정된 회의</div>
-          <span class="stats-compact-icon">📅</span>
+        <div class="stat-value" id="stat-scheduled">3</div>
-          <span>예정 <span class="stats-compact-value" id="stat-scheduled">2</span></span>
+      </div>
-        </div>
+      <div class="stat-card">
-        <div class="stats-compact-item">
+        <div class="stat-icon">✅</div>
-          <span class="stats-compact-icon">✅</span>
+        <div class="stat-label">진행 중 Todo</div>
-          <span>진행 <span class="stats-compact-value" id="stat-todos">1</span></span>
+        <div class="stat-value" id="stat-todos">1</div>
-        </div>
+      </div>
-        <div class="stats-compact-item">
+      <div class="stat-card">
-          <span class="stats-compact-icon">📈</span>
+        <div class="stat-icon">📈</div>
-          <span>완료 <span class="stats-compact-value" id="stat-completion">0%</span></span>
+        <div class="stat-label">Todo 완료율</div>
-        </div>
+        <div class="stat-value" id="stat-completion">33%</div>
       </div>
     </section>
 
@@ -621,6 +434,7 @@
         <!-- 동적 생성 -->
       </div>
     </section>
+
   </main>
 
   <!-- 하단 네비게이션 (모바일) -->
@@ -809,7 +623,7 @@
     }
 
     /**
-     * 통계 업데이트 - 개선안 A: 헤더 정보 포함
+     * 통계 업데이트
      */
     function updateStats() {
       const scheduled = SAMPLE_MEETINGS.filter(m => m.status === 'scheduled' || m.status === 'ongoing').length;
@@ -818,15 +632,6 @@
       const completedTodos = SAMPLE_TODOS.filter(t => t.assignee.id === currentUser.id && t.status === 'completed').length;
       const completion = totalTodos > 0 ? Math.round((completedTodos / totalTodos) * 100) : 0;
 
-      // 헤더 정보 업데이트
-      $('#header-meeting-count').textContent = scheduled;
-      if (scheduled === 0) {
-        $('#header-meeting-info').innerHTML = '예정된 회의가 없습니다';
-      } else {
-        $('#header-meeting-info').innerHTML = `오늘 <strong>${scheduled}</strong>건의 회의가 예정되어 있어요`;
-      }
-
-      // 통계 카드 업데이트
       $('#stat-scheduled').textContent = scheduled;
       $('#stat-todos').textContent = todos;
       $('#stat-completion').textContent = completion + '%';

design/uiux/prototype/09-Todo관리.html

@@ -309,38 +309,33 @@
     }
   </style>
 </head>
-<body class="has-sidebar">
+<body class="layout-sidebar-header has-sidebar">
   <!-- 사이드바 (데스크톱) -->
   <aside class="sidebar">
-    <div class="sidebar-logo">
+    <a href="02-대시보드.html" class="sidebar-logo">
-      <div class="sidebar-logo-icon">M</div>
+      <img src="img/cicle.png" alt="로고" class="sidebar-logo-icon-img">
       <div class="sidebar-logo-text">회의록 서비스</div>
-    </div>
+    </a>
 
     <nav class="sidebar-nav">
-      <a href="02-대시보드.html" class="sidebar-nav-item">
-        <span class="sidebar-nav-icon"><img src="img\home.png" width="32"></span>
-        <span>대시보드</span>
-      </a>
       <a href="12-회의록목록조회.html" class="sidebar-nav-item">
-        <span class="sidebar-nav-icon"><img src="img\edit.png" width="32"></span>
+        <span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
         <span>회의 목록</span>
       </a>
       <a href="09-Todo관리.html" class="sidebar-nav-item active">
-        <span class="sidebar-nav-icon"><img src="img\list.png" width="32"></span>
+        <span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
         <span>Todo 관리</span>
       </a>
     </nav>
-
-    <div class="sidebar-user">
-      <div class="avatar avatar-green">김</div>
-      <div class="sidebar-user-info">
-        <div class="sidebar-user-name">김민준</div>
-        <div class="sidebar-user-email">minjun.kim@example.com</div>
-      </div>
-    </div>
   </aside>
 
+  <!-- 헤더 -->
+  <header class="header">
+    <div class="header-left">
+      <h1 class="header-title">Todo 관리</h1>
+    </div>
+  </header>
+
   <div class="page">
     <div class="container main-content">
       <!-- 페이지 헤더 -->

design/uiux/prototype/12-회의록목록조회.html

@@ -6,80 +6,9 @@
   <title>회의록 목록조회 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
   <style>
-    /* 헤더 */
+    /* 뒤로가기 버튼 숨김 */
-    .header {
+    .header-left .icon-btn:first-child {
-      position: fixed;
+      display: none;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 64px;
-      background: var(--white);
-      border-bottom: 1px solid var(--gray-300);
-      box-shadow: var(--shadow-sm);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 var(--space-md);
-      z-index: 99;
-    }
-
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: var(--space-md);
-    }
-
-    .icon-btn {
-      background: transparent;
-      border: none;
-      font-size: 24px;
-      color: var(--gray-700);
-      cursor: pointer;
-      padding: var(--space-sm);
-      transition: color var(--transition-fast);
-    }
-
-    .icon-btn:hover {
-      color: var(--primary);
-    }
-
-    .header-title {
-      font-size: var(--font-h3);
-      font-weight: var(--font-weight-bold);
-      color: var(--gray-900);
-    }
-
-    /* 데스크톱: 헤더 위치 조정 및 뒤로가기 버튼 숨기기 */
-    @media (min-width: 768px) {
-      .header {
-        left: 240px; /* 사이드바 너비만큼 오른쪽으로 이동 */
-        padding: 0 var(--space-xl);
-      }
-
-      .header-left .icon-btn:first-child {
-        display: none; /* 뒤로가기 버튼 숨김 */
-      }
-    }
-
-    /* 메인 콘텐츠 */
-    .main-content {
-      margin-top: 64px;
-      padding: var(--space-md);
-      padding-bottom: 80px;
-    }
-
-    /* 데스크톱: 메인 콘텐츠 패딩 조정 */
-    @media (min-width: 768px) {
-      .main-content {
-        margin-left: 240px; /* 사이드바 너비만큼 왼쪽 여백 추가 */
-        padding: var(--space-xl);
-        padding-bottom: var(--space-xl);
-        /* max-width 제거: 가용 공간을 모두 활용하여 여백 최소화 */
-      }
-
-      .filter-grid {
-        grid-template-columns: repeat(4, 1fr);
-      }
     }
 
     /* 필터 및 검색 영역 */
@@ -332,36 +261,24 @@
 
   </style>
 </head>
-<body>
+<body class="layout-sidebar-header">
   <!-- 사이드바 (데스크톱) -->
   <aside class="sidebar">
-    <div class="sidebar-logo">
+    <a href="02-대시보드.html" class="sidebar-logo">
-      <div class="sidebar-logo-icon">M</div>
+      <img src="img/cicle.png" alt="로고" class="sidebar-logo-icon-img">
       <div class="sidebar-logo-text">회의록 서비스</div>
-    </div>
+    </a>
 
     <nav class="sidebar-nav">
-      <a href="02-대시보드.html" class="sidebar-nav-item">
-        <span class="sidebar-nav-icon"><img src="img\home.png" width="32"></span>
-        <span>대시보드</span>
-      </a>
       <a href="12-회의록목록조회.html" class="sidebar-nav-item active">
-        <span class="sidebar-nav-icon"><img src="img\edit.png" width="32"></span>
+        <span class="sidebar-nav-icon"><img src="img/edit.png" width="32"></span>
         <span>회의 목록</span>
       </a>
       <a href="09-Todo관리.html" class="sidebar-nav-item">
-        <span class="sidebar-nav-icon"><img src="img\list.png" width="32"></span>
+        <span class="sidebar-nav-icon"><img src="img/list.png" width="32"></span>
         <span>Todo 관리</span>
       </a>
     </nav>
-
-    <div class="sidebar-user">
-      <div class="avatar avatar-green">김</div>
-      <div class="sidebar-user-info">
-        <div class="sidebar-user-name">김민준</div>
-        <div class="sidebar-user-email">minjun.kim@example.com</div>
-      </div>
-    </div>
   </aside>
 
   <!-- 헤더 -->

design/uiux/prototype/common.css

@@ -578,6 +578,15 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   color: var(--primary);
 }
 
+/* 비활성 네비게이션 아이콘 그레이톤 */
+.nav-item:not(.active) img {
+  filter: grayscale(100%) opacity(0.5);
+}
+
+.nav-item.active img {
+  filter: none;
+}
+
 .nav-item:hover {
   color: var(--primary);
 }
@@ -1009,6 +1018,13 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     gap: var(--space-sm);
     padding: 0 var(--space-lg);
     margin-bottom: var(--space-xl);
+    text-decoration: none;
+    cursor: pointer;
+    transition: opacity var(--transition-fast);
+  }
+
+  .sidebar-logo:hover {
+    opacity: 0.8;
   }
 
   .sidebar-logo-icon {
@@ -1023,6 +1039,12 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     color: white;
   }
 
+  .sidebar-logo-icon-img {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-md);
+  }
+
   .sidebar-logo-text {
     font-size: var(--font-h3);
     font-weight: var(--font-weight-bold);
@@ -1063,6 +1085,16 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     text-align: center;
   }
 
+  /* 비활성 메뉴 아이콘 그레이톤 */
+  .sidebar-nav-item:not(.active) .sidebar-nav-icon img {
+    filter: grayscale(100%) opacity(0.5);
+  }
+
+  .sidebar-nav-item.active .sidebar-nav-icon img,
+  .sidebar-nav-item:hover .sidebar-nav-icon img {
+    filter: none;
+  }
+
   .sidebar-user {
     padding: var(--space-md) var(--space-lg);
     border-top: 1px solid var(--gray-300);
@@ -1544,3 +1576,122 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     /* flex: 1 유지하여 가로 꽉 채움 */
   }
 }
+
+/* ========================================
+   LAYOUT PATTERNS
+   ======================================== */
+
+/* Layout A: 사이드바 + 헤더 (대시보드, Todo관리, 회의록목록조회) */
+.layout-sidebar-header .header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  background: var(--white);
+  border-bottom: 1px solid var(--gray-300);
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-md);
+  z-index: 99;
+}
+
+.layout-sidebar-header .header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.layout-sidebar-header .header-title {
+  font-size: var(--font-h3);
+  font-weight: var(--font-weight-bold);
+  color: var(--gray-900);
+}
+
+.layout-sidebar-header .main-content {
+  margin-top: 64px;
+  padding: var(--space-md);
+  padding-bottom: 80px;
+  background: var(--gray-50);
+}
+
+/* 데스크톱: 사이드바 옆으로 헤더 및 콘텐츠 배치 */
+@media (min-width: 768px) {
+  .layout-sidebar-header .header {
+    left: 240px; /* 사이드바 너비만큼 오른쪽으로 이동 */
+    padding: 0 var(--space-xl);
+  }
+
+  .layout-sidebar-header .main-content {
+    margin-left: 240px; /* 사이드바 너비만큼 왼쪽 여백 추가 */
+    padding: var(--space-xl);
+    padding-bottom: var(--space-xl);
+  }
+}
+
+/* Layout B: 헤더만 (회의예약, 회의진행, 회의록상세 등) */
+.layout-header-only .header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  background: var(--white);
+  border-bottom: 1px solid var(--gray-300);
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-md);
+  z-index: 99;
+}
+
+.layout-header-only .header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.layout-header-only .icon-btn {
+  background: transparent;
+  border: none;
+  font-size: 24px;
+  color: var(--gray-700);
+  cursor: pointer;
+  padding: var(--space-sm);
+  transition: color var(--transition-fast);
+}
+
+.layout-header-only .icon-btn:hover {
+  color: var(--primary);
+}
+
+.layout-header-only .header-title {
+  font-size: var(--font-h3);
+  font-weight: var(--font-weight-bold);
+  color: var(--gray-900);
+}
+
+.layout-header-only .main-content {
+  margin-top: 64px;
+  padding: var(--space-md);
+  padding-bottom: 80px;
+}
+
+@media (min-width: 768px) {
+  .layout-header-only .header {
+    padding: 0 var(--space-xl);
+  }
+
+  .layout-header-only .main-content {
+    padding: var(--space-xl);
+    padding-bottom: var(--space-xl);
+  }
+}
+
+/* Layout C: 사이드바/헤더 없음 (로그인) */
+.layout-none {
+  /* 특별한 스타일 불필요, body만 있음 */
+}

design/uiux/uiux.md

@@ -76,7 +76,7 @@
 
 ## 프로토타입 화면 목록
 
-| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 메뉴바유무 | 이전화면 이동버튼 유무 | 비고 |
+| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 |
 |------|--------|----------------|-------------------|-----------|------------------------|-------|
 | 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | | 
 | 02 | 대시보드 | - | 필수 | 메인 랜딩 페이지 | O | X | |