반응형 웹 디자인
반응형 웹 디자인은 하나의 웹 문서가 화면 너비·입력 방식·이용 환경에 맞춰 배치와 크기를 유연하게 바꾸도록 설계하는 방법이다.
1. 개요
반응형 웹 디자인은 데스크톱, 태블릿, 스마트폰처럼 크기가 다른 화면에서 같은 웹사이트를 읽고 조작할 수 있게 만드는 설계 방식이다. 고정된 한 화면을 축소하는 대신 유동형 격자, 크기가 변하는 미디어, CSS 미디어 쿼리를 사용해 콘텐츠의 배치와 우선순위를 조절한다.
2. 주요 구성
| 구분 | 설명 |
|---|---|
| 유동형 레이아웃 | 비율·최대 너비·유연한 격자로 화면 공간을 나누어 쓴다. |
| 반응형 미디어 | 이미지와 영상이 컨테이너 밖으로 넘치지 않게 크기를 조절한다. |
| 미디어 쿼리 | 화면 너비·방향·입력 특성에 따라 필요한 스타일을 적용한다. |
| 콘텐츠 우선 | 작은 화면에서도 핵심 정보와 주요 행동을 먼저 사용할 수 있게 한다. |
3. 작동 방식
브라우저는 뷰포트 크기와 기기 특성을 바탕으로 CSS 규칙을 선택한다. 일정한 중단점에서 여러 열을 한 열로 바꾸거나 보조 메뉴를 접을 수 있다. 그러나 기기 이름별 화면을 따로 만드는 것보다 내용이 실제로 깨지는 지점을 기준으로 중단점을 정하는 편이 유지보수에 유리하다.
4. 형성과 발전
모바일 웹이 성장하면서 데스크톱용 고정 폭 사이트와 별도 모바일 사이트를 함께 운영하는 비용이 커졌다. 2010년 무렵 반응형 웹 디자인이라는 용어가 널리 알려졌고, CSS Grid·Flexbox·반응형 이미지 기능이 발전하면서 하나의 코드로 다양한 화면을 지원하는 방식이 보편화됐다.
5. 활용과 확인할 점
모바일에서 메뉴가 본문을 가리거나 입력창을 누를 때 화면이 과도하게 확대되는 문제를 실제 기기에서 확인해야 한다. 화면이 좁다고 기능을 무조건 숨기기보다 메뉴 열기 버튼과 닫기, 배경 스크롤 잠금, 키보드 초점 이동을 함께 구현한다. 큰 이미지에는 크기별 파일을 제공해 데이터 사용량도 줄인다.
문서를 읽거나 작성할 때에는 용어의 정의와 실제 서비스의 정책을 구분해야 한다. 기술 표준은 개정될 수 있고 제품의 동작도 버전에 따라 달라질 수 있으므로, 날짜가 중요한 내용은 최신 공식 문서를 함께 확인한다. 사례를 인용할 때에는 홍보 문구를 사실처럼 옮기지 않고 확인 가능한 범위와 한계를 밝혀야 한다.