반응형 디자인은 화면과 읽기 조건이 달라져도 내용을 읽고 사용할 수 있도록 배치 규칙을 세우는 방식이다. 같은 웹 페이지라도 누군가는 넓은 모니터로, 누군가는 글자를 키운 휴대전화로 읽는다. 웹 브라우저의 너비와 기기 방향도 달라진다. 새로운 질서는 이런 차이를 받아들이며 화면을 만든다.
- 넓은 화면에서는 본문의 최대 너비를 제한해 글줄이 끝없이 길어지지 않게 한다.
- 이미지는 종횡비를 유지하며 부모 요소의 너비 안에 놓는다. 작품 이미지의 여러 크기에서는 표시 조건에 맞는 파일을 고르는 방법을 다룬다.
- 유동형 레이아웃과 상대 단위로 자연스럽게 바뀌는 부분은 그대로 두고, 배치를 전환할 조건에는 미디어 쿼리를 쓸 수 있다. 브레이크포인트는 ‘휴대전화용’이라는 이름보다 내용이 비좁아지는 지점에서 찾는다. (MDN: 반응형 디자인)
이미지와 글의 높이가 달라질 때
같은 폭의 두 칸에 이미지와 설명을 나란히 놓았다고 가정하자. 폭을 늘리면 비율을 유지하는 이미지는 높아지는 반면, 같은 크기의 글은 줄 수가 줄어 낮아질 수 있다. 두 칸의 폭을 함께 늘렸는데 아래쪽 끝은 더 멀어진다. 어느 쪽을 기준으로 정렬하고 언제 위아래로 놓을지가 레이아웃의 선택이다.
‘무제’ 다음에 긴 제목이 오면
‘무제’만 넣었을 때는 멀쩡하던 작품 목록이 긴 제목 하나에 흐트러질 수 있다. 줄바꿈하는 작품 목록에 실제 작품명을 넣으면, 배치가 얼마나 짧은 말만 예상했는지 드러난다. 창의 폭뿐 아니라 글자 크기를 바꿔도 제목의 줄 수와 버튼 위치가 달라진다. 줄바꿈이 버티는 범위는 이 두 조건을 함께 보아야 알 수 있다.
화면 안에 들어왔다고 모두 누르기 쉬운 것은 아니다. 정보 밀도를 높이면 터치 대상이 작아지거나 서로 가까워질 수 있고, 마우스를 올려야 나타나는 기능은 터치 화면에서 찾기 어려울 수 있다. 첫 방문자의 경로 메모에 적은 주요 동작이 끝까지 이어지는지 확인하는 일도 접근성 검토에 포함된다.