-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject3.html
411 lines (364 loc) · 20.1 KB
/
project3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
<!-- /*
* Template Name: Scout
* Template Author: Untree.co
* Tempalte URI: https://untree.co/
* License: https://creativecommons.org/licenses/by/3.0/
*/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Untree.co">
<link rel="shortcut icon" href="favicon.png">
<meta name="description" content="" />
<meta name="keywords" content="bootstrap, bootstrap4" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
<title>Virtual currency mock investment</title>
</head>
<body>
<div class="site-mobile-menu">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close">
<span class="icofont-close js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<nav class="site-nav mb-5">
<div class="sticky-nav js-sticky-header">
<div class="container position-relative">
<div class="site-navigation text-left dark">
<a href="index.html" class="logo menu-absolute m-0">JY-Potofolio<span class="text-primary">.</span></a>
<ul class="js-clone-nav pl-0 d-none d-lg-inline-block site-menu ml-md-3">
<li class="active"><a href="index.html">Home</a></li>
<li class="has-children">
<a href="#">Projects</a>
<ul class="dropdown">
<li><a href="project1.html">친환경/녹색금융</a></li>
<li><a href="project2.html">대기오염 캠페인</a></li>
<li><a href="project3.html">주가예측/가상투자</a></li>
</ul>
</li>
<li><a href="https://github.com/njy622">
<svg width="20" hieght="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
</svg>
Github</a></li>
</ul>
<a href="#" class="burger ml-auto float-right site-menu-toggle js-menu-toggle d-inline-block d-lg-none" data-toggle="collapse" data-target="#main-navbar">
<span></span>
</a>
</div>
</div>
</div>
</nav>
<div class="hero d-block d-lg-flex align-items-center">
<div class="image-hero order-1 order-lg-2" style="background-image: url('images/coinmain.jpg'); opacity: 0.5;" data-aos="fade">
</div>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-left text">
<div class="intro mx-auto">
<h1 class="text-left mb-4" data-aos="fade-up">주가 예측과 가상투자 서비스<span class="text-primary">.</span></h1>
<p class="lead-2 mb-4" data-aos="fade-up">
투자에 두려움이 있는 초보 투자자들을 위해,<br> 간단한 모의투자를 해볼 수 있도록 구현<br>
실시간 가상화폐의 테이블을 시각화하여, 사용자들이 간단히 보기 쉽고, 쉽게 투자할 수 있도록 만든 모의 투자 웹서비스
</p>
<p><a href="#services" class="btn btn-primary">Get in touch</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<br id="services">
<div class="untree_co-section">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-5 mb-5">
<h2 class="line-bottom mb-4" data-aos="fade-up" data-aos-delay="0">Web Services<span class="text-primary">.</span></h2>
<p data-aos="fade-up" data-aos-delay="100">
실시간 가상화폐의 테이블을 시각화하여, 사용자들이 간단히 보기 쉽고, 쉽게 투자할 수 있도록 만든 모의 투자 사이트!
</p>
<ul class="list-unstyled ul-check mb-5 primary" data-aos="fade-up" data-aos-delay="200">
<li>UPBIT 실시간 가상화폐 테이블과 차트</li>
<li>생성형 AI를 통한 투자분석 보고서와 TTS</li>
<li>Prophet 예측 모델을 통한 가상화폐 예측 그래프</li>
</ul>
<p data-aos="fade-up" data-aos-delay="200">
<a href="https://drive.google.com/drive/folders/1_bYiM_hztWyd2imI9k7nF_6BD5WBsWih" style="font-size: 11px;" class="btn btn-primary">Project Management</a>
<a href="https://github.com/AshyGarden/BitoryV" style="font-size: 11px;" class="btn btn-outline-black">Github Code</a>
</p>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="400">
<div class="bg-1" style="z-index: -100; background-color: rgb(243, 243, 243);"></div>
<video controls style="margin-top: 5%; width:100%; height:300px;">
<source src="video/3차 프로젝트_모의투자.mp4" type="video/mp4">
</video>
</a>
</div>
</div>
</div>
</div> <!-- /.untree_co-section -->
<div class="untree_co-section accordion--wrap bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7 heading text-center" data-aos="fade-up" data-aos-delay="0">
<span class="subtitle">My responsibility</span>
<h2>프로젝트를 성공적으로 완성하기 위해서<br> 아래와 같은 업무를 진행해왔습니다.</h2>
<ul class="list-unstyled list mb-4" style="text-align: left; margin-left:25%;">
<li>수행 기간: 2024.01.15 ~ 2024.03.07 (2개월) </li>
<li>참여 인원: 3명</li>
<li>기여도: PE/BE: 80%, Design: 20%</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6 mr-auto order-lg-2" data-aos="fade-up" data-aos-delay="100">
<div class="custom-accordion" id="accordion_1">
<div class="accordion-item">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">UPBIT API를 통한 실시간 가상화폐 테이블과 모의 매수/매도</button>
</h2>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion_1">
<div class="accordion-body">
TREND 웹페이지에서 UPBIT API를 통해 현재가를 JAVASCRIPT와 WEBSOCKET으로 통신 받아,
실시간 테이블 구현과 CHART.JS를 통해 거래대금 TOP5 데이터와,
전일 기준 변동률 TOP5 데이터를 시각화하였습니다.
TRADE 웹페이지에서는 실시간 테이블 리스트 클릭 시 JAVASCRIPT 이벤트 함수를 이용하여 해당
종목의 상세 정보가 나오며, 수량을 입력 하고 매수 버튼을 누르면 JAVA에서 입력된 알고리즘을
기반으로 계산되고 매수 됨과 동시에 헤더의 자산 정보와 오른쪽 LIST에서 구입한 이력이 뜨도록 구현하였습니다.
</div>
</div>
</div> <!-- .accordion-item -->
<div class="accordion-item">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">생성형 AI(Gemini)를 통한 투자분석 보고서</button>
</h2>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion_1">
<div class="accordion-body">
JAVASCRIPT 으로 매수한 데이터를 받아와, 해당 데이터를 JSON형식으로 변환하여,
PYTHON에 AJAX통신으로 전달하여 해당 데이터를 기반으로 질문하여,
투자 분석 리포트를 LANGCHAIN, GEMINI 답변을 받아
JAVASCRIPT로 답변 데이터를 통신 받아 화면에 출력되도록 구현하였습니다.
</div>
</div>
</div> <!-- .accordion-item -->
<div class="accordion-item">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Prophet을 활용한 가상화폐 주가예측 그래프</button>
</h2>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion_1">
<div class="accordion-body">
PROPHET을 활용한 AI 서버를 통해 UPBIT API에서 가져온 6개월간의 가격 데이터를 학습시키면 10일
후까지의 예측 가격을 실시간 라인 차트로 확인할 수 있습니다. 차트에는 가상화폐 가격 예측 중
발생하는 오차율도 함께 표시되어 있습니다.
</div>
</div>
</div> <!-- .accordion-item -->
<div class="accordion-item">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">사용자 편의에 맞춤 웹 디자인</button>
</h2>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion_1">
<div class="accordion-body">
THYMELEAF를 통한 템플릿 레이어화, CSS, HTML, JAVASCRIPT, BOOTSTRAP 이용 사용자가 손쉽게 이용할 수 있도록 화면을 구상하였습니다.
</div>
</div>
</div> <!-- .accordion-item -->
</div>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
<div class="owl-single owl-carousel no-nav">
<img src="images/bitory1.png" alt="Image" class="img-fluid">
<img src="images/bitory2.png" alt="Image" class="img-fluid">
<img src="images/bitory3.png" alt="Image" class="img-fluid">
<img src="images/bitory4.png" alt="Image" class="img-fluid">
<img src="images/bitory5.png" alt="Image" class="img-fluid">
<img src="images/bitory6.png" alt="Image" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="untree_co-section bg-v-half-wrap">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-lg-7 text-center heading mb-5">
<span class="subtitle" data-aos="fade-up" data-aos-delay="100">Technology Stack</span>
<h2 data-aos="fade-up" data-aos-delay="200">
프로젝트 기간동안 이용한 기술 스텍입니다.
</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="feature text-center">
<span class="wrap-icon color-1">
<img width="50" height="50" src="images/js.png" alt="">
</span>
<h3>JAVASCRIPT</h3>
<p>라이브러리: CHART.JS, D3<br>WEBSOCKET 동적데이터 통신<br>LOCAL/SESSION STORAGE 관리</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="feature text-center">
<span class="wrap-icon color-1">
<img width="50" height="50" src="images/python.png" alt="">
</span>
<h3>PYTHON</h3>
<p>FAST API<br>투자보고서 알고리즘<br>예측모델(PROPHET)알고리즘</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mb-4" data-aos="fade-up" data-aos-delay="300">
<div class="feature text-center">
<span class="wrap-icon color-1">
<img width="50" height="50" src="images/openapi-1.svg" alt="">
</span>
<h3>OPEN API</h3>
<p>UPBIT API<br>생성형 AI(GEMINI)<br>GOOGLE CLOUD TTS</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mb-4" data-aos="fade-up" data-aos-delay="400">
<div class="feature text-center">
<span class="wrap-icon color-2">
<img width="50" height="50" src="images/spring.png" alt="">
</span>
<h3>SPRING BOOT</h3>
<p>SPRING MVC<br>WEB SERVER: TOMCAT</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mb-4" data-aos="fade-up" data-aos-delay="100">
<div class="feature text-center">
<span class="wrap-icon color-3">
<img width="50" height="50" src="images/java.png" alt="">
</span>
<h3>JAVA</h3>
<p>DTO, Controller</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mb-4" data-aos="fade-up" data-aos-delay="200">
<div class="feature text-center">
<span class="wrap-icon color-2">
<img width="50" height="50" src="images/thymeleaf.png" alt="">
</span>
<h3>THYMELEAF</h3>
<p>템플릿 레이어화</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mb-4" data-aos="fade-up" data-aos-delay="300">
<div class="feature text-center">
<span class="wrap-icon color-1">
<img width="50" height="50" src="images/html.png" alt="">
</span>
<h3>HTML</h3>
<p>VIEW 템플릿<br>BOOTSTRAP, FONTAWESOME</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-6 mb-4" data-aos="fade-up" data-aos-delay="400">
<div class="feature text-center">
<span class="wrap-icon color-2">
<img width="50" height="50" src="images/CSS.png" alt="">
</span>
<h3>CSS</h3>
<p>STYLE SHEET</p>
</div>
</div>
</div>
</div>
</div>
<div class="untree_co-section">
<div class="container">
<div class="row justify-content-center mb-5">
<div class="col-lg-7 text-center" data-aos="fade-up" data-aos-delay="0">
<h2 class="line-bottom text-center mb-4">Goals and Lessons</h2>
<p>
이 프로젝트를 통해, 특히 가상투자에 대한 두려움을 느끼는 초보 투자자들이
손쉽게 접근하고 편리하게 이용할 수 있는 투자 서비스를 제공하는 것을 목표로 개발하였습니다.
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-md-6 mb-4 mb-lg-0 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<div class="team text-center">
<div class="mb-4"><img src="images/bitcoin.png" alt="Image" class="img-fluid"></div>
<div class="team-body">
<h3 class="staff-name">Goals</h3>
<span class="d-block position mb-4">누구든지 간단한 투자</span>
<p class="mb-4">
모든 연령과 성별의 초보 투자자들도 간편하게<br>
매수와 매도를 진행하고, 투자 분석까지 받아볼 수<br>
있는 사용자 친화적인 페이지를 마련하였습니다.<br>
편안하게 투자에 첫발을 디딜 수 있도록 돕습니다.<br>
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 mb-4 mb-lg-0 col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="team text-center">
<div class="mb-4"><img src="images/learn.png" alt="Image" class="img-fluid"></div>
<div class="person-body">
<h3 class="staff-name">Learning</h3>
<span class="d-block position mb-4">실시간 데이터를 가져오는 새로운 경험</span>
<p class="mb-4">
기존의 AJAX 방식으로 인한 느린 데이터 통신<br>
속도를 개선하기 위해, WebSocket을 도입하여<br>
훨씬 빠른 통신 속도를 경험할 수 있었습니다.<br>
또한, UPBIT API와 생성형 AI(Gemini) API를 <br>
활용함으로써, 다양한 OPEN API 개발에<br>
능숙해질 수 있는 기회가 되었습니다.
</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-6 mb-4 mb-lg-0 col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="team text-center">
<div class="mb-4"><img src="images/our.png" alt="Image" class="img-fluid"></div>
<div class="team-body">
<h3 class="staff-name">Communication</h3>
<span class="d-block position mb-4">팀원과의 소통과 협업</span>
<p class="mb-4">
개발의 진행사항을 확인하며, 피드백을 해줄 수 <br>있도록 작업한 내용을
DISCODE 메신저와 <br>GOOGLE-DRIVE 이용하여 기록·관리하여<br>원활한 작업이 진행되었습니다.
</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- /.untree_co-section -->
<div class="row mt-5">
<div class="col-12 text-center copyright">
<p>Copyright ©<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. — Designed with love by <a href="https://untree.co">Untree.co</a> <!-- License information: https://untree.co/license/ -->
</p>
</div>
</div>
<div id="overlayer"></div>
<div class="loader">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/aos.js"></script>
<script src="js/custom.js"></script>
</body>
</html>