자바스크립트 없이 움직이기

“움직이는 건 자바스크립트가 필요하다”고 생각하기 쉽다. 사실 대부분의 움직임은 CSS만으로 충분하다. 이 블로그는 자바스크립트를 싣지 않는데도, 아래 다이어그램은 계속 움직인다.

점이 왕복하고 가운데 노드가 깜빡이는 이 애니메이션은 전부 CSS @keyframes다. 스크립트가 0바이트라 오프라인에서도, 자바스크립트를 꺼도 그대로 움직인다. 색은 var(--color-accent)를 쓰기 때문에 위 디자인 패널에서 포인트 색을 바꾸면 점 색도 따라 바뀐다.

접고 펴는 것도 CSS로

상호작용도 간단한 건 스크립트가 필요 없다. 아래는 HTML <details> 하나다.

어떻게 동작하나요?

<details> 와 <summary> 는 브라우저가 접기/펴기를 기본으로 해준다. 여기에 테두리와 배경만 입혔다. 클릭 상태를 브라우저가 관리하니, 내가 쓸 코드는 없다.

움직임에도 예의가 있다

모션은 어지럼증을 유발할 수 있어서, 사용자가 시스템에서 “동작 줄이기”를 켜면 멈추게 해두는 게 좋다. CSS 한 줄이면 된다.

@media (prefers-reduced-motion: reduce) {
  .dot {
    animation: none;
  }
}

그럼 자바스크립트는 언제?

CSS로 안 되는 것 — 입력값을 읽거나, 상태를 계산하거나, 서버와 통신하는 컴포넌트 — 는 자바스크립트가 필요하다. 이 사이트라면 프레임워크 없이 바닐라 <script> 로 붙인다(오프라인은 유지되지만, 그 페이지엔 스크립트가 실린다). 하지만 “그냥 좀 움직이면 좋겠다” 정도라면, 대개 CSS가 답이다.