{ "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://www.flov.website/#organization", "name": "FLO:V™", "alternateName": "플로비", "url": "https://www.flov.website", "taxID": "602-71-06004" }, { "@type": "WebSite", "@id": "https://www.flov.website/#website", "url": "https://www.flov.website", "name": "FLO:V™", "publisher": { "@id": "https://www.flov.website/#organization" }, "inLanguage": "ko-KR" }, { "@type": "BlogPosting", "@id": "https://www.flov.website/journal/experience-harmony-designing-for-connection/#article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.flov.website/journal/experience-harmony-designing-for-connection" }, "url": "https://www.flov.website/journal/experience-harmony-designing-for-connection", "headline": "스크롤 애니메이션이 전환율에 하는 일", "description": "스크롤 애니메이션은 그 자체로 전환을 올리지 않습니다. 읽는 순서를 만드는 움직임과 방해하는 움직임을 나누고, 런칭 전 확인 항목을 정리했습니다.", "image": "https://cdn.prod.website-files.com/68e3daa79f24584bd3a389ea/6a6f2a5f8a53f8082012f82b_6a6f297cfc0ddd15f33f4835_flov-journal-experience-harmony-designing-for-connection.png", "author": { "@type": "Person", "name": "리비", "jobTitle": "웹플로우 디렉터", "worksFor": { "@id": "https://www.flov.website/#organization" } }, "publisher": { "@id": "https://www.flov.website/#organization" }, "datePublished": "2025-07-20", "dateModified": "2025-07-20", "inLanguage": "ko-KR" }, { "@type": "BreadcrumbList", "@id": "https://www.flov.website/journal/experience-harmony-designing-for-connection/#breadcrumb", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "홈", "item": "https://www.flov.website/" }, { "@type": "ListItem", "position": 2, "name": "저널", "item": "https://www.flov.website/journal" }, { "@type": "ListItem", "position": 3, "name": "스크롤 애니메이션이 전환율에 하는 일" } ] } ] }
어두운 배경에 흰 글씨로 '움직임은 읽는 순서를 만듭니다'라고 쓴 FLO:V 저널 커버

스크롤 애니메이션이 전환율에 하는 일

스크롤 애니메이션은 그 자체로 전환율을 올리지 않습니다. 읽는 순서를 정해줄 때만 올립니다.

움직임이 하는 일은 시선을 어디에 먼저 두게 할지 정하는 것입니다. 제목이 먼저 들어오고 설명이 따라오면 방문자는 그 순서대로 읽습니다. 순서가 생기면 페이지의 메시지가 한꺼번에 쏟아지지 않고 한 줄씩 전달됩니다.

문제는 같은 기술이 반대로도 작동한다는 점입니다.

User Experience

도움이 되는 움직임

정보의 위계를 만드는 등장 순서, 버튼을 눌렀을 때 눌렸다고 알려주는 반응, 긴 페이지에서 지금 어디쯤인지 알려주는 표시. 이 세 가지는 방문자가 다음에 무엇을 해야 하는지를 명확하게 만듭니다.

방해가 되는 움직임

본문을 보기까지 기다리게 만드는 인트로, 손가락이나 휠의 속도를 가로채는 스크롤 효과, 화면마다 무언가가 계속 움직여서 정작 문의 버튼이 눈에 안 들어오는 구성. 여기에 모바일에서 화면이 끊기기까지 하면 방문자는 사이트가 느리다고 판단합니다.

기준은 하나입니다. 그 움직임이 없어지면 정보가 덜 전달되는가. 그렇지 않다면 장식입니다.

User Experience

런칭 전에 확인할 세 가지

첫째, 첫 화면에서 문의나 상담 버튼이 애니메이션이 끝난 뒤에야 보이지는 않는지 확인합니다. 둘째, 기기 설정에서 동작 줄이기를 켠 방문자에게는 움직임이 멈추도록 처리되어 있는지 확인합니다. 셋째, 작업용 컴퓨터가 아니라 실제 휴대폰에서 직접 스크롤해 봅니다.

이 셋을 통과한 뒤에 남는 움직임만이 전환에 기여합니다.

READ MORE
More Stories