2013, WEB Design Trend!

현재의 웹은 스마트폰 및 각종 모바일 기기 보급의 활성화에 따라 모바일 웹이 그 중심으로 자리잡아가고 있는 추세입니다.
따라서 웹 디자인 역시 모바일 웹을 최적화하여 보여주기 위한 UI 구성과 밀접한 상관관계를 가지는 형태의디자인이 최신 트랜드로 떠오르고 있습니다.

2013년 주목해야 할 웹 디자인 트랜드! 지금부터 시작합니다.

◎ 반응형 레이아웃(responsive layouts)

반응형 웹디자인(responsive web design)은 2012년의 트랜드 에서도 가장 주목을 받았었는데, 그 동안 꾸준하게 발전하여 드디어 모든 디지털 기기를 고려한 레이아웃 디자인의 결정판이 되어가고 있습니다. 반응형 웹 디자인은 점차 다양해지고 있는 화면 해상도에 맞게 반응하여 디자인의 형태가 변하는 것을 말합니다. 이는 데스크탑, 랩탑, 스마트폰, 태블릿PC 뿐만 아니라 앞으로 등장할 새로운 기기들 모두를 지원할 수 있도록 고려하여야 한다는 것을 의미합니다. 모든 기기에서 완벽하게 작동하는 한결같은 웹 디자인(uniform web design)을 구현하고, 코딩 하여야 하며, 각각의 모바일 기기뿐만 아니라 데스크탑에서도 사용자가 브라우저 윈도우 창을 키우거나 줄일 때 웹사이트의 레이아웃이 다이나믹하게 변하게 됩니다. 개발자는 CSS3의 미디어 쿼리로 이를 구현할 수 있습니다.

◎ Parallax Scrolling (시간차 스크롤링)

평면적인 웹사이트에 3차원적 시공간 감을 불어 넣은 표현으로 플래시 없이도 액티브한 사이트를 만들 수 있는 패럴랙스 스크롤이 인기를 끌고 있습니다. 마우스 스크롤을 내리면 단순히 페이지 롤링 기능만 되는 것이 아닌, 배경과 비주얼 컨텐츠가 각기 다른 레이어로 시간 차를 두고 움직이게 되므로 보다 역동적이고 입체적인 표현이 가능해집니다. 물론, 플래시 기능의 100%를 구현할 수는 없지만, css3와 html5 사용이 확장되면서 온라인 마케팅 사이트나 간단한 홍보사이트에 활용되고 있으며, 앞으로의 영향력과 발전가능성은 충분히 기대해 볼만합니다.

◎ Over sizing Everything

화면을 가득 채운 배경 이미지를 사용하여 시원한 레이아웃과 임팩트 있는 이미지 표현이 가능한 스타일 입니다. 고퀄리티 이미지를 표현할 때 보다 효과적이며 방문자에게 브랜드에 대한 강한 인상을 남길 수 있는 장점이 있습니다. 컨텐츠가 많지 않은 마이크로 사이트나 제품 홍보 사이트에 많이 사용되고 있습니다.

◎ Infinity Scrolling

계속해서 스크롤다운 하면서 컨텐츠를 보여주는 방식이 2013년부터 주류로 떠오를 것으로 보입니다.
Pinterest가 이 무한스크롤링 사이트로 가장 유명하고 facebook의 타임라인도 이 방식을 사용하고 있습니다.
컨텐츠를 보기 위해 다른 페이지로 넘어가는 링크 액션 대신, 끊임없이 스크롤다운 되어 사용자의 체류 시간을 늘릴 수 있는 장점을 가지고 있어 컨텐츠가 지속적으로 생성되는 성격의 사이트 등에서 앞으로 더 많은 인기를 얻을 것으로 생각합니다.

◎ 1페이지 사이트(one page web design)

원페이지 디자인은 2012년에 이슈가 되어 왔습니다. 사실 웹의 초창기부터 원 페이지 웹사이트는 있어 왔지만, 최근 들어서 다양한 형태로 진화되고 있습니다.

실제로 웹사이트 개발의 가장 큰 걸림돌은 역시 브라우저였습니다. 하지만 2013년에는 웹표준 코딩, HTML5, CSS3 등의 사용으로 인해 많은 제약들이 개선될 것으로 보여짐에 따라 앞서 언급된 스타일들이 꾸준히 활용될 것으로 예상됩니다. 반응형웹, CSS3, HTML5를 이용한 디자인 트렌드 가이드 구축을 통해 발 빠르게 개선을 진행해 나간다면 2013년뿐만 아니라 앞으로 더욱 심화될 모바일 웹과 웹 환경에 충분히 대응할 수 있게 될 것입니다.