1) 문제점
- 다수의 ASP 사이트가 개별적으로 운영되어 유지보수 및 관리 비용 증가
- 디자인 및 기능의 일관성이 부족해 사용자 경험 저하
- 동영상 스트리밍 성능과 안정성이 낮아 사용자 이탈률 증가
- 배포 및 테스트 과정에 수작업이 많아 배포 품질 및 속도 저하

2) 우리 카지노 목표
- 106개의 서비스를 통합 운영할 수 있는 프론트엔드 아키텍처 구축
- Next.js 기반으로 공통 UI/UX 및 페이지 구성 체계화
- HLS 기반의 실시간 스트리밍 안정성 향상
- Jenkins와 Docker를 이용한 CI/CD 자동화로 배포 효율 극대화
- SEO 최적화 및 성능 개선을 통해 검색 유입 및 사용자 만족도 향상

3) 주요업점
- Next.js의 SSR 기능을 활용해 검색엔진 최적화 구현
- HLS 스트리밍을 통한 실시간 동영상 콘텐츠 제공
- Jenkins + Docker로 배포 자동화 및 품질 향상
- 아토믹 디자인 적용으로 컴포넌트 재사용성 및 확장성 확보
- 다양한 브라우저 환경 대응(Cross Browsing), 모바일 웹뷰 대응

1) 프론트엔드 아키텍처 설계 및 개발
- Next.js를 활용하여 One소스 우리 카지노로 106개의 서비스를 통합하여 운영
- 아토믹 및 VAC 디자인 패턴을 적용하여 유지보수성과 확장성을 향상.
- 각 도메인별로 동적인 UI 효과를 부여하여 사용자 경험을 향상시킴.
- 모바일앱에서 웹뷰를 통해 요청이 오는 경우에 따른 데이터 및 UI 처리.
2) 비디오 스트리밍 서비스 구현
- Hls 프로토콜을 활용하여 실시간 비디오 스트리밍 서비스 구현.
3) 크로스브라우징 처리
- CSS: 모든 주요 브라우저에서 일관된 디자인 및 레이아웃을 제공하기 위해 CSS 속성 및 선택자의 호환성을 유지하고, 벤더 Prefix를 적절히 활용함.
- 폰트: 사파리 브라우저를 고려해 4MB 이하의 폰트를 적용
- 이벤트 처리 : 브라우저 간의 차이를 고려하여 이벤트 핸들러를 작성.
4) CI/CD 파이프라인 구축
- Jenkins와 Docker를 사용하여 자동화된 CI/CD 파이프라인 구축 및 운영
- 배포 과정 자동화로 배포 시간을 단축하고, husky를 사용하여 오류 발생을 최소화
5) 코드 리팩토링 및 성능 최적화
- 코드 품질 향상과 유지보수성을 높이기 위해 주기적인 코드 리팩토링을 수행.
- 구글 PageSpeed Insights와 Lighthouse를 활용하여 웹사이트 성능을 분석하고 최적화.
- JMeter를 사용하여 부하 테스트를 수행하고, 애플리케이션의 성능, 병목을 파악 및 개선
- 환경에 따른 Webpack의 Optimization 기능 조절.
6) SEO 최적화
- Next.js의 서버 사이드 렌더링(SSR)을 활용하여 검색 엔진 최적화.
- IndexNow를 사용하여 검색 엔진에 사이트 변경 사항을 즉시 반영하도록 페이지 생성.
7) 운영 및 유지보수
- 서비스 운영 중 발생하는 이슈 해결 및 성능 최적화.
- 사용자 피드백을 반영하여 지속적인 개선 작업 진행.