CSS만으로 난수를? 자바스크립트 없이 random() 실험하기

CSS Values 5에 등장한 random() 함수는 이제 자바스크립트 없이도 스타일에 무작위성을 넣을 수 있게 해줍니다. random(min, max, by step) 형태로 숫자뿐 아니라 색상, 각도, 위치 등 calc로 표현 가능한 거의 모든 값에 쓸 수 있고, 목록에서 하나를 고르는 random-item()도 함께 제공됩니다. 핵심은 값이 페이지 로드 시 한 번 계산되어 고정된다는 점입니다. 매 프레임 새로 뽑히지 않으므로 요소가 흔들리지 않고 안정적으로 흩뿌려집니다. 또 캐싱 키를 지정해 여러 요소가 같은 난수를 공유할지, 각자 다른 값을 가질지 제어할 수 있어 카드 흩뿌리기, 애니메이션 지연 분산, 제너러티브 아트 같은 효과를 순수 CSS로 구현할 수 있습니다. 다만 아직 실험적 기능으로 Safari·Chrome의 프리뷰 빌드에서 플래그를 켜야 동작하니, 실무 적용보다는 다가올 변화를 미리 익혀두는 차원에서 살펴볼 만합니다.