# 송경세 이력서

# 📬 기본 정보
- **이름**: 송경세
- **성별**: 남
- **이메일**: [e-mail]
- **GitHub**: [https://github.com/thdrudtp15](https://github.com/thdrudtp15)
- **거주지**: 서울 양천구
- **경력**: 약 1년 9개월

---

# 😁소개
안녕하세요, 2년차 프론트엔드 개발자 송경세입니다.

번역 자동화 시스템 구축으로 작업 시간을 **80%** 단축했고,
컴포넌트 설계 개선으로 신규 기능 개발 속도를 **30%** 향상시킨 경험을 가지고 있습니다.

문제를 발견하고 개선하는 것을 즐기며,
성능 최적화와 재사용 가능한 코드 작성에 집중합니다.

# 🚩자격증
- 정보처리기사 (실기 가채점 합격, 결과 발표 예정: 2024.12.24)

---

# 🎯 목표
- 효율적이고 유지보수 쉬운 UI 구조 설계
- 성능 최적화에 대한 전문성 강화
- 가독성 좋은 코드 작성하기
---

# 🛠 기술 스택
| 분야 | 기술 |
|------|------|
| **Frontend Framework** | Next.js, React, TypeScript |
| **UI / Styling** | TailwindCSS, SCSS |
| **State** | React Query, Redux |
| **Backend** | Supabase, NextAuth, Socket.io |

---

# 💼 경력

## 엔아이소프트
- **근무 기간**: 2023.10 ~ 2025.07 (1년 9개월 근무)
- **역할**: 프론트엔드 사원
- **주요 업무**:
- **React**를 이용한 프론트엔드 개발 및 SPA 구현
- **HTML**, **CSS**를 활용한 반응형 UI/UX 퍼블리싱
- **RESTful API 연동**을 통한 서버 통신 및 비동기 데이터 처리
- **Google OAuth API**를 활용한 **소셜 로그인 기능** 구현
- **Google Spread Sheet API**, **i18n**을 활용한 **다국어 번역 시스템** 구축
- **Open API** 연동을 통한 **음악 평가 시스템** 개발
- 재사용 가능한 컴포넌트 및 커스텀 훅 설계·구현
- **퇴사 사유** :회사 사정에 따른 권고사직 (경영 악화)

# 💼 프로젝트

## [회사 프로젝트] 미라클 플레이 (Miracle Play) [***(링크)***](https://www.miracleplay.gg/en)
- **기간**: 2023.10 ~ 2025.03 (17개월, **엔아이소프트**)
- **기술 스택**: React, Redux, Thirdweb, Axios, SCSS, i18next
- **담당 역할**: 프론트엔드 개발 (공통 컴포넌트 설계, 번역 자동화, 성능 최적화)

### -프로젝트 개요-
블록체인 기반 게임 플랫폼 **미라클플레이**의 프론트엔드 개발을 담당했습니다. **다국어 지원**, **UI 표준화**와 **번역 자동화**, **성능 최적화** 등 프로젝트의 품질 향상과 개발 속도를 높이기 위한 업무를 진행하였습니다.

### -주요 성과-
- **번역 자동화 시스템 구축**: Google Spreadsheet API 연동으로 번역 작업 시간 **60분** → **10분** 단축 (약 80% 단축)
- **공통 컴포넌트 표준화**: 모달, 테이블 등 재사용 컴포넌트 설계로 신규 기능 개발 속도 **30%** 향상
- **성능 최적화**: React.memo 적용 및 Redux 전역 상태 관리로 리렌더링 범위 **80%** 감소, API 요청 **20%** 절감
- **코드 품질 개선**: 커스텀 훅 도입으로 비즈니스 로직 재사용성 강화, 전체 코드량 15% 감소

[**자세히 보기(링크)**](https://www.notion.so/28f3d81347d58095b091ea8b0533b311)

---

## [회사 프로젝트]뮤직 온 더 블록 (Music on the Block) [***(링크)***](https://musicontheblock.com/)
- **기간**: 2025.01 ~ 2025.06 (6개월, **엔아이소프트**)
- **기술 스택**: React, React Query, OpenAI API, Axios, SCSS
- **담당 역할**: 프론트엔드 개발 (AI 음악 평가 시스템 구현, API 최적화, 공통 컴포넌트 설계)

### -프로젝트 개요-
블록체인 기반 음악 생성 플랫폼 **뮤직 온 더 블록**의 프론트엔드 개발을 담당했습니다. **AI 음악 생성**, **UI 표준화**, **컴포넌트 설계** 등의 작업을 맡았습니다.

### -주요 성과-
- **AI 음악 평가 시스템 개발**: OpenAI GPT-4를 활용한 음악 평가 시스템 개발 및 실패 시 재시도 로직 구현으로 응답 실패율 **60% 감소**
- **React Query 최적화**: 캐싱 및 낙관적 업데이트 적용으로 API 요청 **15% 감소**, UX 개선
- **검색/필터 컴포넌트 모듈화**: Query Param 기반 재사용 컴포넌트 설계로 신규 페이지 개발 속도 **50% 향상**
- **테이블 컴포지션 설계**: 컴파운드 패턴을 사용하여 CSS 코드량 **50% 감소** 및 유지보수성 향상

[**자세히 보기(링크)**](https://www.notion.so/28f3d81347d5804184b5f4788d226398)

---

## [개인 프로젝트] 타이핑 배틀[***(링크)***](https://typebattle-lime.vercel.app)
- **기간**: 2025.10 ~ 2025.11 (약 3주)
- **기술 스택**: **React**, **TypeScript**, **socket.io**, **node.js**
- [**GitHub**](https://github.com/thdrudtp15/type_battle_client)
- [**구동영상**](https://www.youtube.com/watch?v=rAbrIMHU_jY)

### -프로젝트 개요-

WebSocket 기반 실시간 타이핑 대결 게임. Socket.io를 활용한 1:1 자동 매칭 시스템과
실시간 점수/정확도 동기화를 구현했으며, Map 자료구조를 활용한 효율적인 방 관리와
메모리 누수 방지를 위한 인터벌 정리 로직을 구현했습니다.

### -주요 기능-

- **실시간 매칭 시스템**: 대기 중인 플레이어를 자동으로 1:1 매칭
- **게임 방 관리**: Map 자료구조를 활용한 효율적인 방 관리
- **실시간 점수 계산**: 타이핑 로그를 기반으로 점수 및 정확도 계산
- **게임 타이머 관리**: 카운트다운 및 게임 시간 관리

### -문제 해결-

- **불필요한 리렌더링 방지**: React.memo를 이용한 불필요한 리렌더링 방지
- **네트워크 트래픽 감소**: CPM(분당 타수) 전송에 **쓰로틀링(500ms)** 적용하여 서버 부하 및 네트워크 트래픽 감소
- **메모리 누수 관리**: **useEffect cleanup**을 사용하여 비동기 함수의 메모리 누수 방지

---

## [개인 프로젝트] 공간하우징[***(링크)***](https://gongganhousing.vercel.app)
- **기간**: 2025.9 ~ 2025.10 (약1개월)
- **기술 스택**: Next.js 15, TypeScript, Supabase, NextAuth.js, Tailwind CSS, Cloudinary
- [**GitHub**](https://github.com/thdrudtp15/GongganHousing)

### -프로젝트 개요-
클라이언트 요구사항을 바탕으로 기획부터 배포까지 전 과정을 경험한 프로젝트입니다. **Supabase**와 **Cloudinary**를 활용한 풀스택 개발을 통해 인증, CRUD, 이미지 최적화, 이메일 발송 등 실무에 필요한 핵심 기능들을 구현했습니다.

### -주요 기능-
- **Next.js 15 App Router** 기반 풀스택 개발 (CRUD)
- **Supabase RLS**로 안전한 데이터 관리
- **NextAuth** 인증 및 관리자 권한 시스템
- **Cloudinary** 이미지 최적화 (자동 압축/변환)
- **Nodemailer** SMTP 이메일 전송 기능
- IP 기반 **Rate Limiting** + **Claudflare Turnstile**을 이용한 이메일 스팸 공격 방지

### -문제 해결-

- **이미지 업로드 최적화**: browser-image-compression을 도입해 클라이언트에서 이미지를 0.7MB 이하로 사전 압축하여 서버 전송량 **60% 감소** 및 Cloudinary 저장 용량 절감
- **이메일 스팸 방지**: **Cloudflare Turnstile**과 **Rate Limiting**을 결합해 스팸 요청 차단 시스템 구축

- **인증 시스템 개선**: **Supabase Auth**에서 **NextAuth** 세션 기반 인증으로 전환하여 다이나믹 라우트 문제 해결 및 코드 간결화. **Supabase RLS**는 **유지**하여 데이터베이스 레벨 권한 검증 보장

- **메타데이터 중복 요청 최적화**: **React cache** 함수를 이용한 시공 사례 상세 페이지의 중복 데이터 요청 제거

- **데이터 캐싱을 통한 성능 개선**: **Next.js**의 **unstable_cache** 활용으로 시공 사례 목록 및 상세 페이지 로딩 속도 **25% 개선**

*캐싱 작업 이전 화면 로드 시간: 454ms*
*캐싱 작업 후 화면 로드 시간: 334ms*

### 성능 지표 - Lighthouse 성능 부분 99점 달성

---

## [개인 프로젝트] SNAPUI[***(링크)***](https://snap-ui-react.vercel.app/?html=tutorial)
- **기간**: 2025.8 ~ 2025.9 (약1개월)
- **기술 스택**: React, TypeScript,
- [**GitHub**](https://github.com/thdrudtp15/SnapUI_react)

### -프로젝트 개요-
디자이너와 협업 시 CSS 애니메이션/hover 효과를 실시간 공유하기 위한 서버리스 코드 공유 플랫폼입니다. URL만으로 코드 공유가 가능합니다.

### -주요 기능-
- **Monaco Editor**를 사용하여 HTML, CSS 편집 및 프리뷰
- 클릭한 **HTML**요소에 적용된 **CSS**만을 별도 에디터에 표시해주는 **스타일 하이라이팅** 기능
- **LZString** 라이브러리로 쿼리 파라미터를 압축
- **DOMPurify**로 **XSS** 공격 방지

---

## [개인 프로젝트] 개인 블로그[***(링크)***](https://blog-eight-rho-53.vercel.app/)
- **기간**: 2025.8 ~ 현재
- **기술 스택**: Next.js, TypeScript, SCSS, MDX
- [**GitHub**](https://github.com/thdrudtp15/Blog)

### -프로젝트 개요-
학습 내용 기록을 위한 개인 기술 블로그입니다.
MDX 기반 서버리스 아키텍처로 구현하였습니다.

### -주요 기능-
- **MDX + gray-matter** 기반 파일 시스템 콘텐츠 관리 (DB 불필요)
- **SSG** 방식으로 빠른 페이지 로딩 및 **SEO 최적화** 작업

---

# 🧠 학력
- 학점은행제 컴퓨터 공학 전공
---