반응형 웹디자인, 이제는 선택이 아닌 필수

모바일 우선 시대의 웹 개발

2016년 들어 제 클라이언트들로부터 받은 가장 흔한 요청은 "반응형으로 만들어주세요"였습니다. 모바일 기기의 다양화와 사용량 증가로 더 이상 PC 중심의 웹사이트는 통용되지 않았습니다.

반응형 웹의 필요성

국제시장 아리랑거리, 청도 프로방스 같은 관광 사이트들도 반응형으로 개발되어야 했습니다. 스마트폰으로 접속한 관광객이 쉽게 정보를 찾고 예약할 수 있어야 하기 때문입니다.

CSS 미디어 쿼리의 활용

/* 모바일 (600px 이하) */
@media (max-width: 600px) {
  .container { width: 100%; }
  .column { width: 100%; }
}

/* 태블릿 (601px ~ 1000px) */
@media (min-width: 601px) and (max-width: 1000px) {
  .container { width: 90%; }
  .column { width: 48%; }
}

/* 데스크톱 (1001px 이상) */
@media (min-width: 1001px) {
  .container { width: 1200px; }
  .column { width: 32%; }
}

처음에는 이렇게 단순했지만, 실제로는 이미지 최적화, 터치 인터페이스, 뷰포트 설정 등 고려할 부분이 매우 많았습니다.