반응형 웹사이트(Responsive Website)란 데스크톱, 태블릿, 스마트폰 등 어떤 기기에서 접속하더라도 화면 크기에 맞춰 보기 좋고 아름답게 표시되는 웹사이트를 말합니다. 이러한 반응형 동작을 구현하려면 웹사이트에 반응형 디자인(Responsive Design)을 적용해야 하며, 핵심은 HTML과 CSS를 활용해 요소의 크기를 조절하고, 숨기거나, 확대하는 것입니다.
그렇다면 실제로 '반응형'이라는 것이 무엇을 의미하는지, 화면 크기가 달라질 때 웹사이트가 어떻게 변화하는지 예시를 통해 살펴보겠습니다.
데스크톱 화면
데스크톱에서의 웹사이트 디자인은 다음과 같습니다.
태블릿 화면
태블릿에서는 위 데스크톱 화면과 비교했을 때 레이아웃과 요소 배치가 자연스럽게 조정되는 것을 확인할 수 있습니다.
모바일 화면
모바일에서는 좁은 화면 폭에 맞춰 콘텐츠가 세로로 재배치되며, 가독성을 유지하도록 설계되어 있습니다.
기기의 화면 크기와 관계없이 항상 잘 보이는 반응형 웹사이트를 만들려면, 다음 세 가지 핵심 개념을 반드시 이해하고 적용해야 합니다.
1. 뷰포트(Viewport) 설정
뷰포트는 모바일 브라우저에서 페이지 레이아웃을 제어하기 위해 사용되는 영역입니다. <meta> 태그 안에 작성하여, 브라우저에게 웹 페이지의 크기(dimensions)와 확대·축소(scaling)를 어떻게 처리해야 하는지 지시합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
각 속성의 의미는 다음과 같습니다.
- width=device-width: 페이지의 너비를 기기의 실제 화면 너비에 맞추도록 설정합니다.
- initial-scale=1.0: 페이지가 처음 로드될 때의 초기 줌(확대) 수준을 설정합니다.
이 설정은 모바일 환경에서 페이지가 의도한 대로 표시되도록 돕는 가장 기본적이면서 필수적인 단계입니다.
2. 미디어 쿼리(Media Queries)
미디어 쿼리를 사용하면 중단점(breakpoint)을 지정할 수 있습니다. 중단점을 기준으로 화면 크기에 따라 디자인의 특정 부분이 서로 다르게 동작하도록 스타일을 분기 처리할 수 있으며, 이것이 반응형 레이아웃의 핵심 원리입니다.
3. 이미지의 width와 height 속성
이미지까지 반응형으로 만들려면 CSS에서 이미지의 width 속성을 100%로, height 속성은 auto로 설정해야 합니다. 이렇게 하면 이미지가 부모 컨테이너의 너비에 맞춰 자동으로 축소·확대되면서 원본 비율을 유지하게 됩니다.
위 세 가지 개념 — 뷰포트, 미디어 쿼리, 유동적인 이미지 처리 — 을 함께 적용하면 어떤 기기에서 접속하더라도 일관된 사용자 경험을 제공하는 반응형 웹사이트를 완성할 수 있습니다.