작은 회사 홈페이지에도 '떠 있는 창'은 생각보다 많다. 가격표 옆의 물음표를 누르면 뜨는 설명 말풍선, 상단 메뉴에서 펼쳐지는 하위 목록, 입력칸 아래로 내려오는 자동완성, 버튼 곁에 잠깐 뜨는 안내 툴팁. 이 창들의 공통 숙제는 하나다. 어느 요소에 얼마나 떨어져, 어느 방향으로 붙일 것인가. 지금까지 이 좌표 맞추기는 대부분 자바스크립트가 떠안아 왔다.
지금까지의 방식 — 좌표를 손으로 재는 일
기존에는 버튼의 화면상 위치를 getBoundingClientRect로 재고, 거기에 말풍선을 절대 위치로 얹은 뒤, 스크롤과 창 크기 변화가 있을 때마다 그 계산을 다시 돌려야 했다. 화면 오른쪽 끝에 붙은 버튼이면 말풍선이 화면 밖으로 삐져나가지 않게 방향을 뒤집는 로직까지 얹는다. 이 일을 대신해 주는 것이 Popper.js, Floating UI 같은 좌표 계산 라이브러리였고, 툴팁 하나 띄우려고 수십 KB짜리 코드를 통째로 짊어지는 경우가 흔했다.
CSS 앵커 포지셔닝이 바꾸는 것
앵커 포지셔닝(anchor positioning)은 이 '붙이기'를 CSS의 일로 되돌린다. 기준이 될 요소에 이름표를 붙이고, 떠 있는 창에는 그 이름표를 보고 어디에 앉을지만 적으면 된다. 브라우저가 스크롤과 리사이즈에 맞춰 위치를 알아서 따라가므로, 매 프레임 좌표를 다시 재는 코드가 사라진다.
이름표 붙이고 그 곁에 앉히기
기준 요소에 anchor-name으로 이름을 정하고, 떠 있는 요소에 position-anchor로 그 이름을 연결한 뒤 position-area로 위·아래·좌·우 어느 구역에 놓을지 지정한다. 예를 들어 버튼에 anchor-name: --tip을 주고, 말풍선에 position-anchor: --tip; position-area: top;이라고 적으면 말풍선이 버튼 바로 위에 붙는다. 미세 조정이 필요하면 anchor() 함수로 기준 요소의 특정 모서리를 짚어 값으로 쓸 수도 있다.
화면 밖으로 넘칠 때 방향 뒤집기
가장 손 많이 가던 부분, 즉 '화면 가장자리에서 방향 뒤집기'도 position-try-fallbacks 한 줄로 맡길 수 있다. 위에 놓을 자리가 부족하면 아래로, 오른쪽이 막히면 왼쪽으로 브라우저가 대체 위치를 시도한다. 예전 같으면 조건문으로 일일이 배선하던 일이다.
실무에서 지금 쓸 수 있나
2025년 기준, 앵커 포지셔닝은 크롬 계열 브라우저에서 먼저 지원이 자리 잡았고 사파리·파이어폭스는 뒤따르는 단계다. 따라서 핵심 기능은 이 기술 없이도 동작하게 만들고, 붙는 위치는 앵커 포지셔닝으로 '더 매끄럽게' 얹는 점진적 적용이 안전하다. 미지원 브라우저에서는 기존 방식이나 단순한 기본 위치로 물러서게 두면 된다. HTML의 popover 속성과 함께 쓰면 자바스크립트를 더 크게 덜어낼 수 있다.
작은 회사에 이게 왜 중요한가
기술 자체보다, 이 흐름이 가리키는 방향이 중요하다. 예전엔 화면 곳곳의 자잘한 동작마다 자바스크립트가 얹혔고, 그만큼 코드가 무거워지고 깨질 곳도 늘었다. 로딩이 느려지고 유지보수가 어려워지는 원인이 여기 쌓인다. 앵커 포지셔닝처럼 브라우저가 표준으로 떠안는 기능이 늘수록, 같은 화면을 더 가볍고 덜 깨지게 만들 수 있다. 홈페이지를 오래 데리고 갈 작은 회사일수록 체감이 큰 대목이다.
CYAN에서 웹사이트를 만들 때도, 당장 화려한 라이브러리를 얹기보다 브라우저 표준으로 대체할 수 있는 부분은 표준으로 덜어내는 쪽을 먼저 살핀다. 지금 잘 도는 것보다, 몇 년 뒤에도 가볍게 남는 화면이 결국 손이 덜 가기 때문이다.
