도도에서는 반응형 웹을 어떻게 만들었을까?

스포카 개발팀 인턴 Jacob(이성운)이 도도 랜딩페이지 제작 경험을 바탕으로 다양한 스크린 사이즈를 지원하는 반응형 웹 기술을 소개합니다. 웹 페이지가 어떤 장비나 브라우저에서 접속하든 최적화된 모습을 보여주기 위한 방법으로 뷰포트(viewport), 미디어 쿼리(media query), 그리고 사용자 에이전트를 감지하는 jQuery를 다룹니다.

뷰포트는 웹 페이지의 보이는 영역을 의미하며, 모바일 환경에 최적화된 뷰를 제공하기 위해 설정이 필요합니다. 미디어 쿼리는 CSS3 기능으로, 특정 조건에 따라 다른 스타일 시트를 적용하여 다양한 디바이스와 사용자에게 맞춤형 웹 페이지를 제공할 수 있습니다.

jQuery는 사용자 에이전트 감지를 통해 반응형 웹 구현에 도움을 줄 수 있습니다.