들어가며

백엔드 개발자로 근 10년간 근무를 하다 프론트엔드 개발자로 넘어오게 되며 퍼블리싱에 대한 작업과 학습을 시작하게 되었다.
html 마크업부터 웹접근성, 반응형웹, css, 인터렉션 등등 많은 것들을 공부하지 않을 수 없는 상황에서 첫번째로 반응형웹에 대하여 짚고 넘어가기 위해 자료조사를 해보았다.

반응형 웹의 역사

자료조사에 들어가기에 앞서 문득 반응형웹은 어떻게 생기게 되었는지에 대해 궁금해졌다.
우선 반응형웹 이라는 개념은 2010년 이단 마르코드 라는 웹디자이너에 의해 만들어졌다고 한다.
과거 웹은 PC의 전유물처럼 여겨졌을것이라 생각된다.
(나의 10대 시절을 생각해보면 그랬다)
그러다 기술의 발전과 스마트폰, 태블릿 등의 등장으로 인해 이와 같은 다양한 환경에서도 대응이 될 수 있는 모델이 필요했고 그로인해 만들어진 개념이라 추측된다.
물론 조사해보면 2001년(혹자는 2002년이라고도 하더라) 론칭한 아우디닷컴 에서 최초의 반응형 웹을 선보이긴 했다.
브라우저의 사이즈에 따라 3가지의 레이아웃을 디자인하고 뷰포트에 따라 레이아웃을 동적으로 업데이트 해주었다고 한다.
물론 이 시기는 미디어쿼리가 본격적으로 쓰이지 않았던 시대라 스크립트로 구현되었다고 한다.
다양한 디바이스가 없던 시대에 이러한 생각을 했다는 것에 많은 충격을 받았다.
참고로 우리가 많이 사용하는 미디어쿼리는 CSS2 에서 시작되었으나, 보편화된 것은 CSS3(2005년 발표)에서 본격적으로 사용된 기술이라 한다.

반응형 웹을 작성하기 위해 알아야 할 지식은?

그렇다면 반응형 웹 제작을 위해서는 무엇을 배워야 하는 것일까?
기본적으로 웹 퍼블리싱에 대한 기본적인 지식을 갖고 있어야 하겠다.
html 마크업은 기본이며, CSS, 미디어쿼리, 디자인(해상도에 따른 이미지 수급) 등이 있을 것이다.
또한 브라우저별로 지원되는 기술사양에 대해서도 어느정도는 알고 있어야 하겠다.
크롬에서 테스트하며 열심히 작업했는데 사파리 등 타 브라우저에서 지원되지않는 스타일등으로 인해 낭패를 보기 십상인데, 이는 모바일OS 에 따른 기술사양과도 같은 맥락으로 볼 수 있을 것이다
(아이폰유저는 사파리 브라우저를 많이 쓰고 안드로이드 유저는 크롬 브라우저를 많이 쓰듯)

반응형 웹 적용 방법

반응형웹은 css 에 미디어쿼리를 적용하여 작업하게 된다. 설정한 너비에 따라 보여지는 레이아웃이 조금씩 달라지기에 변환포인트를 설정하고 시작하는것이 좋다.
이때, 무엇을 우선시 하여 작업할지에 대한 고민을 할 필요가 있는데, PC를 기준으로 할지 혹은 Mobile을 기준으로 할지에 따라 작업의 방향도 바뀌는 것으로 보인다.
이를테면 이미지 리소스의 차이가 있을 수 있다(pc는 원본 태블릿 모바일은 2배수 3배수)
여기에서 기준이 되는 버전에 따라 적용하는 이미지를 어떻게 맞춰가야하는 지에 대한 방향이 바뀐다
또한, 확장성에서도 영향을 미칠 수 있다.
PC 기준이고 태블릿 800, 모바일 480 이라 할 경우 800 이 넘으면 무조건 PC 해상도의 화면을 보여줄 것이고, 800~480 사이는 태블릿, 480 이하는 무조건 모바일 버전으로 노출될 것이다.
반대의 경우로 모바일 퍼스트에서 480~800이 태블릿이고 800~1200 이라 할 경우 1200 이상을 무조건 PC 로 할 수 있지만, FHD QHD 로 구분하여 더 확장시킬 수 있다.
무엇보다 PC 퍼스트냐 모바일 퍼스트냐에 따라 레이아웃 혹은 CSS 의 작성기준도 변경된다.
이를테면, PC 에서는 횡 정렬의 버튼이 모바일 에서는 종 정렬의 버튼으로 배치가 변경되기에 작업 방식에 따른 영향이 있을 수 있다.
(혹시 잘못된 설명이나 부족한 부분이 있다면 코멘트 부탁 드려요)

미디어쿼리 적용방법1

<link rel="stylesheet" medial="screen and (max-width:768px)" href="mycss.css" />

link태그를 이용하여 스크린 사이즈에 따라 css 파일을 불러오는 방법

미디어쿼리를 적용하는 방법2

@media screen and (min-width: 768px) {
  body {
    background-color: #ff22dd;
  }
}

css 에서 브라우저 사이즈가 조건에 부합하면 해당 스타일 적용

미디어쿼리 예시

.wrap-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #f2f3ff;
}
.wrap-content span {
  display: inline-block;
  width: 500px;
  text-align: center;
  color: #43243f;
  font-size: 20px;
}
.wrap-content span.left-content {
  background-color: #b1a2b9;
}
.wrap-content span.right-content {
  background-color: #78787f;
}

@media (max-width: 600px) {
  .wrap-content {
    display: inline-block;
  }
  .wrap-content span {
    font-size: 30px;
    font-weight: 700;
  }
}

기본적으로PC의 스타일을 적용하되, 뷰포트 너비가 600 이하일 경우 컨테츠 영역의 display 속성과 span 영역의 font-size, font-weight 속성을 변경하는 코드이다.
결과를 보면 600px 이상일 경우

위와 같이 좌우로 컨텐츠가 있다. 다시 사이즈를 줄여 600px 이하일 경우

위와 같이 display 속성이 변경되어 block 형태로 나온다.
또한 폰트의 크기도 커진 것을 확인할 수 있었다.

마치며

왜 반응형을 첫 블로그 글로 주제를 잡았는지 궁금해 하는 사람들도 있을것이라 본다.
이유는 정말 단순하게도 ‘궁금해서’ 였다.
궁금한건 못참는 성격이다보니 css나 html 마크업 등 기타 다양한 주제가 있음에도 불구하고 반응형에 대한 부분을 첫 주제로 잡아보았다.
이번 자료를 조사하며 반응형이 그렇게 오래되지 않은 기술이라는 것에 의아하면서도(아..오래된건가;;) 과거 태블릿이나 스마트폰이 없던 시절을 생각해보면 한편으론 이해가 되기도 하였다.

참고자료

위키백과 - 반응형 웹 디자인
해시넷 - 반응형웹
offbyone 님의 블로그 - 반응형 웹을 위한 미디어 쿼리 사용법

cyberx 님의 블로그 - 반응형 웹 디자인의 단점