Popper.js는 잊어라! 자바스크립트 없이 구현하는 초고속 CSS Anchor Positioning API

자바스크립트 라이브러리(Popper.js, Floating UI) 없이 네이티브 CSS Anchor Positioning API로 고성능 툴팁, 드롭다운을 구현하는 실무 가이드입니다. 핵심 개념, 실전 코드, 화면 자동 반전, Popover API 연계까지 완벽 정리! 코드 슬림화와 웹 성능 최적화를 한 번에 달성하세요.

CSS Anchor Positioning API

 

👋 툴팁 위치 잡기, 아직도 자바스크립트 라이브러리에 의존하시나요?

혹시 웹사이트를 만들면서 툴팁(Tooltip), 드롭다운(Dropdown) 메뉴의 위치를 잡기 위해 고민해 보신 적 있으신가요?

화면 끝에 걸릴 때 자동으로 위치를 바꿔주거나, 스크롤을 해도 따라다니게 하는 등, 그동안 이런 'Floating UI'를 구현하기 위해 우리는 Popper.js나 Floating UI 같은 무거운 자바스크립트 라이브러리에 의존해 왔습니다. 하지만 이제는 그럴 필요가 없습니다!

자바스크립트로 요소를 위치시키는 방식은 브라우저의 레이아웃 엔진이 계산을 마친 후 다시 계산해야 하는 리플로우(Reflow) 현상을 유발하여 성능 저하의 원인이 되기도 합니다. 특히 애니메이션과 결합했을 때 뚝뚝 끊기는 느낌을 주기도 하죠. 하지만 이제 브라우저 내장 기능인 CSS Anchor Positioning API를 사용하면 자바스크립트 한 줄 없이도 훨씬 매끄럽고 슬림한 코드로 고성능 UI를 구현할 수 있습니다. 무거운 도구들에서 벗어나 브라우저가 직접 제공하는 강력한 네이티브 기술의 세계로 여러분을 초대합니다.

---

🔗 핵심 개념: 앵커(Anchor)와 타겟(Target)을 연결하는 새로운 방식

바로 전 포스팅에서 Popover API와 <dialog> 요소를 통해 네이티브 팝업 구현 방법을 알아보았는데요. 팝오버의 유일한 단점이 바로 '위치 제어'였습니다. <dialog>는 기본적으로 중앙에 뜨거나, inset 속성으로만 위치를 잡을 수 있었죠. 하지만 CSS Anchor Positioning API는 이 단점을 완벽하게 메꿔줍니다!

 

라이브러리 없이 구현하는 고성능 모달: Popover vs Dialog 비교 분석

Anchor Positioning은 마치 "브라우저가 두 요소를 보이지 않는 끈으로 묶어주는 것"과 같습니다. 하나의 기준 요소(Anchor)를 지정하고, 그 주변에 위치할 요소(Target)를 이 기준 요소와 연결하는 방식이죠. 앵커 요소의 크기나 위치가 바뀌어도 타겟 요소는 자동으로 그 변화를 따라다닙니다. 이 기술은 자바스크립트의 도움 없이 브라우저 레이아웃 엔진이 직접 계산하기 때문에 웹 성능 최적화에 매우 유 효과적입니다.

 

반응형

 

⚙️ 실전 레시피: anchor-name과 position-anchor로 요소 커플링하기

그럼 이제 본격적으로 코드를 작성해 볼까요? 가장 먼저 할 일은 기준이 될 요소에 이름을 붙여주는 것입니다. CSS 속성인 anchor-name을 사용합니다. 이름은 --로 시작하는 대시 이름을 사용해야 합니다.

/* 앵커(기준) 요소 */
.my-anchor-button {
  anchor-name: --my-tooltip-anchor;
}

이제 이 기준 요소에 연결할 타겟 요소를 지정합니다. position-anchor 속성을 사용하여 방금 지어준 이름을 넣어줍니다.

/* 타겟(툴팁) 요소 */
.my-tooltip {
  position: absolute;
  position-anchor: --my-tooltip-anchor;
}

이렇게 하면 두 요소는 보이지 않는 끈으로 연결되었습니다. 이제 타겟 요소의 구체적인 위치를 잡을 차례입니다. top: anchor(bottom);처럼 anchor() 함수를 활용하여 기준 요소의 특정 지점을 참조할 수 있습니다. 아래 코드는 앵커 요소의 아래쪽에 툴팁을 위치시키는 예시입니다.

.my-tooltip {
  /* ... */
  /* 툴팁의 상단이 앵커의 하단에 맞춤 */
  top: anchor(bottom);
  /* 툴팁의 좌측이 앵커의 좌측에 맞춤 */
  left: anchor(left);
}

이 함수를 통해 앵커 요소의 top, bottom, left, right 등 다양한 지점을 기준으로 타겟 요소를 정교하게 배치할 수 있습니다.

 

🧠 지능적 배치: 화면 끝을 감지하는 position-try-options의 마법

자동 위치 반전은 Floating UI 구현에서 가장 까다로운 부분 중 하나였습니다.

화면 공간이 부족할 때 툴팁이 위아래로 자동으로 뒤집히는 기능은 자바스크립트 라이브러리를 쓰는 핵심 이유였죠. 하지만 CSS Anchor Positioning API는 position-try-options라는 마법 같은 속성으로 이 문제까지 해결해 줍니다!

.my-tooltip {
  /* ... */
  /* 기본 위치 */
  top: anchor(bottom);
  left: anchor(left);

  /* 화면 공간 부족 시 시도할 위치 옵션들 */
  position-try-options: flip-block, flip-inline;
}

position-try-options에 flip-block (상하 반전), flip-inline (좌우 반전) 등의 값을 지정하면, 브라우저는 타겟 요소를 배치할 공간이 부족할 때 자동으로 지정한 반전 동작을 시도합니다. 마치 지능적인 브라우저가 직접 상황을 판단하여 최적의 위치를 찾아주는 것 같죠? 덕분에 우리는 복잡한 로직을 작성할 필요 없이, 단 몇 줄의 CSS만으로 화면 반응형 툴팁을 구현할 수 있습니다.

 

728x90

 

🤝 환상의 짝꿍: Popover API와 Anchor Positioning의 결합 실무 예제

드디어 실무에서 바로 활용할 수 있는 예제를 만들어 보겠습니다. 버튼(Anchor)을 클릭했을 때 그 바로 아래에 나타나는 팝오버(Target) UI를 구현하는 HTML/CSS 코드입니다. 전 포스팅의 Popover API와 오늘 배운 Anchor Positioning API를 함께 사용합니다.

<button class="anchor-button" popovertarget="my-popover">
  툴팁 보기
</button>

<div id="my-popover" popover>
  <p>안녕하세요! 네이티브 CSS만으로 구현된 툴팁입니다.</p>
</div>

/* 기본 스타일링 */
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.anchor-button { padding: 10px 20px; font-size: 16px; cursor: pointer; anchor-name: --my-popover-anchor; /* 앵커 이름 지정 */ }

/* 팝오버 스타일 */
#my-popover {
  border: 1px solid #ccc;
  padding: 15px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border-radius: 5px;
  
  /* Anchor Positioning 설정 */
  position-anchor: --my-popover-anchor; /* 앵커 연결 */
  position-visibility: anchors-visible; /* 앵커가 보일 때만 팝오버 표시 */
  
  /* 기본 위치: 앵커 아래쪽 */
  top: anchor(bottom);
  left: anchor(left);
  
  /* 자동 반전 설정 */
  position-try-options: flip-block;
  
  /* 여백 및 스타일링 */
  margin-top: 8px; /* 앵커와 팝오버 사이 간격 */
  width: max-content; /* 내용물에 맞게 너비 조절 */
}

이제 버튼을 클릭하면 툴팁이 나타나며, 화면 공간이 부족할 때는 자동으로 위쪽으로 뒤집혀 표시됩니다. 자바스크립트 한 줄 없이도 이 모든 것이 가능합니다!

 

🚀 2026년 퍼블리싱의 표준, 네이티브로 회귀하는 UI 로직

우리는 그동안 웹사이트의 동적인 기능을 구현하기 위해 자바스크립트에 지나치게 의존해 왔습니다. 하지만 최근 브라우저 기술의 발전은 다시 네이티브로의 회귀를 이끌고 있습니다. CSS Anchor Positioning API는 그 선두에 서 있으며, 성능과 코드 슬림화를 동시에 달성할 수 있는 강력한 도구입니다.

더 나아가, View Transitions API와 함께 사용하여 툴팁이 나타날 때의 부드러운 전환 효과까지 곁들이면 이전 포스팅들과의 유기적인 결합을 구성해 줘요. 앞으로 자바스크립트 라이브러리 대신 브라우저가 제공하는 네이티브 기술을 적극적으로 활용하여 더 빠르고 효율적인 웹사이트를 만들어 보시기 바랍니다. 2026년, 퍼블리싱의 표준은 바로 여러분의 손에 달려 있습니다!

---

오늘은 자바스크립트 라이브러리 없이 구현하는 고성능 CSS Anchor Positioning API에 대해 알아보았습니다. 더 이상 무거운 도구들에 의존하지 않고도 웹 성능을 최적화하고 코드 슬림화를 달성할 수 있다는 점이 정말 매력적이죠? 이번 포스팅을 통해 여러분의 실무 프로젝트에 네이티브 기술을 적용하는 데 도움이 되었기를 바랍니다.