Web Guide패럴랙스스크롤 효과시각 효과
패럴랙스 효과의 유행과 한계
배경이 천천히 움직이는 그 효과, 한때 모든 사이트가 썼습니다.
지금은 훨씬 절제해서 씁니다. 왜 그렇게 됐는지 알면 우리 사이트에 쓸지 판단할 수 있습니다.
01무엇인가
스크롤할 때 배경과 앞쪽 요소가 서로 다른 속도로 움직여 입체감을 만드는 효과입니다. 화면에 깊이가 생기는 느낌을 줍니다.
한때 '세련된 사이트'의 상징처럼 쓰였지만, 여러 문제가 드러나면서 사용이 줄었습니다.
01
시각적 효과
깊이감과 몰입감. 브랜드 사이트에서 인상을 만듭니다.
02
성능 부담
스크롤마다 위치를 계산하고 큰 이미지를 움직입니다.
03
모바일 문제
터치 스크롤과 잘 맞지 않고 버벅이기 쉽습니다.
04
어지러움
움직임에 민감한 사람에게 불편을 줍니다.
05
내용 전달 방해
효과에 집중하느라 정보를 놓칠 수 있습니다.
02쓸 만한 경우
모든 경우에 나쁜 것은 아닙니다. 브랜드 인상을 전달하는 것이 목적이고, 정보량이 적은 페이지에서는 효과적일 수 있습니다.
다만 정보를 찾으러 오는 사이트에서는 방해가 됩니다.
쓸 만한 경우
브랜드 소개 페이지 · 캠페인 사이트 · 정보량이 적음 · 인상 전달이 목적 · 방문자가 천천히 둘러봄
피해야 할 경우
정보를 찾으러 오는 사이트 · 페이지가 많음 · B2B 기업 홈페이지 · 모바일 비중이 높음 · 속도가 중요한 경우
03쓴다면 제한적으로
전체 페이지에 적용하기보다 특정 구간에만 쓰는 편이 안전합니다. 첫 화면이나 중간의 강조 섹션 하나 정도입니다.
그리고 모바일에서는 끄는 것이 일반적입니다.
구간 제한페이지 전체가 아니라 한두 섹션에만 적용합니다.
이동 폭 줄이기움직임이 작을수록 부담이 적고 어지러움도 덜합니다.
모바일 비활성모바일에서는 고정 배경으로 처리합니다.
이미지 최적화움직이는 이미지는 특히 용량을 줄여야 합니다.
움직임 줄이기 대응시스템 설정이 켜져 있으면 효과를 끕니다.
04대안이 있다
깊이감이나 인상을 주고 싶다면 패럴랙스 말고도 방법이 있습니다. 부담이 적으면서 효과는 비슷합니다.
특히 고정 배경 이미지는 구현이 간단하고 성능 부담이 거의 없습니다.
고정 배경
배경은 고정하고 내용만 스크롤. 깊이감이 생기고 가볍습니다.
섹션별 대비
배경색을 섹션마다 다르게. 구분이 명확해집니다.
큰 이미지 전면 배치
움직이지 않아도 충분히 인상적입니다.
짧은 등장 효과
요소가 부드럽게 나타나는 정도. 가볍습니다.
타이포그래피
큰 글자와 여백만으로도 인상을 만들 수 있습니다.
CHECK POINT
□ 패럴랙스가 우리 사이트의 목적에 맞는가
□ 정보를 찾으러 오는 사이트는 아닌가
□ 적용 구간을 한두 곳으로 제한했는가
□ 모바일에서 비활성화되는가
□ 움직이는 이미지를 최적화했는가
□ '움직임 줄이기' 설정에 대응하는가
□ 고정 배경 같은 가벼운 대안을 검토했는가
#패럴랙스#스크롤 효과#시각 효과#성능#모바일 대응#접근성#디자인 트렌드#홈페이지 디자인#웹비스타#홈페이지 제작