반응형웹/적응형웹 사이트 레이아웃 살펴보기

안녕하세요 키다리디자이너입니다.

 

반응형웹사이트를 만들기 위해서는 기획단계부터 기술검토까지 많은 고민이 필요합니다만, 그 중 가장 중요한 것은 어떤 컨텐츠를 어떻게 배치하고 브라우저 사이즈가 변할때마다 그것을 어떻게 재배치할 것인지가 아닐까 합니다.

고정된 레이아웃을 가진 웹사이트와 달리 반응형웹사이트는 레이아웃 변화에 웹사이트의 전략이 담겨야 하니까요.

 

오늘은 몇가지 반응형웹/적응형웹사이트들의 브라우저 크기에 따른 레이아웃 변화를 살펴보도록 할게요.

이것은 제가 가볍게 살펴본 후 레이아웃에 임의로 번호를 매겨본 것이구요, 그것의 코딩까지는 자세히 살펴보지 않았다는 것을 미리 말씀드립니다.

 

 

1. 반응형웹 사이트

반응형웹사이트와 적응형웹사이트의 차이를 미리 말씀드리고 넘어가자면 사이트를 띄운 후 브라우저 가로 크기를 살살 줄이거나 늘려보면 그 안에 내용들이 브라우저 사이즈에 맞춰 자연스럽게 재배치된다면 반응형웹이구요, 브라우저크기를 줄여도 한동안 반응이 없다가 정해진 해상도가 되면 레이아웃이 갑자기 바껴버리는 것이 적응형웹이라고 합니다.

잘 이해가 되시나요? 이해가 안되셔도 괜찮습니다.

아래 사이트들을 띄워서 브라우저 크기를 늘였다 줄였다 해보시면 차이를 아실 것입니다.

 

 

 

1-1. 플랜코리아 (http://www.plankorea.or.kr/)

먼저 플랜코리아 홈페이지를 살펴보도록 하겠습니다.

반응형웹사이트로 리뉴얼한지 다소 오래됐지만 완성도가 높고 레이아웃의 변화가 자연스럽습니다.

각 영역별로 번호를 부여해 너비에 따른 레이아웃 변화를 살펴보도록 하겠습니다.

 

 

 

가장 큰 화면에서(PC)의 레이아웃입니다.

먼저 눈에 띄는 것은 반응형웹사이트에서 많이 쓰이는 가로로 꽉찬 사진의 배치입니다.

그 아래로 공지사항과 뉴스등이 좌우로 나뉘어져 있습니다.

 

 

 

 

중간사이즈(타블렛PC)의 화면입니다.

상단 헤더의 디자인이 바뀌고 네비게이션은 모바일을 위한 디자인으로 바뀌었습니다.

1번영역 아래로 4번 뉴스영역이 올라와 있네요. 공지사항과 플랜 홍보대사는 하나의 영역처럼 붙어 다니는 것 같습니다.

 

 

 

 

가장 좁은 사이즈(모바일)에서의 화면입니다.

중간사이즈의 구성과 크게 다르지 않습니다.

 

1-2. TED (www.ted.com)

많은 분들이 잘 알고 계시는 TED사이트입니다.

주목할만한 부분은 중앙에 동영상 썸네일이 모인 부분의 각 썸네일의 크기나 위치가 불규칙하게 변형되는 것이 신기하네요.

 

 

 

 

가장 큰 화면에서의 레이아웃입니다.

 

 

 

 

약간 줄였을 때의 레이아웃입니다.

가장 큰 변화는 모바일용 헤더/네비게이션과 3,4번 영역이 나뉘어 진 것이 보이네요.

 

 

 

가장 좁은(모바일)화면에서의 레이아웃입니다.

일반적인 모바일사이트 구현에서와 같이 아래로 쭉 떨어지는 형태입니다.

 

TED사이트는 해상도에 따른 레이아웃 변경이 교과서적인 흐름을 갖고 있습니다.

다만 1번 영역이 가장 좁은 해상도에서는 2번 영역 밑으로 떨어지게 되는데 이런 흐름이 화면이 좁은 모바일에서는 디자인적으로 자연스럽기 때문이 아닐까 생각합니다.

 

 

1-3. 현대자동차그룹 (http://pr.hyundai.com/#/pages/main.aspx)

반응형웹으로 새단장한 현대자동차그룹의 홈페이지입니다.

반응형웹사이트 중에서는 다소 복잡한 느낌이지만 해상도에 따른 그리드 변경이 자연스럽게 잘 구현되었고 자잘하게 신경을 많이 쓴 흔적이 보입니다.

 

 

 

 

PC화면의 메인입니다.

 

 

 

 

화면을 좀 줄여보겠습니다.

각 그리드가 재배치된 후에도 일정한 비율을 유지하여 정확히 맞아 떨어집니다.

4번과 6번 영역이 5번 아래로 붙으며 레이아웃이 바뀐 점이 가장 큰 변화로 보입니다.

 

 

 

가장 좁은 화면입니다.

헤더의 네비게이션의 디자인이 바뀌어 1번영역 아래로 붙은 점이 가장 눈에 띄네요.

여기서도 각 그리드의 가로세로 비율이 맞아 떨어집니다.

 

 

2. 적응형 웹사이트

이번에는 적응형웹사이트를 몇개 소개해 드리겠습니다.

적응형웹은 미리 정해놓은 해상도가 되면 정해진 그리드로 변경되므로 브라우저를 늘리거나 줄여도 조건에 맞는 해상도가 되지 않으면 변화하는 것이 없습니다.

반응형웹이 모든 그리드가 서로 영향을 주며 유기적으로 바뀌는 반면 적응형웹은 해상도가 달라지면 전혀 다른 레이아웃과 디자인을 보여주기도 합니다.

위에 예로 든 반응형웹사이트들과 아래 적응형웹사이들을 직접 띄워 브라우저 크기를 조절해가며 직접 차이를 보시기 바랍니다.

 

 

2-1. 삼성증권 모바일 (http://m.samsungpop.com)

맨 처음 소개해 드릴 사이트는 삼성증권 모바일사이트입니다.

여기에서도 각 그리드마다 번호를 부여해 나누겠습니다.

 

 

 

가장 큰 화면입니다.

줄이면 줄어들 것 같은 반응형웹스러운(?) 디자인입니다.

 

 

 

 

조금씩 브라우저의 너비를 줄여보겠습니다.

적응형웹사이트는 지정된 너비가 되기 전에는 그리드의 너비가 줄거나 재배치되지 않고 전체사이즈가 유지되기 때문에 가로 스크롤바가 생깁니다.

 

 

 

 

조금 더 줄여보겠습니다.

6번 영역의 날씨가 디자인이 바뀌어 1번 영역 위에 올라가고 그 옆에 종합주가지수가 새로 나타났습니다.

 

 

 

 

더 줄여보겠습니다.

이 사이즈에서는 디자인과 컨텐츠가 완전히 달라졌습니다. 아까도 언급했듯이 적응형웹은 해상도에 따라 전혀 다른 레이아웃이나 디자인을 적용할 수 있기 때문입니다.

 

 

 

삼성증권은 PC용 홈페이지를 따로 운영하고 있으니 아마도 이 사이트는 모바일에 중점이 맞추어진 사이트라 생각됩니다.

맨 위의 넓은 화면은 PC용이라기 보다는 태블릿PC용으로 제작된 것이라 볼 수 있겠네요.

 

 

2-2. 삼성전기(http://www.samsungsem.co.kr/servlet/Main?lang=kr)

이번에는 삼성전기 웹사이트입니다.

위의 삼성증권모바일과는 다르게 PC에서 모바일까지 모든 디바이스의 접속을 고려한 사이트로 보여집니다.

 

 

 

 

깔끔한 디자인이네요.

상단 버튼이나 좌우 이동 버튼으로 다른 레이아웃의 화면을 볼 수 있습니다.

각 레이아웃별 해상도 변경시 그리드 변화는 직접 접속해서 보시길 바랍니다.

 

 

 

 

약간 너비를 줄여보았습니다.

위의 삼성증권모바일과 마찬가지로 일정해상도가 되기까지는 하단에 스크롤바가 생기게 됩니다.

그리고 더 줄여보면 3,7,8번 영역이 밑에 붙게 됩니다.

 

 

 

 

줄이다 보니 1번 영역에 참사가 발생했네요.

반응형웹사이트를 만들때는 이런 오류가 자주 발생하니 충분히 테스트 해보시길 바랍니다.

 

 

 

더 줄여보았습니다.

헤더와 네비게이션의 디자인이 바뀌고 각 그리드들은 일반적인 모바일웹페이지의 형태를 잡게 됩니다.

 

 

2-3. SK (http://www.sk.co.kr/)

SK그룹의 홈페이지입니다.

반응형웹사이트들에서 자주 보이는 깔끔한 그리드형태의 홈페이지입니다.

 

 

  

 

 

조금 줄여보았습니다.

일반적으로 많이 쓰이는 우측 그리드가 아래로 내려오는 변화를 보입니다.

 

 

 

이상으로 반응형웹사이트와 적응형웹사이트들을 몇가지 살펴보았습니다.

반응형웹의 경우에는 그리드의 위치나 디자인/크기가 어느정도 일정하게 변경되어야 하는 반면 적응형웹은 디자인에 조금 더 자유도가 있습니다. 하지만 적응형웹사이트의 단점은 수많은 모바일기기를 다 대응할 수 없기에 화면에 스크롤바가 생길 수 있고 그리드 변화가 역동적이지 않다는 데에 있습니다.

 

반응형웹에 관심이 있고 만들어야 하는 분이라면 단순 기술적인 접근보다는 타사이트의 그리드 구성과 해상도에 따른 각종 변화를 눈여겨 보시기 바랍니다.

반응형웹은 단순히 해상도에 따른 레이아웃변화에만 목적이 있는 것이 아니라 웹사이트를 만드는 궁극적인 목적인 "효과적인 정보 전달"을 위한 하나의 수단으로 접근해야 하기 때문입니다. 해상도에 따른 그리드의 변화가 이런 목적에 충실하게 구현되어 있다면 성공적인 반응형웹사이트가 될 것입니다.