# 스크롤 페이드여, 사라져라 > Clean Markdown view of GeekNews topic #27645. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=27645](https://news.hada.io/topic?id=27645) - GeekNews Markdown: [https://news.hada.io/topic/27645.md](https://news.hada.io/topic/27645.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-03-19T15:33:35+09:00 - Updated: 2026-03-19T15:33:35+09:00 - Original source: [dbushell.com](https://dbushell.com/2026/01/09/death-to-scroll-fade/) - Points: 1 - Comments: 1 ## Topic Body - 웹사이트에서 스크롤 시 요소가 **서서히 나타나는 ‘스크롤 페이드’ 효과**를 비판하며, 시각적 불편함과 개발 복잡성을 지적 - 대부분의 구현이 **과도한 전환 효과와 부적절한 타이밍**으로 인해 사용자 경험을 해치며, 개발자에게도 부담을 준다고 설명 - **접근성 문제**와 **전정기관 장애(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)”** ## Comments ### Comment 53367 - Author: neo - Created: 2026-03-19T15:33:35+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=47426932) - 개인적으로 정말 싫은 스크롤 관련 요소가 있음 바로 스크롤을 내릴 땐 사라지고 올릴 땐 다시 나타나는 **스티키 헤더**임 페이지를 위아래로 움직일 때마다 깜빡이는 그 움직임이 너무 거슬림 uBlock 같은 걸로 없애면 페이지 맨 위에서도 헤더가 사라져버려서 곤란함 - 완전 공감함. 나는 읽고 있는 문장을 항상 화면 맨 위에 두는 습관이 있어서, 문장을 다시 읽으려면 매번 헤더를 지나쳐야 함 - 데스크톱에서만 쉽게 쓸 수 있지만 꽤 만족스러운 해결책이 있음 [Kill Sticky Headers](https://alisdair.mcdiarmid.org/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 페이지](https://claude.com/solutions/agents)에서도 명확히 보임 Claude의 스타일 가이드가 다른 LLM 기반 사이트에도 퍼진 듯함 - 사실 이런 효과는 **SaaS 마케팅 페이지**에서 매우 흔함 단순한 페이드인뿐 아니라 옆에서 슬라이드되는 식으로도 자주 보임 - 나도 사이트 리디자인 중 Claude가 이런 애니메이션을 제안했었음 Claude가 자신 있게 추천한다면 이미 많은 사람이 따라 했다는 뜻일지도 모름 - 잘 구현되면 시선을 유도하는 **미묘하고 즐거운 효과**가 될 수 있음 이 사이트는 일부러 과장해서 보여주는 예시임 - [history-of-animation.webflow.io](https://history-of-animation.webflow.io/) 같은 사이트도 참고할 만함 - 나는 이 **스크롤 페이드 유행**이 버그에서 비롯된 오해라고 생각함 원래는 이미지 **지연 로딩(lazy loading)** 때문에 생긴 깜빡임이었는데 디자이너들이 그걸 의도된 효과로 착각하고 “예쁘게 페이드시키자”고 한 게 시작임 - 하지만 실제로는 단순히 “멋져 보이게” 하려는 **디자인 과잉**임 콘텐츠보다 스크롤 자체에 집착하는 경향이 있음 - 그래도 이건 단순히 버그와는 다른, 별개의 흐름 같음 - 나는 한술 더 떠서 말하고 싶음 — **패럴랙스 스크롤**도 사라져야 함 모든 스크롤 애니메이션이 없어졌으면 함 - 스크롤은 그냥 고정된 크기의 뷰를 위아래로 움직이는 단순한 동작이면 충분함 - 물론 **섬세한 이미지 패럴랙스**는 괜찮음 하지만 아무 요소나 제멋대로 다른 속도로 움직이는 건 최악임 - 애니메이션 자체를 반대하는 건 아니지만, 목적 없이 남발하면 **케첩을 과하게 뿌린 음식** 같음 - 스크롤 이벤트를 오버라이드하는 건 특히 싫음 Vimium의 부드러운 스크롤링을 망쳐버림 - 이 페이지는 정말 **멀미 유발의 끝판왕**임 나는 어릴 때부터 심한 멀미를 겪었고, 지금도 버스나 엘리베이터가 고역임 이 페이지를 몇 초만 봐도 토할 것 같았고, 바로 리더 모드로 바꿨음 그래도 이런 문제에 대한 인식이 높아지는 건 반가움 - 나도 똑같이 멀미가 심함 운전석이 아니면 고통스럽고, 다른 사람들은 그걸 이해하지 못함 특히 **가속-감속을 반복하는 운전 습관**이 정말 고문 같음 - 나만 그런 게 아니어서 다행임 몇 분만 봐도 **편두통**이 올 정도였음 - 나는 멀미가 없는데도 이 페이지를 보고 **메스꺼움**을 느꼈음 정말 끔찍한 경험이었음 - 예전에 **스크롤재킹(scrolljacking)** 을 좋아하는 클라이언트와 일했음 그가 패럴랙스 효과를 발견하자 완전히 빠져버렸고, 결국 나를 해고함 지금 그 사이트는 iPhone 16+ 외의 모든 기기에서 **버벅거림** - 마지막 디테일이 눈에 띔 — 선택했을 때 글자가 안 보이게 만든 부분 현실적으로는 그런 세세한 부분까지 신경 쓰는 **읽기 힘든 사이트**는 거의 없음 - 보통은 텍스트 선택 자체를 막아서 **“신성한 텍스트”** 를 보호하려고 함 - 나는 애니메이션을 다룰 때 아주 단순한 규칙을 씀 ```js animationCount = 0 animateElement(el) { el.animate({duration: BASE_DURATION / animationCount}) animationCount++ } ``` 반복될수록 **애니메이션 지속시간을 줄이는 방식**임 처음엔 강렬하지만 점점 짧아져서 전체적으로 **경쾌한 느낌**을 줌