3. 3.1 웹표준이란 1) 웹표준의 정의 “ 웹자체의 표준에 맞게 제작 하여 다양한 환경 에서도 동일하게 작동 될 수 있는 웹페이지 를 만들자 .” “ 웹은 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간이며 어떤 장애도 없이 이를 이용할 수 있어야 한다 ” - 팀 버너스리 (WWW 창시자 ) - - IE + Win, FireFox + Win,Linux, Safari + Mac OS, Opera + Win 조합 - 휴대폰 , PDA, 장애인용 소프트웨어 다양한 환경 W3C( World Wide Web Consortium ) 의 규정을 지켜서 제작을 하자는 것 규정 : HTML4.1, XHTML1.0, CSS1/2, DOM 표준
5. 3.1 웹표준이란 2) 웹표준의 움직임 1 차 브라우저 전쟁 - 1990 년대 후반 Netspace 사의 Netscape Navigator 와 Microsoft 사의 Intermet Explorer 의 사용자 확보 경쟁 - 서로의 점유율을 높이기 위해 W3C 의 규정을 무시하고 HTML 확장 추진 - Intermet Explorer 의 완승으로 결론 2 차 브라우저 전쟁 - IE 의 보안문제가 발견 , RSS 리더 / 탭브라우저 기능의 취약성 - 웹표준을 기반으로 하는 Firefox 브라우저 등장 - W3C 가 권고하는 웹표준에 부합하는 Firefox 가 IE 에 비해 우위 - 전세계적으로 IE 가 80% 점유 , 유럽등지에서는 Firefox 사용자가 급격히 증가 국제 웹표준 추세 - 미국 : 재활법으로 다양한 접근성 보장 , 전자 및 정보기술의 접근성 표준지침 - 영국 : 웹사이트 접근성 준수를 위한 가이드라인 제정 / 공포 , 웹접근성 인증 마크 제도 - 호주 : 웹접근성 표준지침 활용 , 2001 년 표준 가이드 제정 국내 웹표준 추세 - 2004 년 1000 여개 공공기관 , 금융기관 웹사이트 조사결과 심각한 장애 - 고기능 ( 과잉개인정보 , 기능 , 스크립트 무분별한 사용 ), 고사양 ( 고해상도 색상 , 플래시 사용 ) 위주로 정보 제공 - 전문 UI 개발자의 양산 및 재교육 부재 - 2005 년 웹표준 , 웹접근성에 대한 가이드라인 제정 - 2007 년 12 월 장애인차별금지법 제정
8. 3.2 웹표준 적용방법 2) 웹표준의 적용방법 사례 일단 대문자를 소문자로 바꾼다 - <H T M L> 을 <html> 로 . <BODY> 를 <body> 로 . EMPTY 태그에는 /> 로 바꾼다 - > 를 /> 로 바꾸어야 하는 태그들 : <area> <base> <basefont> <br> <col> <frame> <hr> <img> <input> <param> <isindex> <link> <meta> - 바꾸지 않아도 되는 태그들 : <body> <p> <a> Img 태그는 alt 를 꼭 넣는다 - <img src=“images/hi.gif” alt=“ 하이요” > 값은 따옴표 안에 넣는다 - <td colspan=4> <td colspan=“4”> DOCTYPE 과 ENCODING 를 정의한다 - DOCTYPE 은 어떤 버전의 문서 인지 정의 ( html 4.01 인지 html 2.0 인지 ) <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
9. 3.2 웹표준 적용방법 3) 웹표준의 적용효과 VS 919Byte CSS 파일용량 8line CSS 코드라인수 1.58 KB HTML 파일용량 59 Line HTML 코드라인수 1.27 KB CSS 파일용량 11 Line CSS 코드라인수 74 Byte HTML 파일용량 31 Line HTML 코드라인수
11. 3.3 웹표준 도입의 이슈 1) 웹표준화의 효과 비즈니스적 분석 - 트래픽 컨트롤 - 버전관리 / 유지보수의 용이성 - 더 넓은 확장성 / 신기술 도입 용이 - 더 넓은 사용자층 확보 - 장애인 , 노인 등을 위한 서비스 제공에 따라 기업 이미지 제고에 도움 접근성 분석 - 멀티 브라우저 - 멀티 플랫폼 - 장애인 - 저연령 / 고연령층 - 특정질병 , 저소득층 , 학습능력이 낮은 사람 , 기타 특수 환경 / 조건 개발자지향분석 - 트래픽 컨트롤 - 버전관리 / 유지보수의 용이성 - 더 넓은 확장성 / 신기술 도입 용이 - dhtml / ajax / rich internet application / semantic web 디자이너지향 분석 - 디자인 기간 단축 - 수정 / 변경의 자유로움 - 재활용 가능한 디자인
12. 1) 기존 웹개발 프로세스 3.4 기존웹 / 웹표준 개발프로세스 차이 1, 기획자가 기획작업을 거쳐 스토리보드를 산출해내면 2, 디자이너가 이미지 편집 프로그램 ( 포토샵 ) 을 이용해 필요한 이미지를 생산해 낸 후 3, 코더가 적절히 구현된 테이블 안에 해당 이미지와 컨텐츠들을 배치한 html 코드를 생산해내고 , 4, 프로그래머가 산출된 코드를 받아 웹 프로그래밍 언어와 조합하여 프로그램이 적용된 최종 결과를 완성한다 . 문제점으로 지적… 1 병목현상 2 과도한 스토리보드 의존 3 html 구조화 어려움
14. 3.4 기존웹 / 웹표준 개발프로세스 차이 3) 역할 중심의 개발공정 ㅁ 디자이너 중심 - 기존 작업방식과 유사하야 쉽게 적용 - 디자이너가 웹표준화에 대한 기술습득 필수 - 작업의 일관성 유지 ( 기존 코딩 역할 일관성 ) - 프로그램 작업시작 빨라짐 ( 디자인보다 코딩작업이 완료되기에 ) - 디자이너 특성상 논리적 , 구조적인 능력이 필요한 웹표준화 적용이 무리한 요구 ( 시각적 구조화에 머물 수 있음 )
15. 3.4 기존웹 / 웹표준 개발프로세스 차이 3) 역할 중심의 개발공정 ㅁ 개발자 중심 - 필요기술면에서 웹표준화에 대한 이해가 빠름 - 빠른 개발속도 ( 자신이 생산한 코딩 ) - 개발에 필요한 html 코드 생산으로 구조화 의도가 왜곡 - 개발자에게 너무 많은 작업이 배정으로 일정상 문제
16. 3.4 기존웹 / 웹표준 개발프로세스 차이 3) 역할 중심의 개발공정 ㅁ 기획자중심 - 기획의도에 맞게 논리구조가 가능 - 관련기술 습득이 필수 - 과도한 업무편중으로 공정기간이 늘어남ㅍ
17. 3.4 기존웹 / 웹표준 개발프로세스 차이 3) 역할 중심의 개발공정 ㅁ 퍼블리셔 역할 추가를 통한 개발공정 - 스토리보드분리 ( 프로세스플로우 , 컨텐츠명세서 ) ㅁ 각 개발참여자의 작업착수시간 앞당김 ㅁ 스토리보드 경량화로 업무부담 감소 ㅁ 디자인너의 고유영역 보장 ( 실질적인 css 및 스타일 가이드 작업 필요 ) ㅁ 프로그래머는 MVC 기법을 도입하여 개발 가능 - 퍼블리셔 역할 추가 ㅁ html 구조화 전담 ㅁ 각 개발참여자의 커뮤니케이션 역할
23. 참조 – MVC 기법 View : 최종 사용자에게 보여지는 HTML 결과물 Model : 인터페이스와는 상관없이 정해진 기능들을 수행하고 그 결과를 갱신하는 프로그램 Controller : 사용자의 Action 을 받아 해당하는 Model 을 수행시키기 위한 관리 프로그램
![웹표준 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)