웹표준과 HTML5 2010.03.02 ~ 03.06 김동완, 정경화 dwkim@nextree.co.kr
강의요구기술 본강의는아래기술에대한이해를필요로합니다. (x)html CSS JavaScript 기타 개발도구 Text Editor (Notepad, Ultraedit,EditPlus) 웹브라우저 (Firefox, Opera, Internet Explorer, Chrome ) 기타플러그인 - 2 -
웹표준과 HTML5 1. 웹표준개요 2. HTML4, xhtml, HTML5 3. CSS 실전 4. DOM/Javascript 5. Ajax 6. 웹표준개발프로세스 7. 웹접근성 / 호환성 - 3 -
웹과웹표준 1. 웹의역사 2. 웹패러다임의변화 3. 웹표준 - 4 -
웹의역사 - 5 -
인터넷이란 인터넷이란 전세계에걸쳐존재하는모든네트워크를하나로묶은것. 네트웍와네트웍들이모인하나의거대한네트웍 (Network of Networks) 일반적인기술용어 : Network 인터넷의특성 : 다양한정보를쉽고빠르게교환할수있는개방형구조. TCP/IP 규약 (Protocol) 기반. IP address와 Domain Name과같은표준주소체계를사용
인터넷의시작 1969 년 : ARPANET 미국국방성 ARPA(Advanced Research Projects Agency) 에서일정지역에대한폭탄폭격과같은긴급사태시에도장애를받지않고제기능을발휘할수있는통신망구축을연구하여네트웍을개발, 최초의연구목적의네트웍 1970~80 년대 : 미국내 50 개대학, 연구소들이알파넷 (ARPANET) 에연결, 일반에공개, 네트워크에연결 1990 년대 : 일반상업적인목적의네트웍이되면서현재의인터넷으로발전 1991 년 : 초기 e-mail, FTP, Newgroup 등학자들이나전문인들이사용하는등소규모로사용되었으나 CERN 의팀버너스리에의해 WWW(World Wide Web) 서비스가개발되어일반인들도쉽게멀티미디어정보를제공할수있고이용할수있게되자폭발적인성장을이루게됨 1993 년 : 최초의웹브라우저모자이크 (Mosaic) 개발 ; 넷스케이프 (Netscape:1994) 의등장, 인터넷상업화 (1995) 현재 : 중앙통제방식이아닌사용자들의규약 (Protocol) 으로네트워크가연결되어있으며, 정보의흐름에있어서양방향성 (Full duplex) 을가지고있기때문에전세계수많은호스트컴퓨터가인터넷에연결되어거대한네트워크를형성. 7
인터넷의기본기능 인터넷기능 ( 서비스 ) 및규약 Telnet, E-mail, FTP, Archie, Gopher, Usenet, IRC(Internet Relay Chat) WWW(WEB) : 하이퍼텍스트 (HyperText) 와하이퍼미디어 (HyperMedia) 를기반으로단일자원탐지자 (URL: Uniform Resource Locator) 라고불리는주소체계를사용하여인터넷대부분의자원인멀티미디어정보를검색할수있는서비스 인터넷접속방법 일반 PC통신서비스를통한접속 (SLIP/PPP 서비스 ) 쉘계정서비스. 소켓 (socket) 프로그램을이용한접속 TCP/IP접속 : 브라우저 (Browser) 8
웹 (World Wide Web:WWW, WEB) 이란? World Wide Web(Web) 정보자원들의네트워크 (Network) 이다. 인터넷상의다양한자원또는정보에쉽게접근할수있는기능을제공해주는그래픽사용자인터페이스환경의하이퍼텍스트기반정보시스템. 인터넷을통해전세계에거미줄처럼연결되어있는정보를누구나쉽게접근할수있도록하는시스템 ( URL 을통한다양한프로토콜지원 ) 인터넷에있는정보자원을쉽게접속할수있게하는웹의 3 가지기능 규격화되고통일된웹자원의위치지정방법 ( 예 :URI) 웹의자원이름에접근하는프로토콜 ( 예 :HTTP) 자원들사이에쉽게접근할수있는언어 (Hypertext) ( 예 :HTML) 9
웹의구성요소 URI (Universal Resource Identifier) : 정보의위치를가르킴 HTML 문서, 이미지, 비디오자료, 프로그램등웹상의각자원들을 URI 로인코드 (encode) 될수있는주소 URI 의구성 상대 URI 자원에접근하는방법이름. (Protocol) 자원을가지고있는호스트이름. 경로 (Path) 로주어진자원의이름. 상대 URL 의위치정보를저장하지않음. 기준 URI : http://www.test.com/suport/index.html <A href= next.html >Next Page</A> <IMG src=../icons/logo.gif > 완전한 URI : http://www.test.com/supoort/next.html http://www.test.com/icons/logo.gif HTML 에서의 URI 의사용 다른문서나자원에연결 (Link) : <A>, <LINK> 외부스타일쉬트 (StyleSheet) 나스크립트 (Script) 에연결 : <LINK>,<SCRIPT>,<STYLE> 이미지, 오브젝트 (Object),Applet 을문서에포함시킴 : <IMG>,<OBJECT>,<APPLET> 이미지맵을설정 : <MAP>,<AREA> 입력을위한폼 (FORM), 프레임 (FRAME) 형성 : <FORM>,<FRAME>,<IFRAME> 10
웹의구성요소 URL(Uniform Resource Locator) URI 의일반적인서브셋 (subset) 을형성. 웹상에서서비스를제공하는각서버들에있는파일들의위치를명시하기위한것으로접속해야할서비스의종류, 서버의위치 (Domain Name), 파일의위치를포함. 표현형식 protocol://host.domain.first-level-domain/path/filename.ext protocol://host.domain.first-level-domain 지원되는프로토콜 http:// 웹서버에존재하는 HTML 문서를지정 https:// HTML 문서지정시보안을요구할때사용 file:// 하드디스크에있는화일지정 ftp:// FTP 서비스사용시 telnet:// TELNET 서비스사용시 news:// UseNet 뉴스그룹사용시 mailto: E-mail 전송시 ( 예 : <a href=mailto:dwkim@nextree.co.kr>) fax:// HTML5 에서는자신의프로토콜별도지정 API 제공 11
웹의필요성 마켓팅및홍보효과로서의웹 인터넷이라는엄청난시장앞에서전세계누구나쉽게웹에접속하여홍보효과의세계화 (Globalization) 를가능하게함. 정보교환의수단 시간과공간을초월한정보의습득, 공유및교환이가능함. 사람과컴퓨터뿐아니라사람과사람사이의중요한커뮤니케이션의장으로발전. 웹은인터넷문화자체 대부분의인터넷서비스가웹으로구현가능. 최근상당수의언어가 CGI 나 ActiveX 의형태로웹을지원 미래가치기술로서의웹서비스 개발단계의생산성보다점점다양해지는환경에서의유연성제고를통해운영과정에서더욱효과를발휘 아주빠르게형성되고소멸하는인터넷의단점에대한유연성을확보 12
인터넷속의웹 (WWW, World Wide Web) 웹 (Web 1.0) 1990 년대초인터넷상에흩어져있는정보간의링크기능을통한상호작용을제공하기위하여웹이라는멀티미디어인터넷활용방식으로빠르게확산됨. 표면적으로대부분의인터넷서비스를웹에서가능하게됨으로써폭발적으로이용증가. ( 웹이곧인터넷 : 모든인터넷은웹으로통한다 ) 사용자의증가및정보량의증가와더블어그한계에직면하고있음. 기능의한계와정적문서의한계를극복하기위해문서의양방향성이요구됨. 확장성 Web 및 유연성 (UI) 멀티미디어및비즈니스영역 13
차세대웹, 시맨틱웹 : 웹 2.0 웹 (Web 2.0) : 차세대웹, 시맨틱웹사용자의정보검색및상호작용을용이케하는방향으로진화된정보접근환경을제공. 비즈니스모델을가진플랫폼 (Platform) 으로서의웹. 목적에맞는정보를수집, 가공, 응용이가능 ( 인간의언어와의도를이해하는검색엔진의변화 ) 웹환경보다정보의생성, 공유, 소비가자유로운인터넷환경을통칭하는의미로쓰임. 14
새로운트렌드 웹 3.0 으로의과도기 웹을통해개인과기업용 SW 를서비스형태로제공 : 웹을 SW 의플랫폼으로보는시각대두 웹의플랫폼화는서비스를제공하고제공받는유통공간의의미가강함 다양한비즈니스애플리케이션들이공유될수있는온라인마켓플레이스 SaaS(Software as a Service) : 소프트웨어 에서 서비스웨어 로의변화를의미 Open API, 매쉬업, 위젯 새로운솔루션의추가 / 개발 / 시험이가능? 수많은협력사와개발자들이활동중 구글 Apps for Domain, 구글웹오피스등기업대상의 SW를서비스로제공중 - 15 -
웹플랫폼의등장 웹 2.0 서비스들과 Open API의확산으로인해등장웹 2.0 서비스들을소프트웨어의컴포넌트로이용기존의운영체제, 하드웨어플랫폼에종속되지않는크로스플랫폼성격을가짐 유기적, 분산적, 사회적특성을가짐 (Social Network, Web3.0 ) - 16 -
웹플랫폼의변화 웹플랫폼이란? 플래폼은이기종간의통합을말한다. 소프트웨어기술의발전은이기종성의극복에서부터시작한다. H/W, OS 간의이기종성기업형 SW 이기종성 Application 의이기종성 ISP JVM(Java Virtual Machine) ISP J2EE EAI (Enterprise App Integration) 웹플랫폼은? 데스크탑애플리케이션? OpenAPI, 매쉬업, 위젯? SUN HP MS A 사 B 사 C 사 ISP ISP Porting Porting Porting Porting Porting Porting SUN HP MS A 사 B 사 C 사 - 17 -
웹플랫폼의구성요소 클라이언트기술 RIA 기술의등장 동적인기능과화려한 UI 를웹에서구현 Ajax, Flex, XUL, Widget 등 컨텐츠기술 기존의웹서비스는내부 DB 에국한됨 많은웹 2.0 서비스들은자신의데이터를공개 Open API) 웹전체를하나의데이타로볼수있게됨 서버기술 다양한웹개발언어및프레임웍등장 LAMP 와같은오픈소스등장 LAMP, ROR, OSS Framework 표준기술 웹표준준수의확산 (x)html, CSS, DOM, ECMAScript 웹표준과 Ajax? 기반기술을바탕으로이기종성을극복하기위함! - 18 -
웹애플리케이션 웹애플리케이션이란? 기존 C/S환경의애플리케이션을웹브라우저를통해서구현 웹에연결되어작업지향적 (Task-oriented) 소프트웨어 최근웹기술의특징 HTML Rich UI Windows Only Cross Platform Desktop & Office Application Extended Web Application & Device 구글오피스, 구글맵, 웹메신저 (http://www.meebo.com), 터미널에뮬레이터 (http://anyterm.org), Ruby 프로그래밍환경 (http://tryruby.hobix.com), 웹데스크탑 (http://www.extjs.com) - 19 -
웹애플리케이션패러다임의변화 레이아웃 Interation 의변화 - 20 -
웹애플리케이션패러다임의변화 화면컨트롤 (Widget Control) 의변화 - 21 -
웹애플리케이션 Front-end 기술 웹표준영역 CSS Javascript AJAX Silverlight Web Desktop 출처 : WEB APPLICATION SOLUTIONS : A Designers Guide : RamirezDesign.com & lukew.com http://techbug.tistory.com/151-22 -
웹표준 - 23 -
웹표준이란 W3C 의토론을통해나온권고안 (Recomendation) 웹의창시자팀버너스리 : 웹기술발전을장려하고관련기술을잘운영하기위한규약 (Standard) 을개발해 WWW(World Wide Web) 의잠재성을최대한발휘시키기위함 웹브라우저이기종간의호환성필요 : 오래된브라우저사용자의불편함을고려, 기능이라도호환가능하도록해주는공통된표현 (Cross Browsing) 필요. 웹표준을지킨다 = W3C 의권고안을지킨다. ACID2(HTML,CSS,PNG), ACID3(HTML,CSS,DOM,SVG) 테스트 (http://acid3.acidtests.org/) 웹표준 Validate Test 24
웹표준관리기관 World Wide Web Consortium(W3C) : http://www.w3c.org 운영현황 시작 : 웹을발명한 Tim Berners-Lee에의해 1994년시작 400개회원사 MIT(US),ERCIM(France), 게이오대 (Japan) 외 15개지역사무국운영 운영방법 강력한표준안제정과정 특허무료정책 공감대, 개방성, 상호운용성중시 40개이상의다른표준단체와연계작업 국제표준에맞는합리적인운영 주요목표 웹문서에서하나의 웹 을지향 데이터서비스 : XML, 웹서비스 (Web Services), 시맨틱웹 (Semantic Web) - 25 -
W3C 의주요목표 XML : 다수의플랫폼이지원, 무상특허로이용가능 기계및인간모두에대한접근성가능, 국제화용이 XML은읽기쉽고, 검증하기용이하며애플리케이션이아닌데이터로관리 주요이슈 텍스트메시징의문제 ( 바이너리 XML) 웹에서 XML전환이사실상실패 웹서비스 : 기계 - 기계상호교환 ( 사람 - 기계상호교환 ) XML기반메시지처리 : 플랫폼독립적인모델 확장성을고려한프레임웍 : 상호운용성확보 기계가처리할수있는형식 : 통합적합성확보 유연한연결성 : 확장성고려 시맨틱웹 데이터와의미를가진웹 외양기준웹을기계가처리가능한의미있는웹으로전환하는것이목표 - 26 -
W3C 의기술비전 모든것위의하나의웹 하나의웹 (One Web) 웹기술은모든디바이스를통해상호교환가능해야함. 컴퓨터, 임베디드, 사람, 집, 직장, 교통, 산업, 의료분야전시스템 상호교환기술 : XHTML, Xforms, CSS, DOM, SVG, SMIL, Voice, MMI 리치웹기술 : Compound Doc Formats, Web Applications 모바일웹기술 : Mobile Web Initiative 유비쿼터스기술 : Embedded Systems, Ubiquitous Web - 27 -
웹표준종류 웹표준의종류 : (Standard가존재하지않으며 Recommandation이최상위개념 ) 제안된표준 (Draft) 작업하는표준 (Working Draft, WD) 확정될권고안 (Candiate Recommendation, RC) 확정된권고안 (Recommandation) 표준이만들어지는과정 28
웹표준스펙 (X)HTML(eXtensible Hypertext Markup Lanuguage) 웹페이지를구성하고표현하는기본언어 CSS(Cascading Style Sheets) 웹페이의호환성유지및다양한액세스기술을사용 XML(eXtensible Markup Language) HTML 이나 CSS 로서표현되지못하는영역을 DTD 를이용하여정의하여사용자정의태그를생성하여제작할수있는메타마크업언어. 이기종간의통신에이용. DOM (Document Object Model) 컨텐츠, 구조, 문서스타일을프로그램과스크립트가동적으로접근하고수정할수있는플랫폼이며언어중립적인인터페이스 W3C DOM, MS DOM ECMAScript(Javascript) W3C 표준으로제정된것이아님. 넷스케이프사가 ECMA 표준기구로채택 29
웹표준이란 : 구조, 표현, 동작의분리 AJAX 구성요소 == 웹표준구성요소 웹표준개념 : 구조, 표현, 동작의분리 Presentation Layer Client UI Server Logic Javascript ( 동작 ) CSS ( 표현 ) Service Layer HTML ( 구조 ) Entity Layer Rich Internet Client, Handheld (Mobile Client) 30
구조와표현의분리 (xhtml + CSS) Standard-based Presentation using : 웹표준의기준? 문서구조 (Markup) 과디자인요소 (CSS) 의분리 예제 ) http://www.csszengarden.com 001.css 001.css 003.css 004.css
웹사이트개발방법론 구조와표현의분리 겉모양은같으나 HTML 은완전히다름 32
구조와동작의분리 (xhtml + Javascript) 1/2 문서 (Markup) 과이벤트를이용한동작 (Javascript) 의분리 (unobstructive) 예 ) <a href= javascript:userfunc() > 이아닌 DOM 객체를직접핸들링 Javascript Library(Ajax 프레임웍 ) 지원 HTML DOM객체에동적으로이벤트생성하여동작시킴 버튼클릭에의한통신부분처리 DataGrid, Menu, Tree,Accordion, Rich Form, Drag & Drop
구조와동작의분리 (xhtml + Javascript) 2/2 뷰 (xhtml) 에서로직 (javascript) 분리하기 <div class= importbutton onclick= importdata( datafeed3.xml, mytextbox.value); /></div> view cotroller model <div class= importbutton id= datafeedbtn ></div> function importfeeddata(event){ importdata( datafeed3.xml, mytextbox.value); } var dfbtn=document.getelementbyid( datafeedbtn ); dfbtn.onclick = importfeeddata;
다이나믹한표현처리 (CSS + Javascript) CSS 제어를통한다이나믹한표현처리 객체.style.[css property 명 ] = 값 offsettop, innerhtml 등을이용한표현변경 Javascript Library(Ajax 프레임웍 ) 지원 DataGrid, Menu, Tree,Accordion, Rich Form, Drag & Drop Effect : Animation (Style의변화 ) Drag & Drop Selector (CSS Selector : Dom Query)
Javascript 와웹표준 뷰에서로직분리하기 디자이너는 HTML/CSS 만, 개발자는 javascript 만관리 ( 단, 협업이중요 ) 화면의추가, 배치등이용이 <html> <head><title>html 안로직 <title> <link rel= stylesheet type= text/css href= musical.css /> <script type= text/javascript src= musical.js ></script> </head> <body> <div id= keyboard class= musicalkeys > <div class= do musicalbutton ></div> <div class= re musicalbutton ></div> <div class= mi musicalbutton ></div> <div class= fa musicalbutton ></div> <div class= so musicalbutton ></div> <div class= la musicalbutton ></div> <div class= ti musicalbutton ></div> <div class= do musicalbutton ></div> </div> <div id= console class= console ></div> </body> </html> var notes= new Array( do, re, mi, fa, so, ra, ti, do ); function makekeyboard(el){ for(var i=0, ilen=notes.length; i < ilen; i++){ var key= document.createelement( div ); key.classname=notes[i]+ musicalbutton ;. el.appendchild(key); } } <html> <head><title>html 안로직 <title> <link rel= stylesheet type= text/css href= musical.css /> <script type= text/javascript src= musical.js ></script> </head> <body> <div id= keyboard class= musicalkeys ></div> <div id= console class= console ></div> </body> </html>
웹표준의장점 마크업 (Markup) 용량이줄어듬 코드량이줄어드는것은페이지로딩시간이빨라짐을의미. 서버의성능을효율적으로관리, 처리능력을극대화하여비용절감. 컨텐츠와문서모양의분리 CSS 를사용하여문서의유지보수가쉬워짐. 높은웹접근성 대부분의웹브라우저, 휴대폰, PDA, 장애인지원용소프트웨어등여러개의단말기적용 향후호환성을보장받음 : 상호호환성 (Cross Browsing) 오래된브라우저사용자들의불편함을고려 다른기종혹은플랫폼에따라달리구현되는기술을비슷하게만듦과동시에어느한쪽에최적화되어치우지지않도록공통요소를사용하여웹페이지를제작하는기법. 37
분리의효과 구조와표현, 동작의분리 xhtml + Javascript + CSS CSS Javascript xhtml OLD NEW 절감율 112.KB 62.9KB 44% 출처 : 정보통신접근성향상표준화포럼 (http://www.iabf.or.kr)
웹표준과사용자경험 구조가튼튼하면흔들리지않는다. - 39 -
웹표준권고안에따른웹사이트개발방법론 웹표준을지켜라 XHTML1.x 나 HTML4.x 표준에맞추어진문서는 99% 접근성이좋은사이트 table 구조는 div 로, font,b 등의태그는 CSS 로사용하라. 구조와표현, 동작을분리하라 빠른사이트의로딩속도. 코딩과유지보수의효율성이높아짐. 구조화된마크업에따른다양한디자인지원 최소한의디버깅을거쳐라 HTML 과 XHTML, CSS, DOM,JAVASCRIPT 가표준문법을사용했는지확인 http://validator.w3.org - 브라우저유효성검사 http://jigsaw.w3.org/css-validator - CSS 유효성확인 http://www.stg.brown.edu/service/xmlvalid - XML 유효성확인 http://www.iabf.or.kr/web/kadowah.asp - 한국형접근성평가도구 효율적인웹개발방법론을가져라 HTML에표현과내용을분리하면기획자와디자이너, 개발자가같은시간내에같은일을하는것이가능해짐. 40
표준화참여방법 W3C W3C 테크니컬문서참조 http://www.w3.org/tr/ 표준안단계별의 Last Call 및 Issue 추적 W3C 한국사무국에의견제시 (http://www.w3.or.kr) WHATWG WHATWG 위키및블로그 : Feedback 및제안 http://blog.whatwg.org, http://wiki.whatwg.org 공개메일링리스트 : 진행사항확인 http://listserver.dreamhost.com/pipermail/whatwg-whatwg.org/ 표준스펙테스트 : 웹브라우저구현단계별로테스트 Firefox DOM Storage http://channy.creation.net/work/firefox/domstorage/ 웹표준화커뮤니티 한국웹표준프로젝트 http://webstandard.or.kr CSS 디자인코리아 http://forum.standardmag.org/ 모질라한국커뮤니티 http://www.mozilla.or.kr - 41 -
요약정리 웹플랫폼, 웹애플리케이션표준설계웹애플리케이션프론트엔드기술 : Ajax, x-internet, RIA 웹애플리케이션에서의 UX 와 UI 트렌드 AJAX의출현, Web2.0 UX : Controls on Demand UX 가기업에주는이점 아키텍트디자인패턴의시작 ( 경험을바탕으로한설계 ) UX : Controls on Demand : 어떤이에게는필요한것이나다른이에게는필요없는것 ( 아키텍처설계단계에서의간결함 ) 아사히야마동물원이야기 : 고객동선을고려한구조변경으로 30 만 300 만명의방문객건물설계 (Architecture) 시눈위에만들어진발자국을따라인도를설계함.
쉬어가며 : 최근웹에선어떤일이? 도구 (tools) 차트 새로운웹전쟁 제 1 브라우저전쟁 = 벤더간경쟁 (Netscape vs. Internet Explorer) 제 2 브라우저전쟁 = 표준안경쟁 (WHATWG vs. W3C) 플랫폼챠트 프로그래밍언어챠트 - 43 -