정_124_1_5. 반응형 웹 디자인

5. 반응형 웹 디자인(Responsive Web Design, RWD) 3가지 패턴

---

1. 반응형 웹 디자인의 개념

사이트가 보여지는 장치의 요구와 기능에 대응하도록 사이트를 만드는 방법

[핵심기술] 디자인 패턴, 반응형 이미지, 다중 기기 콘텐츠

 

 

2. 반응형 웹 디자인 3가지 패턴

패턴	설명
유동형(Mostly Fluid)	- 유동형 패턴은 주로 유동형 그리드로 구성  - 더 넓은 화면에서는 여백만 조정하므로, 대형 화면이나 중형 화면에서 이 패턴은 일반적으로 동일한 크기를 유지 - 더 작은 화면에서는 열이 수직 방향으로 쌓이면서 기본 콘텐츠가 재배치 - 이 패턴의 한 가지 주요 이점은 대개 소형 화면과 대형 화면에서 하나의 중단점만 필요하다는 것
열 끌어놓기(ColumnDrop)	- 전체 너비가 가득 찬 다중 열 레이아웃의 경우, 열 끌어놓기는 창 너비가 콘텐츠에 비해 너무 좁아지면 열을 수직으로 쌓아 결국 모든 열이 수직으로 쌓이게 됨 - 이 레이아웃 패턴의 중단점 선택은 콘텐츠에 따라 다르며 디자인에 따라 변할 수 있음
레이아웃 시프터(Layout Shifter)	- 레이아웃 시프터 패턴은 반응성이 가장 뛰어난 패턴이며, 여러 화면 너비에 복수의 중단점이 있음 - 이 레이아웃의 핵심은 다른 열 아래로 이동 및 재배치하는 방식이 아니라 콘텐츠의 자리 이동 방식 - 각 주요 중단점 간의 현저한 차이로 인해 유지 관리하기가 훨씬 복잡하고 전체 콘텐츠 레이아웃뿐만 아니라 요소 내의 변경도 포함함
미세 조정(Tiny Tweaks)	- 미세 조정은 글꼴 크기 미세 조정, 이미지 크기 미세 변경 또는 콘텐츠 미세 이동 등과 같이 레이아웃을 약간 변경함 - 이 패턴은 1페이지 선형 웹사이트, 텍스트가 많은 문서 등 단일 열 레이아웃에서 잘 작동함
오프 캔버스(Off Canvas)	- 오프 캔버스 패턴은 콘텐츠를 수직으로 쌓지 않고 사용 빈도가 낮은 콘텐츠(예: 탐색 또는 앱 메뉴)를 화면 밖에 배치하고, 화면 크기가 충분히 커지면 표시하고, 작은 화면에서는 클릭했을 때만 보여줌