웹플로우로 스크롤 애니메이션을 만들려고 검색해보면 자료가 서로 다릅니다. 어떤 글은 트리거를 고르라고 하고, 어떤 글은 타임라인에 키프레임을 찍으라고 합니다.
둘 다 맞습니다. 지금 웹플로우에는 인터랙션 시스템이 두 개 들어 있기 때문입니다. 이걸 모르고 시작하면 튜토리얼 화면과 내 화면이 달라서 첫 단계에서 막힙니다.
프레이머 전문 에이전시가 알려주는 꿀팁 시리즈입니다. 저희가 실제 프로젝트에서 쓰는 방법을 그대로 공개합니다. 검색해도 한글 자료가 잘 안 나오는 것들 위주로 매주 한 편씩 올립니다.
- •1편. 커스텀 마우스 커서 만들기
- •2편. 배리언트로 상태 나누기
- •3편. 스크롤을 천천히 따라오게 만들기
- •4편. 웹플로우 스크롤 인터랙션 두 가지 (지금 보는 글)
저희는 도구를 하나만 쓰지 않습니다. 프로젝트 성격에 맞는 쪽을 고르기 위해 프레이머와 웹플로우를 모두 씁니다. 앞 세 편이 프레이머였다면 이번 편은 웹플로우입니다.
30초 요약
- •웹플로우 인터랙션은 두 가지입니다. GSAP 기반의 새 버전과 클래식 버전입니다.
- •새 버전이 기본값이고, 인터랙션 패널 아래 드롭다운에서 바꿉니다.
- •새 버전은 트리거와 대상과 동작으로 나눠 만들고 가로 타임라인을 씁니다.
- •클래식은 스크롤 중 재생을 골라 0퍼센트에서 100퍼센트로 값을 잇습니다.
- •한 사이트에 두 버전을 섞으면 리소스를 둘 다 불러와 느려집니다. 하나로 통일하세요.
- •새 버전에는 글자 쪼개기, 순차 지연, 스크롤 트리거가 내장되어 있습니다.
먼저, 내 화면이 어느 쪽인지 확인하세요
2025년 여름에 웹플로우가 GSAP 엔진 기반의 새 인터랙션을 내놨습니다. 지금은 이쪽이 기본값입니다. 예전 방식은 클래식 인터랙션이라는 이름으로 남아 있습니다.
인터랙션 패널 맨 아래 드롭다운에서 버전을 바꿀 수 있습니다. 지금 보고 있는 튜토리얼이 어느 쪽인지 모르겠다면 이 드롭다운부터 확인하세요.
무엇이 다른가
- •만드는 방식 새 버전은 트리거와 대상과 동작을 나눠 지정합니다. 클래식은 페이지나 요소 트리거를 고른 뒤 애니메이션을 붙입니다
- •편집 화면 새 버전은 가로 타임라인입니다. 여러 요소의 타이밍을 눈으로 맞출 수 있습니다
- •기능 새 버전에는 글자를 쪼개는 기능, 순차 지연, 스크롤 트리거가 내장되어 있습니다
- •이징 새 버전은 곡선을 직접 만지는 편집기를 제공합니다
- •재사용 새 버전이 인터랙션을 다시 쓰기 쉽게 정리되어 있습니다
클래식으로 며칠 배운 다음 새 버전으로 옮기면 처음부터 다시 배워야 합니다. 시작할 때 정하세요.
새 버전의 핵심 기능 세 가지
클래식에서 손으로 하던 작업이 기능으로 들어왔습니다. 이 세 가지가 옮길 이유의 대부분입니다.
1. 글자 쪼개기
제목을 글자 단위나 단어 단위로 쪼개서 하나씩 나타나게 하는 효과입니다. 예전에는 이걸 하려면 글자를 직접 나눠 텍스트 요소를 여러 개 만들어야 했습니다.
이제는 기능으로 쪼개집니다. 문구를 고칠 때도 원본 텍스트만 수정하면 됩니다. 다만 주의할 점이 있습니다. 쪼갠 글자는 검색 엔진과 스크린리더가 읽는 방식에 영향을 줄 수 있어, 중요한 제목보다는 장식 성격의 문구에 쓰는 편이 안전합니다.
2. 순차 지연
카드 세 장이 차례로 올라오는 그 효과입니다. 클래식에서는 요소마다 지연 값을 손으로 넣어야 했습니다. 카드가 늘어나면 인터랙션도 늘어났습니다.
새 버전에서는 대상 여러 개를 한 번에 잡고 간격만 정하면 됩니다. CMS로 항목이 늘어나는 목록에서 특히 차이가 큽니다. 항목이 몇 개가 되든 설정은 하나입니다.
3. 스크롤 트리거
스크롤 위치와 애니메이션 구간을 직접 잇는 기능입니다. 어디서 시작해서 어디서 끝날지를 눈으로 잡을 수 있습니다.
프레이머의 스크롤 트랜스폼과 목적이 같습니다. 다만 웹플로우 쪽이 구간을 더 세밀하게 나눌 수 있고 프레이머 쪽이 만들기가 빠릅니다. 같은 효과를 프레이머에서 만드는 방법은 3편에 정리했습니다.
새 버전으로 스크롤 애니메이션 만들기
가장 많이 쓰는 형태는 두 가지입니다. 화면에 들어올 때 한 번 나타나는 것과, 스크롤에 따라 계속 움직이는 것입니다.
화면에 들어올 때 나타나기
- 1.애니메이션을 걸 요소를 선택합니다
- 2.인터랙션 패널에서 새 인터랙션을 만들고 트리거를 스크롤 기준으로 잡습니다
- 3.시작 상태에서 투명도를 0, 위치를 아래로 20에서 40 정도 내려둡니다
- 4.끝 상태에서 투명도 100, 위치를 원래대로 되돌립니다
이동 거리는 40을 넘기지 마세요. 크게 움직일수록 화려해 보이지만 스크롤할 때마다 화면이 출렁여서 읽기가 힘들어집니다. 이 기준은 프레이머에서도 같습니다.
스크롤에 따라 계속 움직이기
배경이 본문보다 느리게 따라오는 패럴랙스입니다. 스크롤 트리거로 스크롤 구간과 애니메이션 구간을 잇습니다.
여기서 자주 하는 실수가 있습니다. 움직이는 요소에 본문 텍스트를 넣지 마세요. 읽는 도중에 글자가 움직이면 읽는 속도가 느려지고, 사람에 따라 어지럼증을 느낍니다. 움직이는 것은 배경과 장식으로 한정하시는 게 안전합니다.
클래식으로 만들어야 한다면
기존 사이트가 클래식으로 되어 있어 이어서 작업해야 하는 경우입니다. 방식이 다릅니다.
인터랙션 패널에서 요소 트리거를 열고 스크롤 중 재생에 해당하는 항목을 고릅니다. 그다음 동작 메뉴에서 스크롤 애니메이션 재생을 선택합니다.
여기서 핵심은 시간 개념이 없다는 것입니다. 요소가 화면에 들어올 때가 0퍼센트, 완전히 빠져나갈 때가 100퍼센트입니다. 그 사이 값을 나눠 넣는 방식입니다. 초 단위로 생각하면 계속 어긋납니다.
시작을 늦추고 싶으면 오프셋을 씁니다. 지정한 비율에 도달할 때까지 애니메이션이 시작되지 않습니다.
옮길까 두고 볼까
기존 사이트를 새 버전으로 옮길지 묻는 분이 많습니다. 저희는 이 순서로 판단합니다.
- 1.인터랙션이 몇 개인가 자동 변환이 되지 않아 전부 다시 만들어야 합니다. 스무 개가 넘으면 비용이 커집니다
- 2.앞으로 손댈 일이 있는가 더 이상 안 건드릴 사이트라면 그대로 두는 게 맞습니다
- 3.CMS 목록에 효과가 걸려 있는가 순차 지연 때문에 새 버전이 훨씬 편해집니다. 옮길 이유가 큽니다
- 4.속도 문제가 있는가 이미 두 버전이 섞여 있다면 통일하는 것만으로 개선됩니다
가장 나쁜 상태는 절반만 옮긴 상태입니다. 옮기기로 했다면 한 번에, 두기로 했다면 새 페이지도 클래식으로 만드세요.
두 버전을 섞으면 안 되는 이유
이게 이 글에서 가장 중요한 부분입니다. 각 버전은 자기 리소스를 따로 불러옵니다. 한 사이트에서 두 버전을 함께 쓰면 두 벌을 모두 내려받습니다.
실무에서 이런 일이 자주 생깁니다. 기존 페이지는 클래식으로 만들어져 있는데 새로 만드는 페이지만 새 버전으로 작업합니다. 각각은 잘 돌아가는데 사이트 전체 속도가 느려집니다.
확인 방법은 간단합니다. 발행한 사이트를 열고 개발자 도구의 네트워크 탭에서 불러오는 파일을 보면 됩니다. 인터랙션 관련 파일이 두 벌이면 섞여 있는 것입니다. 속도 점검 기준은 Lighthouse 세팅 글에 정리해두었습니다.
프레이머와 비교하면
같은 효과를 프레이머에서는 어떻게 만드는지 궁금하실 겁니다. 저희 기준으로 정리하면 이렇습니다.
- •웹플로우가 유리한 경우 타임라인 위에서 여러 요소의 타이밍을 정밀하게 맞춰야 할 때, 글자 단위 애니메이션이 필요할 때, 개발자와 나눠서 작업할 때
- •프레이머가 유리한 경우 디자인과 동시에 인터랙션을 얹으며 빠르게 만들 때, 컴포넌트 상태로 관리할 때, 클라이언트가 직접 수정할 때
만드는 속도만 보면 프레이머가 빠릅니다. 대신 정밀한 타이밍 제어는 웹플로우가 낫습니다. 저희가 두 도구를 모두 쓰는 이유입니다.
도구 선택 자체가 고민이시라면 웹플로우와 프레이머 비교 글을 먼저 보시는 편이 빠릅니다. 글로벌 기업들이 웹플로우를 쓰는 이유도 함께 보시면 판단이 쉬워집니다.
자주 묻는 질문
어느 버전을 써야 하나요?
새로 시작한다면 GSAP 기반 새 버전을 권합니다. 기본값이고 기능이 더 많습니다. 기존 사이트를 이어받았다면 그 사이트가 쓰던 버전을 유지하는 편이 안전합니다.
클래식으로 만든 인터랙션이 새 버전으로 자동 변환되나요?
자동으로 옮겨지지 않습니다. 다시 만들어야 합니다. 그래서 옮길지 말지는 페이지 수와 인터랙션 개수를 세어보고 판단하시는 게 좋습니다.
스크롤 애니메이션이 모바일에서도 잘 동작하나요?
동작은 합니다. 다만 화면이 작아 이동 거리가 상대적으로 크게 느껴집니다. 모바일에서는 값을 줄이거나 아예 끄는 편이 읽기에 낫습니다.
애니메이션이 많으면 SEO에 불리한가요?
효과 자체는 검색 순위에 직접 영향을 주지 않습니다. 다만 로딩이 느려지거나 본문이 늦게 보이면 사용자 경험 지표에서 손해를 봅니다.
GSAP을 따로 배워야 하나요?
아닙니다. 웹플로우 화면 안에서 시각적으로 만듭니다. 엔진이 GSAP일 뿐 코드를 쓰지 않습니다.
글자 쪼개기를 제목에 써도 되나요?
장식 성격의 문구라면 괜찮습니다. 다만 검색에 중요한 제목이나 스크린리더가 읽어야 할 문장에는 신중하게 쓰시는 편이 좋습니다.
두 버전을 섞었는지 어떻게 확인하나요?
발행한 사이트에서 개발자 도구의 네트워크 탭을 열고 불러오는 파일을 확인하시면 됩니다. 인터랙션 관련 리소스가 두 벌이면 섞여 있는 상태입니다.
프레이머로 옮기는 게 나을까요?
인터랙션 때문에 옮기는 건 권하지 않습니다. 도구를 바꾸면 인터랙션만 다시 만드는 게 아니라 사이트 전체를 다시 만들어야 합니다. 판단 기준은 비교 글에 정리해두었습니다.
정리하면
웹플로우에서 스크롤 애니메이션을 만들기 전에 내 화면이 새 버전인지 클래식인지부터 확인하세요. 인터랙션 패널 아래 드롭다운에 있습니다. 여기서부터 시작해야 튜토리얼과 화면이 맞습니다.
그리고 한 사이트에는 한 버전만 쓰세요. 섞으면 둘 다 불러와서 느려집니다. 효과는 절반만 넣어도 충분합니다.
이번 편으로 도구 이야기는 마무리합니다. 다음 글부터는 업종별 사례로 넘어갑니다.
실무 예제, CMS 목록에 순차 등장 붙이기
가장 자주 만드는 조합입니다. 블로그 목록이나 포트폴리오 목록에서 카드가 차례로 올라오는 형태입니다.
- 1.컬렉션 목록을 만들고 카드 하나를 디자인합니다
- 2.카드를 대상으로 잡고 새 인터랙션을 만듭니다
- 3.트리거는 스크롤 기준, 동작은 투명도와 위치로
- 4.순차 지연을 켜고 간격을 0.08초 정도로 둡니다
간격을 0.15초 넘게 주지 마세요. 카드가 여섯 개면 마지막 카드가 1초 가까이 늦게 나타납니다. 스크롤이 빠른 사람에게는 이미 지나간 뒤입니다.
클래식에서 이걸 하려면 카드 개수만큼 인터랙션을 만들고 지연 값을 하나씩 넣어야 했습니다. CMS 항목이 늘어나면 다시 손대야 했습니다. 이 작업이 사라진 것이 새 버전의 가장 큰 실무 이득입니다.
협업할 때 인터랙션 관리하기
혼자 만들 때는 문제가 없다가 사람이 늘면 인터랙션이 뒤엉킵니다. 규칙을 미리 정해두시면 좋습니다.
- •이름 규칙 어느 섹션의 무슨 동작인지 이름에 담습니다. hero-fade-in 처럼
- •재사용 우선 비슷한 효과를 새로 만들지 말고 기존 것을 가져다 씁니다
- •값 통일 이동 거리와 지속 시간을 사이트 전체에서 두세 가지로 제한합니다
- •실험은 별도 페이지에서 발행 페이지에서 시험하면 되돌리기 어렵습니다
세 번째가 핵심입니다. 값이 제각각이면 사이트가 통일되어 보이지 않습니다. 이동 거리는 24와 40 두 가지, 지속 시간은 0.4초와 0.6초 두 가지처럼 정해두고 그 안에서만 쓰시면 됩니다.
프레이머에서도 같은 문제가 생깁니다. 그쪽은 컴포넌트 안에 트랜지션이 들어 있어 값이 흩어지기 더 쉽습니다. 관리 기준은 배리언트 편에 정리했습니다.
함께 읽으면 좋은 글
- •3편. 스크롤을 천천히 따라오게 만들기
- •1편. 커스텀 마우스 커서 만들기
- •Webflow vs Framer, 2026년 지금 시작한다면 뭘 골라야 할까요
- •글로벌 기업들이 웹플로우를 사용하는 이유
지금 사이트를 어디부터 손봐야 할지 정리해 드립니다. 상담 신청을 남겨주시면 화면을 먼저 보고 말씀드립니다. 범위와 비용은 요금제 페이지에서 확인하실 수 있습니다.
이 글은 EasySpark 허수진 대표의 실무 내용이며, 각 도구의 기능과 화면 구성은 업데이트에 따라 달라질 수 있어 진행 전 공식 문서를 함께 확인하시길 권합니다. 우리 사이트에 맞는 방향이 궁금하시다면 편하게 상담 신청해주세요.
