요약

  • W3C의 2016년 6월 첫 공개 초안은 JavaScript에서 사용자 정의 속성을 타입, 초기값, 상속 방식과 함께 등록하도록 제안했다. 그라데이션 색을 움직이는 예도 실렸다.
  • 2019년 초안에는 CSS의 @property가 추가됐다. 2024년 초안은 계산값 단계의 타입 검사와 한 문서에서 공유하는 등록 이름의 의미를 자세히 다뤘다.

디자이너는 빨간 견본과 초록 견본을 꺼내 1초 동안 서서히 바뀌는 그라데이션을 만들고 싶다. --stop-color에 두 색을 넣고 전환을 지정한다. 이름에 color가 있으니 브라우저도 알아들을 것 같다. 하지만 브라우저가 받은 것은 다양한 CSS 토큰을 담을 수 있는 상자다. 매 프레임 어떤 중간색을 그릴지 알려면 정식 타입이 필요하다. 면접장에 값 꾸러미를 가득 들고 왔지만 이력서의 직무 칸은 비어 있는 셈이다. 색은 길을 걷지 않고 한쪽 끝에서 다른 끝으로 뛰어간다.

2016년 6월 7일 W3C의 첫 공개 초안은 등록이라는 직무 칸을 제안했다. CSS Variables를 확장해 값의 타입, 초기값, 상속 여부를 알리는 방식이다. 당시 통로는 JavaScript의 CSS.registerProperty()였다. 초안은 --stop-color를 <color>로 등록하고 투명한 시작값, inherits: false를 정한 뒤 마우스를 올리면 빨강에서 초록으로 바꿨다. 브라우저가 색이라는 사실을 알자 사이에 놓일 색도 계산할 수 있다. 변수 이름의 철자만으로는 그 일을 맡길 수 없었다.

2017년 11월 9일 초안도 등록과 타입을 이용한 움직임을 발전시켰다. 이때 보존된 원문에서 등록은 여전히 JavaScript의 일이다. 지금 친숙한 CSS 규칙 @property는 그다음 장에 등장한다. 먼저 해결한 것은 브라우저에 어떤 정보를 줄 것인가였다. 다음 질문은 그 정보를 스타일을 쓰는 자리에서도 적을 수 있는가였다.

2019년 10월 25일 초안에는 두 문이 나란히 열린다. 스크립트의 CSS.registerProperty()와 스타일시트의 @property다. CSS 규칙은 syntax, inherits, initial-value를 밝힌다. 원을 그리는 --radius 근처에서 그 이름이 길이를 뜻하고, 0에서 시작하고, 자식에게 기본적으로 넘어가지 않는다는 설명을 읽을 수 있다. 계약서가 작업대 옆으로 옮겨온 셈이다.

2020년 10월 13일 초안은 두 통로와 애니메이션 예를 유지했다. 타입을 알면 화면에서 차이가 난다. 색은 다른 색들을 거쳐 이동하고, 길이는 다른 길이들을 거쳐 이동한다. <length>로 등록한 --radius는 그려진 원을 10픽셀에서 50픽셀로 키울 때 중간 크기를 모두 계산하게 한다. 브라우저는 ‘작음’과 ‘큼’이라는 두 표지만 바꾸는 대신 각 프레임에 할 일이 생긴다.

2024년 3월 26일 초안은 유효한 등록의 조건을 자세히 적었다. @property에는 syntax와 inherits가 있어야 한다. 만능 구문 *가 아니라 특정 타입을 선언했다면, 유효하고 독립적으로 계산할 수 있는 initial-value도 필요하다. 무엇을 받아들이는지, 아무 값도 없을 때 어디서 시작하는지, 자식이 기본적으로 값을 물려받는지에 대한 답이다. 필수 답이 빠지면 등록 규칙 전체가 무효가 된다. 반쪽짜리 이력서로는 길이의 중간값을 계산할 수 없다.

타입 검사는 스타일시트를 처음 읽을 때가 아니라 계산값을 만들 때 한다. 초안은 그 이유도 설명한다. 스크립트가 CSS 선언을 읽은 뒤에 이름을 등록할 수 있다. 아직 알려지지 않은 타입과 안 맞는다고 선언을 즉시 버리면, 나중에 등록이 도착했을 때 버린 내용을 모두 보관해 두었거나 스타일시트 전체를 다시 읽어야 한다. 검사 자리에는 순서가 있다. var()로 값을 대입하기 전 계산 단계가 그 자리다.

등록된 이름은 컴포넌트 안에만 숨지 않는다. 2024년 문서의 등록 지도는 Shadow DOM 안의 규칙까지 문서 전체에서 공유한다. 같은 이름으로 유효한 @property가 여럿이면 스타일시트 순서상 마지막 규칙이 이기고, JavaScript 등록은 같은 이름의 CSS 규칙보다 앞선다. 두 컴포넌트가 --radius를 각자 개인 물건처럼 쓰더라도 브라우저에는 한 이름의 의미가 하나 필요하다. 초안은 컴포넌트의 독립성과 바깥 페이지에서 타입 있는 값을 보내려는 요구가 여기서 충돌한다고 설명한다.

W3C 발행 이력에는 2016년부터 2024년까지의 수정 단계가 있다. 면접을 마친 변수는 타입과 출발점, 상속 규칙을 적은 서류를 들고 나온다. 빨강에서 초록으로 가는 애니메이션에도 드디어 중간 길이 생겼다.