들어가며

지금까지 반응형 웹 작업 시 max-width나 min-width를 이용한 CSS 미디어 쿼리를 사용하여 구현하였다.
생각해보면 별다른 이유는 없고 그저 예전부터 계속해왔던 방식이고, vw를 이용한 미디어 쿼리를 사용하기에도 IE에서는 부분 지원이라는 찝찝함으로 인해 기존의 사용법을 고수하고 있던 것 같다.
그러던 와중에 얼마 전 진행한 프로젝트에서 vw를 사용한 반응형 웹을 제작하였고, vw에 대한 장점으로 인해 앞으로 웬만해서는 반응형 웹을 제작 시 vw를 사용하게 되지 않을까 싶다.

게다가 앞으로 IE는 사라질 브라우저이기도 하니 더 이상 IE로 인한 제한이 없어질 거라고 생각된다.
그러니 굳이 좋은 방법이나 여러 가지 선택지를 포기하지 않아도 되지 않을까?

vw가 무엇인지, vw를 사용함으로써 어떤 점이 좋은지를 알아보자.

vw란?

Viewport Width의 약자로 Viewport 너비 대비 퍼센트의 수치로서 1vw는 Viewport 너비의 1%로 사용된다.

더불어 vmin(Viewport Minimum), vmax(Viewport Maximum)의 수치도 있는데 이는 Viewport의 너비 또는 높이의 최소/최댓값을 기준으로 계산된다.
좀 더 설명하자면 가로 1000px 세로 700px의 화면이 있다고 생각해보자 이 화면에서의 vmin은 700px을 기준으로 하며 vmax는 1000px을 기준으로 한다. 즉, 이 화면에서의 1vmin은 7px로 보여지고, 1vmax는 10px로 보인다.

반응형에서의 사용법은?

기존의 방식에서 사용하는 수치가 vw로 바뀐다는 점 빼고는 차이가 없다.
아래 예시를 보자

/* px 반응형 예시 */
@media screen and (max-width: 768px) {
  div {
    height: 300px;
  }
  span {
    font-size: 20px;
  }
}

/* vw 반응형 예시 */
@media screen and (max-width: 768px) {
  div {
    height: 39.0625vw;
  }
  span {
    font-size: 2.6041vw;
  }
}

vw의 수치가 소수점까지 나오게 되는데, 아무래도 px 수치를 vw로 변환함으로써 어쩔 수 없다고 생각된다.

px을 vw로 변환하는 공식은 생각보다 간단하다 px수치에 100을 곱해서 viewport 너비의 수치를 나누면 되며 이를 공식화면 이렇다.
(‘px수치’ * 100) / ‘viewport width’
위의 예시 코드를 대입해 보면 더 이해하기 쉽다. 위의 코드에서 height와 font-size에 대한 vw 변환 공식은 아래와 같다.
(300 * 100) / 768
(20 * 100) / 768

그런데 그 어느 누가 CSS를 작성하며 계산기를 두드리며 작성할까?(오래전 box-sizing이 없을 때는 항상 계산기가 필요하긴 했다.)
이러한 계산을 해주는 사이트도 다양하게 존재하는데 그중 하나의 사이트를 소개하니 이 사이트를 이용하여 변환하면 된다.
vw 변환 사이트

이마저도 번거로울 수 있는데 VS Code를 사용한다면 적절한 확장 프로그램이 있다.
VS Code - vw 변환 확장 프로그램
Document를 보면 사용법이 잘 나와 있는데, 확장 프로그램 설정에서 px-to-viewport.viewportWidth를 기준이 되는 viewport 값으로 설정 후 변환하고자 하는 텍스트를 선택한 뒤 Alt+Shift+W를 누르면 된다.

그리고 만약 SCSS를 사용한다면 vw를 변환하는 function을 만들어서 사용하면 좋다. SCSS function 예제는 아래를 참고하자.

/* viewport size */
$mobile-size: 768; // 미디어 쿼리에 기준이 되는 수치

/* vw 변환 function */
@function vw($target) {
  @if type-of($target) == number {
    @return (($target * 100) / $mobile-size) * 1vw;
  } @else if type-of($target) == list {
    $vw: ();
    @each $value in $target {
      @if type-of($value) == number {
        $vw: append($vw, (($value * 100) / $mobile-size) * 1vw);
      } @else if type-of($value) == string {
        $vw: append($vw, $value);
      }
    }
    @return $vw;
  } @else {
    @return $target;
  }
}

/* function 사용 예시 */
div {
  margin: vw(10 auto);
  padding: vw(10 15 20 25);
  width: vw(100);
  height: vw(auto);
  border: vw(10) solid royalblue;
  flex: 1 0 vw(100);
  background-size: 30px vw(50);
}

반응형에서 vw의 장점은?

기존의 방식은 CSS 작성에서 퍼센트 수치에 많이 의존해야 했고, 그마저도 다양한 장치로 인한 천차만별의 모바일 브라우저 크기로 인하여 어떠한 장치에서는 정상적인 화면이지만 어떠한 장치에서는 의도치 않은 텍스트의 줄 떨어짐이나 화면 밖으로 콘텐츠가 터져 나가는 소위 화면 깨짐 증상을 많이 겪었을 거라 예상한다.
또한 이러한 증상으로 인해 무수히 많은 고객사는 디자인 화면을 보기보다는 구현된 화면을 보고 싶어 하는 거 같다. (아닐 수도 있다…)

vw를 사용할 때의 장점으로는 코드 작성 시간을 매우 절약할 수 있다.
더불어 이 글을 작성해야겠다고 생각하게 한 장점인 모바일 브라우저의 크기가 제각기 다른 모든 장치에 디자인된 화면 그대로 보인다는 것이 가장 큰 장점이라고 생각한다.

이는 위에서 이야기한 예상하지 못한 텍스트의 줄 떨어짐 이라던지 화면 밖으로 콘텐츠가 터져 나가는 일을 걱정할 필요가 없다.

게다가 각기 다른 모든 모바일 브라우저에서 같은 화면을 보여줄 수 있으니 모든 사용자에게 똑같은 사용자 경험을 제공 하게 되어 사용자 경험(UX)적으로도 더 나은 결과를 가져올 수 있지 않을까 싶다.

마치며

또 한 가지를 배웠던 특별한 프로젝트였고, 이에 대해 가장 기억에 남았던 부분을 정리하고자 이 글을 작성하였다.

예전부터 IE에 시달렸던 나로서는 IE를 신경을 쓰지 않을 수가 없어 오히려 더 좋은 방법을 두고 쓰지 못하고 있었는지도 모르겠다.
그 와중에 IE에 대한 생각을 조금 바꾸게 해준(이제는 좀 사라져라) 프로젝트였으며 새롭고 더 나은 방법을 알게 해준 프로젝트여서 기억에 남는다.