2010년 웹디자인 트랜드 - 내용수정본

[webdesignererer]

더 자세한 내용이 있어 수정합니다.

Web deisnger wall과 WDL에 재미있는 글이 올라왔네요. 2010년 한해 유행할 웹디자인 트렌드를 예측한 글입니다. 재미있는 내용들이 많네요. 디자인이나 퍼블리싱 하시는 분들께는 어찌보면 배울게 많은 한해가 되겠고, 어찌보면 재미있는 일들이 많은 한해가 될 것 같습니다. 두 사이트에 올라와있는 내용을 정리해 보았습니다. 큰 트렌드와 제 생각을 중심으로 적어보았습니다.

1. 세리프 폰트의 적극적인 사용
글자의 끝부분이 낚시바늘처럼 꺽이거나 가늘어지거나 기타 등등의 효과가 적용된 세리프 폰트는 잘 사용하면 세련된 느낌을 줄 수 있습니다. 단, 세리프 폰트는 인쇄물에서는 크기가 아무리 작아도 잘 보이지만 모니터 상에서는 컨텐츠 제공용으로 깨알같이 작은 폰트는 잘 사용하지 않는것이 관례였습니다. 올해 디자이너분들께서 세리프 폰트를 어떻게 활용할지 무척 기대가 됩니다.

2. 다양한 커스텀 폰트의 사용
CSS3에는 방문자에게 없는 폰트를 강제로 제공하는 방법이 있습니다(@font-face). 아마도 국내에서는 굴림, 돋움을 벗어나 텍스트의 폰트를 자유자재로 제공할 수 있다면 디자이너 분들은 더 없이 행복할 것 같습니다. 해외에서는 TypeKit이라는 사이트에서 무료로 다양한 폰트를 제공하나 봅니다. 궁금하시면 한 번쯤 들러보세요~

3. 텍스쳐가 들어간 배경이미지
단색이나 단순한 그라데이션 대신 질감을 사용한 웹페이지 배경이 대세를 이룰 것이란 전망입니다. 백그라운드 트렌드 관련글

4. 단순하게, 그리고 그리드를 맞춰서 깔끔하게(여백과 그리드의 활용)
원 글쓴이 말마따나 심플하고 그리드가 딱딱 맞는 웹페이지는 새롭지는 않습니다. 다만 2010년 한해에도 이런 경향의 웹디자인 열풍은 계속 될 것 같습니다. 관련 추천 사이트 더보기

5. CSS3의 활용
브라우저들의 지원 정도에 따라 CSS3의 활용이 가장 두드러지는 한해가 될 것 같습니다. CSS3의 강력한 추가 기능들이 있지만, Web designer wall에서는 웹페이지를 제작하는데 가장 많은 도움을 주는 기능들 위주로 소개를 한 것 같습니다.

CSS 애니메이션
웹킷이 지원되는 환경이라면 이 블로그 우측 상단의 배경 화면이 빙글빙글 돌고 있는 것을 보실 수 있습니다. 맥용 사파리나 파폭에서도 적용됩니다.

둥근 모서리
UI개발자 분들과 디자이너분들 사이에 다툼이 가장 잦은 부분이 조만간 해결될 것 같습니다. 박스 모델 모서리에 둥근 효과를 주거나, 그림자 효과를 주기 위해서 필요없는 마크업과 스크립트가 많이 들어갑니다. 둥근 모서리를 CSS에서 컨트롤 하거나 만들어 낼 수 있다면 불필요한 마크업과 스크립트가 많이 사라질 것 같습니다. 게다가 디자이너분들과 UI개발자분들의 다툼도 많이 사라지겠죠.

요소 그림자 효과
요소의 그림자 효과도 CSS에서 컨트롤을 할 수 있게 된다면 역시 불필요한 마크업과 스크립트가 많이 사라지게 될 것으로 기대됩니다.

6. 반투명 활용
RGBA를 사용하면 백그라운드 컬러가 들어가는 요소의 투명도를 쉽게 조절할 수 있습니다. 일반적인 마크업 구성요소의 opacity(IE계열에서는 alpha)를 조절하여 반투명 효과를 사용하면 깔끔한 페이지를 만들 수 있을 것 입니다.

7. 모바일 페이지는 기본으로 제공
국내에서는 좀 늦었지만, 아이폰 열풍을 기점으로 모바일용 웹페이지가 기본적으로 제공되어야 할 것 같습니다. 모바일용 웹페이지라고 해서 다른 별게 있는 건 아닙니다. 실제 Base데이터는 웹에 있고 단지 CSS와 자바스크립트, 그리고 약간의 디자인만 변경을 해서 페이지를 제공하면 될 것 같습니다. 모바일이라고 해서 따로 서비스가 분리 되는게 아니라 뷰만 바뀐다고 생각하시면 되겠습니다. 크로스브라우징이 된다면 아이폰 뿐 아니라 다른 모바일 기기에서도 서비스를 제공할 수 있을 것 입니다.

8. 커다란 로고와 헤드라인
커다란 로고나 헤드라인으로 무장한 사이트를 올해는 더 많이 보게 될 것 입니다. 디자인에 신경을 많이 쓰는 사이트나 개인 블로그등에서 많이 사용할 것 같습니다.

9. 스케치 이미지와 손으로 그린 이미지
우리나라에서도 예전부터 기업사이트 등에 많이 쓰이던 방식입니다.

10. 통 페이지 레이아웃
다른 페이지로 이동하지 않고도 한 페이지내에서 웹사이트를 이용할 수 있는 디자인이 유행할 것이라는군요. 이를테면 우리가 사용하는 블로그나, 트위터 같은 사이트들은 딱 하나의 디자인만 만들어도 서비스를 제공할 수 있는 수준까지 되는데 이런 형태의 사이트와 디자인을 말하는 것 같습니다.

11. 모달창, 모달레이어(Modal Box)
모달 레이어는 이미 많은 사이트에서 볼 수 있습니다. 이 레이아웃의 디자인은 쉽고 깔끔하게 만들 수 있지만 접근성이나 유저빌리티에는 도움이 될런지는 의문입니다. 앞서 설명드린 10번의 통페이지 레이아웃과 매칭하여 만들면 좋을 것 같습니다.

이외에도 두껍고 반듯한 텍스트의 사용, 거대한 푸터, 언제나 그렇듯 복고풍의 디자인, 페이지 상단의 거대한 인트로 박스, 잡지 형태의 레이아웃, 적극적이고 다양한 이미지의 사용, 등이 주요 항목이였습니다.

이 중, 올해 화두는 단연 HTML5와 CSS3가 아닌가 싶습니다. 특히 새로운 브라우저들이 속속 CSS3를 지원하기 시작한다면 다양한 디자인 테크닉으로 무장한 웹페이지들을 만날 수 있는 한해가 될 것 같습니다. 해외의 트렌드 예측이지만 우리나라도 이와 비슷한 트렌드를 경험할 것 같습니다. 그리고 벌써 HTML5로 만든 플레이어들이 등장하는군요. 후덜덜; 빛과 같은 속도입니다.

이 글은 http://monoeyes.com/796 님의 자료에서 확인이 가능합니다.

[:: 영자 ::]

번역성, 포스트 소개형 포스팅.. 말고 한국형 포스팅 블로그 없을까요?

[Vandal]

웹기획자분들이 벤치마킹을 웹만 쳐다보고 있으니 한국형이란게 안나오는거 아닐까요. 해외꺼보고 그냥 베리친 스토리보드 들고와서 한국형이라고 우긴다능. -ㅅ-a

[ComAniA]

아침일찍 봤던건데 우리카페에서도 보네요 ㅎㅎ

[생뚱맞는걸]

감사합니다..

[희야만쉐]

수고하셨습니다.

[잠만보]

잘읽었습니다~ 좋은 글 감사합니다~~

[이웃사촌]

좋은글 감사합니다.

[Pink♪]

잘읽었습니다 ^^

[비싼늠]

글 감사합니다.

[동방박사]

잘봤습니다~~~~