CampusDownWiki
누적 인용 16,205한국어KO 2,699EnglishEN 11,189日本語JA 774中文ZH 1,543
캠퍼스다운 홈 ↗
한국어

패럴랙스 스크롤

⚙️ 공학·기술 작성 캠퍼스다운 위키 편집부 최종 수정
패럴랙스 스크롤은 화면을 스크롤할 때 배경 이미지와 전경 요소를 다른 속도로 움직여 입체감을 만드는 시각 효과예요.
목차
  1. 1. 왜 눈길을 끌까
  2. 2. 모바일에서 조심할 점
  3. 3. 멀미와 움직임 줄이기
  4. 4. 자주 묻는 질문
  5. 5. 참고문헌

왜 눈길을 끌까

패럴랙스는 멀리 있는 배경이 천천히, 가까운 내용이 빠르게 움직이게 해서 화면에 깊이를 더해요. 브랜드 소개나 캠페인 페이지에서 강한 첫인상을 줘요. 하지만 셔윈(2019)은 이런 효과가 읽기를 느리게 하고 내용 파악을 방해할 수 있다고 정리했어요. 스웰러(1988)의 관점에서 움직이는 배경은 내용과 무관한 부하가 되고, 피롤리와 카드(1999)의 정보 단서도 화려함 뒤에 묻힐 수 있어요.

모바일에서 조심할 점

김과 동료들(2015)의 연구처럼 작은 화면에서는 읽기와 위치 파악이 원래 더 어려워요. 여기에 움직임이 더해지면 더 헷갈려요. 모바일 기기는 스크롤 중 계산이 많으면 끊기기 쉽고 배터리도 더 써요. 끊기는 화면은 레버와 동료들(2004)이 말한 처리 유창성을 떨어뜨려 오히려 덜 세련돼 보이게 해요. 그래서 모바일에서는 효과를 줄이거나 아예 끄는 경우가 많아요. 긴 무한 스크롤 목록에는 쓰지 않는 게 좋아요.

멀미와 움직임 줄이기

전정 기관이 예민한 사람은 크게 움직이는 배경 때문에 어지럼증이나 메스꺼움을 느낄 수 있어요. WCAG 2.2(W3C, 2023)의 2.3.3 기준은 상호작용으로 생기는 움직임을 끌 수 있게 하라고 해요. MDN(n.d.)이 설명하는 prefers-reduced-motion 미디어 쿼리로 '동작 줄이기' 설정을 켠 사람에게는 효과를 끄면 돼요. 패럴랙스는 장식일 뿐이니 시각적 위계와 내용 전달을 먼저 챙기고, 작은 마이크로인터랙션 정도로 절제하는 게 안전해요.

자주 묻는 질문

패럴랙스는 SEO에 나쁜가요?
효과 자체보다, 한 페이지에 모든 내용을 몰아넣거나 글을 이미지로 넣는 구성이 문제가 될 수 있어요.
모바일에서는 아예 쓰지 말아야 하나요?
아주 약한 효과는 괜찮지만, 성능과 움직임 줄이기 설정을 확인하고 끌 수 있게 해야 해요.

출처 검토일: 2026-10-27

참고문헌

  1. Sherwin, K. (2019, January 20). What parallax lacks. Nielsen Norman Group. 패럴랙스가 읽기와 탐색에 주는 문제를 정리해, 장식 효과를 얼마나 쓸지 정할 때 참고하면 도움이 돼요.
  2. MDN Web Docs. (n.d.). prefers-reduced-motion. Mozilla. 움직임 줄이기 설정을 감지하는 CSS 미디어 쿼리라, 패럴랙스를 끄는 구현에 참고하면 도움이 돼요.
  3. World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 상호작용으로 생기는 애니메이션을 끌 수 있어야 한다는 2.3.3 기준이 있어, 멀미 유발 효과를 다룰 때 참고하면 도움이 돼요.
  4. Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 작은 화면에서 읽기와 위치 파악이 더 어렵다는 연구라, 모바일에서 효과를 줄일 이유로 참고하면 도움이 돼요.
  5. Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285. 불필요한 요소가 인지 부하를 늘린다는 연구라, 움직이는 배경이 내용 이해를 방해하는 이유로 참고하면 도움이 돼요.
  6. Reber, R., Schwarz, N., & Winkielman, P. (2004). Processing fluency and aesthetic pleasure: Is beauty in the perceiver's processing experience? Personality and Social Psychology Review, 8(4), 364–382. 쉽게 처리될수록 아름답게 느낀다는 연구라, 과한 효과가 오히려 인상을 해치는 이유로 참고하면 도움이 돼요.
  7. Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 사람이 정보 단서를 따라 탐색한다는 이론이라, 화려한 화면이 핵심 정보를 가릴 때의 비용을 설명할 때 참고하면 도움이 돼요.

이 이론으로 쓴 레포트·자료

아직 이 이론만 따로 다룬 자료는 없지만, 캠퍼스다운 자료실에서 관련 레포트를 검색해 볼 수 있어요.

레포트 더 찾기 · '패럴랙스 스크롤' 검색 결과 보기 →

같이 보면 좋은 이론

최신 아티클전체보기 ›

대학생 공부·과제에 바로 쓰는 새 정보 글

이 문서는 2026년 10월 27일에 마지막으로 수정되었습니다. 내용은 널리 알려진 원전과 교과서를 바탕으로 정리했으며, 레포트에 인용할 때는 아래 참고문헌의 원전을 직접 확인하세요.