색 하나를 바꿨다. 버튼마다 공지가 돌았다.

요약

• W3C가 2012년 4월 10일 공개한 첫 CSS Variables 작업 초안은 스타일시트에 같은 값을 거듭 적는 비용에서 출발했다. 당시에는 var-color를 정의하고 var(color)로 읽었으며, 각 요소의 실제 값은 계단식 규칙이 골랐다.
• 2015년 12월 3일의 후보 권고안은 --main-color와 var(--main-color)를 썼다. 2022년 6월 16일의 후보 권고안 스냅샷은 대체값과 없거나 순환하는 참조를 다뤘다. 공통 색은 문서 가지를 따라 내려가다가 지역 구성 요소에서 달라질 수 있다.

편집장이 버건디색을 덜 엄숙하게 만들자고 했다. 새 색을 고르기보다 예전 색의 복사본을 모두 찾는 일이 더 컸다. 버튼, 링크, 공지 칸, 몇 차례 개편을 견딘 오래된 제목에 값이 따로 살고 있었다. 서른 군데를 고칠 수는 있다. 서른한 번째를 잊는 것도 충분히 가능하다. 그러면 절반의 직원만 새 복장 규정을 읽은 회의처럼 보인다. CSS 변수는 색에 이름을 붙이고 필요한 곳에서 그 이름을 부르자고 했다.

W3C가 2012년 4월 10일 공개한 첫 CSS Variables 작업 초안은 바로 이런 유지 관리 문제를 앞세웠다. 큰 스타일시트에서 색과 다른 값이 반복되면 문자열을 한꺼번에 바꾸다가 엉뚱한 곳을 건드리거나 다른 파일을 놓칠 수 있다. 초안은 작성자가 정한 이름으로 변수 속성을 만들고 일반 CSS 값에서 참조하게 했다. 뿌리에 적힌 색은 후손에게 전달되지만, 어느 값이 적용될지는 기존 계단식 규칙이 정한다. 파일 전체의 문자를 기계적으로 바꾸는 방식보다 수신 주소를 따지는 배달이다.

2012년의 표기는 지금과 달랐다. 초안은 var-color를 쓰고 var(color)로 읽었다. 예시는 뿌리에 파랑을 두고 div에 초록을, 경고 요소에 빨강을 놓는다. 같은 이름을 읽더라도 요소가 어느 가지에 있느냐에 따라 값이 바뀐다. 본사는 공통 공지를 보냈지만 지점은 자기 문에 새 안내문을 붙일 수 있다. 이 지역성과 상속이 이름을 단순한 색상표보다 쓸모 있게 만들었다.

이름끼리 책임을 돌리는 일도 있다. 한 변수가 다른 변수를 가리키고, 그 변수가 다시 첫 번째를 가리키면 순환 참조다. 2012년 초안은 이런 관계를 유효하지 않은 변수로 설명했다. 첫 사무실에 색을 물으면 옆방으로 보내고, 옆방은 다시 첫 사무실로 돌려보낸다. 복도 끝에 숨은 물감은 없다. 브라우저는 계산 규칙을 적용하고 그 사슬에 의존한 선언의 결과를 정한다. 복사본이 줄어든 대신 의존 관계가 눈에 들어왔다.

W3C의 2015년 12월 3일 후보 권고안에는 익숙한 표기가 나온다. --main-color로 사용자 지정 속성을 정의하고 var(--main-color)로 읽는다. 예시는 뿌리에서 주요 색을 정해 다른 규칙과 그 색을 활용한 배경에 쓴다. 이름 붙인 값을 바꾸면 그것에 의존한 부분이 함께 바뀐다. 편집부는 버튼 서랍을 하나씩 열어 보지 않아도 된다.

어느 버튼이 공지를 받는지는 여전히 계단식 규칙이 결정한다. 한 구성 요소가 자기 --main-color를 정의하면 그 후손은 지역 값을 읽는다. 사이트 전체가 버건디를 유지해도 구독 패널은 청록색이 될 수 있다. 예상과 다른 색이 보일 때 이름의 첫 검색 결과만 읽어서는 부족하다. 상속과 지역 재정의를 거쳐 그 요소에서 어떤 선언이 이겼는지 확인해야 한다. 같은 이름으로 불러도 도착 주소가 다르면 답이 달라진다.

W3C의 2022년 6월 16일 후보 권고안 스냅샷은 공지가 오지 않았을 때의 예비 색을 설명한다. var(--header-color, blue)에서 두 번째 인자가 대체값이다. 재사용 가능한 구성 요소는 기본 색을 챙기면서 더 큰 애플리케이션이 제공한 색도 받아들일 수 있다. 대체값 안에는 쉼표가 들어갈 수도 있다. 첫 구분 쉼표 뒤가 그 대체값 전체다. 손님이 자기 외투를 갖고 오되 집에서 건네준 외투도 입을 수 있는 셈이다.

없는 값이나 순환 참조의 결과는 계산 시점에 드러난다. 브라우저는 var()가 있는 선언을 읽을 때 대입될 내용을 아직 모를 수 있다. 찾는 속성이 없거나 유효하지 않고 쓸 만한 대체값도 없으면 의존한 선언은 의도한 색을 내지 못한다. 디자인 검토에서는 이 버튼이 뿌리의 값을 상속했는지, 지역 정의를 받았는지, 대체값을 썼는지, 선언이 무효가 됐는지를 묻는 편이 낫다. 답은 첫 검색 결과가 아니라 그 요소의 계산된 스타일에 있다.

세 문서는 문법이 변해 온 시간도 보여 준다. 2012년 작업 초안의 var-color와 var(color), 2015년 후보 권고안의 --main-color와 var(--main-color), 2022년 문서의 더 자세한 대체값과 무효값 규칙은 같은 날의 한 장짜리 설명서가 아니다. 오래된 예시를 현재의 작성법으로 착각하면 곤란하다. 이어지는 생각은 분명하다. 값에 이름을 붙이고 CSS 계단식을 따라 보내며, 필요한 가지에서 다른 답을 할 수 있다.

편집부가 이제 정할 문제는 색의 공유 범위다. 뿌리의 버건디는 출판물에 통일감을 준다. 경고 칸에는 별도의 팔레트가 필요할 수 있다. 다른 곳으로 옮겨 다니는 구성 요소는 대체 색을 주머니에 넣는다. 브라우저가 배달과 계산을 맡고 편집자가 완성된 화면의 어울림을 판단한다. 버튼들이 이번에는 “공지를 못 받았다”고 말하기 어렵다.