[CSS] CSS absolute 좌표가 자꾸 틀어질 때｜vw와 % 기준 차이

이미지 위에 API나 서버에서 전달받은 데이터를 특정 위치에 표시해야 할 때, 반응형에서도 좌표가 안정적으로 유지되도록 잡는 방법을 정리해 봤다.

 

반응형 이미지 위 absolute 좌표, vw보다 %가 잘 맞았던 이유

이벤트 페이지를 작업하다 보면 한 장의 이미지 위 특정 위치에 숫자나 텍스트를 올려야 하는 경우가 있다.
특히 단순한 고정 문구가 아니라, API나 서버에서 전달받은 데이터가 화면에 동적으로 뿌려지는 경우, 해당 값을 이미지의 특정 좌표에 정확하게 표시해야 할 때가 있다.

예를 들어, 이미지 위에 현재 참여 인원이나 응모 수처럼 계속 바뀌는 데이터를 표시한다고 해보자.

 

디자인 시안의 기준 크기는 360 × 244px이고, 이미지가 화면 크기에 따라 줄어들면 그 위에 올라간 텍스트도 같은 위치를 유지하면서 함께 이동해야 한다.

 

예시 시안

 

 

HTML 구조는 단순하게 만들었다.

<div class="image-overlay">
  <img
    class="image-overlay__image"
    src="./sample.png"
    alt=""
  />

  <span class="image-overlay__label">
    {{ entryCount }}명
  </span>
</div>

 

부모를 position: relative로 두고, 이미지 위에 올라갈 요소를 absolute로 배치한다.

.image-overlay {
  position: relative;
}

.image-overlay__image {
  display: block;
  width: 100%;
  height: auto;
}

.image-overlay__label {
  position: absolute;
}

 

 

여기까지는 일반적인 이미지 오버레이 구조다.

 

처음에는 vw로 좌표를 계산했다

처음에는 디자인이 360px 기준이었기 때문에 vw를 이용하면 화면 크기에 따라 자동으로 줄어들 것이라고 생각했다.

 

예를 들어 이런 식이다.

.image-overlay__label {
  position: absolute;

  left: calc(100vw * 145 / 360);
  top: calc(100vw * 24 / 360);
}

 

 

하지만 실제 작업에서는 화면 사이즈를 바꿀 때마다 요소의 위치가 조금씩 어긋났다.

결국 이런 식의 추가 보정 코드가 계속 생겼다.

반응형 처리를 했는데 해상도마다 다시 좌표를 잡아줘야 하는 상황이었다.

@media screen and (max-width: 360px) {
  .image-overlay__label {
    /* 위치 보정 */
  }
}

@media screen and (max-width: 320px) {
  .image-overlay__label {
    /* 또 위치 보정 */
  }
}

 

문제는 vw가 아니라 '기준점'이었다

vw는 현재 요소의 부모 크기가 아니라 viewport, 즉 브라우저 화면의 너비를 기준으로 계산된다.

하지만 내가 위치를 맞추려고 하는 대상은 브라우저 화면이 아니었다. 이미지였다.

그래서 viewport가 아니라 이미지의 부모 영역을 기준으로 좌표를 계산하도록 %로 변경했다.

 

 

그리고 디자인에서 텍스트 위치가 예를 들어 다음 좌표라고 해보자.

x : 145px y : 24px

 

가로 위치를 퍼센트로 계산하면 145(x좌표) / 360(부모 너비값) * 100 = 약 40.28%

세로 위치는 24(y좌표) / 244(부모 높이값) * 100 = 약 9.84%

 

따라서 다음과 같이 작성할 수 있다.

.image-overlay__label {
  position: absolute;

  left: calc(145 / 360 * 100%);
  top: calc(24 / 244 * 100%);
}

 

여기서 중요한 점, 가로와 세로의 기준이 다르다.

 

 

vw와 %의 가장 큰 차이

vw	viewport 너비	화면 전체 크기를 기준으로 움직일 때
%	기준 부모 영역	부모와 함께 크기·위치가 변해야 할 때
rem	root font-size	폰트 및 일정한 디자인 스케일
px	고정값	크기가 변하지 않아야 할 때

 

 

중요한 건 단위 자체보다 무엇을 기준으로 위치를 계산하느냐였고, 이미지 영역을 기준으로 해야 하는 경우에는 vw보다 %가 더 안정적이었다. 이렇게 반응형 이미지 위 absolute 좌표, vw보다 %가 잘 맞았던 이유에 대해서 알아보았다.