해외 사이트를 보다가 스크롤이 유난히 부드러운 곳을 만난 적 있으실 겁니다. 마우스 휠을 굴리면 화면이 딱딱 끊기지 않고 관성이 붙은 것처럼 미끄러집니다.
이 효과를 찾으시는 분들이 프레이머 설정을 아무리 뒤져도 못 찾습니다. 당연합니다. 프레이머에는 스무스 스크롤을 켜는 기본 설정이 없습니다. 대신 두 가지 방법이 있고, 둘은 완전히 다른 기능입니다.
프레이머 전문 에이전시가 알려주는 꿀팁 시리즈입니다. 저희가 실제 프로젝트에서 쓰는 방법을 그대로 공개합니다. 검색해도 한글 자료가 잘 안 나오는 것들 위주로 매주 한 편씩 올립니다.
- •1편. 커스텀 마우스 커서 만들기
- •2편. 배리언트로 상태 나누기
- •3편. 스크롤을 천천히 따라오게 만들기 (지금 보는 글)
- •4편. 웹플로우 스크롤 인터랙션 두 가지
30초 요약
- •프레이머에 스무스 스크롤 기본 설정은 없습니다. 설정에서 찾으시면 시간만 버립니다.
- •화면 전체를 부드럽게 하려면 커뮤니티 컴포넌트를 씁니다. 페이지에 얹고 위치를 고정하면 됩니다.
- •요소가 천천히 따라오게 하려면 스크롤 트랜스폼을 씁니다. 이건 프레이머 기본 기능입니다.
- •둘은 다른 기능입니다. 전자는 스크롤 자체, 후자는 요소의 움직임입니다.
- •요청의 대부분은 후자입니다. 기본 기능으로 되는데 없는 기능을 찾다가 시간을 씁니다.
- •과하면 멀미가 납니다. 특히 스크롤 자체를 늦추는 쪽이 그렇습니다.
두 가지를 먼저 구분하세요
상담에서 이 요청을 받으면 저희는 먼저 되묻습니다. 어떤 사이트를 보고 그렇게 느끼셨는지입니다. 원하는 게 둘 중 어느 쪽인지에 따라 방법이 완전히 달라지기 때문입니다.
첫째, 스크롤 자체가 부드러운 것
휠을 굴렸을 때 화면이 즉시 멈추지 않고 미끄러지듯 따라오는 것입니다. 관성 스크롤이라고도 부릅니다. 브라우저의 기본 스크롤 동작을 바꾸는 일이라 프레이머 기본 기능으로는 안 됩니다.
둘째, 요소가 스크롤에 따라 천천히 움직이는 것
스크롤을 내리면 배경 이미지가 본문보다 느리게 따라오거나, 글자가 서서히 나타나는 것입니다. 패럴랙스라고 부릅니다. 이건 프레이머 기본 기능으로 됩니다.
대부분의 요청은 두 번째입니다. 그런데 첫 번째를 찾다가 시간을 보냅니다.
요소를 천천히 움직이게 하는 법
프레이머 기본 기능인 스크롤 트랜스폼을 씁니다. 요소를 선택하고 이펙트 패널에서 추가합니다.
조절할 수 있는 것
- •위치 위아래나 좌우로 밀어냅니다. 패럴랙스의 핵심입니다
- •크기 작게 시작해 원래 크기로 커지게 합니다
- •회전 스크롤에 따라 각도가 변합니다
- •투명도 서서히 나타나거나 사라집니다
시작 값과 끝 값을 정하면 됩니다. 예를 들어 크기 70퍼센트에 투명도 0으로 시작해서 크기 100퍼센트에 투명도 100으로 끝나게 두는 식입니다.
언제 시작할지 정하기
여기가 결과를 가르는 부분입니다. 세 가지 기준이 있습니다.
- 1.페이지 스크롤 기준 페이지 전체를 훑는 동안 아주 천천히 변합니다. 배경에 어울립니다
- 2.레이어가 보이는 동안 그 요소가 화면에 들어오고 나가는 사이에 변합니다. 가장 많이 씁니다
- 3.섹션이 보이는 동안 지정한 섹션 기준으로 변합니다. 화면 위쪽, 가운데, 아래쪽 중 어디서 시작할지 고를 수 있습니다
여러 요소를 함께 움직이려면 세 번째를 쓰세요. 같은 섹션을 기준으로 잡아두면 타이밍이 어긋나지 않습니다. 요소마다 레이어 기준으로 두면 높이가 달라서 제각각 움직입니다.
실전 레시피 네 가지
저희가 프로젝트에서 반복해서 쓰는 조합입니다. 값까지 적어두었으니 그대로 넣고 취향에 맞게 줄이거나 늘리시면 됩니다.
1. 히어로 이미지가 서서히 커지기
첫 화면 이미지가 스크롤에 따라 아주 조금 커집니다. 화면에 깊이가 생깁니다.
- •트리거 페이지 스크롤 기준
- •값 크기 100에서 110 퍼센트
- •주의 120을 넘기면 화질이 눈에 띄게 깨집니다
2. 배경이 본문보다 느리게 따라오기
전형적인 패럴랙스입니다. 배경 이미지와 그 위 텍스트를 다른 속도로 움직입니다.
- •트리거 섹션이 보이는 동안
- •값 배경은 위치 아래로 60, 텍스트는 아래로 20
- •주의 두 값의 차이가 클수록 효과가 세집니다. 처음에는 차이를 40 안쪽으로
3. 섹션이 아래에서 올라오며 나타나기
가장 무난하고 어디에나 어울립니다. 정보량이 많은 페이지에도 안전합니다.
- •트리거 레이어가 보이는 동안
- •값 위치 아래로 24, 투명도 0에서 100
- •주의 이동 거리를 40 넘게 주면 스크롤할 때마다 화면이 출렁입니다
4. 가로로 흐르는 띠
로고 목록이나 키워드 띠가 스크롤에 따라 옆으로 흐릅니다. 사이트에 리듬이 생깁니다.
- •트리거 섹션이 보이는 동안
- •값 위치 좌우로 100에서 200
- •주의 글자가 들어가면 읽기 어렵습니다. 로고나 도형에 쓰세요
네 가지를 한 페이지에 다 넣지는 마세요. 한 페이지에 두 종류까지가 적당합니다. 종류가 늘어날수록 사이트가 산만해지고 무거워집니다.
값을 잡는 기준
효과가 촌스러워 보이는 이유는 대부분 값이 크기 때문입니다. 저희가 쓰는 기준입니다.
- •이동은 화면 높이의 5퍼센트 안쪽 그 이상은 스크롤을 방해합니다
- •크기 변화는 10퍼센트 안쪽 더 키우면 흐려집니다
- •회전은 5도 안쪽 각도가 크면 어지럽습니다
- •투명도는 0에서 100 그대로 여기는 아껴 쓸 이유가 없습니다
판단이 어려우면 이렇게 확인하세요. 다른 사람에게 보여주고 무엇이 움직였는지 물어보는 것입니다. 바로 대답하면 과한 것이고, 좋은데 뭐가 다른지 모르겠다고 하면 잘 맞춘 것입니다.
스크롤 자체를 부드럽게 하는 법
이건 커뮤니티 컴포넌트를 가져다 씁니다. 프레이머 마켓플레이스에서 스무스 스크롤로 검색하면 여러 개가 나옵니다. 무료도 있고 유료도 있습니다.
붙이는 방법
대부분 방식이 같습니다. 컴포넌트를 페이지나 템플릿에 얹고 위치를 고정으로 바꾸면 사이트 전체 스크롤에 적용됩니다. 화면에 보이지 않는 기능성 컴포넌트라 어디에 두어도 상관없습니다.
조절할 수 있는 값은 컴포넌트마다 다릅니다. 보통 속도와 감속, 강도 세 가지입니다.
컴포넌트를 고르는 기준
마켓플레이스에 비슷한 게 많아서 무엇을 골라야 할지 어렵습니다. 저희는 이렇게 봅니다.
- 1.최근에 업데이트되었는가 프레이머는 자주 바뀝니다. 오래 멈춘 컴포넌트는 언젠가 깨집니다
- 2.모바일에서 끄는 옵션이 있는가 없으면 직접 조건을 걸어야 합니다
- 3.값을 세밀하게 조절할 수 있는가 강도 하나만 있는 것보다 속도와 감속이 나뉜 쪽이 낫습니다
- 4.만든 사람이 다른 컴포넌트도 관리하고 있는가 지속 가능성의 신호입니다
- 5.무료인가 유료인가 유료라도 유지보수가 되는 쪽이 결국 쌉니다
저희가 권하는 값
상담에서 가장 많이 드리는 조언입니다. 기본값보다 약하게 시작하세요. 만드는 사람은 며칠씩 보면서 적응하지만 처음 들어온 방문자는 다릅니다. 스크롤이 손보다 늦게 따라오면 고장 난 것처럼 느낍니다.
감속을 세게 걸면 화면이 멈춘 뒤에도 계속 움직입니다. 긴 글을 읽어야 하는 페이지에서는 이게 특히 괴롭습니다. 정보를 읽는 페이지에는 아예 넣지 않는 편이 낫습니다.
넣기 전에 확인할 것
모바일에서 꼭 확인하세요
휴대폰과 태블릿에는 이미 관성 스크롤이 있습니다. 여기에 컴포넌트를 얹으면 두 개가 겹쳐서 이상하게 움직입니다. 대부분의 컴포넌트는 모바일에서 끄는 옵션을 제공합니다. 확인하고 켜두세요.
속도가 느려질 수 있습니다
스크롤 위치를 계속 계산하는 방식이라 요소가 많은 페이지에서는 부담이 됩니다. 스크롤 트랜스폼을 스무 개씩 걸어둔 페이지에 스무스 스크롤까지 얹으면 체감이 옵니다.
커스텀 커서를 함께 쓰고 계시다면 특히 주의하셔야 합니다. 커서와 스크롤 효과는 둘 다 위치를 계속 계산합니다. 따로 보면 괜찮은데 같이 쓰면 끊기는 일이 흔합니다. 커서 쪽을 가볍게 만드는 방법은 1편에 정리했습니다.
전반적인 속도 점검 방법은 Lighthouse 세팅 글에 있습니다.
접근성을 고려해야 합니다
운영체제에는 움직임을 줄이는 설정이 있습니다. 어지럼증을 느끼는 분들이 켜두는 기능입니다. 이 설정을 존중하는 컴포넌트인지 확인하시는 게 좋습니다. 병원 사이트라면 특히 그렇습니다.
실제로 전정기관이 예민한 분들은 패럴랙스가 강한 사이트에서 멀미를 느낍니다. 멋을 위해 일부 방문자를 잃는 거래라는 걸 알고 결정하시는 게 맞습니다.
업종별로 어디까지 쓸까
저희가 프로젝트를 시작할 때 잡는 기준입니다.
- •브랜드와 포트폴리오 레시피 1, 2, 4까지. 인상이 목적이라 효과가 자산이 됩니다
- •스타트업 랜딩 레시피 3 위주. 읽는 흐름을 방해하지 않는 선까지
- •병원과 법률 레시피 3만, 값은 절반으로. 방문자 연령대가 높습니다
- •쇼핑몰 목록 페이지에는 넣지 않습니다. 스크롤 속도가 곧 매출입니다
업종에 따라 판단이 갈리는 이유는 방문자가 그 사이트에서 하려는 일이 다르기 때문입니다. 구경하러 온 사람에게는 효과가 즐거움이고, 사러 온 사람에게는 장애물입니다.
자주 묻는 질문
프레이머에 스무스 스크롤 기본 기능이 정말 없나요?
스크롤 자체를 부드럽게 만드는 전역 설정은 없습니다. 다만 요소가 스크롤에 따라 움직이는 스크롤 트랜스폼은 기본 기능으로 제공됩니다.
커뮤니티 컴포넌트를 써도 사이트가 안전한가요?
널리 쓰이는 컴포넌트는 대체로 안정적입니다. 다만 만든 사람이 업데이트를 멈추면 나중에 프레이머 업데이트와 어긋날 수 있습니다. 중요한 사이트라면 이 위험을 알고 쓰셔야 합니다.
패럴랙스를 넣으면 SEO에 불리한가요?
효과 자체는 검색에 영향을 주지 않습니다. 다만 스크롤해야만 글이 나타나도록 만들면 내용이 늦게 보일 수 있어, 본문 텍스트에는 과하게 걸지 않는 편이 좋습니다.
어느 정도가 적당한가요?
방문자가 효과를 눈치채지 못하는 정도가 가장 좋습니다. 부드럽다고 느끼되 무엇 때문에 부드러운지는 모르는 상태입니다. 눈에 띄면 이미 과합니다.
스크롤 트랜스폼과 등장 애니메이션은 다른 건가요?
스크롤 트랜스폼은 스크롤 위치에 따라 값이 이어서 변합니다. 화면에 들어올 때 한 번 재생되는 등장 애니메이션과는 다릅니다. 목적에 따라 골라 쓰시면 됩니다.
스크롤 효과를 몇 개까지 넣어도 되나요?
한 페이지에 두 종류까지를 권합니다. 개수보다 종류가 문제입니다. 같은 효과가 여러 번 반복되는 건 리듬이 되지만, 다른 효과가 계속 나오면 산만해집니다.
모바일에서는 효과를 다 꺼야 하나요?
전부 끌 필요는 없습니다. 등장 효과는 남기고 패럴랙스처럼 위치가 크게 변하는 것만 줄이시면 됩니다. 화면이 작아 같은 값도 크게 느껴집니다.
웹플로우에서는 어떻게 하나요?
웹플로우는 인터랙션 기능으로 처리합니다. 다만 지금은 시스템이 두 가지로 나뉘어 있어 어느 쪽을 쓰는지부터 확인해야 합니다. 4편에서 다뤘습니다.
정리하면
원하는 게 무엇인지부터 나누세요. 요소가 천천히 따라오는 것이라면 스크롤 트랜스폼으로 됩니다. 프레이머 기본 기능이고 무료입니다.
스크롤 자체를 늦추는 것이라면 커뮤니티 컴포넌트가 필요합니다. 다만 모바일과 속도, 접근성을 확인하고 넣으셔야 합니다. 그리고 대부분의 사이트에는 첫 번째만으로 충분합니다.
다음 편은 웹플로우입니다. 같은 효과를 웹플로우에서는 어떻게 만드는지, 그리고 지금 인터랙션 시스템이 두 개로 나뉘어 있다는 사실을 다룹니다.
스크롤 효과가 성과를 깎는 세 경우
효과를 넣고 나서 오히려 지표가 나빠지는 경우가 있습니다. 저희가 겪은 패턴은 셋입니다.
1. 첫 화면이 늦게 보일 때
히어로 요소에 등장 효과를 걸면 스크롤하기 전까지 화면이 비어 보이는 순간이 생깁니다. 첫 화면 요소에는 등장 효과를 걸지 않는 것이 원칙입니다. 이미 보이는 자리에 있는 것을 굳이 나타나게 할 이유가 없습니다.
2. 목록에서 스크롤이 느려질 때
쇼핑몰이나 포트폴리오 목록에서 카드마다 등장 효과를 걸면, 빠르게 훑어보려는 사람이 계속 기다리게 됩니다. 목록은 빠르게 지나가는 곳이라 효과를 최소로 둡니다.
3. 모바일에서 값이 그대로일 때
데스크톱 기준으로 잡은 이동 거리를 모바일에 그대로 쓰면 화면 높이 대비 비율이 커집니다. 같은 40픽셀도 작은 화면에서는 훨씬 크게 느껴집니다.
세 가지 모두 효과를 뺀다고 손해 볼 것이 없는 자리입니다. 넣을 자리와 빼야 할 자리를 나누는 것이 실력입니다.
발행 전 점검
효과를 넣고 나면 이 다섯 가지를 확인합니다.
- 1.빠르게 스크롤해보기 휠을 세게 굴렸을 때 요소가 뒤늦게 따라오지 않는지
- 2.중간부터 새로고침해보기 페이지 중간에서 새로고침했을 때 요소가 안 보이는 상태로 멈추지 않는지
- 3.저사양 기기에서 보기 최신 기기에서는 문제가 드러나지 않습니다
- 4.움직임 줄이기 설정 켜보기 운영체제 접근성 설정을 켠 상태로 확인
- 5.글을 실제로 읽어보기 처음부터 끝까지 읽었을 때 피로한지
두 번째가 특히 자주 걸립니다. 화면에 들어올 때 나타나도록 만든 요소가 이미 화면 안에 있는 상태로 시작하면 조건이 걸리지 않아 투명한 채로 남는 경우가 있습니다.
함께 읽으면 좋은 글
지금 사이트를 어디부터 손봐야 할지 정리해 드립니다. 상담 신청을 남겨주시면 화면을 먼저 보고 말씀드립니다. 범위와 비용은 요금제 페이지에서 확인하실 수 있습니다.
이 글은 EasySpark 허수진 대표의 실무 내용이며, 각 도구의 기능과 화면 구성은 업데이트에 따라 달라질 수 있어 진행 전 공식 문서를 함께 확인하시길 권합니다. 우리 사이트에 맞는 방향이 궁금하시다면 편하게 상담 신청해주세요.
