# I'm AI 투자매니저 - 웹 화면 설계서

## 📁 파일 구조

### 🌟 메인 프로토타입 파일들
- **`index.html`** - 완전한 통합 프로토타입 (로딩 + 페이지 전환 + 광고)
- **`dashboard.html`** - 메인 대시보드 (깔끔한 단일 페이지)
- **`detail.html`** - 투자상품 상세 분석 페이지
- **`simulation.html`** - 수익률 시뮬레이션 페이지

### 📱 기존 앱 설계 파일들
- `app_01.html` ~ `app_04.html` - 모바일 앱 프로토타입
- `web_01.html`, `web_03.html`, `web_04.html` - 웹 버전 초기 설계

---

## 🎯 메인 파일 설명

### 1. **index.html** - 완전한 프로토타입
- ✨ 로딩 애니메이션 포함
- 🔄 페이지 전환 기능 (SPA 방식)
- 📱 완전 반응형 디자인
- 💰 전략적 광고 영역 배치
- ⚡ 실시간 가격 업데이트 시뮬레이션

### 2. **dashboard.html** - 메인 대시보드
- 🤖 AI 추천 투자상품 그리드
- 📊 실시간 가격 및 변동률
- 🎯 AI 분석 점수 및 투자 지표
- 📈 시장 개요 통계

### 3. **detail.html** - 상세 분석 페이지
- 📈 차트 영역 (TradingView 연동 준비)
- 🧠 AI 분석 리포트 (기술적/펀더멘털/위험)
- 📰 관련 뉴스 섹션
- 💡 투자 지표 상세 정보

### 4. **simulation.html** - 수익률 시뮬레이션
- 💰 투자 금액 설정 (프리셋 버튼)
- ✅ 다중 투자상품 선택
- 📊 실시간 수익률 계산
- 📈 포트폴리오 분석

---

## 🎨 디자인 특징

### 색상 체계
- **배경**: `#0f1419` → `#1a1f2e` 그라디언트
- **브랜드**: `#667eea` → `#764ba2` 그라디언트
- **성공**: `#22c55e` (상승/수익)
- **위험**: `#ef4444` (하락/손실)
- **정보**: `#3b82f6` (진입가)
- **경고**: `#f59e0b` (목표가)

### UI 특징
- **Glassmorphism**: 반투명 배경 + 블러 효과
- **둥근 모서리**: 16px 기본, 8-12px 세부 요소
- **그림자**: `0 8px 32px rgba(0,0,0,0.3)` 깊이감
- **애니메이션**: 호버, 클릭, 로딩 전환 효과

---

## 💰 광고 영역 배치

### 프리미엄 광고 영역
1. **좌우 사이드 배너** (120x600px) - 고정 위치
2. **헤더 상단 배너** - 페이지 최상단
3. **메인 상단 배너** (1400x100px) - 콘텐츠 시작

### 콘텐츠 통합 광고
4. **사이드바 광고** (320x200px) - 2개 영역
5. **인라인 광고** - 콘텐츠 중간 삽입
6. **하단 대형 배너** (1400x200px) - CTA 포함

---

## 📱 반응형 브레이크포인트

### 데스크톱 (1400px+)
- 모든 광고 영역 표시
- 3열 그리드 레이아웃
- 사이드 배너 고정

### 태블릿 (1200px~1399px)  
- 사이드 배너 숨김
- 2열 그리드로 변경
- 사이드바가 상단으로 이동

### 모바일 (768px~1199px)
- 1열 그리드 레이아웃
- 헤더 세로 정렬
- 컴팩트한 카드 디자인

### 소형 모바일 (480px 이하)
- 최소 레이아웃
- 버튼 세로 배치
- 간소화된 정보 표시

---

## 🚀 기술적 특징

### 성능 최적화
- **CSS Grid & Flexbox** 활용
- **Transform 애니메이션** GPU 가속
- **Lazy Loading** 준비
- **Code Splitting** 구조

### 접근성
- **시맨틱 HTML** 구조
- **키보드 네비게이션** 지원
- **스크린 리더** 호환
- **고대비** 색상 대비

### 확장성  
- **컴포넌트 기반** CSS 구조
- **모듈화된** JavaScript
- **API 연동** 준비 완료
- **React 포팅** 용이

---

## 🔧 사용 방법

### 1. 로컬 테스트
```bash
# 간단한 HTTP 서버로 실행
python -m http.server 8000
# 또는
npx serve .
```

### 2. 브라우저에서 확인
- **메인 프로토타입**: `http://localhost:8000/index.html`
- **대시보드**: `http://localhost:8000/dashboard.html`
- **상세 페이지**: `http://localhost:8000/detail.html`
- **시뮬레이션**: `http://localhost:8000/simulation.html`

### 3. 실제 구현 시
1. React + TypeScript로 포팅
2. API 엔드포인트 연동
3. WebSocket 실시간 데이터
4. 광고 SDK 통합

---

## 📋 TODO (실제 구현 시)

### 프론트엔드
- [ ] React 컴포넌트로 변환
- [ ] Zustand 상태관리 적용
- [ ] TradingView 위젯 연동
- [ ] WebSocket 실시간 데이터

### 백엔드 연동
- [ ] AWS Lambda API 연결
- [ ] S3 데이터 페칭
- [ ] 실시간 가격 업데이트
- [ ] AI 분석 결과 표시

### 추가 기능
- [ ] 다크/라이트 테마 토글
- [ ] 사용자 설정 저장
- [ ] 소셜 공유 기능
- [ ] PWA 지원

---

## 🎉 완성도

이 프로토타입은 **실제 서비스 수준**의 완성도를 자랑합니다:
- ✅ 한글 인코딩 완벽 지원
- ✅ 전략적 광고 영역 배치
- ✅ 완전 반응형 디자인
- ✅ 모던 UI/UX 적용
- ✅ 실시간 인터랙션
- ✅ 브라우저 호환성

**바로 브라우저에서 실행하여 확인할 수 있습니다!** 🚀