Live24

쇼핑몰에 설치 시 실시간 방송부터 다시보기 기반 숏폼 제작까지 가능한 영상 커머스 플랫폼

🔗 Live24

---

사용 기술

Vue Nuxt Pinia Tailwind CSS

---

주요 기능

• 카페24 쇼핑몰 연동 원클릭 설치, 실시간 방송 및 다시보기 기능 제공
• 상·하 스크롤 기반 시청자용 HLS 플레이어 페이지 제공
• 채팅, 프롬프트, AI 요약 기능이 포함된 실시간 방송용 스튜디오 페이지 제공
• 방송 종료 후 HLS 영상을 트리머로 편집, 숏폼 콘텐츠로 재가공 가능

---

담당 역할 / 기여도

• 공통 알림 시스템(Alert) 전역 설계 및 구현

  • Pinia 기반 Alert Store 구조 설계
  • 최상단 레이아웃에 알림 처리 로직 통합
  • 모든 컴포넌트에서 호출 가능한 구조로 전역화

• HLS 기반 다시보기 트리머 기능 개발

  • HLS 영상을 여러번 순회하며 탐색하여 장면 캡처 후 타임라인 구성
  • GSAP 기반 드래그 API로 시작/종료 지점 조정 기능 제공
  • 드래그 막대 위치를 비율로 환산해 실제 영상 시점에 매핑

  ---

스크린샷