📖 프로젝트 설명

<aside> 📢 전 세계 BTS 팬들을 위한 공식 행사 사이트로, 공개 당일 358만 건의 요청과 595GB의 트래픽을 무중단으로 처리할 수 있도록 ALB + Auto Scaling 기반의 인프라를 설계했습니다.

다국어 대응, 인터랙션 중심의 UX 설계, 성능 최적화까지 전반적인 프론트엔드 구조를 주도하며 글로벌 서비스 운영 경험을 쌓을 수 있었습니다.

</aside>

🔧 담당한 기능

• 한국어, 영어, 일본어, 중국어 총 4개 언어팩을 적용한 다국어 인터페이스 구현

화면 기록 2025-06-04 오전 10.39.09.mov

• 한국어, 영어, 일본어, 중국어 총 4개 언어팩을 적용한 글로벌 사용자 대응 UI 구축

• 언어 선택에 따라 페이지 콘텐츠 및 메타데이터가 동적으로 전환되도록 구조 설계

• Next.js의 국제화(i18n) 기능과 공통 JSON 번역 리소스 관리 체계 적용

• 언어 코드 기반 초기 라우팅 처리 및 브라우저 언어 자동 감지 로직 구현

• 텍스트 길이 차이에 따른 반응형 UI 레이아웃 조정 및 스타일링 최적화

• ALB + Auto Scaling 기반의 서버 구조 설계로 대규모 트래픽 대응

• ALB + Auto Scaling 기반의 서버 구조를 설계해 공개 직후 발생한 고트래픽 상황에 안정적으로 대응

• 6월 1일 12시, 사이트 오픈 직후 집중된 트래픽을 처리하며 최대 초당 수천 건 수준의 요청을 수용

• 첫날 총 358만 건의 요청(RequestCount), 595GB의 트래픽(ProcessedBytes) 을 무중단으로 처리

• Auto Scaling 설정을 통해 최대 10개까지 확장 가능하도록 구성했고, 트래픽이 집중된 구간에서는 6개의 인스턴스가 동시 가동

• 정적/동적 콘텐츠 분리 및 성능 최적화

  • S3 + CloudFront를 통해 이미지, 폰트, 번들 파일 등 정적 리소스를 글로벌 CDN에 캐싱하여 전달 속도 향상
  • SSR 기반의 Next.js 구조를 적용해 동적 콘텐츠는 서버 사이드에서 실시간 렌더링, 초기 데이터 일관성 확보
  • 페이지 유형에 따라 SSG, ISR, SSR을 혼합 적용해 렌더링 비용과 사용성의 균형 최적화
  • 정적 리소스 요청은 클라우드 CDN이, 사용자 요청은 서버가 분산 처리하여 ALB 및 인스턴스 부하 최소화

🔎 Trouble Shooting

[기술적 도전] 서버 인프라 구축 및 트래픽 대응 설계

• 문제: HIVE의 보안 점검 기준을 통과하기 위한 네트워크 보안 구조 설계와, 트래픽 폭주 대비 확장 가능한 인프라 설계가 동시에 필요
• 해결:
  • Bastion 서버를 앞단에 두고, 모든 EC2 인스턴스를 Private Subnet에 구성해 외부 노출 최소화
  • ALB + Auto Scaling 조합으로 최대 10개의 인스턴스까지 유연하게 확장되는 구조 설계
  • CloudWatch로 요청량, 오류율, 리소스 사용량을 실시간 모니터링하며 대응 체계 구축
• 결과:
  • 보안 점검 무사 통과 및, 공개일 트래픽(358만 요청 / 595GB)에도 무중단 운영 성공
  • 프론트엔드 역할에 국한되지 않고, 서버 및 인프라 전반에 대한 실무적 이해도 상승