▲

스크롤 페이드여, 사라져라

 (dbushell.com)
1P by GN⁺ 2시간전 | ★ favorite | 댓글 1개
  • 웹사이트에서 스크롤 시 요소가 서서히 나타나는 ‘스크롤 페이드’ 효과를 비판하며, 시각적 불편함과 개발 복잡성을 지적
  • 대부분의 구현이 과도한 전환 효과와 부적절한 타이밍으로 인해 사용자 경험을 해치며, 개발자에게도 부담을 준다고 설명
  • 접근성 문제와 전정기관 장애(vestibular disorders) 등 실제 사용자에게 미치는 부정적 영향이 언급됨
  • 이러한 효과는 성능 저하와 Core Web Vitals 악화(LCP 등) 로 이어질 수 있으며, 테스트와 검증이 부족한 상태에서 적용되는 경우가 많음
  • 글은 “스크롤 페이드는 빠른 해결책이 아니라 처음부터 설계해야 할 복잡한 기능”이라며, 단호히 사용을 중단할 것을 촉구함

스크롤 페이드의 문제점

  • 스크롤 페이드(scroll fade) 는 사용자가 페이지를 내릴 때 요소가 서서히 나타나는 시각 효과로, 종종 Y축 변환(transform)과 함께 사용됨
    • 글에서는 이를 “끔찍한 경험”으로 표현하며, 모든 사용자에게 동일하게 적용된다고 언급
  • 효과가 섬세하게 조정될 경우 괜찮을 수도 있지만, 대부분의 경우 과도하게 적용되어 시각적으로 불쾌하다고 지적
    • 프로젝트가 거의 완성된 시점에 “모든 요소를 페이드 처리하라”는 요구가 들어오는 사례를 언급
  • 작성자는 이를 “지루함을 없애기 위한 잘못된 시도” 로 보고, 실제로는 사이트를 더 조잡하게 만든다고 평가

접근성과 사용자 영향

  • 여러 개발자들이 접근성(accessibility) 문제를 주요 반대 근거로 제시
    • 특히 전정기관 장애(vestibular disorders) 를 가진 사용자는 움직임 효과로 인해 불편을 겪을 수 있음
    • CSS의 prefers-reduced-motion 미디어 쿼리를 통해 일부 보호가 가능하지만, 작성자는 “움직임이 기본 비활성(opt-in)”이어야 한다고 주장
  • 인지 과부하(cognitive overload) 와 주의 분산 문제도 지적됨
    • 특히 Apple 기기에서 제작된 사이트가 Windows, Linux, Android 환경에서는 다르게 동작하는 사례가 많다고 언급

테스트와 성능 문제

  • 스크롤 페이드 효과를 적용하기 전에 실제 사용자 테스트와 성능 검증이 필요함을 강조
    • 사용자가 여전히 작업을 수행할 수 있는지, 이탈률(bounce rate) 이 증가하지 않는지 등을 확인해야 함
    • 테스트할 의지가 없다면 “위험을 감수하지 말라”고 경고
  • 작성자는 자신의 스크립트가 Scott Jehl의 “This CSS Will Self-Destruct” 기법을 활용했다고 언급
    • 이는 JavaScript가 비활성화된 경우를 대비한 보호 방식으로 소개됨

Core Web Vitals와 SEO 영향

  • 스크롤 페이드가 Largest Contentful Paint(LCP) 등 Core Web Vitals 지표를 악화시킬 가능성이 높다고 지적
    • 직접적인 데이터는 제시하지 않았지만, 과거 확인한 사이트들이 “끔찍한 LCP”를 보였다고 언급
  • SEO 영향에 대해서는 “Google이 품질 낮은 콘텐츠를 제공한다는 말도 있다”며 풍자적으로 회의적 태도를 보임
    • 다만, 블로그 글을 통해 이 효과를 유행에서 몰아내자는 의도를 드러냄

결론: 스크롤 페이드 금지 선언

  • “5가지 멋진 스크롤 페이드 효과”라는 제목 아래 “하지 마라”를 다섯 번 반복하며 풍자적으로 마무리
  • 스크롤 페이드는 빠른 해결책이 아니며, 사이트 구조 전체를 고려해 처음부터 설계해야 하는 복잡한 기능임을 강조
  • 개발자들이 집단적으로 ‘기술적으로 불가능하다’고 선언해버리자는 농담으로 글을 마무리
  • 최종 메시지는 명확함: “스크롤 페이드여, 사라져라(Death to scroll fade)”
▲
GN⁺ 2시간전  [-]
Hacker News 의견들

  • 개인적으로 정말 싫은 스크롤 관련 요소가 있음
    바로 스크롤을 내릴 땐 사라지고 올릴 땐 다시 나타나는 스티키 헤더임
    페이지를 위아래로 움직일 때마다 깜빡이는 그 움직임이 너무 거슬림
    uBlock 같은 걸로 없애면 페이지 맨 위에서도 헤더가 사라져버려서 곤란함

    • 완전 공감함. 나는 읽고 있는 문장을 항상 화면 맨 위에 두는 습관이 있어서, 문장을 다시 읽으려면 매번 헤더를 지나쳐야 함
    • 데스크톱에서만 쉽게 쓸 수 있지만 꽤 만족스러운 해결책이 있음
      Kill Sticky Headers라는 스크립트를 추천함
    • Safari에는 “Remove Distracting Elements” 기능이 있음
      일부 웹사이트는 정말 ‘해충 퇴치 도구’를 들고 가야 할 정도로 산만함

  • “Reader Mode”는 특별한 모드가 아니라 기본 브라우징 경험이 되어야 함
    오히려 화려한 스타일링을 원하면 “Clown Mode”를 켜야 한다고 생각함

    • 나는 페이지 전체를 하나의 긴 이미지로 렌더링한 뒤, 그걸 스크롤하는 리더 모드를 원함
      브라우저가 페이지에 “모든 콘텐츠가 이미 화면에 있다”고 속여줬으면 함
    • 리더 모드가 기본이 아닌 이유는 웹사이트 제작자들이 일부러 그 기능을 깨뜨리지 못하게 하려는 의도 때문임
    • macOS와 iOS에서는 리더 모드를 기본값으로 설정할 수 있음
    • 페이지가 열릴 때 자동으로 리더 모드가 켜지고, 필요하면 몇 초 안에 ESC로 해제할 수 있으면 좋겠음
    • “Clown Mode”라는 표현이 너무 웃김. 예전 Windows XP의 “Fisher-Price” 테마가 떠오름

  • 처음엔 iOS 얘기인 줄 알았음
    iOS 26부터 웹페이지 상단이 회색으로 페이드아웃되는 현상이 생겼는데, 이게 너무 거슬림
    텍스트 색이 동적으로 변하면서 시선이 계속 위로 끌림
    Apple이 이런 시각적 주의 분산을 모를 리 없는데, 왜 이런 디자인을 했는지 의문임

    • 더 심한 예로, iOS의 Music 앱은 재생 컨트롤을 콘텐츠 위로 옮겨서 투명하게 겹치게 만들었음
      그 아래 콘텐츠도 스크롤 페이드됨
    • “Reduce Transparency”를 켜면 상하단이 그냥 하얀 빈 공간으로 바뀜
      내 iPhone이 다시 홈버튼 시절 디자인처럼 보여서 웃김

  • 이 효과가 웹 전반에 퍼졌다고 하지만, 나는 이번에 처음 봤음
    눈앞에서 애니메이션이 움직이면 글을 읽을 수가 없음
    그래도 하단의 금붕어 애니메이션은 멋져서 따로 써먹고 싶음

    • Anthropic의 사이트들에서 이 효과를 자주 봄
      예를 들어 Claude Agents 페이지에서도 명확히 보임
      Claude의 스타일 가이드가 다른 LLM 기반 사이트에도 퍼진 듯함
    • 사실 이런 효과는 SaaS 마케팅 페이지에서 매우 흔함
      단순한 페이드인뿐 아니라 옆에서 슬라이드되는 식으로도 자주 보임
    • 나도 사이트 리디자인 중 Claude가 이런 애니메이션을 제안했었음
      Claude가 자신 있게 추천한다면 이미 많은 사람이 따라 했다는 뜻일지도 모름
    • 잘 구현되면 시선을 유도하는 미묘하고 즐거운 효과가 될 수 있음
      이 사이트는 일부러 과장해서 보여주는 예시임
    • history-of-animation.webflow.io 같은 사이트도 참고할 만함

  • 나는 이 스크롤 페이드 유행이 버그에서 비롯된 오해라고 생각함
    원래는 이미지 지연 로딩(lazy loading) 때문에 생긴 깜빡임이었는데
    디자이너들이 그걸 의도된 효과로 착각하고 “예쁘게 페이드시키자”고 한 게 시작임

    • 하지만 실제로는 단순히 “멋져 보이게” 하려는 디자인 과잉임
      콘텐츠보다 스크롤 자체에 집착하는 경향이 있음
    • 그래도 이건 단순히 버그와는 다른, 별개의 흐름 같음

  • 나는 한술 더 떠서 말하고 싶음 — 패럴랙스 스크롤도 사라져야 함
    모든 스크롤 애니메이션이 없어졌으면 함

    • 스크롤은 그냥 고정된 크기의 뷰를 위아래로 움직이는 단순한 동작이면 충분함
    • 물론 섬세한 이미지 패럴랙스는 괜찮음
      하지만 아무 요소나 제멋대로 다른 속도로 움직이는 건 최악임
    • 애니메이션 자체를 반대하는 건 아니지만, 목적 없이 남발하면 케첩을 과하게 뿌린 음식 같음
    • 스크롤 이벤트를 오버라이드하는 건 특히 싫음
      Vimium의 부드러운 스크롤링을 망쳐버림

  • 이 페이지는 정말 멀미 유발의 끝판왕임
    나는 어릴 때부터 심한 멀미를 겪었고, 지금도 버스나 엘리베이터가 고역임
    이 페이지를 몇 초만 봐도 토할 것 같았고, 바로 리더 모드로 바꿨음
    그래도 이런 문제에 대한 인식이 높아지는 건 반가움

    • 나도 똑같이 멀미가 심함
      운전석이 아니면 고통스럽고, 다른 사람들은 그걸 이해하지 못함
      특히 가속-감속을 반복하는 운전 습관이 정말 고문 같음
    • 나만 그런 게 아니어서 다행임
      몇 분만 봐도 편두통이 올 정도였음
    • 나는 멀미가 없는데도 이 페이지를 보고 메스꺼움을 느꼈음
      정말 끔찍한 경험이었음

  • 예전에 스크롤재킹(scrolljacking) 을 좋아하는 클라이언트와 일했음
    그가 패럴랙스 효과를 발견하자 완전히 빠져버렸고, 결국 나를 해고함
    지금 그 사이트는 iPhone 16+ 외의 모든 기기에서 버벅거림

  • 마지막 디테일이 눈에 띔 — 선택했을 때 글자가 안 보이게 만든 부분
    현실적으로는 그런 세세한 부분까지 신경 쓰는 읽기 힘든 사이트는 거의 없음

    • 보통은 텍스트 선택 자체를 막아서 “신성한 텍스트” 를 보호하려고 함

  • 나는 애니메이션을 다룰 때 아주 단순한 규칙을 씀

    animationCount = 0
animateElement(el) {
  el.animate({duration: BASE_DURATION / animationCount})
  animationCount++
}

    반복될수록 애니메이션 지속시간을 줄이는 방식임
    처음엔 강렬하지만 점점 짧아져서 전체적으로 경쾌한 느낌을 줌

답변달기