요약

  • W3C가 2023년 6월 처음 공개한 CSS Anchor Positioning 초안은 떠 있는 요소가 페이지의 다른 곳에 있는 기준 요소를 따라 위치와 크기를 정하고, 넘칠 때 대안을 시험하도록 했다.
  • 2024년 초안은 기본 기준 요소와 position-try 계열의 대체 자리 선택을 다듬었다. 사이트가 후보와 순서를 정하고 브라우저가 실제로 들어갈 공간을 잰다.

가입 양식에 낯선 항목이 있다. 그 옆의 조그만 도움말 버튼을 누르면 독자는 그 자리에서 짧은 설명을 기대한다. 넓은 화면에서는 버튼 오른쪽에 말풍선을 띄우면 된다. 휴대전화에서는 버튼 자체가 오른쪽 가장자리에 닿아 있을 수 있다. 똑같은 선택을 밀어붙이면 정작 필요한 단어가 화면 밖으로 사라진다. 도움말은 버튼을 따라갔지만 독자를 놓쳤다. 개발자는 다시 top, left, 보정값을 꺼내 화면마다 줄자로 재는 일을 시작한다.

2023년 6월 29일 W3C 첫 공개 초안은 이 위치 관계를 CSS의 언어로 적었다. 위치가 지정된 요소는 페이지의 다른 곳에 있는 하나 이상의 앵커 요소를 기준으로 자기 자리와 크기를 정할 수 있다. anchor-name이 기준에 이름을 붙이고, anchor()와 anchor-size()가 그 위치나 크기를 쓴다. 말풍선은 독립된 상자이지만 어떤 버튼을 따라야 하는지 알게 된다. 위쪽 글이 길어져 버튼이 아래로 밀리면 기준도 함께 움직인다. 말풍선이 어제의 좌표에 홀로 남을 이유가 없다.

브라우저는 두 상자를 화면에 그려야 하므로 이미 기하학적 크기와 위치를 안다. 사이트는 어떤 버튼에 어떤 설명을 붙일지, 어느 쪽을 먼저 선호할지 결정한다. 공통의 측정은 배치 엔진이 맡고, 사이트마다 작은 좌표 계산기를 만들 필요가 줄어든다. 다만 독자가 버튼과 설명을 쉽게 연결하려면 오른쪽, 왼쪽, 위, 아래 가운데 무엇을 먼저 선택해야 할지 편집 판단은 남는다.

화면 끝에 다다르면 첫 선택만으로는 부족하다. 2023년 6월 초안은 position-fallback과 @position-fallback으로 대체 규칙 목록을 제시했다. 선호한 자리가 포함 블록 밖으로 넘치면 브라우저가 후보를 순서대로 시험해 들어맞는 자리를 고른다. 사이트가 좌석표를 만들고 브라우저가 빈자리를 확인한다. 오른쪽에서 왼쪽으로 이동한 말풍선은 즉흥 공연을 하는 것이 아니라, 가장자리에서 쓸 순서를 따른다.

2024년 3월 14일 초안은 position-anchor로 기본 앵커를 더 뚜렷하게 지정했다. 대체 자리에는 position-try-options, position-try-order, position-try로 이어지는 계열이 등장했다. 버튼은 그대로고 화면 끝도 그대로였다. 달라진 것은 두 번째와 세 번째 자리를 작성자가 어떻게 적는가였다. CSS 속성 이름마저 몇 개의 의자를 옮겨 앉으며 자리를 찾았다.

2024년 3월 26일 초안은 앵커를 찾는 과정과 넘침을 처리하는 방법을 계속 다듬었다. 긴 기사 옆에 붙는 주석도 같은 문제를 만난다. 주석은 자신이 설명하는 문장 가까이 있어야 한다. 그 문장이 오른쪽 경계에 있으면 주석은 왼쪽으로 돌아갈 수 있다. 발행자는 문장과 주석의 관계가 읽히는 후보를 정하고, 브라우저는 어느 후보가 실제 공간에 들어가는지 잰다. 말의 의미와 상자의 위치가 각자 제 일을 한다.

2024년 10월 4일 초안에는 대체 자리 목록을 나타내는 position-try-fallbacks가 등장한다. 2023년의 position-fallback, 2024년 3월의 position-try-options와는 날짜가 다른 이름이다. 이름이 바뀐 기록은 작업 그룹이 하나의 실용적 난제를 여러 번 설명해 본 흔적이다. 버튼이 어느 가장자리에 설지 미리 숫자로 못 박기 어렵다. 그래도 자리가 없을 때 어디를 다음에 볼지는 명확히 적을 수 있다.

W3C 공개 이력은 2023년 첫 초안과 2024년 개정을 이어 준다. 브라우저는 앵커 상자와 도움말 상자, 남은 공간을 잰다. 사이트는 도움말의 문장과 버튼, 받아들일 수 있는 자리의 순서를 고른다. 독자가 필요한 것은 올바른 버튼 곁에서 끝까지 읽히는 설명이다. 오른쪽이 막혔다면 왼쪽에 자리를 잡으면 된다.

줄자는 서랍으로 돌아간다. 이제 말풍선이 해야 할 일은 측량이 아니라 설명이다.