스크롤 영상 홈페이지 제작: 배경을 바꿔도 사용감 유지하기
배경의 세계는 바꾸고, 방문자가 스크롤하는 경험은 유지하세요.
영상과 홈페이지를 별도 결과물로 설계하세요
LUDGI의 Orbital Bloom 프로젝트에서는 닫힌 문이 열리고 카메라가 생기 있는 정원으로 들어갑니다. 그 이동은 영상에 담겨 있고, 홈페이지는 방문자의 스크롤을 영상 시간에 연결합니다. 완성된 한 장면과 그 장면을 제어하는 인터페이스를 구분하면 배경 컨셉을 바꾸어도 같은 사용감을 유지하기 좋습니다.
영상 생성 전에 첫 장면에 무엇이 보이는지, 문이 언제 완전히 열리는지, 카메라가 어디서 멈추는지 정하세요. 시작 구도에는 히어로 문구를 읽을 공간을, 마지막 구도에는 다음 콘텐츠가 들어갈 공간을 남겨 두세요. 넓은 화면과 세로로 잘린 모바일 화면 모두에서 구도가 성립해야 합니다.
스크롤 진행률을 영상 재생 위치로 쓰세요
히어로의 스크롤 구간을 정하고 그 안의 위치를 0부터 1까지의 진행률로 바꿉니다. 이 진행률을 실제 영상에서 사용할 시간 구간에 연결하세요. 교체할 영상의 길이가 모두 같다고 가정하지 말고, 미디어 정보가 로드된 뒤 실제 재생 길이를 읽어야 합니다.
아래로 스크롤하면 영상이 진행되고, 위로 올리면 되돌아가며, 멈추면 현재 프레임을 유지해야 합니다. 영상 구간과 콘텐츠 전환 지점을 설정으로 분리하면 8초 영상을 다른 길이로 교체해도 페이지 구조를 다시 만들 필요가 줄어듭니다. 마우스에 반응하는 패럴랙스는 별도의 작은 화면 이동으로 유지할 수 있습니다.
잘 재생되는 영상도 스크롤 탐색은 끊길 수 있습니다
원본 파일만 보지 말고 웹에 배포할 영상으로 빠른 스크롤과 역방향 이동을 확인하세요. 해상도, 압축, 키프레임 간격, 파일 크기와 기기의 디코딩 성능은 다른 프레임으로 이동하는 속도에 영향을 줍니다. 영상을 읽는 동안 첫 장면 포스터를 보여 주고, 영상 호스트가 재생 위치 탐색을 지원하는지도 확인하세요.
자바스크립트 로딩이 끝나기 전에도 콘텐츠는 읽을 수 있어야 합니다. 움직임 감소를 선호하는 방문자에게는 차분한 표시 방식을 제공하고, 데스크톱뿐 아니라 작은 휴대전화에서도 확인하세요. 마지막 콘텐츠 패널도 같은 진행률로 자연스럽게 이어지도록 만드세요. 지연된 클래스 전환은 패널이 갑자기 나타나는 인상을 줄 수 있습니다.
배경을 교체한 뒤 같은 항목을 다시 검수하세요
영상, 포스터와 장면에 맞춘 문구를 한 세트로 교체하세요. 이동 방향, 첫 구도와 카메라의 도착 지점은 유지하고 새 영상에 맞게 재생 구간을 조정합니다. 맨 위·중간·맨 아래를 확인하고, 처음으로 되돌아간 다음 스크롤하지 않은 채 기다려 보세요.
LUDGI 홈페이지 프로젝트에는 항목별로 제공되는 블루프린트·프롬프트·파일이 표시됩니다. 수정하기 전에 실제 자료와 이용 조건을 확인하세요. 미리보기는 시각적 결과를 보여 주며, 모든 프로젝트가 같은 프레임워크나 같은 파일 구성을 제공한다는 뜻은 아닙니다.
공개하기 전에 확인하세요
- 첫 프레임, 포스터와 히어로 문구가 새 컨셉에 맞는지 확인하세요.
- 실제 영상 시간에 맞춰 전진·역방향·정지가 동작하는지 확인하세요.
- 마지막 패널이 지연된 점프 없이 자연스럽게 나타나는지 확인하세요.
- 모바일 구도, 로딩과 움직임 감소 설정을 확인하세요.