패럴랙스 스크롤링

패럴랙스 스크롤링(Parallax Scrolling)은 화면을 상하좌우로 스크롤할 때 배경 이미지와 전경(오브젝트) 이미지가 서로 다른 속도로 움직여 시차(視差, parallax)를 만들어내는 기법이다. 여러 겹의 레이어를 두고 카메라(또는 스크롤 위치)에서 가까운 레이어는 빠르게, 먼 레이어는 느리게 움직이도록 해 평면적인 화면에 입체적인 공간감을 부여한다.

이 기법의 기원은 디즈니가 1940년대 애니메이션 제작에 사용한 멀티플레인 카메라(Multiplane Camera) 촬영 기법으로 거슬러 올라간다. 카메라를 횡으로 이동시키면 가까운 레이어가 먼 레이어보다 더 많이 움직여 자연스러운 원근감이 생기는 원리다. 이 개념이 디지털 인터랙션에 처음 본격 적용된 사례는 1982년 아케이드 게임 문 패트롤(Moon Patrol)로, 근거리 물체와 원거리 배경(산)의 스크롤 속도를 다르게 해 화면 전체에 공간감을 만들었다. 이후 유사한 방식의 스크롤 게임이 8~90년대 아케이드 게임에서 널리 쓰였고, 오늘날 안드로이드 홈 화면의 좌우 스크린 전환 시 앱 아이콘과 배경 이미지가 다른 속도로 움직이는 효과에도 같은 원리가 적용된다.

웹사이트 구현은 초기 Flash 기반이 주류였으나, Flash의 호환성 문제와 SEO(검색 노출) 한계로 인해 jQuery, 자바스크립트, CSS3 기반의 HTML 구현으로 대체됐다. 패럴랙스 스크롤링은 스토리텔링 형식이 콘셉트에 어울리는 사이트, 메시지 전달을 위해 공간 이동이나 오브젝트 간 유기적 동작이 필요한 사이트, 단계(스텝)별로 메시지를 전달하며 흐름의 연결감을 살리고 싶은 사이트에 적합하다. 또한 원 페이지(One Page) 사이트에서 배경 이미지를 고정하고 콘텐트만 스크롤되게 해 이미지 용량을 줄이거나, 원근감을 강조한 콘셉트를 구현하고 싶을 때도 활용된다.

핵심 내용

  • 레이어별 스크롤 속도 차등을 통해 평면 화면에 입체적 공간감을 부여하는 기법
  • 기원은 디즈니의 멀티플레인 카메라 애니메이션 촬영 기법, 인터랙티브 적용의 시초는 1982년 아케이드 게임 Moon Patrol
  • 초기 Flash 기반 구현에서 jQuery/JavaScript/CSS3 기반 HTML 구현으로 전환
  • 벨트 스크롤링(Belt Scrolling): 사용자가 오브젝트를 직접 조작해 그 움직임에 따라 화면이 스크롤되는 유사 기법(액션 게임, 마우스 조작 플래시 사이트 등)
  • 스토리텔링 중심 콘셉트, 원 페이지 사이트, 원근감 강조 콘셉트의 웹사이트에 적합

관련 개념

출처

최종 업데이트: 2026-07-12 | 출처 1개