반응형 웹 디자인은 하나의 웹 콘텐츠가 여러 화면 크기와 해상도에서 읽고 조작하기 좋도록 배치와 표현을 조정하는 설계 방식이다. 모바일용 화면을 단순히 작게 만드는 일이 아니라, 공간이 줄어들 때 무엇을 유지하고 어떻게 재배치할지 결정하는 과정이다.
유연한 기본 배치
본문에 지나치게 큰 고정 너비를 주면 작은 화면에서 페이지 전체가 옆으로 넘친다. 가용 공간을 사용하는 크기와 최대 너비를 조합하면 넓은 화면에서는 줄 길이를 제한하고 좁은 화면에서는 자연스럽게 줄어들게 할 수 있다. CSS Grid와 Flexbox는 콘텐츠 수와 공간에 대응하는 배치 도구다. 이미지도 컨테이너 안에서 크기가 조정되도록 처리한다.
전환점 결정
미디어 쿼리는 화면 조건에 따라 스타일을 바꾼다. 전환점은 특정 휴대전화 모델 이름보다 콘텐츠가 불편해지는 지점을 기준으로 정하는 편이 실용적이다. 예를 들어 두 열의 위키 화면에서 본문이 지나치게 좁아지는 너비에 사이드바를 아래로 이동시킨다. 메뉴가 길어지면 중요 항목은 남기고 추가 항목을 펼침 메뉴로 구성할 수 있다.
읽기와 입력 예
문서 제목, 검색창, 최근 문서 목록을 가진 화면을 생각해 보자. 작은 화면에서는 검색창을 독립된 줄에 놓고 제목이 두 줄이 되어도 버튼을 가리지 않게 한다. 숫자가 많은 표는 페이지 전체 대신 표 영역만 가로로 이동하도록 할 수 있다. 본문 글자를 과도하게 줄여 모든 정보를 한 줄에 넣기보다는 정보를 재배치하는 것이 읽기에 유리하다.
실제 검증 범위
모바일 브라우저의 뷰포트 설정은 기기 너비에 맞게 문서를 표시하는 데 중요하다. 다만 너비를 줄인 개발자 도구 화면만 확인해서는 실제 입력, 확대와 네트워크 상황을 모두 알 수 없다. 긴 언어의 번역문, 키보드가 열린 상태, 큰 글자 설정을 함께 확인한다. 웹 접근성과 웹 성능도 연결된 문제다. 화면이 맞아도 버튼을 누르기 어렵거나 콘텐츠가 늦게 나타나면 사용 경험은 여전히 좋지 않을 수 있다. 관련 공식 설명.
참고: 공식 개발 문서.