CSS Grid과 WebVTT로 TV의 '스퀴즈백' 효과를 웹에서 재현하다
The broadcast squeezeback, rebuilt with CSS Grid and WebVTT
Mux 블로그에서 TV 중계에서 흔히 볼 수 있는 '스퀴즈백' 효과를 CSS Grid와 WebVTT로 구현하는 방법을 소개합니다. 비디오를 3x3 그리드 중앙에 배치하고, 트랙 크기를 애니메이션하여 화면 일부를 축소하고 주변에 패널을 표시합니다. WebVTT 큐를 이용해 타임라인을 텍스트 파일로 관리하며, cuechange 이벤트로 레이아웃을 전환합니다. 또한 캔버스로 주변 조명 효과를 만들고, 색상 추출 시 평균 대신 각도 기반 계산을 사용하는 팁과 CSS 그리드 및 @property 관련 주의사항을 다룹니다.
스퀴즈는 레이아웃 변경일 뿐인데, 브라우저는 레이아웃 변경에 매우 능숙합니다!
HN 토론
10- jareklupinski
저 효과를 수없이 봤지만 자세히 살펴본 적은 없었어요. 그냥 TV가 하는 거지. 그런데 어느 날 밤 2시에 잠이 안 와서 아이폰으로 검색하다가, 그 효과에 실제로 이름이 있다는 걸 알게 됐죠: 스퀴즈백.
미디어 업계 사람들과 어울리는 게 왜 좋은지 다시 생각하게 됐네요: TouchDesigner가 기술과 인터랙티브를 최고의 방식으로 연결해 주고, 그들이 자기만의 플로우와 용어로 머릿속에 있는 걸 정확히 말해 줄 수 있게 해 주며, 그들이 자리에서 바로 디자인을 반복적으로 빠르게 피드백할 수 있게 해 줍니다.
- kmoser
이 전환들이 애니메이션으로 처리되어야 하는 건가요, 즉 비디오 크기가 몇 초에 걸쳐 변하는 건가요? 저는 Firefox와 Chrome 모두에서 크기가 즉시 바뀌기만 하거든요.
- davekiss
작성자입니다! 재미있는 작업이었어요. 이 아이디어는 한동안 머릿속에서 맴돌았는데요—아직 라이브 스트림을 위한 워크플로우를 만들 수 있으면 좋겠어요. 분명 가능할 거라 생각하지만, 지금처럼 네이티브 기술만으로는 어려울 수도 있겠네요.