bfe9ca6825
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
68 lines
3.1 KiB
Markdown
68 lines
3.1 KiB
Markdown
# CSS 및 디자인 가이드라인 (Tone and Manner)
|
|
|
|
이 문서는 `kodata.php` 파일에 적용된 디자인 철학과 스타일 표준을 정의합니다. 향후 프로젝트의 일관성을 유지하기 위한 지침으로 활용합니다.
|
|
|
|
## 1. 디자인 철학 (Core Philosophy)
|
|
|
|
- **주제**: Professional Trust (신뢰 기반의 전문성)
|
|
- **분위기**: 깔끔함, 신뢰감, 데이터 중심적인 명확성
|
|
- **핵심 키워드**: Teal, Navy, White, Light Gray, Modern Typography
|
|
|
|
## 2. 색상 사양 (Color Palette)
|
|
|
|
### 기본 색상 (Brand Colors)
|
|
|
|
- **Primary (Teal)**: `#0d9488` (Tailwind: `teal-600`) - 핵심 강조 색상, 활성화 상태.
|
|
- **Secondary (Navy/Slate)**: `#1e293b` (Tailwind: `slate-800`) - 제목, 텍스트, 신뢰감을 주는 배경.
|
|
- **Accent (Amber)**: `#f59e0b` (Tailwind: `amber-500`) - 차트의 추세선 등 보조 강조.
|
|
|
|
### 배경 및 테두리 (Backgrounds & Borders)
|
|
|
|
- **Body Background**: `#f3f4f6` (Tailwind: `gray-100`) - 부드러운 중립 톤의 연회색.
|
|
- **Container Background**: `#ffffff` (White) - 기본 카드 및 섹션 배경.
|
|
- **Border**: `#e2e8f0` (Tailwind: `slate-200`) - 최소한의 구분선.
|
|
|
|
## 3. 타이포그래피 (Typography)
|
|
|
|
- **Font Family**: `'Noto Sans KR', sans-serif` (Google Fonts)
|
|
- **Heading Styles**:
|
|
- Main Title: `text-2xl font-bold text-slate-800`
|
|
- Sub Title: `text-lg font-bold text-slate-700`
|
|
- **Body Text**: `text-slate-600 leading-relaxed`
|
|
|
|
## 4. UI 컴포넌트 표준 (UI Components)
|
|
|
|
### 상단 네비게이션 (Sticky Header)
|
|
|
|
- 하얀색 배경(`bg-white`)에 그림자(`shadow-sm`)를 적용하고 상단 고정(`sticky top-0`).
|
|
- 활성화된 탭(`nav-active`): 하단에 3px 두께의 Teal 테두리 적용.
|
|
|
|
### 정보 카드 (Information Cards)
|
|
|
|
- 사각 모서리 둥글게(`rounded-xl`), 가벼운 그림자(`shadow-sm`).
|
|
- 호버 시 효과: `hover:shadow-md transition-shadow`.
|
|
- 왼쪽 테두리 강조: 특정 카드는 `border-l-4 border-teal-600`으로 시각적 계층 부여.
|
|
|
|
### 차트 (Charts)
|
|
|
|
- **라이브러리**: Chart.js 사용.
|
|
- **스타일**: `max-height: 400px`로 제한하여 화면의 정체성을 유지.
|
|
- **색상**: Teal(`rgba(13, 148, 136, 0.2)`) 또는 Blue(`rgba(59, 130, 246, 0.2)`) 투명도 적용.
|
|
|
|
### 타임라인 (Timeline)
|
|
|
|
- 세로선: `border-l-2 border-slate-200`.
|
|
- 포인트: `bg-teal-600` 원형 포인트.
|
|
|
|
## 5. 코딩 규칙 (Coding Rules)
|
|
|
|
- **CSS Framework**: Tailwind CSS (CDN 방식 사용).
|
|
- **SVG 지양**: 최대한 유니코드 이모지(🏢, 📈, 💰)를 사용하여 가볍고 직관적인 UI 구성.
|
|
- **애니메이션**: `fade-in` 유틸리티를 통한 부드러운 섹션 전환 (`opacity` & `translateY`).
|
|
- **반응형**: 모바일 우선(Mobile-first) 접근 후 `md:` 접두사를 활용한 데스크탑 레이아웃 최적화.
|
|
|
|
## 6. 특이사항
|
|
|
|
- **스크롤바 커스텀**: `.custom-scroll` 클래스를 통해 슬림하고 둥근 형태의 스크롤바 디자인 적용.
|
|
- **인터랙션**: 데이터가 많은 경우 `hidden` 클래스와 JavaScript `switchTab` 함수를 사용하여 SPA(Single Page Application) 느낌의 탭 변환 구현.
|