🎄이번 글은 모바일 퍼스트를 구현했던 이야기를 담고 있습니다…

프로젝트 Github : https://github.com/boostcampwm-2022/Web02-XOXO

문제 상황

우리가 모바일 환경만을 생각하고 개발을 하다보니, 데스크탑 환경에서는 무지하게 깨져보이는 현상을 확인하였다.

때문에 데스크탑에서 볼 때도 쉽게 볼 수 있게, 모바일 환경에서 처럼 화면 크기를 제한하면 좋을 것 같다는 생각을 하게 되었다.

레퍼런스 : 오늘회

우리는 SCSS 를 사용하고 있었기 때문에, SCSS 환경에서 반응형을 구현하고자 할때 어떻게 작성하는지를 찾아보게 되었다.

CSS Media Query

이것이 바로 반응형 웹의 핵심이다!

CSS Media Query
는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다.

코드는 아래와 같이 작성한다.

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

해당 코드는 뷰포트가 400픽셀보다 좁은 경우 색깔을 파란색으로 만든다.

구현하기

우선 mobile환경, tablet환경, desktop환경을 나누고 변수로 선언하는 것이 중요하다.

이후 다른 파일에서는 해당 변수를 import 해서 쓰기만 하면 된다.

_mixin.scss

$breakpoint-mobile: 426px;
$breakpoint-desktop: 1024px;

@mixin mobile {
  @media (max-width: #{$breakpoint-mobile - 1px}) {
    @content;
  }
}

@mixin not-mobile {
  @media (min-width: #{$breakpoint-mobile}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$breakpoint-mobile}) and (max-width: #{$breakpoint-desktop - 1px}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$breakpoint-desktop}) {
    @content;
  }
}

우리는 사실 모바일, 데스크탑, 타블렛에서 디자인이 다른 형태가 아니라, 모바일에서 보는 화면을 데스크탑과 태블릿 환경에서도 똑같이 보여주고 싶다! 가 주 목적이었기 때문에, mobile, tablet, desktop 의 형태로 나누는게 아니라 mobile, not-mobile로 나누는게 중요했다.

그럼에도 불구하고, tablet 과 desktop 을 또 나눈 이유는… 내가 데스크탑 환경에서는 로고도 보였으면 하는 마음에 끼를 부려놔서… 오로지 그걸만을 위해… 나누었다…

실제 사용 코드

@mixin button-large($bg-color: $primary-3, $font-color: $white) {
  @include bold(3.75vw, $font-color);
  @include vhcenter;
  width: 100%;
  background-color: $bg-color;
  padding: 3.75vw 0;
  border-radius: 6px;
  &:disabled {
    cursor: default;
    background-color: $primary-2;
  }
  @include not-mobile {
    @include bold(16px, $font-color);
    padding: 16px 0;
  }
}

위의 _mixin.scss 을 import해온뒤, 기존에 지정해뒀던 css 아래에, not-mobile일 경우의 코드를 지정해주면 쉽게 반응형 웹을 구현할 수 있게 된다.