0
웹표준에  대한 이해 2008. 1
웹표준 <ul><li>웹표준을 준수한  html  개발이란 ? </li></ul><ul><li>:  의미에 맞게 코딩한다 </li></ul><ul><li>->  구조와 디자인의 분리를 가능케 해준다 . </li></ul...
3.1  웹표준이란 1)  웹표준의 정의 “ 웹자체의  표준에 맞게 제작 하여  다양한 환경 에서도  동일하게 작동 될 수 있는  웹페이지 를 만들자 .” “  웹은 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간이며...
3.1  웹표준이란 1)  웹표준의 정의
3.1  웹표준이란 2)  웹표준의 움직임 1 차 브라우저 전쟁 - 1990 년대 후반  Netspace 사의  Netscape Navigator 와  Microsoft 사의  Intermet Explorer 의 사용자...
3.1  웹표준이란 2)  웹표준의 움직임 – 국내 주요사이트 현황
3.2  웹표준 적용방법 1)  웹표준의 적용기술 웹페이지에 표현되는 모든 속성에 대해 객체화 하여 이를 자유자재로 사용할 수 있 도록 만든것  DOM Document Object Model  HTML 이나  CSS 로...
3.2  웹표준 적용방법 2)  웹표준의 적용방법 사례 일단 대문자를 소문자로 바꾼다 - <H T M L>  을  <html>   로 . <BODY> 를  <body>   로 . EMPTY  태그에는  /> 로 바꾼다 ...
3.2  웹표준 적용방법 3)  웹표준의 적용효과 VS 919Byte CSS  파일용량 8line CSS  코드라인수 1.58 KB HTML 파일용량 59 Line HTML 코드라인수 1.27 KB CSS  파일용량 1...
3.2  웹표준 적용방법 3)  웹표준의 적용효과
3.3  웹표준 도입의 이슈 1)  웹표준화의 효과 비즈니스적 분석 -  트래픽 컨트롤  -  버전관리  /  유지보수의 용이성  -  더 넓은 확장성  /  신기술 도입 용이  -  더 넓은 사용자층 확보  -  장애...
1)  기존 웹개발 프로세스 3.4  기존웹  /  웹표준 개발프로세스 차이 1,  기획자가 기획작업을 거쳐 스토리보드를 산출해내면 2,  디자이너가 이미지 편집 프로그램 ( 포토샵 ) 을 이용해 필요한 이미지를 생산해...
3.4  기존웹  /  웹표준 개발프로세스 차이 2)  개발프로세스의 차이
3.4  기존웹  /  웹표준 개발프로세스 차이 3)  역할 중심의 개발공정 ㅁ 디자이너 중심 -  기존 작업방식과 유사하야 쉽게 적용 -  디자이너가 웹표준화에 대한 기술습득 필수 -  작업의 일관성 유지  ( 기존 ...
3.4  기존웹  /  웹표준 개발프로세스 차이 3)  역할 중심의 개발공정 ㅁ 개발자 중심 -  필요기술면에서 웹표준화에 대한 이해가 빠름 -  빠른 개발속도  ( 자신이 생산한 코딩 ) -  개발에 필요한  html...
3.4  기존웹  /  웹표준 개발프로세스 차이 3)  역할 중심의 개발공정 ㅁ 기획자중심 -  기획의도에 맞게 논리구조가 가능 -  관련기술 습득이 필수 -  과도한 업무편중으로 공정기간이 늘어남ㅍ
3.4  기존웹  /  웹표준 개발프로세스 차이 3)  역할 중심의 개발공정 ㅁ 퍼블리셔 역할 추가를 통한 개발공정 -  스토리보드분리  ( 프로세스플로우 ,  컨텐츠명세서 ) ㅁ 각 개발참여자의 작업착수시간 앞당김 ㅁ...
3.4  기존웹  /  웹표준 개발프로세스 차이 4)  개발문서 ( 스토리보드 ) 의 차이 스토리보드 프로세스플로우
3.4  기존웹  /  웹표준 개발프로세스 차이 4)  개발문서 ( 스토리보드 ) 의 차이 스토리보드 컨텐츠 명세서
3.4  기존웹  /  웹표준 개발프로세스 차이 5)  퍼블리셔 공정 ㅁ  1  단계  :  구조화
3.4  기존웹  /  웹표준 개발프로세스 차이 5)  퍼블리셔 공정 ㅁ  2  단계  :  코딩
3.4  기존웹  /  웹표준 개발프로세스 차이 5)  정리 <ul><li>:  디자인과 구조의 분리로 얻는 이점 </li></ul><ul><li>-  스토리보드만으로 선작업 ( 구조 ) 이 가능 </li></ul><u...
참조 –  MVC  기법 􀁺  View :  최종 사용자에게 보여지는  HTML  결과물 􀁺  Model :  인터페이스와는 상관없이 정해진 기능들을 수행하고 그 결과를 갱신하는 프로그램 􀁺  Controller :  ...
Upcoming SlideShare
Loading in...5
×

웹표준의 이해

2,230

Published on

웹사이트 개발을 중심으로 본 웹표준에 대한 이해

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,230
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
83
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "웹표준의 이해"

  1. 1. 웹표준에 대한 이해 2008. 1
  2. 2. 웹표준 <ul><li>웹표준을 준수한 html 개발이란 ? </li></ul><ul><li>: 의미에 맞게 코딩한다 </li></ul><ul><li>-> 구조와 디자인의 분리를 가능케 해준다 . </li></ul><ul><li>table 방식에서 css 방식으로 . </li></ul><ul><li>div 기반의 경우 구조와 디자인요소의 분리가 가능 </li></ul><ul><li>: html 태그 ( 메타데이터 ), css( 디자인정보 : 레이아웃 정보 , 폰트정보 etc) </li></ul><ul><li>--> 화면의 형태를 구조와 상관없이 css 에서 제어할 수 있음 </li></ul><ul><li>완전한 css 기반의 포맷팅의 경우 상호간 연계성에서 자유로워 진다 </li></ul>
  3. 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 표준
  4. 4. 3.1 웹표준이란 1) 웹표준의 정의
  5. 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 월 장애인차별금지법 제정
  6. 6. 3.1 웹표준이란 2) 웹표준의 움직임 – 국내 주요사이트 현황
  7. 7. 3.2 웹표준 적용방법 1) 웹표준의 적용기술 웹페이지에 표현되는 모든 속성에 대해 객체화 하여 이를 자유자재로 사용할 수 있 도록 만든것 DOM Document Object Model HTML 이나 CSS 로서 표현되지 못하는 영역을 DTD 를 이용하여 정의하여 사용자 정의의 태그를 생성하여 제작할 수 있는 언어 . XML eXtensible Markup Language <ul><li>사용자 정의의 디자인 속성을 지정 ( 글꼴 , 크기 , 색상 , 이벤트 등 ) </li></ul><ul><li>CSS 를 사용한 모든 페이지는 기존의 버전과의 호환성 , 즉 어떤 브라우저에서도 </li></ul><ul><li>내용을 열람할 수 있다 . </li></ul>CSS Cascading Style Sheets - 웹페이지를 표시하는 기본언어 - 최신 HTML 표준은 4.01 이지만 HTML 을 XML 과 결합한 XHTML 이 권고안 확정 - <font>, <b>, <i> 같은 표현 요소들을 베재하고 , 태그를 모두 닫도록 권고하는 등 정확한 문서 규격을 요구 xhtml eXtensible HyperText Markup Language
  8. 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. 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 코드라인수
  10. 10. 3.2 웹표준 적용방법 3) 웹표준의 적용효과
  11. 11. 3.3 웹표준 도입의 이슈 1) 웹표준화의 효과 비즈니스적 분석 - 트래픽 컨트롤 - 버전관리 / 유지보수의 용이성 - 더 넓은 확장성 / 신기술 도입 용이 - 더 넓은 사용자층 확보 - 장애인 , 노인 등을 위한 서비스 제공에 따라 기업 이미지 제고에 도움 접근성 분석 - 멀티 브라우저 - 멀티 플랫폼 - 장애인 - 저연령 / 고연령층 - 특정질병 , 저소득층 , 학습능력이 낮은 사람 , 기타 특수 환경 / 조건 개발자지향분석 - 트래픽 컨트롤 - 버전관리 / 유지보수의 용이성 - 더 넓은 확장성 / 신기술 도입 용이 - dhtml / ajax / rich internet application / semantic web 디자이너지향 분석 - 디자인 기간 단축 - 수정 / 변경의 자유로움 - 재활용 가능한 디자인
  12. 12. 1) 기존 웹개발 프로세스 3.4 기존웹 / 웹표준 개발프로세스 차이 1, 기획자가 기획작업을 거쳐 스토리보드를 산출해내면 2, 디자이너가 이미지 편집 프로그램 ( 포토샵 ) 을 이용해 필요한 이미지를 생산해 낸 후 3, 코더가 적절히 구현된 테이블 안에 해당 이미지와 컨텐츠들을 배치한 html 코드를 생산해내고 , 4, 프로그래머가 산출된 코드를 받아 웹 프로그래밍 언어와 조합하여 프로그램이 적용된 최종 결과를 완성한다 . 문제점으로 지적… 1 병목현상 2 과도한 스토리보드 의존 3 html 구조화 어려움
  13. 13. 3.4 기존웹 / 웹표준 개발프로세스 차이 2) 개발프로세스의 차이
  14. 14. 3.4 기존웹 / 웹표준 개발프로세스 차이 3) 역할 중심의 개발공정 ㅁ 디자이너 중심 - 기존 작업방식과 유사하야 쉽게 적용 - 디자이너가 웹표준화에 대한 기술습득 필수 - 작업의 일관성 유지 ( 기존 코딩 역할 일관성 ) - 프로그램 작업시작 빨라짐 ( 디자인보다 코딩작업이 완료되기에 ) - 디자이너 특성상 논리적 , 구조적인 능력이 필요한 웹표준화 적용이 무리한 요구 ( 시각적 구조화에 머물 수 있음 )
  15. 15. 3.4 기존웹 / 웹표준 개발프로세스 차이 3) 역할 중심의 개발공정 ㅁ 개발자 중심 - 필요기술면에서 웹표준화에 대한 이해가 빠름 - 빠른 개발속도 ( 자신이 생산한 코딩 ) - 개발에 필요한 html 코드 생산으로 구조화 의도가 왜곡 - 개발자에게 너무 많은 작업이 배정으로 일정상 문제
  16. 16. 3.4 기존웹 / 웹표준 개발프로세스 차이 3) 역할 중심의 개발공정 ㅁ 기획자중심 - 기획의도에 맞게 논리구조가 가능 - 관련기술 습득이 필수 - 과도한 업무편중으로 공정기간이 늘어남ㅍ
  17. 17. 3.4 기존웹 / 웹표준 개발프로세스 차이 3) 역할 중심의 개발공정 ㅁ 퍼블리셔 역할 추가를 통한 개발공정 - 스토리보드분리 ( 프로세스플로우 , 컨텐츠명세서 ) ㅁ 각 개발참여자의 작업착수시간 앞당김 ㅁ 스토리보드 경량화로 업무부담 감소 ㅁ 디자인너의 고유영역 보장 ( 실질적인 css 및 스타일 가이드 작업 필요 ) ㅁ 프로그래머는 MVC 기법을 도입하여 개발 가능 - 퍼블리셔 역할 추가 ㅁ html 구조화 전담 ㅁ 각 개발참여자의 커뮤니케이션 역할
  18. 18. 3.4 기존웹 / 웹표준 개발프로세스 차이 4) 개발문서 ( 스토리보드 ) 의 차이 스토리보드 프로세스플로우
  19. 19. 3.4 기존웹 / 웹표준 개발프로세스 차이 4) 개발문서 ( 스토리보드 ) 의 차이 스토리보드 컨텐츠 명세서
  20. 20. 3.4 기존웹 / 웹표준 개발프로세스 차이 5) 퍼블리셔 공정 ㅁ 1 단계 : 구조화
  21. 21. 3.4 기존웹 / 웹표준 개발프로세스 차이 5) 퍼블리셔 공정 ㅁ 2 단계 : 코딩
  22. 22. 3.4 기존웹 / 웹표준 개발프로세스 차이 5) 정리 <ul><li>: 디자인과 구조의 분리로 얻는 이점 </li></ul><ul><li>- 스토리보드만으로 선작업 ( 구조 ) 이 가능 </li></ul><ul><li>선작업된 코드정보 설계도를 바탕으로 웹개발이 우선 </li></ul><ul><li>가능하고 , html 개발자가 디자인을 구현하는 작업과 </li></ul><ul><li>병렬진행이 가능 </li></ul><ul><li>- 개발완료시 ui 수정작업은 모두 css 로 제어됨 </li></ul><ul><li>잘 구조화된 html 구조는 모듈별로 잘 분리되어 있어 </li></ul><ul><li>개발구현이 용이 </li></ul><ul><li>-> 각 단위업무들의 연계성을 없애 , 병렬작업을 가능 </li></ul><ul><li>하게 한다 . </li></ul><ul><li>- 실제 오픈 일정을 당길 수 있음 ( 일정 감소 ) </li></ul><ul><li>각 업무별 연계성 해소로 해당분야의 집중도 , 전문성 </li></ul><ul><li>상승 기대 </li></ul><ul><li>- 기획 ( 스토리보드 )--> 디자인 -->html--> 개발 </li></ul><ul><li>- 작업 흐름의 선형 ( 직렬 ) 화 </li></ul><ul><li>선형적인 작업 흐름으로 인한 작업일정의 누적으로 </li></ul><ul><li>비효율적인 작업 진행 </li></ul><ul><li>개발 완료 후 발생하는 수정 이슈에 대한 이중작업이 </li></ul><ul><li>필요 </li></ul><ul><li>- html 수정시 개발인력까지 이중작업을 해야함 </li></ul><ul><li>- 개발단에서 html 수정작업을 진행하게 될 경우 , </li></ul><ul><li>원본 html 과 실제 사용되는 html 과의 동기화 문제가 </li></ul><ul><li>발생하고 , 코드 재사용성을 낮춰 생산성을 저해하게 </li></ul><ul><li>됨 </li></ul>웹표준 기반의 웹개발 프로세스 기존 웹개발 프로세스
  23. 23. 참조 – MVC 기법 􀁺 View : 최종 사용자에게 보여지는 HTML 결과물 􀁺 Model : 인터페이스와는 상관없이 정해진 기능들을 수행하고 그 결과를 갱신하는 프로그램 􀁺 Controller : 사용자의 Action 을 받아 해당하는 Model 을 수행시키기 위한 관리 프로그램
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×