-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
320 lines (307 loc) · 11.4 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>오늘의 길 소개페이지</title>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/dheereshagrwal/[email protected]/src/app/ci.min.css"
/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<nav class="nav">
<ul>
<li><a href="#about">기능 소개</a></li>
<li><a href="#demo">데모 영상</a></li>
<li><a href="#experience">핵심 경험</a></li>
<li><a href="#architecture">시스템 아키텍처</a></li>
<li><a href="#presentation">발표 자료</a></li>
<li><a href="#team">팀원 구성</a></li>
<li class="nav-site-link">
<a href="https://dailyroad.site" target="_blank">
<img src="https://github.com/user-attachments/assets/8502f14a-52cd-45e6-bfc3-e6682dafd318"
alt="오늘의 길"/>
</a>
</li>
</ul>
</nav>
<main class="main--container">
<div class="main--wrapper">
<a href="https://dailyroad.site" class="site--link" target="_blank">
<img
class="main--image"
src="https://github.com/user-attachments/assets/8502f14a-52cd-45e6-bfc3-e6682dafd318"
alt="placeholder image"
style="width: 100%; height: auto; object-fit: contain"
/>
</a>
<a href="#about">
<i class="fa-solid fa-arrow-down fa-2xl" style="color: #80A6FF"></i>
</a>
</div>
</main>
<section class="about--section" id="about">
<div class="about about--description">
<h1>나만의 지도 공유하기</h1>
<h2>
나만의 지도를 만들어 공유할 수 있습니다.<br/>
</h2>
</div>
<img
class="about description-image"
src="https://github.com/user-attachments/assets/54234c0f-a885-48fb-a24b-9916b99af827"
alt="관련사진넣기"
/>
</section>
<section class="about--section" id="about">
<div class="about about--description">
<h1>나만의 지도에 장소 추가하기</h1>
<h2>
나만의 장소를 지도에 추가할 수 있습니다.<br/>
</h2>
</div>
<img
class="about description-image"
src="https://github.com/user-attachments/assets/f0a10b2e-48ee-4ba3-8d24-2dfd3dc4fc3c"
alt="관련사진넣기"
/>
</section>
<section
class="about--section"
style="background-color: var(--sixth-color)"
>
<img
class="about description-image"
src="https://github.com/user-attachments/assets/93c22b4f-72e6-408d-945a-9c5fa7de7a1d"
alt="관련사진넣기"
/>
<div class="about about--description">
<h1>나만의 코스 공유하기</h1>
<h2>
나만의 코스를 공유하거나, 공유된 코스를 탐색할 수 있습니다.<br/>
</h2>
</div>
</section>
<section class="demo" id="demo">
<h1>데모 영상</h1>
<div style="text-align: center; height: 65.5vh">
<iframe width="100%" height="100%"
src="https://www.youtube.com/embed/p73r5FICX9Q?si=_N-FE20L7cgQeLaS"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</section>
<section
class="about--section" id="experience"
style="background-color: var(--sixth-color)"
>
<img
class="about description-image"
src="https://github.com/user-attachments/assets/5249b4ba-9e2c-44f6-8172-2cde95685ccd"
alt="검색 결과 비교"
/>
<div class="about about--description">
<h1>검색 기능 개선</h1>
<h3>
Elasticsearch를 도입해 검색 로직의 가중치를 조정하고<br/>
RDB와 동기화를 유지하여 검색 정확도를 개선했습니다.<br/>
동의어 처리와 오타 교정 기능으로 검색 신뢰도를 높였습니다.<br/>
<br/>
싱글 노드 환경에서의 장애 상황에 대비해 SPOF 대처 로직을 추가하고<br/>
Fallback 처리 시간을 <strong>97.86% 감소 (약 47배 개선)</strong>하는 성과를 거두었습니다.
</h3>
</div>
</section>
<section
class="about--section"
style="background-color: var(--sixth-color)"
>
<img
class="about description-image"
src="https://github.com/user-attachments/assets/421f7ad8-ff69-423a-bde3-3e37e1e32722"
alt="마커 클러스터링"
/>
<div class="about about--description">
<h1>마커 클러스터링</h1>
<h3>
지도 상 수많은 마커를 효과적으로 표현하기 위해 클러스터링 라이브러리를 도입했습니다.<br/>
라이브러리 코드를 분석해 비효율적인 렌더링 방식을 찾아내 커스터마이징했고,<br/>
깜빡임 현상 해결 및 마커 렌더링 시간을 <strong>95.02% 감소 (약 20배 개선)</strong> 시켰습니다.
</h3>
</div>
</section>
<section class="about--section">
<div class="about about--description">
<h1>로깅 및 모니터링 시스템</h1>
<h3>
로깅 라이브러리로는 Pino, 모니터링 스택으로는 ELK를 사용했습니다.<br/>
Kibana와 Slack을 연동해 실시간 모니터링 시스템을 구축했습니다.<br/>
이를 통해 서버 장애 시 문제 파악이 빨라졌고, 운영 신뢰도가 향상되었습니다.
</h3>
</div>
<img
class="about description-image"
src="https://github.com/user-attachments/assets/42cf3df1-7051-4f5c-a481-b2d598de4572"
alt="kibana 로그"
/>
</section>
<section class="about--section">
<div class="about about--description">
<h1>테스트 코드 작성</h1>
<h3>
모킹 없이 실제 환경과 유사한 조건에서 테스트를 수행했습니다.<br/>
컨테이너를 사용해 다양한 환경에서 안정적으로 테스트를 진행했으며,<br/>
이를 통해 리팩터링 및 버그 수정 시 점검이 용이해졌고,<br/>
코드 품질과 신뢰도가 향상되었습니다.
</h3>
</div>
<img
class="about description-image"
src="https://github.com/user-attachments/assets/0f797c37-cf5c-4443-86fc-7a79e44e8858"
alt="테스트 컨테이너"
/>
</section>
<section class="architecture-section" id="architecture">
<h1>시스템 아키텍처</h1>
<div class="architecture-image-wrapper">
<img
class="architecture-image"
src="https://github.com/user-attachments/assets/d910af3b-5169-4dd4-b5d9-6c07b0a80972"
alt="architecture"
/>
</div>
</section>
<section class="presentation" id="presentation">
<h1>Presentation</h1>
<div style="text-align: center; height: 65.5vh">
<object
type="application/pdf"
data="docs/final-ppt.pdf"
width="64%"
height="100%"
>
<p>
현재 브라우저가 PDF 삽입을 지원하지 않습니다.
<a
href=""
>직접 다운로드 하기</a
>
</p>
</object>
</div>
</section>
<section
class="team-section"
id="team"
style="background-color: var(--sixth-color)"
>
<h1>팀원 구성</h1>
<div class="team-container">
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://avatars.githubusercontent.com/u/95432846?v=4"/>
</div>
<div class="team-content">
<h3 class="name">도원진</h3>
<h4 class="title">Frontend Developer</h4>
</div>
<ul class="social">
<li>
<a href="https://github.com/1119wj" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</li>
</ul>
</div>
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://avatars.githubusercontent.com/u/90228925?v=4"/>
</div>
<div class="team-content">
<h3 class="name">안금장</h3>
<h4 class="title">Backend Developer</h4>
</div>
<ul class="social">
<li>
<a href="https://github.com/koomchang" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</li>
</ul>
</div>
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://avatars.githubusercontent.com/u/87180146?v=4"/>
</div>
<div class="team-content">
<h3 class="name">박민서</h3>
<h4 class="title">Backend Developer</h4>
</div>
<ul class="social">
<li>
<a href="https://github.com/Miensoap" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</li>
</ul>
</div>
<div class="our-team">
<div class="picture">
<img class="img-fluid" src="https://avatars.githubusercontent.com/u/129946082?v=4"/>
</div>
<div class="team-content">
<h3 class="name">한동효</h3>
<h4 class="title">Backend Developer</h4>
</div>
<ul class="social">
<li>
<a href="https://github.com/hyohyo12" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</li>
</ul>
</div>
</div>
</section>
</body>
<script>
window.onscroll = function () {
if (window.scrollY > 50) {
document.querySelector('.nav').classList.add('visible');
} else {
document.querySelector('.nav').classList.remove('visible');
}
};
document.addEventListener('DOMContentLoaded', function () {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
} else {
entry.target.classList.remove('visible');
}
});
},
{
threshold: 0.5,
},
);
document.querySelectorAll('.about').forEach((section) => {
observer.observe(section);
});
});
</script>
</html>