diff --git a/설계/앱아이디어.md b/설계/앱아이디어.md
index cd83de2..e4264b5 100644
--- a/설계/앱아이디어.md
+++ b/설계/앱아이디어.md
@@ -5,18 +5,53 @@
2. 모든 서비스는 무료로 제공하되, 노출 광고 수익으로 AI API요금 충당
3. 부가 수입은 후원으로 충당
-## I'm AI 가 제공하는 서비스
-- MVP단계에서는 코인 5종류로 서비스 시작
-1. 웹 서비스 : 코인 5종류에 대한 현재가, 목표가, 손절가, 진입가 -> 해당 값들을 산출하게 된 근거(뉴스, 캔들데이터 등)
-2. 앱 서비스 : 안드로이드/IOS 앱으로 웹서비스와 같은 기능 제공
-3. 목표가, 손절가, 진입가 진입시 알람 제공
-4. I'm AI가 서비스중인 투자상품중 매수 점수를 AI를 통해 부여하고 매우 높은 점수를 받았을 경우 추천 알람 제공
-5. 투자 상품별 사용자의 투자 성향에 맞는 맞춤식 투자 선택지 제공.
+## I'm AI가 제공하는 서비스
-## 서비스는 단순하고 쉽게
-1. 웹은 딱 1개의 페이지만 제공 - 투자상품 현재가, AI분석을 통한 정보 제공, 개인 맞춤식 설정, 광고 영역
-2. 앱은 3개 페이지로 제공 - 투자상품 현재가, AI분석을 통한 젱보 페이지, 개인 맞춤식 설정 페이지 (각 페이지에 광고영역을 두던, 페이지 전환시 동영상광고를 진행하던 해서 수익을 얻기)
+### MVP 단계 투자상품 선정
+- **코인 5종류**: 비트코인, 이더리움 등 주요 암호화폐
+- **주식 5종류**: 삼성전자, SK하이닉스, 네이버, 현대차, 두산에너빌리티
-## 서버 설계
-1. 로컬서버 - AIRFLOW : 투자 상품에 대한 상품별 AI를 통한 분석 수행, 분석 결과를 AWS-S3에 저장 - json 타입으로 모든 사용자가 동일한 데이터를 받아 모든 투자상품 서비스에 적절히 활용 가능하게 정제
-2. AWS - Lambda : API Gateway, cloudfront를 통해 단순히 잘 정리된 데이터를 제공
\ No newline at end of file
+### 서비스 기능
+1. **웹 서비스**: 투자상품별 현재가, 목표가, 손절가, 진입가 제공 및 AI 분석 근거(뉴스, 캔들데이터 등) 표시
+2. **앱 서비스**: 안드로이드/iOS 앱으로 웹서비스와 동일한 기능 제공
+3. **알림 서비스**: 목표가, 손절가, 진입가 도달시 알림 제공
+4. **AI 추천**: 투자상품별 매수 점수 부여 및 고점수 상품 추천 알림
+5. **맞춤형 투자**: 사용자의 투자 성향에 맞는 투자 선택지 제공
+
+## MVP 단계 개발 방향
+
+### 플랫폼 우선순위
+1. **웹 우선 개발**: 모바일 앱 이전에 웹 서비스부터 구현
+
+### 데이터 수집 방식
+
+#### 코인 데이터
+- **업비트 API**: WebSocket 통신으로 실시간 가격 수신
+- **실시간 업데이트**: 웹페이지에서 즉시 가격 변동 반영
+
+#### 주식 데이터
+- **야후파이낸스 API**: 브라우저에서 직접 호출
+- **API 제한**: 사용자별 1시간 2,000건 제한 (브라우저 레벨에서 관리)
+- **실시간 갱신**: n초 간격으로 요청하여 실시간성 확보
+
+### 상세 정보 제공
+- **투자 항목 클릭시**: AI 분석 정보 및 캔들차트 표시
+- **AI 분석 데이터**: 서버에서 분석 후 S3 저장, Lambda를 통해 제공
+- **차트 데이터**: 캔들 데이터 수신 후 그래프로 시각화
+
+## 서비스 UI/UX 설계
+1. **웹 페이지**: 단일 페이지 - 투자상품 현재가, AI분석 정보, 개인 맞춤 설정, 광고 영역
+2. **앱 구조**: 3개 페이지 - 메인(투자상품), AI분석 상세, 설정 페이지
+
+## 기술 아키텍처
+
+### 서버 구조
+1. **로컬 서버 (AIRFLOW)**:
+ - 투자 상품별 AI 분석 수행
+ - 분석 결과를 AWS S3에 JSON 형태로 저장
+ - 모든 사용자가 동일한 정제된 데이터 활용
+
+2. **AWS 인프라**:
+ - **Lambda**: API Gateway, CloudFront를 통한 데이터 제공
+ - **S3**: AI 분석 결과 저장소
+ - **API Gateway**: RESTful API 엔드포인트 제공
\ No newline at end of file
diff --git a/설계/화면설계서/web_01.html b/설계/화면설계서/web_01.html
index 35a4167..848b047 100644
--- a/설계/화면설계서/web_01.html
+++ b/설계/화면설계서/web_01.html
@@ -15,6 +15,7 @@
font-family: 'Arial', sans-serif;
background-color: #0f0f0f;
color: #ffffff;
+ position: relative;
}
/* 헤더 영역 스타일 */
@@ -37,14 +38,6 @@
}
/* 메인 컨테이너 - 2열 그리드 레이아웃 */
- .container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 20px;
- display: grid;
- grid-template-columns: 2fr 1fr; /* 좌측 콘텐츠 영역 : 우측 사이드바 = 2:1 */
- gap: 20px;
- }
/* 좌측 메인 콘텐츠 영역 */
.main-content {
@@ -278,6 +271,43 @@
border: 1px solid #555;
}
+ /* 세로 광고 배너 영역 */
+ .left-banner, .right-banner {
+ position: fixed;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 120px;
+ height: 600px;
+ background: linear-gradient(45deg, #333, #555);
+ border: 2px dashed #666;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 12px;
+ color: #ccc;
+ z-index: 1000;
+ }
+
+ .left-banner {
+ left: 10px;
+ }
+
+ .right-banner {
+ right: 10px;
+ }
+
+ /* 메인 컨테이너 여백 조정 */
+ .container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px 150px; /* 좌우 여백 증가 */
+ display: grid;
+ grid-template-columns: 2fr 1fr;
+ gap: 20px;
+ }
+
/* 모바일 반응형 */
@media (max-width: 768px) {
.container {
@@ -293,10 +323,30 @@
flex-direction: column;
gap: 15px;
}
+
+ .left-banner, .right-banner {
+ display: none;
+ }
}
+
+