모션이 방해가 되는 건,
양이 아니라 자리입니다

움직임을 줄이라는 이야기가 아닙니다. 방문자가 판단에 쓰는 것 앞을 막는 움직임만 문제라는 이야기입니다. 같은 연출도 어디에 놓이느냐에 따라 화면을 정돈해 주기도 하고, 방문자를 기다리게만 하기도 합니다.

시작하는 브랜드일수록 움직임을 얹게 됩니다

보여 줄 사례도, 쌓인 후기도 아직 없는 상태에서 사이트를 만들면 화면이 비어 보입니다. 그 허전함을 메우는 가장 빠른 방법이 움직임입니다. 스크롤에 따라 글자가 하나씩 올라오고, 사진이 서서히 나타나고, 배경이 천천히 따라 흐릅니다. 화면이 살아 있는 것처럼 보이고, 만들다 만 느낌이 사라집니다. 참고한 사이트에서 좋아 보였던 연출이라면 더 그렇습니다.

문제는 그 연출이 하는 일이 하나 더 있다는 점입니다. 등장 연출이 걸린 문장은 스크롤이 그 자리에 닿고 나서야 읽을 수 있는 상태가 됩니다. 화면을 꾸미는 동시에, 정보가 도착하는 시각을 뒤로 미루는 겁니다. 꾸미는 쪽은 만드는 사람 눈에 잘 보이고, 늦추는 쪽은 잘 안 보입니다.

방문자가 첫 화면에서 하는 일은 감상이 아니라 거르기에 가깝습니다. 여기가 내 경우를 다루는 곳인지 확인하고 남을지 나갈지를 정합니다. 이 이야기는 회사 소개부터 쓰면, 판단이 시작되지 않습니다에서 자세히 다뤘습니다. 거르는 중인 사람에게 연출은 정보가 아직 안 왔다는 뜻일 뿐입니다.

값이 큰 일일수록 손해가 큽니다. 시공·컨설팅·교육·의료·B2B처럼 결정 전에 비교가 일어나는 분야에서 방문자는 여러 곳을 한꺼번에 열어 놓고 대조합니다. 대조하는 중의 스크롤은 빠릅니다. 화면을 훑고 지나가는 속도보다 등장이 느리면, 그 방문자가 본 것은 문장이 아니라 아직 비어 있는 자리입니다. 우리가 공들여 쓴 한 줄이 그 사람 화면에는 한 번도 뜨지 않은 셈입니다.

한 가지 더. 모션은 만든 사람 화면에서 가장 좋아 보입니다. 최신 기기, 빠른 회선, 그리고 무엇보다 내용을 이미 아는 눈입니다. 처음 온 사람이 오래된 휴대폰으로 열면 같은 화면이 다르게 보입니다. 부드럽던 것이 끊기고, 순서대로 올라오던 것이 뭉쳐서 나타납니다. 검수를 대표님 노트북에서만 했다면 그 상태를 볼 기회가 없습니다.

모션을 자리로 정리하는 네 가지

1. 판단에 쓰이는 것 앞의 지연을 없앱니다. 첫 화면의 문장, 무엇을 하는 곳인지 알려 주는 한 줄, 문의 버튼 — 이 셋은 아무것도 기다리지 않고 바로 보여야 합니다. 등장 연출은 판단이 끝난 다음 구간, 그러니까 진행 방식이나 사례를 훑는 자리에 두면 됩니다. 같은 페이드인이라도 첫 화면에 있으면 대기 시간이고, 사례 목록에 있으면 리듬입니다.
2. 스크롤 속도보다 느린 연출을 가려냅니다. 판별법은 간단합니다. 사이트를 열고 평소보다 빠르게 아래로 훑어 내린 다음, 지나온 화면을 그대로 두고 보세요. 아직 비어 있거나 반쯤 올라오는 중인 자리가 있다면 그 연출은 방문자보다 느립니다. 지연 시간을 줄이거나, 순서대로 하나씩 나오게 한 것을 한꺼번에 나오게 바꾸면 대부분 해결됩니다.
3. 스크롤을 빼앗는 연출부터 뺍니다. 스크롤을 가로채 다음 구간으로 넘겨 버리는 방식, 한참을 굴려야 다음으로 넘어가는 긴 고정 구간, 읽는 중에 알아서 넘어가는 자동 슬라이드가 여기 해당합니다. 공통점은 방문자가 가고 싶은 지점으로 못 간다는 것입니다. 되돌아가서 다시 확인하는 일도 어려워집니다. 비교하러 온 사람은 방금 본 것을 다시 보러 올라갑니다. 덧붙여 그 안의 글자가 이미지나 캔버스로 그려져 있으면 브라우저 찾기에도, 검색이나 AI에도 잡히지 않습니다. 이 부분은 AI에게 물어봤을 때, 우리 브랜드가 나오려면에서 따로 정리해 뒀습니다.
4. 남길 움직임에는 역할을 하나씩 붙입니다. 좋은 모션은 세 가지 중 하나를 합니다. 상태가 바뀐 것을 알리거나(눌렸다·열렸다·보내졌다), 이 화면이 어디서 왔는지 관계를 보여 주거나, 다음에 볼 곳을 가리킵니다. 화면에서 움직이는 것을 하나 골라 그것이 하는 일을 한 문장으로 대 보세요. 못 대면 장식입니다. 장식이 나쁜 건 아니지만, 장식은 판단이 끝난 뒤 구간에만 두는 것이 안전합니다.

여기까지 정리했다면 마지막으로 두 가지만 더 확인하시면 됩니다. 하나는 움직임을 줄이도록 기기에 설정해 둔 사람에게도 내용이 빠짐없이 보이는지입니다. 등장 연출로만 나타나게 만들어 두면, 그 설정을 켠 방문자에게는 아예 안 보이는 사고가 납니다. 다른 하나는 실제 휴대폰으로 열어 보는 일입니다. 노트북 화면을 좁혀 보는 것과 오래된 기기에서 직접 여는 것은 다른 확인입니다. 화면 크기가 아니라 성능에서 갈리는 문제이기 때문입니다.

네 가지 모두 디자인을 다시 하는 일이 아니라 끄고 옮기는 일입니다. 사이트가 밋밋해 보이는 원인이 정말 움직임의 부족인 경우는 생각보다 드뭅니다. 대개는 재료와 규칙이 정돈되지 않은 쪽인데, 그 이야기는 돈은 들였는데 싸 보이는 사이트, 어디서 갈릴까요에 적어 뒀습니다.

지금 바로 확인해 보세요

대표님 사이트를 열고 다섯 줄만 짚어 보세요. 가능하면 노트북 말고 휴대폰으로 해 보시는 편이 정확합니다.

• 첫 화면의 문장과 버튼이 아무것도 기다리지 않고 바로 보이는가?
• 빠르게 훑어 내린 뒤 지나온 화면에, 아직 비어 있는 자리가 있는가?
• 스크롤이 내 뜻대로 움직이는가 — 원하는 곳에서 멈추고, 되돌아갈 수 있는가?
• 움직이는 것 하나를 골라, 그것이 하는 일을 한 문장으로 말할 수 있는가?
• 움직임을 전부 껐다고 가정해도 사이트가 할 말을 다 하는가?

마지막 줄에서 "안 된다"가 나왔다면, 지금 그 사이트는 내용의 일부를 움직임에 얹어 두고 있는 중입니다. 움직임은 내용을 돕는 자리지 담는 자리가 아닙니다.