1. fiive studio (온라인 라이브 강의 스트리밍 플랫폼)
> Next.js, Typescript, Sass, Zustand
- 짧은 기간 안에 배포하기 위해, 주요 기능에 3rd party 도입 (라이브 스트리밍: aws IVS player SDK, 채팅: Sendbird)
- 방송 상태별로 인터랙티브 요소 도입하여, 유저의 적극적인 참여 유도 (lottie, aws IVS metadata, css animation)
- Static Export 하여, Github actions로 배포 자동화 시도 (aws cli, aws s3)
■ 협업
- 스쿼드 팀(FE 1명, BE 1명, 디자이너 1명)의 FE로 투입하여 3개월만에 배포
- 각 스쿼드 팀의 제품 이해도를 맞추기 위해, Allo(문서 툴)로 제품 아키텍쳐를 도식화하여 스크럼 회의 진행
-----------------------------------------------------------------------------
2. fiive (온라인 VOD 강의 플랫폼)
> React, Javascript, Sass
- 주요 기능 페이지 (VOD 페이지 / 상품 상세 페이지 / 마이페이지 등) 리뉴얼, 최적화 및 유지보수
- 어드민 (배너 관리 CRUD / 강의 목록 RU / 수강생 목록 RU) 개발로 운영팀의 업무 생산성 향상에 도움을 줌
- code splitting으로 빌드시간 압축 및 main.js 용량 4.2mb에서 566kb 로 최적화
- Sentry를 도입하여 FE production 에러 수 3.3K 에서 1.1K로 개선
- error alert를 즉시 받기 위한 Slack incoming-webhook 도입
- react-error-boundary를 도입하여 에러 핸들링 및 Skeleton Loading 처리
- react-helmet-async 와 prerender.io 로 SEO 연동하여 오픈그래프, 네이버/구글 검색결과에 자사 플랫폼 노출
■ 협업
- 디자인 팀과 디자인 시스템, 아토믹 패턴 도입 시도
- 마케팅 툴 (GA, Google Tag Manager, Mixpanel, 채널톡) 연동 및 트래킹 이벤트 코드 도입
더보기