버튼 옆에 작은 설명창 하나를 띄우는 일은 간단해 보인다. 버튼의 위치를 구하고, 그 아래에 설명창을 배치하면 된다.
문제는 그다음이다. 화면 끝에서는 설명창이 잘리고, 스크롤하면 버튼과 떨어지며, 문장이 길어지면 처음 계산한 위치가 맞지 않는다. 작은 UI에 좌표 계산과 예외 처리가 계속 붙는다.
CSS 앵커 포지셔닝은 이 문제를 다른 방식으로 풀어낸다. 직접 좌표를 계산하는 대신 “이 요소를 저 버튼에 붙여 배치하라”는 관계를 선언한다.
새 기술이라기보다, 이제 적용을 검토할 만한 기술
CSS 앵커 포지셔닝이 이번 달 처음 나온 것은 아니다. 다만 2026년 1월 Firefox 147 지원과 함께 Baseline Newly available에 포함되면서, 주요 브라우저의 최신 버전에서 활용할 수 있는 기반이 마련됐다. 이는 오래된 브라우저까지 모두 지원한다는 뜻과는 다르다. 웹 플랫폼 2026년 1월 업데이트
개발 도구도 따라오고 있다. 10월 20일 공개된 Chrome DevTools 업데이트에는 position-area를 시각적으로 편집하는 기능이 소개됐다. 배치 값을 바꾸며 위치를 확인하는 작업이 도구 안으로 들어온 것이다. Chrome DevTools 업데이트
지금 살펴볼 이유는 “새로운 CSS 속성이 생겼다”는 사실보다, 그동안 직접 관리하던 배치 로직을 브라우저에 맡길 수 있는 범위가 넓어졌다는 데 있다.
여는 동작과 배치하는 동작을 나누면 간단해진다
버튼을 누르면 설명이 나타나는 UI를 생각해보자. 여기에는 서로 다른 두 가지 일이 섞여 있다.
- 설명창을 열고 닫는다.
- 열린 설명창을 버튼 근처에 배치한다.
첫 번째는 HTML의 popover, 두 번째는 CSS 앵커 포지셔닝이 맡도록 구성할 수 있다.
다음은 두 기능을 지원하는 브라우저를 위한 최소 예제다. 마우스를 올리면 나타나는 툴팁이 아니라, 버튼을 눌러 여는 비모달 안내창이다.
1 2 3 4 5 6 7 8 9 10 11<button type="button" class="delivery-button" popovertarget="delivery-info" > 배송 안내 </button> <div id="delivery-info" popover> 주문 확인 후 영업일 기준 2~3일 이내에 발송합니다. </div>
popovertarget은 열 대상의 id를 가리킨다. 기본 자동 팝오버는 버튼으로 토글할 수 있고, 바깥 영역 클릭이나 Escape 키로 닫을 수 있다. 열린 요소는 최상위 레이어에 표시된다. 다만 팝오버 자체는 모달이 아니므로, 배경 조작을 막는 확인창과는 용도가 다르다. MDN popover 문서
이제 위치를 연결한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25.delivery-button { anchor-name: --delivery; } #delivery-info { position: fixed; position-anchor: --delivery; /* 팝오버의 기본 중앙 배치를 해제한다. */ inset: auto; margin: 0; position-area: bottom; margin-block-start: 0.5rem; position-try-fallbacks: flip-block; box-sizing: border-box; width: min(20rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid #ddd6fe; border-radius: 0.75rem; background: #fff; color: #252033; line-height: 1.6; }
읽는 순서도 어렵지 않다.
anchor-name으로 버튼에 이름을 붙이고, 설명창의 position-anchor에서 그 이름을 참조한다. position-area: bottom은 버튼 아래쪽 배치를 지정한다.
아래쪽 공간이 부족하면 position-try-fallbacks: flip-block으로 반대쪽 배치를 시도한다. 일반적인 가로쓰기 환경에서는 위아래를 뒤집는 방식이다. 모든 방향의 넘침을 한 번에 해결하는 옵션은 아니라는 점도 기억해야 한다. CSS 앵커 포지셔닝 공식 문서
이 예제에는 버튼의 좌표를 읽는 코드도, 스크롤할 때마다 위치를 갱신하는 이벤트 처리도 없다. 배치 관계를 CSS로 표현했기 때문이다.
그렇다고 기존 라이브러리를 바로 지울 필요는 없다
이 기능을 도입하는 기준은 코드 줄 수보다 컴포넌트가 맡고 있는 책임이어야 한다.
단순한 안내창이라면 브라우저 기본 기능만으로 충분할 수 있다. 반면 검색 가능한 콤보박스나 중첩 메뉴에는 배치 외에도 키보드 탐색, 선택 상태, 포커스 이동 같은 요구사항이 붙는다.
앵커 포지셔닝은 위치를 정하는 기능이지, 이런 동작까지 완성해주는 컴포넌트는 아니다. 시각적으로 연결했다고 접근성 의미 관계까지 자동으로 생기는 것도 아니다. [접근성 관련 주의사항](https://developer.chrome.com/docs/css-ui/anchor-positioning-api# a-note-on-accessibility)
기존 라이브러리를 사용하고 있다면 다음처럼 접근하는 편이 낫다.
“이 라이브러리를 CSS로 대체할 수 있는가?”보다 “현재 기능 중 배치만 브라우저에 맡길 수 있는가?”를 먼저 묻는다.
배치 코드만 줄어들어도 충분한 변화다. 이미 검증한 상호작용까지 한 번에 다시 만들 이유는 없다.
실제 적용에서는 예쁜 화면보다 가장자리부터 확인한다
첫 검토 대상으로는 복잡한 메뉴보다 단일 버튼에 연결된 안내창을 권한다. 동작이 단순해 배치 문제를 분리해서 보기 쉽기 때문이다.
중앙에 놓인 버튼에서 잘 뜨는지만 확인해서는 부족하다. 화면 맨 아래로 옮겨보고, 좁은 모바일 화면에서도 열어보며, 안내 문장을 두세 배로 늘려보는 편이 좋다. 확대된 화면과 내부 스크롤 영역에서도 버튼과 설명창의 관계가 유지되는지 확인해야 한다.
반복되는 목록 안에 적용할 때는 위 예제의 이름을 그대로 복사하는 것도 주의해야 한다. 이 코드는 단일 버튼용이다. 여러 인스턴스에서는 팝오버의 id와 앵커 연결이 서로 섞이지 않도록 설계해야 한다.
미지원 환경의 동작도 별도로 정한다. 예를 들어 아래처럼 배치 관련 스타일만 지원 조건 안으로 옮기면, Popover API는 지원하지만 앵커 포지셔닝은 지원하지 않는 환경에서 기본 중앙 배치를 유지하는 방식으로 구성할 수 있다.
1 2 3 4 5@supports (anchor-name: --delivery) and (position-area: bottom) and (position-try-fallbacks: flip-block) { /* 앵커 연결과 위치 재정의 스타일을 여기에 둔다. */ }
단, 이 조건은 CSS 문법 지원을 확인할 뿐이다. Popover API 자체를 지원하지 않는 브라우저까지 처리해주지는 않는다. 필수 안내라면 일반 본문에서도 읽을 수 있게 하거나, 별도의 대체 UI를 준비해야 한다.
프론트엔드에서 새로운 기술의 가치는 더 많은 것을 구현할 수 있다는 데만 있지 않다. 예전에는 직접 관리해야 했던 일을 더 이상 관리하지 않아도 되는 데에도 있다.
CSS 앵커 포지셔닝은 JavaScript를 없애는 기술이라기보다, 요소 사이의 배치를 다시 CSS의 역할로 돌려놓는 기술에 가깝다.
다음에 버튼 옆 안내창을 만들 일이 생긴다면, 좌표 계산부터 시작하기 전에 배치 관계만