반응형 디자인은 화면과 읽기 조건이 달라져도 내용을 읽고 사용할 수 있도록 배치 규칙을 세우는 방식이다. 같은 [[웹 페이지]]라도 누군가는 넓은 모니터로, 누군가는 글자를 키운 휴대전화로 읽는다. [[웹 브라우저]]의 너비와 기기 방향도 달라진다. [[새로운 질서]]는 이런 차이를 받아들이며 화면을 만든다.

- 넓은 화면에서는 본문의 최대 너비를 제한해 글줄이 끝없이 길어지지 않게 한다.
- 이미지는 [[종횡비]]를 유지하며 부모 요소의 너비 안에 놓는다. [[작품 이미지의 여러 크기]]에서는 표시 조건에 맞는 파일을 고르는 방법을 다룬다.
- [[유동형 레이아웃]]과 상대 단위로 자연스럽게 바뀌는 부분은 그대로 두고, 배치를 전환할 조건에는 [[미디어 쿼리]]를 쓸 수 있다. [[브레이크포인트]]는 ‘휴대전화용’이라는 이름보다 내용이 비좁아지는 지점에서 찾는다. ([MDN: 반응형 디자인](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design))

## 이미지와 글의 높이가 달라질 때

같은 폭의 두 칸에 이미지와 설명을 나란히 놓았다고 가정하자. 폭을 늘리면 비율을 유지하는 이미지는 높아지는 반면, 같은 크기의 글은 줄 수가 줄어 낮아질 수 있다. 두 칸의 폭을 함께 늘렸는데 아래쪽 끝은 더 멀어진다. 어느 쪽을 기준으로 정렬하고 언제 위아래로 놓을지가 [[레이아웃]]의 선택이다.

## ‘무제’ 다음에 긴 제목이 오면

‘무제’만 넣었을 때는 멀쩡하던 작품 목록이 긴 제목 하나에 흐트러질 수 있다. [[줄바꿈하는 작품 목록]]에 실제 작품명을 넣으면, 배치가 얼마나 짧은 말만 예상했는지 드러난다. 창의 폭뿐 아니라 글자 크기를 바꿔도 제목의 줄 수와 버튼 위치가 달라진다. [[줄바꿈이 버티는 범위]]는 이 두 조건을 함께 보아야 알 수 있다.

화면 안에 들어왔다고 모두 누르기 쉬운 것은 아니다. [[정보 밀도]]를 높이면 [[터치 대상]]이 작아지거나 서로 가까워질 수 있고, 마우스를 올려야 나타나는 기능은 터치 화면에서 찾기 어려울 수 있다. [[첫 방문자의 경로 메모]]에 적은 주요 동작이 끝까지 이어지는지 확인하는 일도 [[접근성]] 검토에 포함된다.

## 기타 등등

- 이선 마콧의 「Responsive Web Design」은 2010년 5월 25일 어 리스트 어파트에 실렸다. 글은 유동적인 격자와 이미지, 미디어 쿼리를 함께 설명했다. [출처](https://alistapart.com/issue/306/)
- 그 글은 사람의 존재와 움직임에 반응하는 건축도 함께 떠올린다. 화면 크기에 맞추는 기술의 이름에는 공간이 사용자를 받아들이는 방식에 관한 질문이 들어 있다. [출처](https://alistapart.com/article/responsive-web-design/)

#개념 #CSS