docs: UI/UX 디자인 가이드 추가

- 이모지 사용 금지 정책 추가
- 모던하고 깔끔한 디자인 원칙 명시
- 색상 가이드 및 컴포넌트 구조 설명

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

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

CODING_GUIDE.md

@@ -56,6 +56,44 @@ docker-compose up -d # 수동 실행
 
 ---
 
+## 🎨 UI/UX 디자인 가이드
+
+### 디자인 원칙
+- **모던하고 깔끔한 디자인**: 이모지 사용 지양, 아이콘 또는 심플한 텍스트 사용
+- **일관성**: 모든 페이지에서 동일한 디자인 시스템 적용
+- **컴포넌트 재사용**: navbar, footer 등은 컴포넌트로 관리
+
+### 이모지 사용 금지
+❌ **금지**:
+```html
+<!-- 나쁜 예 -->
+<button>📊 대시보드</button>
+<h1>🔧 작업 관리</h1>
+```
+
+✅ **권장**:
+```html
+<!-- 좋은 예 - 아이콘 라이브러리 사용 또는 심플한 텍스트 -->
+<button class="btn-primary">
+  <i class="icon-dashboard"></i>
+  대시보드
+</button>
+<h1>작업 관리</h1>
+```
+
+### 색상 가이드
+- **Primary**: 하늘색 계열 (`#0ea5e9`, `#38bdf8`, `#7dd3fc`)
+- **기본 배경**: 흰색/밝은 회색 계열
+- **텍스트**: `#1f2937` (dark gray)
+- **보조 텍스트**: `#6b7280` (medium gray)
+
+### 컴포넌트 구조
+- **네비게이션**: `web-ui/components/navbar.html` 참조
+- **일관된 헤더**: 모든 페이지에서 `<div id="navbar-container"></div>` 사용
+- **CSS 로딩 순서**: `design-system.css` → 페이지별 CSS
+
+---
+
 ## 📡 API 개발 가이드
 - **RESTful**: 명사형 리소스 사용 (`POST /users` O, `/createUser` X).
 - **응답 포맷**: