-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject1.html
434 lines (382 loc) · 20.9 KB
/
project1.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
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
<!-- /*
* 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>Green finance</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/greencard.png');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">친환경/녹색 금융 혜택 안내 Chatbot 서비스<span class="text-primary">.</span></h1>
<p class="lead-2 mb-4" data-aos="fade-up">
평소처럼 행동했을뿐인데,적립금을 준다고? <br>
숨 쉬듯 나오는 관리비
날마다 가는 마트
매일 이용하는 대중교통
단순히 카드만 바꿨는데,
이런 혜택이 있었다고?
거기에 친환경활동까지? 당신이 일상에서 놓친 혜택 내가 알려줄게! <br>
녹색금융 Chatbot!
</p>
<p><a href="#webservices" class="btn btn-primary">Get in touch</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<br id="webservices">
<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">
일상생활에서 놓치고 있던 친환경 혜택을 손쉽게 안내 받을 수 있는 Chatbot 안내 웹사이트입니다.
</p>
<ul class="list-unstyled ul-check mb-5 primary" data-aos="fade-up" data-aos-delay="200">
<li>24시간 응답해주는 Chatbot</li>
<li>영수증 업로드를 하면 혜택 상품과 적립 포인트 자동계산</li>
<li>친환경 상품여부와 가까운 매장안내까지 한번에!</li>
</ul>
<p data-aos="fade-up" data-aos-delay="200">
<a href="https://github.com/users/njy622/projects/3/views/2" style="font-size: 11px;" class="btn btn-outline-black">Project Management</a>
<a href="https://github.com/njy622/HipData" 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 width="100%">
<source src="video/1차 프로젝트_Chatbot 및 시연영상.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>수행 기간: 2023.10.18 ~ 2023.11.01(10일)</li>
<li>참여 인원: 5명</li>
<li>기여도: FE/BE: 60%, Data-collection:20%, 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">Chatbot을 이용한 그린카드, 녹색금융, 가까운매장, 혜택안내</button>
</h2>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion_1">
<div class="accordion-body">
KO-SENTENCE-TRANSFORMERS 한국어 임베딩모델을 이용하여, 사용자의 질문입력을
벡터화하여 시나리오의 CSV파일을 비교하여 유사도가 높은 답을 대답하도록 하였습니다.
가까운 매장 안내는 사용자에게 주소(동까지)를 입력받아 네이버 지도 웹페이지에서 CRAWLING을 이용하여 가까운 매장을 안내하도록 구현하였습니다.
</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">영수증 업로드를 통한 에코포인트 계산</button>
</h2>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion_1">
<div class="accordion-body">
TESSERACT OCR API를 이용하여, 영수증 이미지를 텍스트화 하여,
친환경 상품 여부확인 후, 적립예상 포인트를 합산하여 알려줍니다.
</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">Chatbot과 대화한 이력 데이터 저장</button>
</h2>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion_1">
<div class="accordion-body">
PYTHON, SQLITE를 이용한 저장된 대화이력을 열람할 수 있는 페이지를 제작하여,
사용자가 과거에 대화한 이력과 업로드한 영수증을 확인하고 검색할 수 있도록 구현하였습니다.
</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="#collapseFour" aria-expanded="false" aria-controls="collapseFour">녹색소비, 대중교통, 에너지절약, 공공기관 혜택, 상품 등 데이터 수집</button>
</h2>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion_1">
<div class="accordion-body">
GREEN-CARD 홈페이지에서 PYTHON과 CRAWLING, PANDAS를 활용하여, CSV파일로 데이터 수집 후 웹으로 구현하였습니다.
금융상품은 금융사이트 보안상의 문제로 CSV파일로 직접 데이터를 수집하였습니다.
</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">
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/hipdata1.png" alt="Image" class="img-fluid">
<img src="images/hipdata2.png" alt="Image" class="img-fluid">
<img src="images/hipdata3.png" alt="Image" class="img-fluid">
<img src="images/hipdata4.png" alt="Image" class="img-fluid">
<img src="images/hipdata5.png" alt="Image" class="img-fluid">
<img src="images/hipdata6.png" alt="Image" class="img-fluid">
<img src="images/hipdata7.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-3">
<img width="50" height="50" src="images/python.png" alt="">
</span>
<h3>PYTHON</h3>
<p>
데이터 크롤링<br>OCR 알고리즘, 전처리<br>가까운 매장 안내 알고리즘<br>
</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="30" src="images/scikit.png" alt="">
</span>
<h3>SCIKIT-LEARN</h3>
<p>유저 질의응답 임베딩<br>OCR 전처리 → 코사인유사도 검사</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/OCR.png" alt="">
</span>
<h3>TESSERACT OCR API</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="400">
<div class="feature text-center">
<span class="wrap-icon color-2">
<img width="50" height="50" src="images/flask.png" alt="">
</span>
<h3>FLASK</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="100">
<div class="feature text-center">
<span class="wrap-icon color-3">
<img width="50" height="50" src="images/sqlite.png" alt="">
</span>
<h3>SQLITE</h3>
<p>DB, DAO 활용<br>SQL, 쿼리문</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/js.png" alt="">
</span>
<h3>JavaScript</h3>
<p>AJAX, REST API 동적데이터 통신</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/green.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>
이 과정을 통해, 사용자들이 친환경 활동에 보다<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">
이론 교육에서는 접할 수 없었던 실무 중심의<br>
코드를 배우는 뜻깊은 시간이었습니다. AJAX를<br>
사용한 REST API 통신과 크롤링을 통해 데이터를<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="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>있도록 작업한 내용을
KAKAO 메신저와 <br>GITHUB-PROJECT를 이용하여 기록·관리하여<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>