반응형 웹사이트 만들기 (반응형 웹 이란? - 0)

반응형 웹사이트란 말 그대로 PC, TV, 네비게이션, 스마트 기기 등 다양한 기기에 반응하는 웹 사이트로, 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적환된 화면 레이아웃을 보여주는 사이트입니다.

(http://www.palantir.net)

이렇게 반응형 웹을 이용하면 사용자가 웹사이트 내용을 제대로 보기 위해 스크롤 막대를 옮기거나 화면을 확대하는 수고를 최대한 줄일 수 있고, 그만큼 사용자에게 편리한 웹사이트를 제공할 수 있습니다.

반응형 웹의 장점

1. 기기의 화면 크기나 해상도에 구애받지 않습니다.

 - 반응형 웹 기술을 이용하면 데스크톱 PC나 스마트폰뿐 아니라 스마트 TV, 게임 콘솔 등 웹 브라우저가 포함된 기기라면 어떤 기기에서나 화면 크기와 해상도에 상관없이 가장 알맞은 웹사이트 레이아웃을 보여줍니다.

2. 화면의 변화에 즉시 반응합니다.

- 모바일 기기에서 화면 방향을 가로나 세로로 돌리더라도 즉시 그 방향애 맞게 사이트 내용이 배치됩니다. 데스크톱에서도 브라우저 화면 크기를 바꾸면 새로 바뀐 화면 크기에 맞게 사이트 레이아웃이 바뀝니다.

3. 어느 기기에서든 사이트 주소가 같습니다.

- 반응형 웹사이트이므로 하나의 사이트 주소를 이용할 수 있습니다. 사용자 입장에서는 데스크톱 PC의 즐겨찾기를 동기화해서 여러 기기에서 사용할 수 있고, 개발자 입장에서도 사이트 주소를 통일할 수 있기 때문에 검색 엔진에 최적화시킬 수 있습니다.

4. 유지 관리가 편합니다.

- 기기마다 따로 페이지를 만드는 것이 아니어서 관리해야 할 코드가 한 가지뿐이기 때문에 코드와 콘텐츠 유지가 간단하고 편리합니다. 특히 반응형 웹에 사용되는 코드들은 server-side 코드가 없고 HTML과 CSS 로만 되어 있어 복잡하지 않습니다.

5. 최신 웹 표준을 따릅니다. 

- 반응형 웹에서 사용하는 기술들은 국제 웹 표준화 기구인 W3C에서 웹 표준으로 지정한 HTML과 CSS로 나누어져 있고 주요 최신 브라우저들에서 지원하고 있습니다.

반응형 웹의 단점

1. 예전 브라우저 버전과 호환성에 문제가 있을 수 있습니다.

- 반응형 웹을 제작하기 위한 기술 중에서 미디어 쿼리는 CSS3 기술이기 때문에 인터넷 익스플로러 9부터 지원합니다. 하지만 국내에는 인터넷 익스플로러 8 이하 버전 사용자도 아직 많습니다. 따라서 하위 버전의 브라우저를 사용하고 있는 사람들을 수용할 사이트라면 브라우저를 체크해 하위 버전용 페이지로 이동할 수 있도록 하거나 하위 버전을 위한 라이브러리를 추가해야 합니다.

2. 사이트 디자인이 단순합니다.

반응형 웹은 웹 브라우저 너빗값에 따라 레이아웃이 바뀌어야 하기 때문에 사이트 디자인이 단순한 경우가 많습니다. 그래픽 효과가 많을수록 화면 크기에 맞게 레이아웃을 변경하는 것이 어렵기 때문입니다. 그래서 오히려 디자인에 시선을 뺏기지 않고 사이트 내용에 집중할 수 있다는 장점도 있습니다.

만약 접속하는 기기를 인식해서 그에 맞는 UI를 조금 더 세밀하게 구성하고 싶다면 반응형 웹 보다는 '적응형 웹(Adaptive Web)'을 사용하는 것이 낫습니다.

* 반응형 웹(Responsive Web)과 비슷한 의미를 가진 적응형 웹(Adaptive Web)이라는 말이 있습니다. 반응형 웹은 사이트를 제작할 때 웹 문서 안에서 접속하는 기기의 브라우저를 식별하고 그에 맞춰 웹페이지를 표시하는 방법이라면, 적응형 웹은 서버에서 프로그래밍을 통해 접속한 기기의 브라우저를 파악한 후 그에 맞는 웹페이지를 표시하는 방법입니다. 반응형 웹이 레이아웃을 재배치하는 정도라면 적응형 웹은 기기에 따라 세밀한 부분까지 조절할 수 있습니다. 

반응형 웹 디자인 패턴

반응형 웹 디자인에도 모바일 기기와 태블릿, 데스크톱 등에서 적절하게 레이아웃을 배치할 수 있는 대표적인 디자인 패턴들이 있습니다.

1. 유동형 패턴

- 유동형(Mostly Fluid) 패턴은 모바일 화면을 제외한 대부분의 화면에서 사이트의 레이아웃을 그대로 유지하면서 브라우저 창의 너비에 따라 콘텐츠의 크기만 조절합니다.

2. 칼럼 드롭 패턴

- 칼럼 드롭(Column Drop) 패턴은 여러 칼럼으로 구성된 레이아웃에서 흔히 사용하는 패턴으로, 화면 너비가 좁아지면 칼럼들이 아래로 떨어지도록(drop) 구성합니다.

3. 레이아웃 이동 패턴

- 레이아웃 이동(Layout Shifter) 패턴은 칼럼 드롭 패턴과 유사하게 화면 크기에 따라 칼럼들 드롭해 레이아웃을 재배치하는 형태입니다. '칼럼 드롭 패턴'이 원래 순서를 유지하면서 칼럼을 아래로 드롭한느 것이라면 '레이아웃 이동 패턴'은 순서에 크게 구애 받지 않고 칼럼을 드롭합니다.

4. 살짝 수정 패턴

- 살짝 수정(Tiny Tweaks) 패턴은 반응형 웹 중 가장 간단한 형태로, 화면 너비를 조절하면 레이아웃에는 변화 없이 글자 크기나 이미지 크기만 변합니다.

5. 캔버스 밖으로 패턴

- 반응형 웹 디자인을 모바일 화면에 맞게 적용하다 보면 콘텐츠 칼럼을 하나씩 수직으로 쌓게 됩니다. 그래서 콘텐츠가 많으면 작은 모바일 화면에 다 담기 힘든 경우가 있습니다. 이럴 때 일부 콘텐츠를 화면 밖에 감춰두었다가 사용자가 필요로 할 때만 화면에 나타나도록 슬라이드 형식으로 보여주는 패턴이 캔버스 밖으로(Off Canvas) 패턴입니다.

반응형 웹을 구현하는 방법

반응형 웹은 사이트에 접속하는 기기에 반응하여 css를 사용해 사이트의 레이아웃을 조절하는 것입니다. 반응형 웹을 만드는 방법은 크게 '가변 그리드'와 '미디어 쿼리'를 이용하는 방법이 있고, 이것을 한데 묶어 사용하기 쉽게 만든 프레임워크들이 있습니다.

위 구현 방법에 대한 자세한 내용은 추후에 실습과 함께 설명해드리겠습니다.

다음 시간 부터는 반응형 웹을 만드는 기본 구성 요소 1 - 가변 그리드, 2 - 미디어 쿼리, 3 - 가변 이미지와 가변 동영상에 대한 실습을 진행하도록 하겠습니다.

본 내용은 'HTML5 CSS3 jQuery 웹 표준 코딩으로 시작하는 프런트엔드 웹 디자인 입문 웹 퍼블리셔&웹 기획자&웹 디자이너의 필수 코스!' '고경희 지음' 책을 참고 하였습니다.