반응형 웹 디자인(Responsive Web Design, RWD) / ①

문제1) 반응형 웹 디자인

 

답)

 

 

1. N_Screen 환경에 최적화된 UI 구현, 반응형 웹의 개요

가. 반응형 웹(Responsive Web)의 정의

• 사용자의 다양한 디바이스 환경에 따라 해상도나 화면이 최적화된 환경으로 자동 변환되는 기술
• 소스 코드 상에서 화면폭을 감지해 적절한 레이아웃이 나오도록 CSS를 교체하는 기법

 

나. 반응형 웹의 부각 이유

서비스 사용자 측면	서비스 제공자 측면
N-Screen 환경에서 다양한 디바이스 환경에서 동일한 사용자 환경의 품질 요구	웹 표준 준수를 통한 오픈 웹 지향 OSMU(One Source Multi Use)를 통한 서비스 구축 및 유지보수 비용 절감

 

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

주요패턴	구성도	상세설명
유동형 (Mostly Fluid)		유동형 패턴은 가변형 그리드로구성하여 단순히 컨텐츠의 폭을 맞추는 방법 큰 화면에서 중간 크기의 화면까지는 여백 정도만 조정되고, 이어작은 화면이 되면 그리드가 움직이면서 컨텐츠를 수직으로 재배치 이 패턴의 중요한 장점은 작은 화면과 큰화면 사이에 단 하나의 중단점(breakpoints)만 있으면 됨
열 끌어놓기 (Column Drop)		화면폭이 좁아져서 더이상 컨텐츠의 정상적인 표시가 힘들 경우, 컨텐츠 영역의 확보를 위해 컬럼을 하단으로 떨궈서 열을 수직 배열 이 패턴은 화면크기에 관계없이사용하는 페이지를 작성 하는데 도움
배치 이동 (Layout Shifter)		이 패턴은 스크린이 크기마다 다른 형태의 레이아웃을 사용. 단순히 컬럼을 다른 컬럼 아래로이동 및 재배치하는 방식 아닌, 기기나 화면 사이즈에 따라 콘텐츠를 이동시켜 레이아웃을 변형

 

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

추가패턴	구성도	상세설명
미세 조정 (Tiny Tweaks)		미세 조정은 글꼴이나 이미지의크기 조정 또는 콘텐츠 미세 이동 등과 같은 작은 변화 발생 보통 하나의 컬럼을 사용하며 브라우저의 폭이 변하더라도 레이아웃의 변화가 크지 않아서 블로그에서 많이 사용
오프 캔버 스 (off- Canvas)		메뉴나 서브 컬럼을 화면 좌/우측에 숨겨두고 필요할 때 노출하는 패턴 콘텐츠를 수직으로 쌓지 않고 사용 빈도가 낮은 콘텐츠를 화면 밖에 배치하고, 화면 크기가 충분히 커지면 표시하고, 작은 화면에서는 클릭 했을 때만 보여줌

---

 

공감과 댓글은 아이티신비에게 큰 힘이 됩니다.

블로그 글이 유용하다면 블로그를 구독해주세요.♥