Virtual Waiting Room SaaS 에이전트 모듈

프로젝트 개요

• 한 줄 소개
  CDN 기반 웹사이트 삽입형 트래픽 제어 모듈

• 기간
  2022.11 ~ 2023.01 (약 3개월)

• 팀 구성
  4인 팀 프로젝트

• 역할
  Web Engineer

---

프로젝트 설명

웹사이트 트래픽 폭주를 제어하기 위한 Virtual Waiting Room SaaS용 에이전트 모듈을 개발한 프로젝트입니다.

기존 온프레미스 환경에서 사용되던 레거시 JavaScript 코드를
SaaS 환경에 맞게 재구성하고, CDN을 통해 배포 가능한 구조로 개선하여
글로벌 환경에서도 쉽게 적용할 수 있도록 구현했습니다.

---

주요 기능

• CDN 기반 에이전트 모듈 배포
• 웹사이트 삽입형 트래픽 제어
• 멀티 브라우저 호환 지원
• SaaS 환경 적용 가능한 구조

---

기술 스택

Frontend

• JavaScript

DevOps

• AWS CloudFront

Etc

• Webpack
• Babel
• Slack / Jira / Notion / GitHub

---

문제 정의

• 온프레미스 기반 구조로 인해 서비스 확장성 제한
• ES5 기반 레거시 코드로 유지보수 난이도 높음
• 수동 번들링 및 배포 과정으로 개발 효율 저하
• 브라우저 호환성에 대한 체계적인 관리 부족

---

해결 과정

1. SaaS 환경에 맞는 구조 재설계

• 기존 온프레미스 에이전트를 SaaS 구조에 맞게 재설계
• CDN을 통해 외부 웹사이트에 삽입 가능한 형태로 변경
• 다양한 환경에서 동작 가능한 경량 스크립트 구조 설계

---

2. 레거시 코드 리팩토링

문제:

• ES5 기반 코드로 가독성과 유지보수성이 낮음
• 신규 개발자의 진입 장벽이 높은 상태

해결:

• ES6 문법 기반으로 코드 리팩토링
• 모듈화 및 코드 구조 개선
• 주석 및 문서 보강으로 이해도 향상

---

3. 빌드 및 번들링 환경 개선

문제:

• 수동 번들링으로 인한 복잡한 배포 과정

해결:

• Webpack을 활용한 번들링 자동화
• Babel을 통한 ES6 → ES5 트랜스파일링 및 polyfill 적용

효과:

• 배포 프로세스 단순화
• 크로스 브라우징 대응 범위 명확화

---

4. 브라우저 호환성 확보

• Chrome, Edge, Safari 등 주요 브라우저 지원
• Babel 및 polyfill을 활용한 호환성 보장
• 다양한 실행 환경에서 안정적인 동작 검증

---

성과

• SaaS 환경에 최적화된 에이전트 모듈 구축
• CDN 기반 배포로 글로벌 서비스 적용 가능
• 레거시 코드 개선으로 유지보수성 향상
• 번들링 자동화로 개발 및 배포 효율 개선
• 신규 개발자의 진입 장벽 감소

---

회고

단순한 기능 구현을 넘어,
레거시 코드를 현대적인 구조로 개선하고
배포 및 실행 환경까지 고려한 설계를 경험한 프로젝트였습니다.