태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

HTML5 & CSS3, 2010 웹디자인 트렌드 큰 변화

분류: Design Information/HTML5 and CSS3 작성일: 2010.01.23 08:57 Editor: 마루[maru]

2010년 디자인 트렌드는 '어떤 변화와 요소들이 가장 쟁점이 될 것인가?'는 디자이너, 개발자 모두에게 아주 중요한 리소스입니다. 그런 연유로 새로운 한해가 시작되면 전문가들이 향후 트렌드 전망을 매체를 통해 발표하고 현업 실무 디자이너와 개발자들은 업무 지침으로 참고하여 프로세스에 반영하게 됩니다.

HTML5 &  CSS3, 2010 웹디자인

HTML5 & CSS3, 2010 디자인 트렌드 큰 변화

최근 해외 트렌드 및 디자인 아이디어를 공유하는 해외 유명 사이트 '웹 디자이너 월(Web Designer Wall)'에서 디자인 전문가들이 2010년 디자인 트렌드 예측한 'Design Trends (Predictions) in 2010' 이란 글을 발행했습니다.

그 개요를 정리해 보면 'HTML5' 와 'CSS3'을 가장 큰 변화로 전망했고, 소셜 네트워크 서비스(SNS)인 트위터(twitter)를 통한 브레인스토밍에 있어서도 2가지 요소가 큰 비중을 차지했다고 밝히고 있습니다. 아주 유용한 글이기에 원문을 번역하여 국내 디자이너및 개발자들이 함께 공유하면서 한번쯤 생각해 보고 업무에 도움이 되었으면 하는 바람입니다.

디자인 동향 예측 2010

우리는 새로운 10년을 시작하는 그 분기점에 들어서 있습니다. 예측컨대 2010년의 디자인은 실험적인 작품과 함께 재미와 흥미로움이 충족할 것입니다. 디자이너와 개발자는 CSS3와 HTML5로 인상적인 디자인을 만드는 새로운 기능을 활용하게 될 것으로 내다봅니다.

스케치와 대형 백그라운드 스타일은 사라질 것입니다. 세리프 폰트(serif font)와 질감 백그라운드(texture background)가 인기가 있을 것이며, CSS3 덕분에 우리는 둥근 모서리, RGBA의 투명도, 드롭 쉐도우(drop shadow) 그리고 스마트폰의 성장과 함께 모바일 디자인(mobile web design)이 올해 주목받게 될 것입니다.

1. 세리프 글꼴들(Serif Fonts)

지난 10 년간 대부분의 사이트들이 Verdana 또는 Arial(san-serif) 글꼴로 디자인 되었지만, 새로운 10년에서는 변화되어 나갈 것이고 세리프 글꼴들 더 많은 관심을 받게 될 것입니다. 그 이유는 'Next Serif Trend' 기사를 읽어 보면 어렵지 않게 알 수 있을 것입니다.

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

2. 큰 표제들(Big Headings)

디자인 인터페이스의 일부인 사이트 헤더(Header)의 큰 표제는 2010년에 더 많은 인기를 얻게 될 것입니다.

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

3. 사용자 정의 글꼴 포함(Custom Font Embedding)

'Typekit'와 같은 서비스는 고품질의 무료 폰트(FontSquirrel, OpenType, The League of MoveableType)들을 활용 가능케 해 디자이너들의 글꼴리스트를 확장시킬 것입니다. 그러므로 더 많은 사람들이 올해에는 사용자 정의 글꼴을 포함하게 될 것이라 생각합니다.

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

4. 질감 배경(Texturized Background)

큰 배경 트렌드는 점차적으로 밀려 나게 될 것이고, 섬세하고 질감이 살아있는 배경이미지 특히 밝은 노이즈를 반영한 배경 이미지를 사용하는 트렌드가 대신하게 될 것입니다.

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

5. 미니멀리스트 & 그리드(Minimalist & Grid)

미니멀과 그리드 디자인들은 오늘날의 새로운 것은 되지 않습니다. 그것들은 지난 몇 년 동안 인기가 있었고 2010 년까지 지속적으로 성장할 것입니다. 이전에 발행한 글들을 통해 최소한의 미니멀 사이트를 확인할 수 있습니다.

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

6. CSS3 새로운 기능 (CSS3 New Features)

비록 CSS3가 아직은 모든 브라우저에서 완전히 지원되지는 않습니다만 둥근 모서리(rounded corners), 멀티 배경 이미지(multi background images), 다중 열(Multi-column), 윤곽선 이미지(border images) 그리고 애니메이션(animation) 등 디자이너들에게 많은 새로운 기능을 경험하게 할 것입니다. 다음 사이트는 fallbacks과 함께 CSS3의 새로운 기능을 잘 구현해 보여주고, CSS를 활용한 더 많은 실험적인 작품을 볼 수있습니다.

-. CSS3 애니메이션(CSS3 Animation)

크리에이 뉴트론(Neutron Creations) 블로그에서는 킷(webkit-transform)을 사용해 원형 그래픽 회전 변환을 보여주고 있는데 Mac용 크롬 또는 Safari에서 볼 수있습니다. 만약 여러분의 브라우저가 킷을 지원하지 않는다면 그냥 정적인 원형 그래픽만 표시됩니다.

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

-. 둥근 테두리와 상자 그림자 (Rounded Borders and Box Shadows)

테두리의 라운드 그리고 상자의 그림자는 가장 일반적으로 사용되는 CSS3 속성입니다.

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

-. 텍스트 그림자(Text Shadow)

많은 디자이너들은 텍스트에 좀 더 심도 깊은 그림자를 추가하여 사용하게 될 것입니다.

-. RBGA & 불투명도(RBGA & Opacity)

RGBA로 만들면 배경 이미지 투명도 설정이 쉬워집니다. 많은 디자이너들이 이 기능으로 반투명 효과를 만들고 어떤 활용을 하게 될 지 기대를 가져 보게 됩니다.

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

7. 모바일 디자인(Mobile Design)

2007년 아이폰(iPhone) 출시 이후, 전 세계가 휴대폰 디자인에 대한 이야기로 술렁이고 있습니다. 지금은 더 많은 스마트폰에서 CSS와 자바 스크립트를 완전하게 지원해야 합니다. 모바일 디자인은 확실히 디자인의 미래가 될 것입니다. 어플리케이션 제공 사이트와 디자인 에이전시에 이르기 까지 많은 사이트들이 모바일 버전을 제공하고 있습니다. 아래는 몇 가지 좋은 예입니다

HTML5 &  CSS3, 2010 웹디자인 트렌드 큰 변화

2010년 디자인 트렌드 화두는 HTML5 와 CSS3

2010년은 디자이너 및 개발자들에겐 새로운 모험이 될 것입니다. 많은 사람들이 트위터 브레인스토밍 답글을 통해서도 CSS3이 올해 디자인 트렌드의 화두가 될 것으로 믿습니다. 만약 아직도 CSS3 과 HTML5 를 확인하지 않았다면 실제로 경험해 보시길 바랍니다.

왜냐하면, 여러분의 디자인과 코드를 바꾸게 될 새로운 방법이기 때문입니다. 새로운 기능과 효율적 레이아웃을 보다 깔끔하게 만들고 활용할 수 있습니다. 예를 들어 여러 개의 배경이미지를 표현하기 위해 'div' 태그를 추가하는 것을 대신하고,  CSS3와 함께 <div id="header"> 태그 대신 HTML5 안에서 <header>로 간단하게 작성할 수 있습니다.

저작자 표시 비영리 변경 금지
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://sinnanjyou.tistory.com BlogIcon 신난제이유 2010.01.23 09:02 신고  댓글주소  수정/삭제  댓글 남기기

    갈수록...공부 할 것들이 많아진다는 기분이 듭니다.
    뒤쳐지지 않게 더욱 성실하게 앞을 바라봐야겠어요.
    그 전에 영어 공부...를 이번년엔 꼭 하자라는 목표도.. 핫핫.

  2. Favicon of http://e-gugak.com BlogIcon 삶의여백 2010.01.23 09:20 신고  댓글주소  수정/삭제  댓글 남기기

    디지털 관련 트렌드는 많이 봤지만 디자인 트렌드가 정리된 글 첨 보네요. 사실 전문가가 아닌담에야 별로 신경쓰지 못하는 부분이다보니..
    근데 우리나라 웹디자인의 트렌드는 어떻게 예측이 될 수 있을지 궁금하군요. ^&^

  3. sorin 2010.01.23 10:18 신고  댓글주소  수정/삭제  댓글 남기기

    인터넷 속도는 점점 빨라지지만 전송량은 줄어드는 추세네요. 물론 인터넷속도는 특정국가들 한정이지만.. 그야말로 글로벌한 발전.

  4. Favicon of http://shinlucky.tistory.com BlogIcon shinlucky 2010.01.23 12:39 신고  댓글주소  수정/삭제  댓글 남기기

    흠, 비전문가로써 관련글들 잘 읽고 갑니다. ^_^

  5. Favicon of http://channi.tistory.com/ BlogIcon 쿨피스짱 2010.01.24 01:57 신고  댓글주소  수정/삭제  댓글 남기기

    와...이쪽 일을 하는 사람으로서 css3와 html5 이름만 들어도 기대와 걱정이 쓰나미로 몰려 오네요 ^_^ 포스트 잘 보았습니다 ~ 좋은 주말 보내세요

  6. Favicon of http://poem23.com BlogIcon 학주니 2010.01.24 13:38 신고  댓글주소  수정/삭제  댓글 남기기

    HTML5 + CSS3 조합은 데스크탑보다는 모바일쪽에 먼저 적용될 것이라는 얘기가 많습니다..
    크로스 플랫폼의 선두주자라는 생각이 들어서 말이죠.,

  7. ehwan 2010.01.25 16:34 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 정보 잘 읽었습니다. 특히 폰트나 질감에 대한 정보는 디자인 분야를 공부하는 사람에겐 정말 유용한 정보인 것 같습니다. 그런데 위의 이미지로 제시한 사이트 주소좀 알 수 있을까요?^^;;;

  8. Favicon of http://easyone.tistory.com BlogIcon easyone 2010.01.27 15:16 신고  댓글주소  수정/삭제  댓글 남기기

    모바일은 HTML5, CSS3을 일부 지원하는데, 아직 IE6 때문에 발목이 잡힌 상황이죠.(IE가 다 마찬가지긴하죠.)
    CSS3은 많은 속성들이 추가되었는데, 어떤 것들은 어설피 구현할 경우 자칫 난잡한 웹이 될 수 있을 것 같은 느낌입니다. 하지만 잘 사용한 웹사이트는 빠르고 멋진 모습을 보여 줄 것으로 기대되네요~
    HTML5에서도 유용한 태그들이 다수 포함되었는데, 우리나라 웹에서는 태그들을 의미 그대로 사용하는 경우가 많지 않아서 어떻게 받아들일지 모르겠네요. 단지 video, audio 태그에만 열광하면 별 의미가 없을 것 같아요.
    그리고 HTML5와 CSS3이 아직 최종 버전이 나오지 않은 관계로 계속 내용이 추가,삭제가 되고 있다는 점도 두고 봐야할 것 같습니다.

    참고) HTML5 doctor http://html5doctor.com/ , HTML5 Gallery http://html5gallery.com/ (Firejune님 블로그 http://firejune.com/ 도 등록되어 있습니다.)
    CSS3.info http://www.css3.info/

  9. CSS 2010.02.02 01:49 신고  댓글주소  수정/삭제  댓글 남기기

    CSS는 3.0부터는 제발 제대로된 표준을 지향하길 바랍니다...
    표준 자체가 너무 구체적이지 못하고 주먹구구식이 많습니다. 정말 미안한 말이지만
    FF와 IE에서 표준을 정말 100%완벽히 지원한다고 해도 자의적 해석이 가능한 사항이 많이 있습니다. 3.0은 제발 쫌!!!!!! 확실한 표준이 되어서 따로따로 만들지 않아도 되는 세상이 나오길!

  10. Favicon of http://blog.naver.com/yuriblue BlogIcon 행복한장피디 2010.02.12 09:30 신고  댓글주소  수정/삭제  댓글 남기기

    좋은 글 잘 보고 갑니다.
    개인적으로 2010년 웹 트랜드가 그냥 이대로였으면 좋으련만..

  11. Favicon of http://xenerdo.com BlogIcon 제너두 2010.03.05 14:30 신고  댓글주소  수정/삭제  댓글 남기기

    마루님께서 국내의 2010년 웹디자인 트렌드 변화를 정리해주실 날을 목뽑아 기다리겠습니다..ㅎㅎㅎ 너무 할게 많아지는 현실이군요

    조만간 HTML5&CSS3 만 우대받는 더러운 세상이 될지도...ㅎ

  12. BlogIcon 웹디자인 강좌 2015.04.30 20:38 신고  댓글주소  수정/삭제  댓글 남기기

    웹디자인을 공부해보려고하고있었는데 많은도움이 되네요.

    HTML5, CSS3에 새로 업데이트 된 문서에 대한 계획이 있습니까?


우드스