무료GitHub에 공개한국어 소개

parallax-effects

배경과 전경이 서로 다른 속도로 움직이는 시차 효과를 점검하고, 동작 줄이기 설정 지원과 필요한 정보를 전달하는 정적 표시로의 수정을 돕습니다.

원문원문 설명 보기

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide alternatives to parallax effects. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias/Front-End-Checklist

AI 평가100점/ 100 설치 방법 보기

이럴 때 유용합니다

웹사이트의 시차 효과를 점검합니다
동작 줄이기 설정 지원을 확인합니다
움직이는 콘텐츠의 정적 표시를 마련합니다
사이트 전체 동작 전환 기능을 검토합니다

한국어 소개

할 수 있는 일

배경과 전경이 서로 다른 속도로 움직이는 시차 효과를 찾고, 움직임을 줄인 표시로 전환할 수 있는지 확인합니다. 사용자의 동작 줄이기 설정인 prefers-reduced-motion을 지원하는지, 효과를 멈춰도 필요한 정보에 접근할 수 있는지 점검합니다. 움직임을 허용하는 설정일 때만 효과를 적용하는 CSS와 같은 내용을 전달하는 정적 표시를 제안합니다.

이럴 때 유용합니다

스크롤에 따라 배경이 움직이는 페이지를 검토할 때 유용합니다. 이러한 효과는 시각과 평형감각의 불일치로 어지럼증이나 메스꺼움을 일으킬 수 있습니다. 사용자 설정에 따른 전환을 확인하고, 사이트 전체의 움직임을 끄는 스위치를 마련할지 검토할 때도 사용할 수 있습니다.

사용 예시

“이 페이지의 시차 효과가 동작 줄이기 설정을 지원하는지 확인해 주세요.”
“효과를 멈춰도 같은 내용이 전달되는 표시 방식을 제안해 주세요.”
“사이트 전체의 움직임을 끄는 스위치 도입을 검토해 주세요.”

주의 사항

특별한 주의 사항은 없습니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호배경과 전경의 속도가 다른 효과를 찾고 설정 지원과 정보 접근성을 확인합니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호미디어 쿼리 조건, 정적 대체 표시, 전체 전환 기능 검토와 검증 방법을 제시합니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호명시된 작업은 효과 점검과 대체 표시 제안이며 삭제나 외부 전송은 없습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호브라우저 접근성 도구 등으로 검증하며 API 키나 유료 서비스는 필요하지 않습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(2)

SKILL.md2.0 KB
references/rule.md4.8 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Provide alternatives to parallax effects

Parallax creates a mismatch between what the eyes see and what the inner ear senses—triggering dizziness, nausea, and vertigo for users with vestibular disorders.

Quick Reference

Disable parallax when prefers-reduced-motion is set
Parallax creates depth mismatch triggering vestibular disorders
Provide user toggle to disable motion effects site-wide
Ensure essential content is accessible without the effect

Check

Identify parallax effects where background and foreground move at different speeds. Verify these effects are disabled when prefers-reduced-motion is set, and essential content is accessible without the effect.

Fix

Wrap parallax effects in @media (prefers-reduced-motion: no-preference) queries. Provide static fallbacks that convey the same content. Consider adding a user toggle to disable motion effects site-wide.

Explain

Explain how parallax effects create a depth mismatch that can trigger vestibular disorders, causing dizziness, nausea, and disorientation in affected users.

Code Review

Review the rendered markup and interactive states that affect Provide alternatives to parallax effects. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/accessibility/parallax-effects

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬