ai_invest/설계/01/화면설계서

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. 로컬 테스트

# 간단한 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 적용
• ✅ 실시간 인터랙션
• ✅ 브라우저 호환성

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