Scroll Frames 라이브러리 사용기

Scroll Frames - 라이브러리 링크

 

개인 포트폴리오 사이트를 준비하면서 개인적인 강점인 모션그래픽 역량을 강조하기 위한 방법을 찾으려고 했다. 단순히 동영상을 올리기보다는 인터랙티브하게 동작하는 방법을 찾다가 Scroll Frames라는 라이브러리를 발견했다. 라이브러리 문서를 보면서 느낀 특징은 모션그래픽, CSS, JS에 대한 이해도를 동시에 요구했으며, 쉽게 사용이 가능한 라이브러리는 아니라고 생각이 들었다.

라이브러리 컨셉

일단 요구하는 동영상 포맷은 일반적은 동영상 파일이 아니라 이미지 시퀀스이다. 이미지 시퀀스는 하나의 동영상 파일이 아닌 정지 영상 즉 png 혹은 webp 같은 이미지 파일의 묶음이라고 생각하면 된다. webp의 파일 크기가 작아 효율적이기 때문에 애프터 이펙트에서 png 이미지 시퀀스로 뽑은걸 다시 webp 포맷으로 변환하는 과정이 필요하다.

 

라이브러리에서 이미지를 표시하는 방식은 CSS background-image를 사용한다. 쉽게 생각하면 스크롤 위치에 따라 background-image의 소스를 변화시켜서 동영상처럼 보이게 하는 방식이다. 그리고 영상을 만들면서 고려해야할 점은 데스크탑, 모바일 영상을 따로 만들지 않는 방향으로 한다면 하나의 이미지 시퀀스로 데스크탑, 모바일을 전부 커버해야하는데 나는 일반적인 영상 비율(16:9)에서 가운데에 모바일 뷰(9:16)를 안전 영역으로 설정하고 작업하여, 중요한 내용은 잘리지않게 화면 구성을 하였다.

 

실제 프로젝트에 적용하고 구현하는건 Claude의 도움을 받아 진행하였는데, 라이브러리 소스가 탄탄하게 작성되어 있어서인지 Next에서 스크립트만 적용하고 구현에 필요한 CSS만 적용하니 금새 원하는 모습대로 작동하였다.

마무리

적용 자체는 어려움이 없었지만 적용 전에 필요한 이미지 시퀀스 작업에서 시간이 소요가 되었다. 안전 영역 설정이라던지, 일반적인 동영상이 아닌 사용자의 스크롤에 따라 시퀀스가 진행되기 때문에 모션그래픽의 프레임 간격 설정, 비교적 불친절한 라이브러리 문서로 몇가지 삽질 등등 모션그래픽, CSS, JS에 대한 종합적인 이해도가 필요한 작업이어서 개인적으로는 흥미롭게 진행하였다.