웹사이트 제작과 관련되어 웹디자인과 기술트렌드의 포스트를 살펴보다가 2013년에 주목할 만한 트렌드 예상에 대한 글 중에서 웹디자인과 관련된 포스트를 소개합니다.
‘2013 web trends‘라는 검색어로 구글링해보면 여러 개의 포스트를 찾을 수 있는데 대부분 유사하게 전망하고 있습니다.
2013년은 2012년의 연장선에 있기 때문에 이미 익숙한 주제들이 언급되었는데, 개인적으로 더 공부하여 보강해야 할 사항을 점검해 보는 시간이 되었습니다.
- 10 Web Predictions for 2013
- Future trends in web design: predictions for 2013
- Web Design: 20 Hottest Trends To Watch Out For In 2013
아래의 내용은 hongkiat.com 에 실린 Jake Rocheleau님의 글인 Web Design: 20 Hottest Trends To Watch Out For In 2013 입니다. 원작자의 허락을 얻어 20개의 주요 트랜드를 소개하면서 일부는 저의 판단에 근거하여 내용을 생략하거나 추가하였음을 고려하시고 번역보다는 의미전달에 방점을 두었음을 미리 알려드립니다.
1.반응형 레이아웃(responsive layouts)
반응형 웹디자인(responsive web design)은 2012년의 트렌드에서도 맨 먼저 언급하였는데, 그동안 꾸준하게 발전하여 드디어 모든 디지털 기기를 고려한 레이아웃 디자인의 결정판이 되어가고 있다. 이는 데스크탑, 렙탑,스마트폰,태블렛 뿐만 아니라 앞으로 등장할 새로운 기기를 지원하는 것을 고려한다는 것을 말한다.
이는 모든 기기에서 완벽하게 작동하는 마치 유니폼 같은 ‘한결같은 웹디자인(uniform web design)’을 구현하고, 코딩하는 것이다. 종종 반응형 웹사이트라 하면 모바일 브라우저를 위한 별도의 것으로 간주되기도 하는데, 꼭 그렇지만은 않다.
핵심 아이디어는 브라우저를 그림그리는 캔버스로 간주하고 (데스크탑의 브라우저에서도) 사용자가 브라우저 윈도우 창을 키우거나 줄이더라도 웹사이트의 레이아웃이 다이나믹하게 변한다는 것이다. 개발자는 CSS3의 미디어 쿼리로 이를 구현할 수 있다.
(첨언)웹사이트를 만들때 예전에는 데스크탑 위주로 작업하고, 모바일웹을 추가하는 방식이었는데, 앞으로는 먼저 모바일웹으로 구현하고(mobile first), 이를 데스트탑으로 확장하는 방식으로 발상의 전환이 필요하다고 전문가들은 조언합니다.
2. 레티나 디스플레이 지원(retina support)
반응형웹과 더불어 레티나 디스플레이를 지원하는 것에 대한 요구가 늘고 있다. Apple의 iphone4를 시작으로 최근 ipad와 macbook은 레티나 디스플레이를 탑재하고 있다.
레티나 디스플레이는 일반 LCD에 비해 2배의 심도를 표현할 수 있다. 따라서 레티나를 지원하는 웹사이트의 디자이너는 기존보다 2배의 해상도 이미지를 저장하고, 다른 하나는 표준 해상도로 저장할 필요가 있다.
retina.js를 추천한다. 방문자가 레티나를 지원하는 기기의 브라우저로 접속한 경우 스크립트가 알아서 @2x의 이미지를 처리할 것이다.
3. 헤더바 고정(fixed header bars)
CSS의 position:fixed; 를 사용하면 상단바를 고정할 수 있다. 방문자가 웹페이지를 아래로 스크롤하여도 항상 상단의 메뉴바는 항상 고정되어 위치하기 때문에 편리한 네이게이션을 제공한다.
(첨언) html5에서는 기존의 frameset은 공식적으로 삭제되었습니다. 물론 여전히 지원은 합니다.
4. 큰 배경 이미지(large photo backgrounds)
웹사이트에 화면을 가득채운 배경 이미지를 사용하는 트랜드로, 방문자에게 강한 인상을 남길 수 있어서 포토그래퍼나 사진을 다루는 웹사이트에 인기있는 디자인이지만, 일반 회사의 웹사이트에도 잘만 사용하면 큰 효과를 볼 수 있다.
(첨언)2012년 웹디자인 트렌드에서도 이미 자주 등장하곤 하였습니다.
Kerem Suer의 웹사이트를 참고하자.
5. CSS 투명효과(css transparency)
포토샵을 사용하지 않고도 투명효과를 줄 수 있는 css3로 2013년에는 모든 브라우저에서 잘 표현될 것이다. discussed on Codrops의 포스트를 참고하자.
Squarespace Blog 는 background:transparent 로 구현된 좋은 사례이다. 다른 방법으로는 rgba(255,255,255,0.6) 와 같이 흰색의 60% 투명도를 구현할 수 있다.
- 참고1. discussed on Codrops
- 참고2. Squarespace blog
6. 첫페이지의 간소화(minimalist landing pages)
핵심 상품이나 서비스에 집중하도록 첫페이지의 간소화.
7. 디지털 QR 코드(digital QR codes)
이미 일반화된 QR코드에 built right into the design에서 보여지는 것처럼 2013년에는 QR코드 자제츼 디자인 요소가 더 부각될 것이다.
8. 소셜미디어 배지(social media badges)
페이스북, 트위터 와 같은 SNS로 컨텐츠를 쉽고 간단하게 공유하게 해주는 소셜공유버튼의 인기는 계속될 것이다.
9. 일러스트풍의 디자인(detailed illustrations)
50 Beautiful Hand-Drawn Web Design 의 샘플처럼, 차별화된 웹디자인으로 일러스트풍의 디자인은 좋은 선택이 될 것이다.
10. 자동 스크롤(infinite scrolling)
마우스클릭이 없이도 아래로 자동 스크롤되는 페이지는 2012년에 본격적으로 인기를 얻었고 2013년에도 그 인기는 계속 될 것이다.
Pinterest가 이미 이 방식으로 유명하고, facebook의 timeline도 이 방식을 채용하고 있어 앞으로도 더 많은 웹사이트에서 인기를 얻을 것이다.
11-12. 특징요약 미리보기(homepage feature tours)
sliding 이미지 또는 데모 비디오로 특정 서비스 또는 상품의 특징을 한 눈에 보여주는 방식의 첫페이지. 이미 워드프레스 테마를 많이 접해본 사람에겐 익숙한 방식이다. 기존에는 플래시(flash)가 인기 있었지만, 2012년에는 jquery 가 대세가 되었다.
13. 모바일 메뉴(mobile navigation toggle)
반응형 웹사이트를 구현할때 까다로운 것 중의 하나는 일관된 고정메뉴이다. responsive navigation 과 Mobile App Design/Dev: Building Navigation With JQuery를 참고하자.
14. fullscreen typography
생략
15. APIs and Open Source
지난 수십년간 오픈소스 프로그램은 웹을 많이 변화시켜왔다. 2012에는 위젯,레이아웃, 다이나믹효과 등에서 주목할만한 오픈 소스들이 많았다. 이를 적용한 웹사이트 템플렛, 워드프레스와 같은 CMS에서 자주 볼 수 있다.
Github은 가장 대표적인 곳으로, 웹페이지에 더 많은 효과를 낼 수 있는 많은 소스들이 공유되어 있다.
16. 17. css3 애니메이션
스크립트가 아닌 css만으로 구현된 이미지 그림자 효과, 텍스트 그림자 효과, 애니메이션 효과…등.
(첨언) 독특한 css3의 사례 및 다운로드는 http://www.hongkiat.com/blog/css3-button-tutorials/를 참고.
18. 세로 메뉴(vertical navigation)
좌우분리 및 왼쪽 세로형 메뉴 배치.
19. 1페이지 사이트(one page web design)
원페이지 디자인은 2012년에 이슈가 되어 왔습니다. 사실 웹의 초창기부터 원페이지 웹사이트는 있어 왔지만, 최근들어서 새로운 형태로 진화되었습니다.
Cage App 사이트의 디자인은 위에 나열한 여러 트렌드의 적절한 사례입니다. 1페이지 디자인, 상단메뉴 고정, 상단메뉴 스크롤시 백그라운드 새도우 등.
20. 동그라미 스타일 디자인(circular design elements)
동그라미 스타일의 디자인은 최근 들어서 자주 보이는데, 깔끔하고, 안정감있고, 어떤 레이아웃과도 잘 어울린다. 아바타, 공유버튼, 날짜 등 일관적인 디자인 요소를 배치함으로 통일감 있는 사이트를 만들기에도 좋다. Lucia Soto 와 Site Optimizer의 사례.
끝.
▄████▄░▄███▄░░▄██░▄████▄
▀▀░▄██░██░██░████░▀▀░▄█▀
░▄██▀░░██░██░░░██░▄▄░▀██
██████░▀███▀░░░██░▀████▀
이상의 트렌드는 2012년에도 계속 진행되고 있었는데, 이를 실제로 웹사이트에 구현하는데 가장 큰 걸림돌은 역시 브라우저였습니다. 하지만 ie9에 이어 ie10이 배포되면서 2013년에는 웹표준 코딩, html5, css3 등에서 많은 제약이 제거될 것으로 보입니다.
또한, 이상의 트렌드는 워드프레스의 테마를 많이 경험해 보신 분이라면 벌써 익숙한 디자인일 겁니다.
2013년을 잘 보내기 위해서는 반응형웹, CSS3, HTML5를 마스터 하는 것이 핵심 과제로 결론 지어 봅니다. 이는 워드프레스가 서서히 보급되어 가는 한국의 웹환경에서도 워프프레스를 활용한 웹사이트의 만족도를 높이는데 가장 핵심적인 요소로 판단하고 있습니다.
이후에도 몇가지 주목할 만한 내용은 별도의 포스트로 자세히 소개해 보려고 합니다.
좋은 정보 잘 보았습니다. 2013 Web trend에 대해 몰랐던 부분 알게 되어 감사합니다!