2012년을빛낼웹기술 : HTML 5, CSS3, jquery 2012년을빛낼웹기술 : HTML 5, CSS3, jquery 01 02 01 02 CA conference 17 01 일반적인웹기획의과정. 보통어떤웹기술을활용할지의여부는 S1, C1의구현단계에서선택된다. 2012년을웹기획과웹기술클C1 C2 C3 라화면운영산출물이언일반적인웹기획이라하면무엇이떠오르는가? 만약화려한디자인과기획트기획기획각종효과들만을떠올렸다면웹기획의일부밖에보지못하는것이다. 단보통웹기획이라는것은그러한화면기획을토대로하여디자인웹기술은주로 S1, C1의과정중코딩에사용빛낼웹기술 : 계획을세우고그에따라코딩과프로그램개발을하고운영및 01 유지보수, 홍보와결과물에대한예측까지를포괄하는의미를담고있다. 최근의웹환경은모바일로확장이되고각종다양한기술들과어우러져다양한효과들을선보이고있다. 때문에디자이너나개발자모두이러한기술과그것을어떻게시각화할지에대해서알고있어야한다. 만약디자이너가사용할수있는기술이나효과에대한메카니즘, 구조적이해없이디자인을하게된다면개발자가그것을코딩 ( 디자인을 HTML등의언어로 HTML 5 풀어웹상에구현하는일 ) 하는데몇배의시간을쏟아야할지도모른다. 그것은프로젝트의지연을초래하고작업의능률을떨어뜨리며디자이너로서의가치마저떨어뜨리는일이다. 때문에오늘날의웹기술은단지특정분야가웹생태계안에서활동하고있는사람이라면누구나알아두어야할지식인것이다. 버단구현운영종료서S1 개발기획 S2 관리기획 S3 종료기획 CSS3 jquery 웹표준의핵심철학인 구조와디자인의분리 라는관점에따라 새로운웹개발기술들은빠르게변화하고있다. 신현석 폭풍의전조 웹의변화가심상찮다. 소셜미디어의발전에따라미디어의시장의판도가뒤바뀌고있는지금모바일과웹은그경계가모호할정도로활발하게서로의영역을넘나들며화학작용을이뤄내고있다. 이변화의돌풍의중심에는다이내믹이강화된 HTML5, 속도를향상시킬때꼭필요한 CSS3, 이젠디자이너도꼭알아야하는 jquery가있다. 2012년의마지막을장식한 17회 CA conference에서는각분야의전문가들과새로운웹기술과이를통한현재의변화와미래의예측에대해이야기를나눠보았다. 글, 디자인편집, 기획 : 류시형 / 자료수집및기획 : 박세희, 박진희 (CA Univ. Staff Creative) KTH UDX Front Interaction 팀소속 실전 HTML5 가이드 공저 한국정보화진흥원웹접근성을고려한신기술콘텐츠제작기법 공저 실전웹표준가이드 공저 http://hyeonseok.com 정찬명 NHN Business Platform. XE 개발팀 UI 개발자 HTML5 오픈컨퍼런스 CSS3 소개및집필한국정보화진흥원웹접근성자문위원 http://naradesign.net 김태곤 NHN Buisiness Platform. XE 개발팀. FrontEnd 개발자 거침없이배우는자바스크립트, 자바스크립트쿡북 번역자스마트에디터, 네이버블로그, 네이버지도등다수프로젝트참여 http://mygony.com
0304 웹표준이란? 웹표준이란 기존에 작성된 웹페이지가 다른 02 03 Cross Browsing HTML 과 익스플로러, 파이어폭스, 구글크롬, 사파리, 오페라 등 어느 웹 브라우저로 접속해도 호환이 가능하도록 하는 최적화 작업 웹표준에 대한 구조도: HTML 과 CSS와 Script의 관계 0304 브라우저에서 호환이 되지않아 정상적으로 보이지 않는 경우를 방지하기 위해 어떤 브 라우저에서든지 정상적으로 보일 수 있도록 상호 호환이 가능한 웹페이지를 만들기 위한 웹 제작표준 기술들을 말한다. 누가 웹 표준을 정의하는가? 현재 W3C(World Wide Web Consortium)이 Script 동작 CSS 표현 HTML 구조 중심적역할을 수행하며 웹표준을 정의. 미국 Wired News가 2002년 9월 XHTML + CSS 표현 기반으로 재구축(웹표준 엄격히 준수)하도록 [CSS] 하면서 웹표준의 개념확립. *웹표준 요소 웹표준의 장점 - 수정과 관리용이: 콘텐츠의 올바른 구조화, 시각표현 통일하여 제어편리, 제작부담감소 *웹표준의 특징 - 웹접근성향상: 다양한 브라우징 환경에 HTML 대응가능. 핸디캡 가진 사용자(시각 장애인 등)들 배려용이 - 검색엔진 최적화: 적절하게 구조화된 웹페 이지로 인해 검색엔진의 검색 용이, 비즈니 크로스 브라우징 동작 크로스 플랫폼 구조 접근성 스 기회 확충 - 파일사이즈 감소: 서버저장공간 절약, 렌더 [Script] [XHTML] 03 링 속도 향상, 화면표시 소요시간 단축 -모바일(휴대폰,PDA,타블릿 PC,넷북 등)호환 :별도의 모바일 홈페이지 제작하지 않아도 모바일에서 깨지지 않는 홈페이지의 형태 그대로 보임 02 웹표준의 구조언어와 표현언어 [구조언어] 웹은 어디에서든, 누구나 정보를 함께 공유하고 즐길 수 있어야 합니다. 그것은 웹 브라우저를 넘어 세상의 모든 장치들을 통해 표현됩니다. 웹의 미래를 위해 우리들, 웹을 만들어 가는 디자이너는 웹 세상을 만들어야 할 표준을 지켜 의무와 사명감을 가지고 디자인을 하여야 합니다. -오페라 스프트웨어의 웹 표준 커리큘럼 중에서 -XML 1.0 : 기반언어이며 기반기술에 JAVA script: 웹사이트에서 서버와 클라이언트 Namespaces, Base, Events, Infoset, 간의 보다 역동적인 기능을 구현위해 사용. hyper text markup language 의 약자로 웹사 XIncludes가 있고, 확장기술에 Schema, (예: 로그인시 아이디 입력 경고창, 마우스를 이트(홈페이지)의 기본적인 골격을 표현하기 XQuery, Xpath, XLink, XForm, XSL 등. 위해 사용되어지는 언어. Strict, Transitional, XML 작성 어플리케이션으로 마크업언어 -HTML : 가장 잘 알려진 마크업 언어. Frameset DTD 세가지 문서형. <html> 로 'XHTML'과 수식기술언어 MathML, 그래픽 움직이면 그림이 따라다니거나 특정 그림이 다른 그림으로 변화) 사용자와 웹 간의 인터랙티브를 강화하여 시작하여 </html> 로 마치게 되며, 확장자는 언어 SVG 멀티미디어 언어 SMIL이 있다. 다양하고 역동적인 웹사이트를 만드는 데 사용. html 또는 htm이다. 웹사이트를 위한 모든 * HTML이 아니라 XHTML인 이유. (확장자는 js) 언어(php, asp, jsp..)는 html 을 보다 편리하고 1)빠른 데이터 처리 2)안정적 브라우저 동작 3)데이터 재이 반복적인 코딩을 단순화 하기 위한 목적으로 용성과 정보공유촉진 4)네임스페이스 이용과 유연한 대응성 jquery: HTML 속 클라이언트 사이드 스크립트 사용되어 진다 [표현언어] 언어를 단순화 하도록 설계된 브라우저 호환성 CSS : 웹페이지의 시각표현을 지정하는 언어. 이 있는 자바스크립트 라이브러리이다. cascading style sheets 의 약자로 웹사이트 jquery는 오늘날 가장 인기있는 자바스크립트 에서 사용되는 style을 미리 지정하여 관리 및 라이브러리 중 하나다. MIT 라이선스와 GNU 수정이 편리하게 저장하여 둔 스타일시트. 일반 공중 사용 허가서v2의 듀얼 라이선스를 (확장자는 css.) 가진 자유 오픈 소프트웨어이다. -XHTML 1.0 : HTML을 XML로 재구축한 마크업언어. HTML처럼 Strict, Transitional, Frameset DTD 세가지 문서형 -XHTML 1.1 : 모듈화된 XHTML. 1.0의 Strict 만 인정
2012년을빛낼웹기술 : HTML 5, CSS3, jquery 2012년을빛낼웹기술 : HTML 5, CSS3, jquery 0506 0506 04 웹표준의세가지계층 05 HTML5 Markup Logo HTML5 Markup 04 HTML, XHTML 구조계층 무슨의미인가? 웹표준의세가지계층 HTML, CSS, JAVA script는개별적으로인식이아닌상호보완적관계로이해하며상황에맞게활용해야한다. CSS 표현계층 어떻게보이는가? JAVA script 계층동작 어떤동작을하는가? 05 HTML5 Markup 은 HTML 의 5 번째버전이라고보면된다. 웹을통한정보공유가폭발적으로성장할수있었던것은 HTML 을통해정보 ( 컨텐츠 ) 와의미 ( 마크업 ) 을함께손쉬운텍스트로편집하도록함으로서쉽게배우고쓸수있었기때문이다. HTML 의이런단순함은웹의부흥기를이끌었다. 하지만이후다양한상용브라우저벤더들의비표준태그들이남발되고 IE 의독주상태때문에웹서비스의혁신이늦어진데다기존의 HTML 은 4.01 버전을끝으로더이상업그레이드되지않았다. 이에비해소셜미디어와모바일시장의폭발적인성장은미디어와웹에대한사람들의인식자체를바꾸어놓았다. 구글검색엔진과검색광고의성장과블로그가성장하고페이스북과아이폰과아이패드는소셜미디어를모바일시장으로이끌어냈다. 이에영감을받은많은기업들은새로운서비스들을제공하기시작했고변화의요구를수용하며개선을거듭하여나온것이바로 HTML 5 인것이다. 웹표준을활용한웹접근성향상 IE* 만이웹의전부가아니다. -HTML5 Markup 웹접근성이란? 웹접근성이란모든인터넷사용자가 ( 장애인, 고령자등이포함된 ) 웹사이트에서제공하는정보에접근하고이해할수있도록보장하는것이다. 일반적으로웹사이트는장애를가지지않은일반사용자를대상으로만들어져있어특정장애 ( 시각, 청각등 ) 를가진사용자가접근할수없거나접근하기불편하도록되어있다. 웹접근성은이러한사용자의신체적, 환경적조건에관계없이웹에접근할수있고정보를이용할수있도록하는지침을말한다. 여기서신체적조건이란장애인, 노인, 저시력자와같이분류할수있으며, 환경적조건이란네트워크환경, 브라우저유형, 저속사양컴퓨터, PDA, 타블렛 PC 같이기타하드웨어적인측면으로설명할수있다. 웹접근성의장점 웹접근성을향상시키면장애인, 고령자등을포함한모든사람들이웹에서원하는정보들을자유롭게접근하고이용할수있다. 사용환경의제약을덜어사용자의편의를극대화시키는것이다. 이에따른혜택은소비자들만이가져가는것일까? 결과적으로이는기업에게도이익이된다. 소음이많은환경등주변환경에영향없이, 모바일, PDA 등과같은새로운기기등장과상관없이사용가능한웹을제공하게되며웹페이지구성이논리적으로최적화되어, 디자인및설계의효율성제고는물론개발, 유지보수, 개편비용절감효과를가져오게된다. 또한지금과같이기업의사회적책임 (CSR) 이중요하게부각되고있는시점에서홈페이지를운영하고있는기관및단체에대한긍정적이미지형성에도도움이된다. HTML5 의특징 플랫폼을가리지않는다 : 최신브라우저가깔려있는어느기기에서나사용가능하다. 개방형웹생태계태동 : 개방형기존폐쇄형플랫폼에대항하여대안형앱장터활성화로새로운앱생태계조성 멀티미디어형광고서비스제공 : 비디오, 오디오, 3D, 그래픽등다양한리치미디어를지원하면서다양한광고도입가능 네트워크트래픽감소 : 한번내려받으면망없이사용이가능 기술적한계 : 카메라, 연락처, 동영상표준, 게임과같은고성능리치미디어아직 HTML5 사양지원안하는곳이많다. *IE: Explorer 익스플로러의약자 HTML5 가인터넷업계에서알려지게된계기는 2009 년구글의웹개발자컨퍼런스인 구글 I/O 에서자사의서비스가아닌 HTML5 를데모로시연하면서차세대웹기술로지원하겠다는천명을하면서부터이다. 다소 HTML5 의표준화대해회의적시각을가지고있는사람들이있지만이미현실에서많은브라우저와웹애플리케이션들이 HTML5 를적용하고또적용할계획을가지고있다. (html5 관련이슈를논의하기위한채널 ) www.w3.org/html/ig/k
07 08 07 08 속도와 유연한 대응성을 동시에-CSS3와 Media Queries 06 Focus.com이 제공하는 HTML5의 특징, 주요 브라우저 호환성을 한눈에 알 수 있는 인포그래픽스 플래시와 HTML5의 차이점을 이해 CSS3는 포토샵 필터가 포함된 이미지를 대체하며 웹 페이지의 성능을 극대화 하는 효과가 있다. 반응형 웹-단 하나의 웹 페이지로 PC 화면과 모바일 화면에 모두 대응하고 싶은가? CSS3 미디어 쿼리의 세계로 들어오십시오. 미디어 쿼리는 여러분의 웹이 어떤 해상도를 만나도 품위 있는 모습을 잃지 않도록 도와줄 것이다. 하기 쉽게 구분해 놓았다. 07 10 08 09 빠른 업데이트를 가능하게 해주는 CSS3 11 CSS3는 앞서 말했듯 표현 방식과 관련이 있다. CSS3는 HTML5와 더불어 최신 웹 브라우저들이 함께 채택하고 있는 스타일 표준이다. CSS3와 CSS2의 차이점은 CSS3가 모듈 기반으로 개발되어 각종 브라우저나 디바이스가 06 06-11 CSS3를 활용하여 표현할 수 있는 효과들과 태그, 구현 가능한 브라 필요에 따라 원하는 CSS모듈만을 탑재하거나 또는 우저를 보여준다. 위에서부터 번호 필요한 모듈만을 빠르게 자주 업데이트 할 수있게 해준다. border-radius, transform, 대로 text-shadow, text-overflow, animation.
2012년을빛낼웹기술 : HTML 5, CSS3, jquery 2012년을빛낼웹기술 : HTML 5, CSS3, jquery 0910 0910 12 metabraion의 RWD 적용사례화면사이즈의및디바이스뷰에따른동일한비쥬얼아이덴티티가제공되고있다. www.metabrain.com 13 홈페이지 RWD적용사례-신용석 http://hyeonseok.com/soojung /update/2011/02/06/637.html 14 Illy Issimo의 RWD 적용사례 http://us.illyissimo.com/ 12 사람의신체조건, 사이즈가제각각이어서같은디자인의옷이라도체형에맞추어옷이다르게제작하듯모바일도각각의환경에맞게디자인을해주어한다. 다만해상도에맞추어어느정도프리사이즈로만들어주는것이반응형웹디자인기술이라고할수있다. 반응형웹디자인 (Responsive Web Design) 13 이 RWD( 반응형웹디자인 ) 을적용하면스마트폰이나태블릿 PC 등다양한모바일환경에서웹에접속할때자동으로화면해상도를감지하고, 해상도에적합한 CSS 를그때그때적용해동일한콘텐츠를최적의레이아웃으로재정렬해준다. RWD 를적용하기위해서는 HTML과 CSS를컨트롤해주어야한다. 반응형웹디자인은사용자의행동이나변화에따라웹이알아서반응하도록디자인을하는것이다. 다양한모바일환경이생겨나면서개발자입장에서모바일기기마다다른 OS의환경을각각고려하고 OS의업데이트에맞추어개발을해내기가힘들어졌다. 모바일환경은우리가생각하는것이상으로다양하고최적화라는접근방법으로는그다양성을만족시키기힘들다. 이런문제를해결하기위한다양한시도들이모여결실을맺은것이반응형웹디자인인것이다. 화면너비에따라유동적으로변하는유동형레이아웃 (Fluid Layout) 과유연한이미지 (Flexible image), 미디어쿼리 (media queries) 가어우러져서특정환경에 최적화 된방법이아니라환경에반응하여스스로적응하는방법으로대응한다. 14 반응형웹디자인의장단점장점 : 단하나의 html과 css로다양한해상도와단말기에서두루잘보임한계 : 디자이너가성능과타협할필요가있다. 모바일은가볍고빠른것을원하지만포털과같이무겁고복잡한사이트에는적합하지않다. 아직까지는모든환경에적용하기는힘들고간단하고심플한디자인의사이트, 홍보용사이트나모바일웹기반의 하이브리드앱 위주로적용중이다. 보통은 pc사이트를반응형으로수정한다. 반응형을고려해서처음부터새로시작하는것은드물다. 그만큼기획단계에서부터고려할것이많다. * 반응형웹디자인을적용한 227개웹사이트 http://mediaqueri.es/
11 12 11 12 15 16 17 Colombian Coffee Hub Why Interactive Showreel Morning 콜럼비아 커피 프로모션 사이트. 중국의 디자인 스튜디오 포트폴리오. 기아 모닝의 마이크로 사이트. 커피 애호가를 위한 원산지 여행 작업물 일부를 스크롤링으로 엮은 사이트이다. 과거에는 플래시가 필요했지만 컨셉의 프로모션 사이트이다. 이 다양한 작업물을 연결한 듯 엮은 이 작업은 프로젝트 이제 HTML, CSS, jquery 만으 사이트의 특징은 HTML5, CSS3, 하나하나를 보여줄 때 마다 사용자가 직접 참여하거나 로 충분히 다이나믹하게 보여줄 JS를 이용하여 데이터를 보여주는 여러 가지를 경험할 수 있는 장치를 심어놓아 지루함을 없애려 했다. 수 있다. 방식이다. http://colombiancoffeehub.com 15 JAVA script framework중의 하나 가 아닌 하나의 현상-jQuery 웹 디자이너 또는 기획자에게 익숙한/배우기 쉬운 CSS 선택자를 기반으로 한 jquery의 문법은 개발자의 전유물 이었던 자바스크립트의 매력을 더 많은 사람에게 느낄 수 있게 했습니다. 뿐만 아니라 jquery로 할 수 있는 일은 점점 많아져 가고 있습니다. -김태곤/ 17회 컨퍼런스 중 플래시시대의 종말 CSS3를 통해 모양을 갖춘 웹 디자인은 Script와 만나 인터랙티브 디자인 으로 재탄생한다. jquery는 이러한 인터랙티브가 가능하도록 인기있는 16 함수들을 모아놓은 라이브러리이다. 이 셋의 조합으로 우리는 비로소 플래시로부터 탈출이 가능해졌다. jquery로 인해 웹의 인터랙티브는 더 가볍고 탄력성 있게 되었다. 가히 혁신적이라고 할 수 있다. 물론 앞으로의 웹디자인의 상황이 낙관적이기만 한것 은 아니다. 하지만 우리가 여기까지 올 수 있었던 것 은 힘들고 어두운 상황속에서도 한줄기 빛을 따라 계속 나아간 사람들의 노력덕분이다. 새로운 길들을 개척해 나가려던 사람들이 없었다면 우린 지금 이런 웹과 모바일 환경의 혜택을 누리지 못했을 것이다. 시대는 계속 바뀌어 나가고 있다. 다음 변화는 우리 손 에서 시작될 것이다. 지금부터 시작이다. 17