CSS 미디어 쿼리로 기존 웹 페이지를 모바일에 맞게 개조하기
이미 운영 중인 웹 페이지를 별도의 모바일 버전으로 새로 만들지 않고도 모바일 환경에 맞게 개조(retrofit)할 수 있습니다. 핵심 도구는 바로 CSS 미디어 쿼리(Media Queries)입니다.
미디어 쿼리를 사용하면 브라우저와 기기의 특성(화면 크기, 해상도 등)에 따라 서로 다른 스타일시트를 적용할 수 있습니다. 이 방식의 가장 큰 장점은 서버측 코드가 전혀 필요 없다는 점입니다. 즉, 백엔드 수정 없이 프런트엔드 CSS만으로 모바일 대응이 가능합니다.
미디어 쿼리란 무엇인가?
미디어 쿼리는 CSS3에서 도입된 기능으로, 접속한 기기의 화면 너비, 높이, 해상도, 방향(가로/세로) 등의 조건을 평가하여 조건에 맞는 스타일만 적용합니다. 덕분에 데스크톱과 모바일, 태블릿 등 다양한 환경에서 하나의 HTML 문서로 반응형 웹을 구현할 수 있습니다.
기기 그룹화를 위한 감지 코드
모바일 페이지 개조 시에는 스크립트에 특정 감지(detection) 코드를 추가하여 기기를 그룹별로 분류해야 할 수 있습니다. 예를 들어 스마트폰, 태블릿, 데스크톱으로 나누어 각 그룹에 맞는 스타일을 지정하는 방식입니다.
미디어 쿼리 작성 예제
아래는 화면 너비가 480px 이하인 핸드헬드 기기나, 기기 화면 폭이 480px 이하 또는 화면 너비가 600px 이하인 경우에 파란색 텍스트를 적용하는 예제입니다.
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
body {
color: blue;
}
}위 코드의 의미를 살펴보면 다음과 같습니다.
handheld and (max-width: 480px): 휴대용 기기 중 화면 너비가 480px 이하인 경우screen and (max-device-width: 480px): 기기 물리적 화면 폭이 480px 이하인 화면 출력 장치screen and (max-width: 600px): 브라우저 창 너비가 600px 이하인 경우
여러 조건을 쉼표(,)로 연결하면 OR 조건으로 처리되어, 하나라도 일치하면 해당 스타일이 적용됩니다.
출시되지 않은 기기까지 자동 대응
미디어 쿼리의 또 다른 강력한 장점은 아직 존재하지 않거나 잘 알려지지 않은 기기까지도 대응할 수 있다는 점입니다. 특정 기기의 사용자 에이전트(User-Agent) 문자열을 일일이 목록화하는 방식과 달리, 미디어 쿼리는 화면 크기라는 보편적인 조건을 기준으로 판단하기 때문에 새로운 기기가 출시되더라도 별도의 코드 수정 없이 자연스럽게 호환됩니다.
마무리
기존 웹 페이지를 모바일에 맞게 개조할 때 미디어 쿼리는 서버 부담 없이 간단하고 확장성 있는 해결책을 제공합니다. 여기에 뷰포트(viewport) 메타 태그(<meta name="viewport" content="width=device-width, initial-scale=1">)를 함께 설정하면 모바일 브라우저에서 더욱 정확하게 렌더링되므로 함께 적용하는 것을 권장합니다.