Skip to content

Commit ad64416

Browse files
MiensoapMiensoap
committed
docs: 랜딩 페이지 사진/영상/설명 추가
1 parent c5c994d commit ad64416

File tree

2 files changed

+96
-65
lines changed

2 files changed

+96
-65
lines changed

‎index.html

+87-65
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<body>
2323
<nav class="nav">
2424
<ul>
25-
<li><a href="#demo">데모 영상</a></li>
2625
<li><a href="#about">기능 소개</a></li>
26+
<li><a href="#demo">데모 영상</a></li>
2727
<li><a href="#experience">핵심 경험</a></li>
2828
<li><a href="#architecture">시스템 아키텍처</a></li>
2929
<li><a href="#presentation">발표 자료</a></li>
@@ -51,27 +51,30 @@
5151
</a>
5252
</div>
5353
</main>
54-
<section class="demo" id="demo">
55-
<h1>데모 영상 (준비중)</h1>
56-
<div style="text-align: center; height: 65.5vh">
57-
<iframe width="100%" height="100%"
58-
src="https://www.youtube.com/embed/2LVZJANYzQ8?si=CTIyRLoiv9uBbrW4"
59-
title="YouTube video player" frameborder="0"
60-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
61-
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
54+
55+
<section class="about--section" id="about">
56+
<div class="about about--description">
57+
<h1>나만의 지도 공유하기</h1>
58+
<h2>
59+
나만의 지도를 만들어 공유할 수 있습니다.<br />
60+
</h2>
6261
</div>
62+
<img
63+
class="about description-image"
64+
src="https://github.com/user-attachments/assets/54234c0f-a885-48fb-a24b-9916b99af827"
65+
alt="관련사진넣기"
66+
/>
6367
</section>
6468
<section class="about--section" id="about">
6569
<div class="about about--description">
66-
<h1>나만의 지도 만들기</h1>
70+
<h1>나만의 지도에 장소 추가하기</h1>
6771
<h2>
68-
블라블라<br />
69-
블라블라
72+
나만의 장소를 지도에 추가할 수 있습니다.<br />
7073
</h2>
7174
</div>
7275
<img
7376
class="about description-image"
74-
src="관련사진넣기.png"
77+
src="https://github.com/user-attachments/assets/f0a10b2e-48ee-4ba3-8d24-2dfd3dc4fc3c"
7578
alt="관련사진넣기"
7679
/>
7780
</section>
@@ -81,98 +84,117 @@ <h2>
8184
>
8285
<img
8386
class="about description-image"
84-
src="관련사진넣기.png"
87+
src="https://github.com/user-attachments/assets/93c22b4f-72e6-408d-945a-9c5fa7de7a1d"
8588
alt="관련사진넣기"
8689
/>
8790
<div class="about about--description">
88-
<h1>나만의 코스 생성하기</h1>
91+
<h1>나만의 코스 공유하기</h1>
8992
<h2>
90-
블라블라<br /><br />
91-
블라블라<br />
92-
블라블라
93+
나만의 코스를 공유하거나, 공유된 코스를 탐색할 수 있습니다.<br />
9394
</h2>
9495
</div>
9596
</section>
9697

97-
<section class="about--section" id="experience">
98-
<div class="about about--description">
99-
<h1>핵심 경험 1 - 테스트</h1>
100-
<h2>
101-
블라블라<br />
102-
블라블라
103-
</h2>
98+
<section class="demo" id="demo">
99+
<h1>데모 영상</h1>
100+
<div style="text-align: center; height: 65.5vh">
101+
<iframe width="100%" height="100%"
102+
src="https://www.youtube.com/embed/WHxTBsRSN-M?si=HGDPvsJvJyXr5fDM"
103+
title="YouTube video player" frameborder="0"
104+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
105+
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
104106
</div>
107+
</section>
108+
109+
<section
110+
111+
class="about--section" id="experience"
112+
style="background-color: var(--sixth-color)"
113+
>
105114
<img
106115
class="about description-image"
107-
src="관련사진넣기.png"
108-
alt="관련사진넣기"
116+
src="https://github.com/user-attachments/assets/5249b4ba-9e2c-44f6-8172-2cde95685ccd"
117+
alt="검색 결과 비교"
109118
/>
119+
<div class="about about--description">
120+
<h1>검색 기능 개선</h1>
121+
<h3>
122+
Elasticsearch를 도입해 검색 로직의 가중치를 조정하고<br />
123+
RDB와 동기화를 유지하여 검색 정확도를 개선했습니다.<br />
124+
동의어 처리와 오타 교정 기능으로 검색 신뢰도를 높였습니다.<br />
125+
<br />
126+
싱글 노드 환경에서의 장애 상황에 대비해 SFP 대처 로직을 추가하고<br />
127+
Fallback 처리 시간을 <strong>97.86% 감소 (약 47배 개선)</strong>하는 성과를 거두었습니다.
128+
</h3>
129+
</div>
110130
</section>
131+
111132
<section
112133
class="about--section"
113134
style="background-color: var(--sixth-color)"
114135
>
115136
<img
116137
class="about description-image"
117-
src="관련사진넣기.png"
118-
alt="관련사진넣기"
138+
src="https://github.com/user-attachments/assets/421f7ad8-ff69-423a-bde3-3e37e1e32722"
139+
alt="마커 클러스터링"
119140
/>
120141
<div class="about about--description">
121-
<h1>핵심 경험 2 - 장소 검색 기능 개선</h1>
122-
<h2>
123-
블라블라<br /><br />
124-
블라블라<br />
125-
블라블라
126-
</h2>
142+
<h1>마커 클러스터링</h1>
143+
<h3>
144+
지도 상 수많은 마커를 효과적으로 표현하기 위해 클러스터링 라이브러리를 도입했습니다.<br />
145+
라이브러리 코드를 분석해 비효율적인 렌더링 방식을 찾아내 커스터마이징했고,<br />
146+
깜빡임 현상 해결 및 마커 렌더링 시간을 <strong>95.02% 감소 (약 20배 개선)</strong> 시켰습니다.
147+
</h3>
127148
</div>
128149
</section>
129150

130151
<section class="about--section">
131152
<div class="about about--description">
132-
<h1>핵심 경험 3 - 로깅 및 모니터링 관리</h1>
133-
<h2>
134-
블라블라<br />
135-
블라블라
136-
</h2>
153+
<h1>로깅 및 모니터링 시스템</h1>
154+
<h3>
155+
로깅 라이브러리로는 Pino, 모니터링 스택으로는 ELK를 사용했습니다.<br />
156+
Kibana와 Slack을 연동해 실시간 모니터링 시스템을 구축했습니다.<br />
157+
이를 통해 서버 장애 시 문제 파악이 빨라졌고, 운영 신뢰도가 향상되었습니다.
158+
</h3>
137159
</div>
138160
<img
139161
class="about description-image"
140-
src="관련사진넣기.png"
141-
alt="관련사진넣기"
162+
src="https://github.com/user-attachments/assets/42cf3df1-7051-4f5c-a481-b2d598de4572"
163+
alt="kibana 로그"
142164
/>
143165
</section>
144166

145-
<section
146-
class="about--section"
147-
style="background-color: var(--sixth-color)"
148-
>
167+
<section class="about--section">
168+
<div class="about about--description">
169+
<h1>테스트 코드 작성</h1>
170+
<h3>
171+
모킹 없이 실제 환경과 유사한 조건에서 테스트를 수행했습니다.<br />
172+
컨테이너를 사용해 다양한 환경에서 안정적으로 테스트를 진행했으며,<br />
173+
이를 통해 리팩터링 및 버그 수정 시 점검이 용이해졌고,<br />
174+
코드 품질과 신뢰도가 향상되었습니다.
175+
</h3>
176+
</div>
149177
<img
150178
class="about description-image"
151-
src="관련사진넣기.png"
152-
alt="관련사진넣기"
179+
src="https://github.com/user-attachments/assets/0f797c37-cf5c-4443-86fc-7a79e44e8858"
180+
alt="테스트 컨테이너"
153181
/>
154-
<div class="about about--description">
155-
<h1>핵심 경험 4 - 마커 클러스터링 최적화</h1>
156-
<h2>
157-
블라블라<br /><br />
158-
블라블라<br />
159-
블라블라
160-
</h2>
161-
</div>
162182
</section>
163183

164184
<section class="about--section">
165185
<div class="about about--description">
166-
<h1>핵심 경험 5 - React로 래핑되지 않은 JS 라이브러리 사용</h1>
167-
<h2>
168-
블라블라<br />
169-
블라블라
170-
</h2>
186+
<h1>React로 래핑되지 않은 JS 라이브러리</h1>
187+
<h3>
188+
JS 라이브러리와 React의 결합 과정에서 높은 자유도로 인해<br />
189+
마커 관리 주체가 분산되는 문제를 겪었습니다.<br />
190+
이를 해결하기 위해 코드 작성 규칙을 정립해 마커 관리 체계를 통합하고,<br />
191+
사용성과 안정성을 개선했습니다.
192+
</h3>
171193
</div>
172194
<img
173195
class="about description-image"
174-
src="관련사진넣기.png"
175-
alt="관련사진넣기"
196+
src="https://github.com/user-attachments/assets/0f797c37-cf5c-4443-86fc-7a79e44e8858"
197+
alt="React와 JS 라이브러리"
176198
/>
177199
</section>
178200

@@ -181,7 +203,7 @@ <h1>시스템 아키텍처</h1>
181203
<div class="architecture-image-wrapper">
182204
<img
183205
class="architecture-image"
184-
src="assets/architecture.svg"
206+
src="https://github.com/user-attachments/assets/d910af3b-5169-4dd4-b5d9-6c07b0a80972"
185207
alt="architecture"
186208
/>
187209
</div>
@@ -312,4 +334,4 @@ <h4 class="title">Backend Developer</h4>
312334
});
313335
});
314336
</script>
315-
</html>
337+
</html>

‎style.css

+9
Original file line numberDiff line numberDiff line change
@@ -246,11 +246,20 @@ h2 {
246246
color: gray;
247247
}
248248

249+
h3 {
250+
font-weight: 400;
251+
color: gray;
252+
}
253+
249254
@media screen and (max-width: 768px) {
250255
h2 {
251256
font-size: 1.2rem;
252257
color: gray;
253258
}
259+
260+
h3 {
261+
color: gray;
262+
}
254263
}
255264

256265
.tech-stack-container {

0 commit comments

Comments
 (0)