CSS random() 초안과 시연으로 본 절제된 시각적 편차 설계

디자인 시스템에서 정교한 간격과 일관된 정렬을 구축하던 작업 환경에 작은 불규칙성을 시험하는 시도가 소개됐다. 브레흐트 더라위터는 10월 20일 스매싱 매거진을 통해 CSS random()을 활용한 타이포그래피와 카드 묶음 시연을 공개하며 새로운 표현 방식을 제안했다. 개별 문자마다 조금씩 다른 각도의 회전과 위치 이동을 부여하거나 나열된 카드들이 미세하게 다른 방향을 갖도록 연출하는 작업이다.

이 시연에서 다루는 무작위성은 화면의 모든 구성 요소를 제약 없이 흔들어 놓는 명령이 아니다. 개발자가 각도나 거리의 상한과 하한을 명확하게 지정하고 그 정해진 경계 안에서만 수치가 달라지도록 유도하는 방식을 취했다. 글자에는 몇 도 안쪽의 미세한 기울기와 몇 픽셀 수준의 이동만 허용해 기본 가독성을 해치지 않도록 조율했다.

카드의 기본 배열을 안정적으로 유지한 상태에서 표면에 작은 시각적 차이를 얹는다는 점이 이번 실험의 핵심적인 출발선이다. 규칙을 완전히 버리는 대신 화면 요소가 벗어날 수 있는 허용 범위를 사전에 정의함으로써 통제된 화면 질서를 유지하는 접근을 보여준다.

규격 초안이 정의하는 범위와 간격 및 값 공유

CSS 값·단위 레벨 5의 현재 편집자 초안은 random()을 최소와 최대 사이에서 적절한 값을 선택하는 수학 함수로 정의하고 있다. 함수의 마지막 인수로 특정 간격을 지정하면 가능한 결과값 역시 해당 간격에 맞춰 단계적으로 제한되는 구조를 취한다. 이를 통해 완전한 연속값뿐만 아니라 이산적인 수치 단계까지 문법 안에서 유연하게 다룰 수 있다.

예를 들어 0~60px 사이를 15px 간격으로 지정하면 0·15·30·45·60px라는 다섯 개 수치만이 선택 후보군이 된다. 각도나 거리를 연속해서 미세하게 변화시키는 표현과 정해진 몇 단계의 후보 중에서 고르게 만드는 방식은 화면 위에서 서로 다른 조형적 질감을 형성한다. 개발자는 이 간격 인수를 활용해 불규칙성의 거칠기를 직접 제어할 수 있다.

2026년 10월 27일 편집자 초안은 기본값 auto에서 요소·속성·함수의 위치를 바탕으로 공유 범위를 정한다. 이를 매번 새 난수를 뽑는 자바스크립트 함수 호출처럼 이해하면 안 된다. 이름을 명시해 같은 기반 난수를 공유하거나 요소별로 범위를 좁히는 규칙이 있으며, 서로 다른 범위를 사용하면 같은 기반 난수도 최종 크기는 달라질 수 있다.

같은 범위의 너비와 높이가 하나의 기반 난수를 공유하면 정사각형을 유지할 수 있다. 반면 이름 없는 일반 커스텀 속성에 random()을 적었다고 계산 결과 하나가 저장되는 것은 아니다. 대입된 속성에서 해석되는 문법과 공유 키를 확인해야 한다. 규격은 변경 가능한 초안이며 문법 지원 여부도 실제 대상 브라우저에서 따로 점검해야 한다.

수식으로 잡는 뼈대와 미세 편차의 공존

더라위터가 공개한 카드 묶음 시연은 구조와 시각적 표정을 분리하는 원리를 분명하게 드러낸다. 여러 장의 카드가 부채꼴 모양으로 자연스럽게 펼쳐지는 기본 위치는 형제 요소의 순서를 조합한 수학적 수식으로 먼저 계산해 배치했다. 엄격한 계산식이 전체 배열의 안정적인 뼈대를 형성하는 토대가 된다.

이러한 계산식 위에 작은 무작위 편차를 결합함으로써 동일한 복사본이 기계적으로 나열되어 움직이는 듯한 단조로운 인상을 줄이고자 했다. 수식이 레이아웃의 규칙적인 질서를 잡아 주고 변동 범위가 개별 카드의 고유한 표정을 빚어내는 방식이다. 규칙과 불규칙이 상충하지 않고 층위를 나누어 결합한다.

글자 시연 역시 문자마다 서로 다른 기울기를 적용하되 마우스 커서를 올리면 다시 반듯하게 정렬되도록 인터랙션을 설계했다. 불규칙한 초기 상태와 정돈된 상태를 유연하게 오갈 수 있게 만들어 시각적 재미와 정보 습득의 편의를 양립시켰다. 정보 구조를 무작위로 섞기보다 동일한 내용을 다른 시각적 리듬으로 드러내는 데 집중한 결과다.

표현을 위한 장식과 보조 기술용 텍스트의 분리

문자를 낱개로 꾸미기 위해 여러 개별 요소로 분할하면 스크린 리더와 같은 보조 기술에 전달되는 텍스트 구조가 파편화되어 읽기 경험을 방해할 위험이 있다. 원문 시연은 시각적 연출을 위해 분할된 장식용 문자 묶음을 보조 기술에서 명시적으로 숨기고 온전한 형태의 단어를 별도의 경로로 전달하는 방식을 제시했다.

카드 시연에서는 키보드 포커스를 받는 순간 기울어진 각도를 곧바로 정돈해 조작 대상이 흔들리지 않도록 처리했다. 사용자가 키보드로 내비게이션을 수행할 때 시각적 편차로 인해 선택 목표를 놓치거나 혼란을 겪지 않도록 조작 상태의 안정성을 보장한 셈이다. 인터랙션의 우선순위를 정확히 설정한 조치다.

움직임을 부여하는 과정에서도 사용자의 움직임 감소 설정을 확인해 불필요한 흔들림을 억제할 수 있도록 배려했다. 글자 하나가 독립된 조형처럼 개별적으로 움직이더라도 사용자가 받아들여야 할 정보는 명확한 하나의 단어로 유지되어야 한다. 표현 레이어와 접근성 전달 경로를 분리할 때 시각적 실험은 사용성을 해치지 않는다.

문법 지원과 실제 너비를 따로 읽어봤다

2026년 11월 2일 Windows의 Chrome 156, DPR 1 환경에서 너비 선언 세 가지를 직접 실행했다. CSS.supports는 기본 범위와 10px 간격 문법 모두 true를 반환했다. 계산된 너비는 random(100px, 200px)이 128.984px, random(100px, 200px, 10px)이 110px였다. 120px를 먼저 주고 @supports 안에서 난수 선언을 덮어쓴 요소는 179.656px였다. 모두 한 번의 관측값이며 새로 열었을 때 같은 숫자가 나온다는 뜻은 아니다.

120px 대체 값은 기능을 쓰지 못하는 환경에서도 박스가 사라지지 않게 남긴 기본 디자인이다. 이번 환경에서는 지원 조건이 참이어서 난수 선언이 적용됐다. 미지원 브라우저를 실행해 대체 경로까지 확인한 것은 아니다. MDN도 이 기능을 모든 주요 브라우저에 걸쳐 쓸 수 있는 Baseline 기능으로 분류하지 않는다. 아래 코드는 기본값과 향상된 표현을 분리하는 예이며, 보안용 난수나 추첨의 공정성을 검증하는 실험과는 무관하다.

.box { width: 120px; height: 24px; }
@supports (width: random(100px, 200px)) {
  .box { width: random(100px, 200px); }
}
/* 간격을 지정할 때는 세 번째 수치 인수를 사용한다. */
.stepped { width: 120px; width: random(100px, 200px, 10px); }

이번 실험의 핵심은 무제한의 무질서를 화면에 도입하는 것이 아니라 변하지 않을 기본 구조와 변화가 허용되는 표면을 엄격하게 구분하는 데 있다. 최소와 최대의 범위, 단계적 간격을 지정하고 속성 간 난수 공유 방식을 정의하는 규격 초안의 설계는 이러한 의도된 편차를 기술적으로 제어할 수 있는 가능성을 보여준다.

동시에 화면에 비치는 시각적 표현과 보조 기술이 해석해야 하는 정보 구조를 나누어 설계함으로써 실험적인 디자인이 기본 사용성을 침해하지 않도록 기준을 세웠다. 정돈된 수학적 배열 위에서만 작동하는 제한된 난수는 디지털 화면의 단조로움을 보완하는 유효한 수단으로 자리 잡는다.

ARCH.B 의견

디자인 토큰을 하나의 고정된 수치로만 정의하던 기존 규칙에서 벗어나 허용 가능한 변화 범위를 토큰화하는 접근은 시스템의 유연성을 확장하는 계기가 될 수 있다. 모든 구성 요소가 완벽히 동일한 수치를 따르게 강제하기보다 어떤 요소에 어느 정도의 편차를 허용할 것인지 규정하면 일관된 질서 안에서도 자연스러운 시각적 다양성을 확보할 수 있다.

다만 시각적 편차를 부여하는 행위 자체가 자동으로 디자인의 완성도나 손으로 만든 듯한 감성을 담보해 주지는 않는다. 독자가 즉각 읽어내야 하는 핵심 제목이나 명확한 타깃 영역이 중요한 조작 버튼, 배경에 머무는 장식 요소 중 어디에 어느 수준의 차이를 둘 것인지 결정하는 편집적 판단이 기술 적용에 앞서야 한다.

기술적으로도 해당 규격은 완성된 권고안이 아닌 지속적인 논의가 필요한 편집자 초안 상태이므로 모든 브라우저 환경에서 동일한 동작을 전제로 삼기에는 한계가 따른다. 시연과 초안에서 확인해야 할 본질은 무작위성의 크기를 무작정 넓히는 것이 아니라 확고한 구조적 뼈대를 지키면서 변화를 어디에 어떻게 배분할 것인지에 대한 정밀한 경계 설정이다.