Backend/portfolio.html at master · ecommerce-systems/Backend · GitHub

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>포트폴리오 | E-commerce System</title>
    <style>
        body {
            font-family: 'Malgun Gothic', 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.8;
            margin: 0;
            padding: 0;
            background-color: #fff;
            color: #333;
        }
        .container {
            max-width: 900px;
            margin: 40px auto;
            padding: 40px;
            border-top: 5px solid #2c3e50;
        }
        h1, h2, h3 {
            color: #2c3e50;
            margin-top: 1.5em;
            margin-bottom: 0.8em;
            padding-bottom: 8px;
            font-weight: 600;
        }
        h1 {
            text-align: center;
            font-size: 2.2em;
            margin-bottom: 30px;
            border-bottom: none;
        }
        h2 {
            font-size: 1.6em;
            border-bottom: 2px solid #eaecee;
        }
        h3 {
            font-size: 1.2em;
            border-bottom: 1px solid #f1f1f1;
        }
        .summary {
            background-color: #f7f9f9;
            padding: 25px;
            margin-bottom: 40px;
            border: 1px solid #e5e8e8;
        }
        .summary ul {
            padding-left: 20px;
            list-style-type: '✓ ';
            color: #27ae60;
        }
         .summary li {
            color: #333;
         }
        .project-info, .project-description {
            margin-bottom: 25px;
            line-height: 1.6;
        }
        .project-info ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            font-size: 0.95em;
        }
        .project-info li {
            margin-bottom: 5px;
        }
        .project-info li strong {
            display: inline-block;
            width: 100px;
            color: #555;
        }
        .challenge-section {
            margin-bottom: 40px;
        }
        .challenge-item {
            margin-bottom: 30px;
        }
        .trade-off {
            margin-top: 15px;
            padding: 15px;
            background: #fdfefe;
            border-left: 3px solid #b3b6b7;
            font-size: 0.9em;
            color: #566573;
        }
        .trade-off strong {
            color: #212f3d;
            font-weight: 600;
        }
        .result-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 0.95em;
        }
        .result-table th, .result-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        .result-table th {
            background-color: #f2f2f2;
            color: #333;
            font-weight: 600;
        }
        .result-table td:first-child {
            font-weight: 600;
            text-align: left;
        }
        .result-table .highlight {
            font-weight: 700;
            color: #c0392b;
        }
        .result-table .improvement {
            color: #229954;
            font-weight: 700;
        }
        ul {
            list-style-type: none;
            padding-left: 0;
        }
        li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 18px;
        }
        li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: #555;
            font-weight: bold;
        }
        hr {
            border: none;
            border-top: 1px solid #eee;
            margin: 40px 0;
        }
        .footer {
            text-align: center;
            margin-top: 50px;
            font-size: 0.9em;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>전자상 거래 서비스 구축</h1>

        <div class="project-info">
            <ul>
                <li><strong>서비스 URL:</strong> <a href="https://www.ecommerce.p-e.kr/" target="_blank">https://www.ecommerce.p-e.kr/</a></li>
                <li><strong>GitHub Repository:</strong> <a href="https://github.com/orgs/ecommerce-systems/repositories/" target="_blank">https://github.com/orgs/ecommerce-systems/repositories/</a></li>
                <li><strong>제작 기간:</strong> 2025.11.03 ~ 2026.01.26</li>
            </ul>
        </div>

        <div class="project-description">
            <p>본 프로젝트는 **H&M Personalized Fashion Recommendations Kaggle Dataset**을 기반으로 구축된 가상의 이커머스 백엔드 시스템입니다. 회원, 상품, 주문, 인증 등 이커머스 핵심 API를 개발하고, 데이터 기반 추천 시스템을 도입하여 비즈니스 가치 창출에 기여했습니다. 대규모 트래픽을 안정적으로 처리하고, 유지보수가 용이한 확장 가능한 아키텍처를 목표로 했습니다.</p>
        </div>

        <div class="summary">
            <h2>핵심 성과 요약</h2>
            <ul>
                <li>데이터베이스 최적화: 역정규화 및 인덱싱 전략으로 검색 API 응답 속도 **8배 향상** (101ms → 12ms)</li>
                <li>캐싱 전략 적용: 추천 API 응답 속도 **35배 향상** (210ms → 6ms)</li>
                <li>데이터 기반 추천 모델 개발: 자체 개발 모델로 Baseline 대비 **10배 이상**의 추천 성능 확보</li>
                <li>시스템 안정성 확보: Redis 도입으로 부하 테스트 에러율 **0.64% → 0%** 달성</li>
                <li>고가용성 아키텍처 설계: Scale-out 구조 및 Stateless 아키텍처 구현으로 서비스 안정성 증대</li>
            </ul>
        </div>

        <div class="challenge-section" id="challenges">
            <h2>1. 주요 기술 과제 및 해결 경험</h2>

            <div class="challenge-item">
                <h3>1.1. 검색 성능 최적화</h3>
                <ul>
                    <li><strong>Challenge:</strong> 다중 테이블 조인으로 인한 검색 API의 높은 Latency(101ms) 문제.</li>
                    <li><strong>Action:</strong>
                        <ul>
                            <li>읽기/쓰기 모델을 분리하는 **CQRS 패턴**을 적용, 검색 전용 **역정규화 테이블**을 설계하여 조인 연산을 제거.</li>
                            <li>역정규화된 테이블에 **복합 인덱스**를 적용하여 다양한 필터 조건에서도 빠른 조회 속도를 보장.</li>
                        </ul>
                    </li>
                    <div class="trade-off">
                        <strong>기술적 결정 및 Trade-off:</strong> 스토리지 비용 및 데이터 동기화 복잡성 증가를 감수하는 대신, 검색 속도 향상을 통한 사용자 경험 개선 효과가 더 크다고 판단하여 역정규화를 선택했습니다.
                    </div>
                    <li><strong>Result:</strong> 평균 응답 속도 **12.6ms** 달성 (<strong>8배 개선</strong>).</li>
                </ul>
            </div>
            <hr>
            <div class="challenge-item">
                <h3>1.2. API 응답 속도 극대화</h3>
                <ul>
                    <li><strong>Challenge:</strong> 반복적인 DB 조회로 인해 발생하는 API Latency 최소화.</li>
                    <li><strong>Action:</strong> 변경 빈도가 낮은 데이터(추천 결과 등)에 **캐싱(Caching) 전략**을 적용. 반복 요청은 DB를 거치지 않고 메모리에서 즉시 결과를 반환하도록 구현.</li>
                    <li><strong>Result:</strong> 캐시 적용 후, 추천 API의 평균 응답 속도가 210ms에서 **6ms로 35배 향상**. DB 부하 감소 및 사용자 체감 속도 개선.</li>
                </ul>
            </div>
            <hr>
            <div class="challenge-item">
                <h3>1.3. 인증 시스템 안정성 및 확장성 확보</h3>
                <ul>
                    <li><strong>Challenge:</strong> RDB 기반 인증(V1)이 부하 상황에서 Race Condition으로 **0.64% 에러율**을 보이며, I/O 병목으로 확장성에 한계.</li>
                    <li><strong>Action:</strong>
                        <ul>
                            <li>토큰 저장소를 **In-Memory 저장소 Redis**로 변경하여 I/O 병목을 해결.</li>
                            <li>JWT와 Redis 기반의 **Stateless 아키텍처**를 구현하여 수평 확장(Scale-out) 환경에서도 세션 정합성을 보장.</li>
                        </ul>
                    </li>
                    <li><strong>Result:</strong> 부하 테스트 에러율 **0%** 달성 및 평균 응답 속도 **3.2배** 개선.</li>
                </ul>
            </div>
        </div>

        <div class="challenge-section" id="recommendation">
            <h2>2. 데이터 기반 추천 시스템 개발</h2>

            <div class="challenge-item">
                <h3>2.1. 추천 모델링 및 성능 검증</h3>
                <ul>
                    <li><strong>Challenge:</strong> 개인화된 상품 추천을 통해 구매 전환율을 높여야 하는 비즈니스 과제.</li>
                    <li><strong>Action:</strong>
                        <ul>
                            <li>사용자 구매 이력(Sequence)을 기반으로 다음 구매 상품을 예측하는 **Markov Chain 모델** 개발.</li>
                            <li>'인기 상품', '랜덤' 추천을 Baseline으로 설정하고, **MAP, NDCG, MRR** 지표로 비교하여 모델의 객관적인 성능을 검증.</li>
                        </ul>
                    </li>
                    <div class="trade-off">
                        <strong>기술적 결정 및 Trade-off:</strong> 초기 단계에서 복잡한 딥러닝 대신, 구현이 간단하고 비즈니스 임팩트를 빠르게 검증할 수 있는 실용적인 Markov Chain 모델을 선택했습니다.
                    </div>
                    <li><strong>Result:</strong> 제안 모델이 Baseline 대비 모든 지표에서 **10배 이상 높은 성능**을 기록, 데이터 기반 추천의 효과를 정량적으로 증명.</li>
                </ul>
                 <table class="result-table">
                    <thead>
                        <tr><th>Model</th><th>MAP@20 (정확도)</th><th>NDCG@20 (순위 품질)</th><th>MRR@20 (첫 정답 순위)</th></tr>
                    </thead>
                    <tbody>
                        <tr><td><strong>Transition Model</strong></td><td class="highlight">0.1052</td><td class="highlight">0.1235</td><td class="highlight">0.1189</td></tr>
                        <tr><td>Popularity Model</td><td>0.0098</td><td>0.0153</td><td>0.0121</td></tr>
                        <tr><td>Random Model</td><td>0.0012</td><td>0.0021</td><td>0.0015</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="challenge-section" id="ops-quality">
            <h2>3. 인프라 및 개발 문화</h2>
            <ul>
                <li><strong>고가용성 아키텍처 (Scale-Out):</strong> Docker Swarm을 이용한 수평 확장으로 단일 장애 지점(SPOF)을 제거했습니다. 이를 통해 트래픽 급증에 유연하게 대응하고, 서버 장애 시에도 서비스 중단 없는 고가용성 환경을 구축했습니다.</li>
                <li><strong>인프라 자동화 (CI/CD):</strong> GitHub Actions와 Docker를 활용하여 테스트, 빌드, 배포 파이프라인을 자동화하고, 재현 가능한 운영 환경을 구축했습니다.</li>
                <li><strong>모니터링:</strong> Prometheus, Grafana 기반의 모니터링 환경을 구축하여 시스템 상태를 실시간으로 추적하고, 장애 발생 시 빠른 원인 분석이 가능하도록 했습니다.</li>
                <li><strong>코드 품질:</strong> TDD 방식의 테스트 코드 작성을 지향하고, 상세한 API 문서와 UML 다이어그램을 통해 코드의 품질과 팀의 협업 효율을 높였습니다.</li>
            </ul>
        </div>

        <div class="challenge-section" id="vision">
            <h2>4. 향후 과제 및 기술 비전</h2>
            <ul>
                <li><strong>MSA 전환 준비:</strong> 현재 모놀리식 아키텍처의 데이터 동기화 문제를 해결하는 과정에서 MSA 환경을 가정하고 고민했습니다. 향후 서비스가 복잡해지면 **CDC(Change Data Capture) 또는 이벤트 기반 아키텍처**를 도입하여 서비스 간 결합도를 낮추고, 독립적인 개발 및 배포가 가능한 구조로 발전시킬 계획입니다.</li>
                <li><strong>AI 기술 접목:</strong> 추천 모델 고도화, LLM을 활용한 지능형 상품 검색 등 AI 기술을 접목하여 서비스의 본질적인 가치를 높이는 방안에 대해 지속적으로 연구하고 있습니다.</li>
            </ul>
        </div>


    </div>
</body>
</html>