패럴랙스

정의

패럴랙스는 화면을 스크롤할 때 배경과 전경이 서로 다른 속도로 움직이게 만들어, 평면인 화면에 깊이감을 더하는 효과입니다. 원리는 현실의 경험에서 그대로 가져왔습니다. 달리는 차 안에서 창밖을 보면 가까운 가로수는 휙휙 빠르게 지나가지만 멀리 있는 산은 천천히 따라옵니다. 이렇게 거리에 따라 움직이는 속도가 다른 현상이 우리 눈에 원근감을 만들어 줍니다. 웹에서도 마찬가지로, 먼 배경은 스크롤보다 느리게 움직이고 가까운 전경은 빠르게 움직이도록 속도에 차이를 두면, 여러 겹의 층이 서로 다른 거리에 놓인 것처럼 입체적으로 보입니다.

왜 중요한가

패럴랙스가 잘 쓰이면 특히 페이지 맨 위의 히어로 섹션에 강한 몰입감을 줍니다. 스크롤에 따라 층들이 미묘하게 어긋나며 움직이면 화면이 살아 있는 듯한 인상을 주어, 사용자가 페이지에 더 오래 머물며 이야기에 빠져들게 만듭니다. 하지만 이 효과는 양날의 검입니다. 움직임이 과하면 화면이 어지럽고, 심하면 실제로 멀미나 어지럼증을 유발할 수 있습니다. 스크롤은 사용자가 콘텐츠를 읽기 위해 하는 기본 동작인데, 여기에 과한 움직임이 얹히면 정작 읽기가 방해받습니다. 게다가 일부 사용자는 이런 움직임에 신체적으로 민감하게 반응하므로, 화려함보다 편안함을 우선하는 절제된 감각이 반드시 필요합니다. 좋은 패럴랙스는 존재를 티 내지 않으면서 깊이만 은근히 더합니다. 그래서 이 효과를 쓸지 말지를 정할 때는 얼마나 멋져 보이는가보다, 모든 사용자가 편하게 볼 수 있는가를 먼저 따져 보는 것이 좋습니다.

흔한 실수

• 속도 차이를 지나치게 크게 두는 것입니다. 배경과 전경이 극단적으로 다른 속도로 움직이면 은은한 깊이감이 아니라 어지러움으로 다가와, 사용자가 화면을 오래 들여다보기 힘들어집니다.
• 움직임에 민감한 사용자를 전혀 고려하지 않는 것입니다. 어떤 사람은 이런 효과에 어지럼이나 메스꺼움을 느끼는데, 이를 끌 방법이 하나도 없으면 그 사용자는 페이지를 편히 볼 수 없습니다.
• 본문처럼 정보를 읽는 영역에까지 패럴랙스를 얹는 것입니다. 글을 읽으려고 스크롤하는데 배경과 텍스트가 따로 놀며 움직이면 시선이 흔들려, 정작 전달해야 할 내용에 집중하기 어려워집니다.

실무 팁

• 속도 차이는 작게 두세요. 배경과 전경의 움직임 차이가 은은할수록 오히려 세련되고, 깊이감은 충분히 전달되면서도 어지럽지 않아 대부분의 상황에서 안전합니다.
• 움직임을 줄이고 싶다는 사용자의 시스템 설정인 prefers-reduced-motion을 반드시 존중하세요. 이 설정이 켜져 있으면 패럴랙스를 끄거나 아주 약하게 낮춰, 민감한 사용자도 콘텐츠를 편히 보게 해야 합니다.
• 패럴랙스는 콘텐츠를 돋보이게 하는 배경 장치일 뿐 주인공이 아닙니다. 히어로처럼 첫인상이 중요한 한두 곳에만 아껴 쓰고, 정보 밀도가 높은 본문 영역에서는 과감히 빼는 편이 낫습니다. 효과가 눈에 띈다면 이미 조금 과한 것이라고 생각하면 대체로 알맞습니다.

관련 개념