버튼을 누르면 그 아래에 메뉴가 펼쳐지고, 아이콘 옆에 작은 설명 풍선이 뜬다. 흔한 화면이지만, 그 풍선을 "버튼 바로 아래"에 정확히 붙이는 일은 늘 자바스크립트의 몫이었다. 이제 CSS만으로 이 일을 처리하는 Anchor Positioning이 등장했다.
왜 지금까지 자바스크립트가 필요했나
툴팁이나 드롭다운은 보통 화면 맨 위 레이어에 따로 그려진다. 그래야 다른 요소에 가리지 않기 때문이다. 그런데 따로 떠 있는 만큼, 정작 "어느 버튼 옆에 붙어야 하는지"는 CSS가 알지 못했다. 그래서 개발자는 버튼의 좌표를 자바스크립트로 측정하고, 스크롤이나 창 크기가 바뀔 때마다 그 값을 다시 계산해 풍선을 옮겨야 했다. Floating UI 같은 전용 라이브러리를 따로 얹는 이유가 여기에 있었다.
anchor-name과 anchor() — 요소를 묶는다
새 방식은 단순하다. 기준이 될 요소에 이름표를 붙이고, 따라다닐 요소가 그 이름을 참조한다.
- 기준 버튼에 anchor-name: --menu-btn 을 지정한다.
- 메뉴에 position-anchor: --menu-btn 으로 연결한다.
- 위치는 top: anchor(bottom) 처럼, 기준 요소의 특정 변을 기준으로 잡는다.
이렇게 묶어 두면 스크롤을 하든 창 크기가 바뀌든 메뉴가 버튼을 알아서 따라다닌다. 좌표를 다시 계산하는 코드가 한 줄도 필요 없다.
position-area로 배치를 한 줄에
변마다 값을 일일이 적는 대신 position-area 한 줄로 방향을 정할 수도 있다. position-area: bottom center 라고 쓰면 기준 요소 아래 가운데에, top span-right 이라고 쓰면 위쪽 오른편에 자리잡는다. 9칸 격자에 요소를 올려놓는다고 생각하면 직관적이다.
화면 밖으로 넘칠 땐 스스로 비킨다
가장 번거로웠던 문제는 "넘침"이었다. 버튼이 화면 맨 아래에 있으면 그 아래로 펼쳐진 메뉴가 잘려 버린다. 예전엔 이 경우를 감지해 위로 뒤집는 로직을 직접 짜야 했다. 이제는 position-try-fallbacks 로 대안 위치만 적어 두면, 공간이 모자랄 때 브라우저가 알아서 다른 자리로 메뉴를 옮긴다. flip-block 같은 키워드 한 단어로 "아래가 안 되면 위로"가 처리된다.
아직은 점진적 적용이 정답
좋은 기능이지만 모든 브라우저가 따라온 것은 아니다. 2024년 크로미움 계열(크롬·엣지)이 먼저 지원을 시작했고, 사파리와 파이어폭스는 아직 도입 중이거나 실험 단계다. 그래서 실무에서는 @supports (anchor-name: --x) 로 감싸 지원되는 곳에서만 적용하고, 지원되지 않는 브라우저에는 기존 방식이나 단순한 대체 위치를 함께 두는 점진적 적용이 안전하다. 핵심 동작이 이 기능에만 의존하지 않도록 설계하는 것이 중요하다.
화면의 작은 풍선 하나에도 "라이브러리를 더 얹을지, 플랫폼이 주는 기본기를 쓸지"라는 판단이 숨어 있다. CYAN은 작은 회사의 웹사이트를 만들 때, 당장의 화려함보다 몇 년 뒤에도 가볍게 유지되는 구조를 먼저 고민한다. 새 표준이 자리잡는 길목에서 무엇을 일찍 받아들일지 가늠하는 일도 그 일부다.