반응형 웹 이해하기 #1
비가 온다고 하더니.. 어제 잠깐 내리고 나서는 더 꿉꿉한 날씨가 되었네요ㅠㅠ
더위를 너무 잘타는 저는.. 여름이 싫지만! 살이 쪘다는 이유도 하나겠죠^^;
그래서 요즘 열심히 운동을 하고있지요~~ ^_^
언젠가는(..?) 가벼워지는 그날까지~! 오늘도 퇴근 후 런닝위를 달리러 헬스장을 방문할 예정입니다!
다이어트 하시는 분들 모두 화이팅입니다 🙂
자~ 그럼 오늘도 친절한 아이티유에서 스~마트한 정보를 공유하도록 하겠습니다!
지금은 스마트스마트 시대!! ^-^)/
스마트폰의 보급이 늘면서 거의 모든 사람이 스마트폰을 사용하고,
시간과 장소 상관없이 인터넷에 접속합니다.
출근하는 버스나 전철 안에서,
친구와의 커피를 마시는 중간중간에도,
잠들기 전 침대에서도 우리는 스마트폰으로 인터넷에 접속합니다.
아이패드나 태블릿PC 로 접속하기도 하죠!
▲ 이미지출처 : www.pixabay.com
이러한 다양한 사이즈의 스마트기기로 인터넷을 이용하다보니 PC 홈페이지로는 다양한 스마트기기에 최적화된 홈페이지를 제공할 수 없게 되자 PC 홈페이지 외에 모바일 홈페이지를 만들어 제공하게 되었습니다.
그러나 PC 홈페이지 따로 모바일 홈페이지를 따로 만들어 제공하다보니 메뉴를 하나 바꾸려 해도 PC 홈페이지, 모바일 홈페이지 따로 작업을 하게되고, 비용과 시간이 2배로 드는 어려움이 생겨납니다.
이에 다양한 해상도에 최적화된 웹페이지를 제공하는 반응형 웹 디자인이 대안으로 제시되고 있습니다.
음.. 아래 동영상을 보시면 반응형 웹 디자인이 무엇인지 쉽고 빠르게 이해할 수 있을지도 모르겠습니다.
( 블라블라~ 영어로 된 동영상..ㅋㅋㅋㅋ 뭐래는겨~? 영어 울렁증..이 있어서..^^; )
반응형웹(Responsive Web Design, RWD)
반응형 웹 디자인이란 다양한 디바이스(PC, 태블릿PC, 스마트폰 등)에 따라 화면의 크기가 최적화되도록
자동으로 조절되는 웹페이지를 의미하며, 하나의 웹페이지 소스(HTML), 하나의 주소(URL), 하나의 컨텐츠로 최적화된 웹페이지를 제공하는 것을 목적으로 합니다.
(참고 : Daum백과 / Naver지식백과)
▲이미지출처 : 구글검색(responsive web design)
한가지 예로 밑에 링크된 TED 사이트를 클릭해주세요^^
TED 사이트 접속하기 클릭 ^.^!
접속하시면 브라우저의 화면 사이즈를 줄였다 늘였다 조절이 가능 합니다.
레이아웃, 폰트 사이즈, 이미지의 사이즈가 화면 사이즈에 따라자동으로 변화되는 것을 확인할 수 있는데요, 디자인은 심플하지만 브라우저 화면 사이즈에 따라 반응이 잘 이루어지고 있습니다.
브라우저 사이즈에 따라 화면들이 재배치되면서 최적화 되는 것입니다.
스마트폰으로 접속하여도 같은 레이아웃과 디자인을 볼 수 있고 사이트로 접속하는 URL도 같습니다!
▲ ted.com 화면 이미지 캡쳐
사용자들이 PC 화면을 줄였다 늘였다 해서 사용하지는 않지만 어떠한 화면 사이즈에도 최적화된 페이지를
볼 수 있도록 구현하면 사용자가 접속하는 기기와 환경이 달라도 항상 같은 화면, 같은 서비스, 같은 경험을
하게 만드는 것이 반응형 웹 디자인입니다.
우리가 사용하는 PC, 태플릿PC, 스마트폰 등의 기기들은 더욱 다양해 지고 있으며,
반응형 웹 디자인은 모든 화면 사이즈를 고려해서 기획하고 구축하기 때문에 그에 맞게 최적화하기에
쉬울 수 있습니다.
▲Graphic resources by freepik
반응형 웹을 구현하기 위해서는 1개의 URL + 동일한 HTML5 코드 + CSS3의 미디어 쿼리를 이용하여 구축되며 그 결과물(컨텐츠)을 PC, 태블릿PC, 스마트폰 등의 다양한 디바이스의 해상도에 최적화된 크기와 레이아웃으로 각각 제공하게 되며, 다양한 디바이스에서 사용자가 접근하기 쉽고 보기 편리하게 만드는 기술이죠!
반응형 웹의 기술 요소로는 유동형 이미지(Flexible Images), 유동형 그리드(Fluid Grid), CCS3 미디어 쿼리(Media Query) 등이 있습니다.
이 3가지 기술요소는 2010년 에단 마코트(Ethan Marcotte)가 Responsive Web Design 이란 글을 올림으로 이 방법론이 처음 알려지게 되었습니다.
유동형 이미지(Flexible Images)
: 이미지의 크기가 브라우저의 창 크기에 따라 자동으로 줄어들고 늘어나는 것을 의미합니다.
일반적으로 브라우저상의 이미지는 고정된 크기를 가지고 있지만, 반응형 웹 디자인에서는 이미지가 브라우저의 창 크기에 맞게 적절한 형태로 변경될 수 있도록, 창의 가로너비에 유동적으로 변하는 단위를 사용합니다.
그 방법이 Flexible image 인데요, 기술적으로는 max-width: 100% 라는 짧은 CSS 코드를 추가해줌으로서 브라우저 창 너비에 따라 변하는 가변성을 갖게 됩니다.
유동형 그리드(Fluid Grid)
: Grid라는 용어는 디자인에서 사용하는 전문 용어로서 문서의 서식을 잡아주기 위해 사용하는 규칙적 간격을 의미합니다.
Grid의 너비 역시 Flexible image와 마찬가지로 창의 너비에 대응되는 가변 너비로 설정하는 방법입니다.
디자인한 Grid의 간격을 측정한 뒤, 전체 페이지에서 하나의 Grid가 차지하는 공간이 몇 %인지를 계산하여 가변단위인 %로 값을 설정해 주면 Grid가 창 너비에 따라 가변적으로 변하여 동작 할 수 있게 됩니다.
CSS3 미디어 쿼리(Media Query)
: 미디어 쿼리는 CSS에서 조건문을 처리하기 위해 CSS 표준에서 제시된 방법입니다.
미디어 쿼리의 특성 중 min-width, max-width 값을 활용하여 브라우저 창 너비의 특정 지점을 기준으로 각 해상도에 최적화 되도록 레이아웃을 변화시킬 수 있게 하는 방법입니다.
웹페이지를 접속하는 사용자들의 환경은 우리가 흔히 사용하는 IE, 크롬 등의 그래픽 브라우저 뿐 아니라 텍스트 전용 브라우저, 스크린 리더, 프린트 매니저 등 다양한 환경이 존재합니다.
각 환경의 조건에 따라 분기하여 CSS의 스타일을 다르게 주어야 할 필요가 있었기 때문이 이를 쉽게 처리할 수 있는 방법으로 미디어 쿼리가 만들어지게 되었습니다.
(정확한 개념 이해를 돕기 위해 Toby Yun의 RWD 관련 글을 인용하였습니다.)
※여기에 한가지 더!!
반응형 레이아웃 (Responsive Layouts / Fluid or Flexible Layout)
: 레이아웃의 크기를 화면의 크기에 따라 유동적으로 변화를 주는 것을 의미합니다.
미디어 쿼리를 사용하여 일정 크기가 되면 레이아웃 구조를 바꿔 특정 부분이 사라질 수도 있고, 합쳐지기도 하면서 레이아웃의 구조가 바뀌어 사용자에게 제공됩니다.
반응형 레이아웃은 Luke Wroblewski 의 반응형 레이아웃 패턴 5가지가 많이 사용되고 있습니다.
패턴1. Mostly Fluid (Fluid Grids)
가장 많이 사용되는 레이아웃으로 대부분의 반응형 웹 디자인을 위해 이 방식을 사용하고 있습니다.
비율에 기초한 그리드를 기준으로 단순히 컨텐츠의 폭을 맞추는 방법입니다.
▲이미지 캡쳐 : www.lukew.com
패턴2. Column Drop
화면의 폭이 좁아져서 더 이상 컨텐츠를 제대로 표현하기 힘들 때,
내용을 묶어주는 Column을 아래로 떨구어 컨텐츠 영역을 확보하는 방법입니다.
▲이미지 캡쳐 : www.lukew.com
패턴3. Layout Shifter
화면의 폭이 좁아져서 더 이상 컨텐츠를 제대로 표현하기 힘들 때, 단순히 Column을 떨구거나 내용을
생략하는 것이 아닌 레이아웃 자체에 변화를 주어서 새로운 형태로 컨텐츠를 표현하는 방법을 말합니다.
▲이미지 캡쳐 : www.lukew.com
패턴4. Tiny Tweaks
화면 사이즈에 맞추어 단순하게 내용의 크기만을 조절하는 방식을 말하며,
내용이 적거나 복잡하지 않을 경우에 적용하면 좋은 레이아웃입니다.
▲이미지 캡쳐 : www.lukew.com
패턴5. Off Canvas
화면의 폭이 좁아져서 더 이상 컨텐츠를 제대로 표현하기 힘들 때,
화면의 바깥쪽으로 내용을 숨겼다가 버튼이나 텍스트 링크 등으로 내용을 호출하면 숨겨져 있던 영역을 스크린 안쪽으로 불러와서 보여주는 방식을 말합니다.
▲이미지 캡쳐 : www.lukew.com
Luke Wroblewski 의 반응형 레이아웃 패턴들은 실제 반응형 웹 디자인을 구현할 때
1개의 패턴만을 사용하는 경우도 있지만, 2가지 이상의 패턴을 혼용해서 사용하는 경우도 많이 있습니다.
제작하려는 홈페이지 특성에 맞게 적절한 패턴을 적용하여 사용하면 되겠습니다^^
반응형 웹 디자인과 함께 이야기 되는 것이 적응형 웹 디자인(Adaptive Web Design, AWD)이라는 것이
있는데, 적응형 웹 디자인은 반응형 웹 디자인과는 달리 몇 개의 해상도를 미리 지정하여 디바이스가 지정된 해상도에 속하면 그 해상도에 정의된 스타일로 표현하는 기법으로 유동적으로 변화하는 반응형 웹디자인과는 달리 각각의 디바이스에 보다 최적화시키거나 각각의 디바이스에 다양한 디자인을 시도할 수 있는 장점이 있습니다.
적응형 웹 디자인에 대한 동영상도 잠깐 볼까요?
( 또 영어네요..^^;ㅋㅋㅋㅋ 외쿡인 아저씨가 아주 잘 설명해주셨는데, 엄.. 다들 알아들으셨죠~? ^^;;; )
반응형 웹 디자인과 적응형 웹 디자인 기술을 구분해 보자면,
반응형 웹 디자인은 브라우저 가로 폭의 변화에 따라 즉각적으로 반응하고 변화되는 웹사이트를,
적응형 웹 디자인은 브라우저 가로 폭의 변화에 따라 즉각적으로 반응하지 않고 정해진 해상도가 되면 레이아웃이 변하는 웹사이트 라고 생각하면 될 것 같습니다.
(내용 참조 : Multi-Device Layout Patterns / 디자이너 눈으로 본 반응형 웹
반응형 웹과 더 나은 사용자 경험(UX) )
요즘 홈페이지는 반응형 웹 기술이 트랜드를 넘어 대세가 되어 가고 있습니다.
다양한 디바이스의 등장과 모바일기기를 이용해 웹 사이트에 접속하는 사용자들의 증가로 인해 반응형 웹을 구축하는 서비스 공급자 또한 증가하고 있습니다.
반응형 웹 디자인이 단일 HTML 소스와 1개의 URL 사용하여 구현하여 유지보수 인력과 비용 절감의 장점과 다양한 디바이스 환경에 최적화된 페이지를 제공한다는 매력적인 장점이 있지만,
단일 소스로 구현되기 때문에 각 디바이스에 맞춘 세심한 초기 기획이 필요하며 이에 소요되는 시간과 비용을 고려하여야 하며, 모바일 환경에서의 속도 저하 및 네트워크 문제, 구축 완료(또는 구축중) 후에는 구조 변경이 어렵다는 단점들도 있기 때문에 이런 추세를 따라가기 위해 맹목적으로 반응형 웹 구축을 하기에 앞서 구현 목적과 구현 방안을 충분히 기획, 설계, 검토 후 구현하는 것이 보다 중요하다 할 것입니다.
오늘은 간단하게 반응형 웹 디자인에 대하여 소개를 해드렸는데요^^~
같은 주제로 두번째 이야기도 야심차게 준비중이니 기다려주세요~!! 🙂
