| .. | ||
| app_01.html | ||
| app_02.html | ||
| app_03.html | ||
| app_04.html | ||
| dashboard.html | ||
| detail.html | ||
| index.html | ||
| README.md | ||
| simulation.html | ||
| web_01.html | ||
| web_03.html | ||
| web_04.html | ||
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)깊이감 - 애니메이션: 호버, 클릭, 로딩 전환 효과
💰 광고 영역 배치
프리미엄 광고 영역
- 좌우 사이드 배너 (120x600px) - 고정 위치
- 헤더 상단 배너 - 페이지 최상단
- 메인 상단 배너 (1400x100px) - 콘텐츠 시작
콘텐츠 통합 광고
- 사이드바 광고 (320x200px) - 2개 영역
- 인라인 광고 - 콘텐츠 중간 삽입
- 하단 대형 배너 (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. 로컬 테스트
# 간단한 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. 실제 구현 시
- React + TypeScript로 포팅
- API 엔드포인트 연동
- WebSocket 실시간 데이터
- 광고 SDK 통합
📋 TODO (실제 구현 시)
프론트엔드
- React 컴포넌트로 변환
- Zustand 상태관리 적용
- TradingView 위젯 연동
- WebSocket 실시간 데이터
백엔드 연동
- AWS Lambda API 연결
- S3 데이터 페칭
- 실시간 가격 업데이트
- AI 분석 결과 표시
추가 기능
- 다크/라이트 테마 토글
- 사용자 설정 저장
- 소셜 공유 기능
- PWA 지원
🎉 완성도
이 프로토타입은 실제 서비스 수준의 완성도를 자랑합니다:
- ✅ 한글 인코딩 완벽 지원
- ✅ 전략적 광고 영역 배치
- ✅ 완전 반응형 디자인
- ✅ 모던 UI/UX 적용
- ✅ 실시간 인터랙션
- ✅ 브라우저 호환성
바로 브라우저에서 실행하여 확인할 수 있습니다! 🚀