<aside> ✋

“창 크기가 바뀌어도 버튼이 영상의 특정 위치에 고정되게 해 주세요.”

</aside>

반응형 페이지에서 배경으로 영상이나 이미지가 깔리고, 그 위에 버튼이나 마커 같은 UI 요소가 정확한 위치에 떠 있어야 할 때가 있다. 이때 배경은 object-fit: cover 로 비율을 유지한 채 표시되기 때문에, 창 크기에 따라 가로나 세로가 잘리는 경우가 생긴다.

이번 문서에서는 이런 상황에서도 UI 요소가 배경의 특정 지점에 정확히 고정되도록 만드는 방법을 소개한다.

📌 마커 데이터 정리

const uiMarkers = [
  { id: 'marker_1', x: 800, y: 400, anchor: 'lt' },
  { id: 'marker_2', x: 600, y: 300, anchor: 'rb' },
  { id: 'marker_3', x: 1000, y: 500, anchor: 'lb' },
];

• uiMarkers : 마커 요소 배열. 각 항목은 개별 마커의 ID, 좌표( x , y ), 기준 앵커( anchor ) 정보를 담는다.
• anchor : 마커의 기준점을 의미하며, lt (left-top), rb (right-bottom) 등, 두 글자의 조합으로 정의한다.

사실 단순히 위치만 맞추려면 anchor 없이도 충분하지만, transform: scale() 을 활용한 애니 메이션을 적용할 때 기준 방향을 맞추기 위해 이 값이 필요했다.

이를 통해 왼쪽 위 기준으로, 또는 오른쪽 아래 기준으로 확대되는 느낌을 줄 수 있었다. (없으면 transform 이 중심 기준으로만 적용돼서 어색해질 수 있다.)

📐 위치 계산 및 배치

function positionUIMarkers() {
  const container = document.getElementById('media_container');
  const containerWidth = container.offsetWidth;
  const containerHeight = container.offsetHeight;
}

• container : 배경 이미지나 영상이 들어있는 컨테이너. 마커 위치 계산의 기준이 되는 요소이다.
• containerWidth , containerHeight : 현재 화면에 보이는 컨테이너의 실제 크기. 이 값을 기준으로 배경 요소가 얼마나 확대/축소됐는지 계산한다.

📊 원본 비율 기반 비율 비교

const mediaOriginalWidth = 1920;
const mediaOriginalHeight = 1080;
const mediaRatio = mediaOriginalWidth / mediaOriginalHeight;
const containerRatio = containerWidth / containerHeight;

• mediaOriginalWidth , mediaOriginalHeight : 배경 이미지나 영상의 원본 해상도. 기준 좌표가 이 해상도를 기반으로 설정되어 있다.