CSS random()으로 만드는 장난기 있는 불완전함

Smashing Magazine에서 Brecht De Ruyte는 CSS random() 함수를 소개한다. 최솟값과 최댓값, 선택적 단계값(step)을 받아 난수를 만들며, 두 값은 단위가 같아야 한다. Safari는 이미 지원하고 Chrome은 156 버전부터 순차 적용되며 Firefox도 긍정적 신호를 보내고 있다.

"Randomness in CSS doesn't have to mean throwing your design system out the window."Smashing Magazine (Brecht De Ruyte)

왜 중요한가

그동안 무작위 효과는 자바스크립트나 Sass로 흉내 내야 했다. 이제 스타일시트 안에서 요소마다 다른 기울기나 지연 시간을 줄 수 있고, 캐싱 키로 여러 속성이 같은 난수를 공유하게 해 정사각형 같은 비율도 유지할 수 있다. 다만 글은 핵심 레이아웃, 본문 타이포그래피에는 쓰지 말라고 분명히 선을 긋는다.

실무 적용

카드의 미세한 기울기, 배경 장식의 배치, 나란히 도는 앰비언트 애니메이션의 타이밍 분산처럼 "손으로 만든 느낌"이 필요한 곳에 적합하다. @supports로 점진적 향상을 적용하고, prefers-reduced-motion 사용자에게는 애니메이션을 끄고 각도를 평평하게 되돌려야 한다. 앞으로 토큰 중에서 하나를 고르는 random-item()도 논의 중이라고 한다.

교차 참고

• NN/g: Animation for Attention and Comprehension — 애니메이션은 목적이 있을 때 쓰라는 기본 원칙.
• NN/g: Scroll Animations — 스크롤 연동 모션이 사용성에 미치는 영향 정리.

Wemeet의 관점

Wemeet은 무작위성을 "화려함"이 아니라 "생기"의 도구로 본다. 균일한 격자 위에 아주 작은 어긋남을 더하면 화면이 덜 기계적으로 느껴지지만, 그 범위는 디자인 토큰처럼 정해 두어야 브랜드가 흐트러지지 않는다. 브라우저 지원이 완전해지기 전에는 장식 레이어에서만 시험해 보는 것을 권한다.