반응형 웹 (@media, Responsive Design)

데스크톱 뿐만아니라 모바일, 태블릿, 등 모바일 기기의 이용이 늘어남에 따라 소비자(이용자)들은 데스크톱이 아닌 환경에서도 서비스를 제공받기를 원한다.

데스크톱에 비해 태블릿, 모바일 환경은 이용자의 눈에 들어오는 영역이 좁기 때문에 (데스크톱의 모니터 환경과 다르기 때문에) 다양성을 고려해서 코딩을 해야함이 마땅할 것이다.

하지만 하나의 홈페이지를 여러 웹으로 만들수는 없기 때문에(가능은 하지만 비효율의 극치이기때문에) 이에따라 단말기의 속성, 성질에 따른 반응형 웹이 각광받고 있다.

반응형 웹이란 디바이스의 종류에 따라 웹페이지의 크기나, 웹의 구성요소들의 배치(레이아웃)가 바뀌는 것을 뜻한다.

반응형 웹을 만들 때 '모바일 퍼스트'라는 개념이 도입되는데, '모바일 퍼스트'란 웹을 디자인할 때 PC보다 모바일 기기를 먼저 생각해서 디자인하는 프로그래밍 기법이다.

화면크기가 제한적이다보니 한정된 공간에서 최대한의 시각적 효율을 보기 위해 이용자들이 필요로 하는 기능의 우선순위를 고려해 레이아웃을 재배치하거나 일부 기능을 없애기도 한다.

CSS3는 미디어 단말기의 종류나 특성에 따라 조금 더 구체적으로 미디어 타입을 개선했는데, 이것이 바로 @media, 즉 미디어 퀴리이다.

아래의 코드는 간단한 예제이다.

export default function ResponsiveDesignPage() {
  const Wrapper = styled.div`
    width: 1000px;
    height: 500px;
    background-color: black;
    transition: 2s;

    @media ${breakPoints.tablet} {
      width: 500px;
      height: 500px;
      background-color: pink;
      transition: 2s;
    }

    @media ${breakPoints.mobile} {
      width: 100px;
      height: 100px;
      background-color: red;
      /* display: none; */
      transition: 2s;
    }
  `;

  const MobileBox = styled.div`
    display: none;

    @media ${breakPoints.mobile} {
      width: 300px;
      height: 100px;
      background-color: gray;
      color: white;
      display: block;
    }
  `;
  return (
    <div>
      <Wrapper></Wrapper>
      <MobileBox></MobileBox>
    </div>
  );
}

극단적으로 간단한 예시이다.

화면이 줄어듬에 따라 박스의 크기와 색상이 바뀐다.(직관적으로 볼 수 있도록 박스의 크기가 바뀔 때 transition 효과를 주었다.)

웹 레이아웃을 설정할 때 미디어 쿼리를 적용한다면, 좀더 많은 사용자들에게 질적인 서비스를 제공할 수 있을 것이다.