시안 검토 날, 저희 모니터 옆에는 늘 휴대폰 몇 대와 태블릿이 나란히 놓여 있어요. 같은 페이지를 여러 화면에 띄워 놓고, 손가락으로 넘기고, 가로로 돌려 보고, 글자가 어디서 줄바꿈되는지 하나하나 살펴요. 넓은 모니터에서는 멋있던 배너가 휴대폰에서는 답답해 보이는 순간이 꼭 있거든요.
사람들은 이제 스마트폰, 태블릿, 데스크톱을 오가며 홈페이지를 봐요. 기준이 하나뿐인 디자인으로 이 모든 화면을 만족시키기는 거의 불가능해요. 그 사이를 이어 주는 기술이 미디어 쿼리예요. 처음에는 창 크기에 따라 글자 크기만 조금 바꾸면 되겠다고 생각했는데, 실제로 해 보니 기기별 해상도와 손으로 누르는 방식까지 세밀하게 맞춰야 하는 일이었어요.
미디어 쿼리는 어떤 원리로 움직일까요?
CSS에서는 화면 조건에 따라 스타일을 다르게 적용할 수 있어요. 미디어 쿼리는 그걸 가능하게 하는 핵심 기술이에요. 화면 너비, 가로세로 비율, 색상 표현 범위 같은 조건을 정해 두고, 조건에 맞을 때만 특정 스타일을 적용해요.
예를 들면 이런 식이에요. 화면 너비가 768px 이하일 때는 글자 크기를 키우고, 가로로 긴 배너 이미지를 세로형으로 바꿔 보여주는 거예요. 같은 콘텐츠지만 화면에 맞는 옷을 갈아입는 셈이에요. 이 기준점을 보통 브레이크포인트라고 불러요. 휴대폰, 태블릿, 노트북, 큰 모니터처럼 화면이 크게 달라지는 지점마다 기준을 두고, 그 사이에서는 비율에 맞춰 자연스럽게 늘고 줄도록 설계해요.
덕분에 모바일 전용 페이지를 따로 만들지 않아도 모든 기기에서 같은 브랜드 이미지를 전할 수 있어요. 사이트를 두 벌로 관리하지 않아도 되니 운영 부담과 비용을 줄이는 데도 도움이 돼요.
장점만 있을까요?
한 번의 코드로 모든 기기에서 일관된 경험을 줄 수 있다는 건 큰 장점이에요. 하지만 조건을 무분별하게 추가하다 보면 코드가 복잡해지고 관리가 어려워져요.
원문 필자가 작업했던 한 쇼핑몰이 그랬어요. 상품이 200여 종 이상이다 보니 특정 해상도에서 상품 이미지가 어긋나는 문제가 생겼어요. 코드를 정리해 중복을 없애고, 가장 자주 쓰이는 화면 폭에 우선순위를 두도록 고치자 문제가 해결되었어요. 그때 얻은 교훈은 반응형이 '모든 화면에 대응'하는 것이 아니라 '많이 쓰는 환경부터 대응'하는 것이라는 점이었어요. 모든 기기를 똑같이 챙기려다 보면 정작 대부분의 방문자가 쓰는 화면이 소홀해질 수 있어요.
기획 단계에서 무엇을 먼저 정할까요?
그래서 저희는 미디어 쿼리를 개발 단계가 아니라 기획 단계에서 먼저 다뤄요. 어떤 화면을 우선할지 정하는 일이 디자인보다 앞서야 하거든요.
- 방문자 중 PC와 모바일 비중이 어느 쪽이 높은지 살펴봐요.
- 화면별로 가장 먼저 보여야 할 정보와 버튼을 정해요.
- 슬라이드나 동영상처럼 무거운 기능을 화면 크기에 따라 켤지 끌지 정해요.
병원 홈페이지라면 답이 비교적 분명해요. 휴대폰으로 위치를 찾고 예약하는 일이 잦으니, 그 화면부터 최적화해요. 지도 버튼과 전화 버튼, 예약 버튼이 엄지손가락이 닿는 자리에 있는지가 첫 번째 점검 항목이에요. 진료시간과 주소처럼 자주 찾는 정보는 모바일에서 첫 화면 가까이 올리고, 긴 병원 소개는 아래로 내려 보내요. 같은 내용이라도 화면마다 순서가 달라질 수 있다는 점이 반응형 기획의 핵심이에요.
화면이 바뀔 때 무엇이 함께 바뀔까요?
미디어 쿼리로 바꾸는 건 글자 크기만이 아니에요. 이미지 배치를 바꾸고, 메뉴를 접었다 펼치는 방식으로 바꾸고, 표처럼 넓은 콘텐츠는 옆으로 밀어 보거나 카드 형태로 나눠 보여줘요.
동영상은 특히 신경을 써요. 큰 화면에서는 배경 영상이 분위기를 만들지만, 휴대폰에서는 데이터와 배터리를 쓰고 로딩을 늦출 수 있어요. 그래서 화면 크기에 따라 정지 이미지로 대신하거나, 자동 재생을 끄는 식으로 사용자 편의와 성능을 함께 고려해요. 이런 세심한 설계가 쌓여야 어떤 기기에서 열어도 한결같이 안정적인 사이트가 돼요.
마지막으로 꼭 실제 기기로 확인해요. 브라우저의 크기 조절 기능만으로는 손가락으로 누를 때의 감각이나 글자의 실제 크기를 알기 어렵거든요. 오래된 휴대폰과 최신 휴대폰을 함께 놓고 보면, 놓쳤던 부분이 꼭 하나씩 보여요.
반응형이 검색과도 관련이 있을까요?
있어요. 요즘 검색엔진은 모바일에서 보기 편한 웹을 선호하는 흐름이라, 반응형 디자인은 검색엔진 최적화 측면에서도 유리하게 작용해요. 주소 하나로 모든 기기에 대응하니 방문 기록이 흩어지지 않는다는 점도 장점이에요.
크로스디자인랩은 시안을 보여 드릴 때 PC 화면과 모바일 화면을 늘 함께 놓고 설명해요. 모바일 화면을 나중에 맞추는 게 아니라 처음부터 같이 그리는 거예요. 지금 우리 홈페이지를 휴대폰으로 열어, 예약 버튼까지 몇 번 만에 닿는지 확인해 보세요. 반응형 제작 방식이 궁금하시면 홈페이지 제작 안내를 참고해 주세요.