현대건설 그로잉투게더 숏폼 콘텐츠

Related Links

• 라이브 데모 보기

Key Achievements

• 01
  숏폼 UI 디자인 제작

  유튜브·네이버 숏폼을 벤치마킹한 뒤 피그마로 UI 디자인을 직접 제작해 콘텐츠 화면을 설계

• 02
  노출 비율 기반 자동재생 제어

  getBoundingClientRect()로 영상의 뷰포트 노출 비율을 계산해 50% 노출 시 음소거 자동재생, 100% 노출 시 소리 재생되도록 제어

• 03
  영상 재생 제어 구현

  video.js를 활용해 영상 재생·정지·음소거 제어 기능을 구현

Project Visuals

이미지 크게 보기

숏폼 기능 구현 화면

이미지 크게 보기

웹, 태블릿, 모바일 반응형 사이트