200 lines
4.6 KiB
Markdown
200 lines
4.6 KiB
Markdown
# I'm AI 투자매니저 - 웹 화면 설계서
|
|
|
|
## 📁 파일 구조
|
|
|
|
### 🌟 메인 프로토타입 파일들
|
|
|
|
- **`index.html`** - 완전한 통합 프로토타입 (로딩 + 페이지 전환 + 광고)
|
|
- **`dashboard.html`** - 메인 대시보드 (깔끔한 단일 페이지)
|
|
- **`detail.html`** - 투자상품 상세 분석 페이지
|
|
- **`simulation.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 적용
|
|
- ✅ 실시간 인터랙션
|
|
- ✅ 브라우저 호환성
|
|
|
|
**바로 브라우저에서 실행하여 확인할 수 있습니다!** 🚀
|