웹표준 & HTML5 1. 웹표준개발프로세스 2. 웹접근성 3. 웹호환성 - 1 -
웹개발프로세스 ( 효율적인웹개발방법론 ) - 2 -
웹표준화에따른실전웹개발프로세스 Waterfall 방식 가장많이사용하고있는프로세스 (waterfall 방식 ) 특징밀어내기식선형작업으로프로젝트의흐름이중요. 문제점자원관리의비효율성과병목현상해결책 : 선행일정을줄임 ( 근본적인해결책이되지못함 ) 구조화의어려움 HTML 코드의생산 ( 웹표준화의관점 ) 을디자이너가수행해결책 : 역할 ( 기획자 / 디자이너 / 개발자 ) 을중심으로한개선된개발공정필요 협업이이루어지지않는개발 3
웹표준화에따른실전웹개발프로세스 Waterfall 방식 가장많이사용하고있는프로세스 (waterfall 방식 ) 역할을중심으로한개발공정 ( 디자이너중심개발공정 ) 디자이너가웹표준화의중심작업 ( 기존프로세스와비슷하여가장쉽게적용 ) 디자이너가웹표준화에관한필요기술을습득해야함. 장점 기존디자이너의코딩작업의연장으로일관성을유지디자인보다코딩이먼저끝나므로프로그래머의작업시간절약단점 Javascript 등기술중심적인내용까지디자이너의몫논리적구조화보다시각적구조화의우려. 4
웹표준화에따른실전웹개발프로세스 Waterfall 방식 가장많이사용하고있는프로세스 (waterfall 방식 ) 역할을중심으로한개발공정 ( 프로그래머중심 ) 프로그래머가웹표준화의중심작업 ( 웹표준화에대한깊은이해도에따른성공가능성높음 ) 장점 웹표준화에대한이해도가높음빠른개발속도확보 ( 자신의코드 ) 단점프로그램적용을위한 HTML 코드만을의도적으로생산할가능성프로그램업무의시간확보어려움 5
웹표준화에따른실전웹개발프로세스 Waterfall 방식 가장많이사용하고있는프로세스 (waterfall 방식 ) 역할을중심으로한개발공정 ( 기획자중심 ) 기획자가웹표준의중심작업 장점 기획의도에맞게웹페이지의논리적구조화가가능디자인이나개발에의해구조화자체가왜곡되는현상의최소화단점 Javascript 등기술중심적인내용까지디자이너의몫과도한스토리보드작업, 기획자의부담이늘어남. 6
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 기존 Waterfall 방식의역할및작업과정을재분배 ) 퍼블리셔 (Publisher) 의역할이강조됨. Publisher란 기존 HTML의코딩작업을벗어나웹상에컨텐츠를게재하는방식을책임지는전문가 퍼블리셔의역할기획자가만들어낸컨텐츠를기획의도에따라디자인적용프로그램의도움으로웹상에게재 (x)html/css/javascript 부분을전적으로담당기존역할 ( 기획, 디자인, 프로그램 ) 의업무를경감시킴. 작업강도와기간이단축되는효과 스토리보드작업의분리프로세스흐름도, 컨텐츠상세화디자인지시서로서의스토리보드역할을축소디자인고유영역을보장컨텐츠상세화에따른프로그램작업시간의축소 7
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 기획 / 분석 / 회의단계 ) 기획 / 분석 / 회의단계에서이루어져야할내용요구사항수립 (Requirement Gathering) : 프로젝트의목적과의미파악필요한기능에대한정의목록축출객체지향개발방법론 : ( 활동 / 클래스다이어그램 / 컴포넌트명세서 / 배포다이어그램 ) 분석 (Analysis) 수집된요구사항을각역할에맞추어분배프로젝트진행과정에필요한요소를찾아냄. 객체지향개발방법론 : ( 유스케이스 / 상태 / 시퀀스 / 협력다이어그램 ) 설계 (Design) 프로젝트의전체적인설계도를그림 ( 문서화작업 ) 프로세스플로우 / 스타일가이드 / 개발설계단계의초입 8
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 기획자공정 ) UML(Unified Modeling Language) : Grandy Booch, James Rumbaugh, Ivar Jacobson 제안시스템개발세계에서의표준으로인정받는표기시스템프로젝트참여자시점에서의설계도를그릴수있는표준을제공, 주로객체지향개발도구 (Java, C++) 를사용할때설계분석도구로사용됨기획자 : 실제개발에필요한지시서를만드는데유용함 ( 실제프로젝트에서모든참여자가 UML 을숙지해야함 ) 스토리보드프로세스흐름도 : 개발자컨텐츠명세서 ( 상세화 ) : 디자이너기준페이지에들어가야할내용명시 9
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 퍼블리셔공정 ) 구조화와코딩 : ( 컨텐츠분할 ) 덩어리를분할해서나누어공략한다 (Divide & Conquer) 기획자에게받는컨텐츠명세서를가지고웹페이지레이아웃을잡음. [ 구조화 ] [ 코딩 ] Header - SiteMenu - ServiceLogo - ServiceMenu - Search - Promotion_1 Content - MainContent - SideContent - Article Box - Poll - Article Box detail Footer - Copyright - Related Link <div id= header > <div id= sitemenu ></div> <div id= servicelogo ></div> <div id= servicemenu ></div> <div id= search ></div> <div id= promotion_1 ></div> </div> <div id= Content > <div id= maincontent ></div> <div id= sidecontent > <div id= articlebox ></div> ~ </div> </div> <div id= Footer > <div id= copyright ></div> <div id= relatedlink</div> </div> 10
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 퍼블리셔공정 ) CSS 스타일가이드 박스기사본문은다른영역과최소 3px 이상간격을두고배치되어야하며, 1px 크기의 #EEEEEE 색상의경계선으로구획지어진다. 경계선과본문내용과의여백은 10px 이상이어야한다. 배경색은따로지정하지않고상위영역의배경색및배경이미지를그대로사용한다. 기본글꼴은 sans-serif 로한다. 글꼴크기는 11.5pt 이며, 들여쓰기하지않는다. 본문중의링크는사이트전체의일반링크표시규칙을따르되밑줄 (underline) 을표시한다..box_article.content{ margin:3px; border:1px solid #EEEEEE; padding:10px; font-family:sans-serif; font-size:11.5pt; }.box_article.content a{ text-decoration:underline; } 11
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 퍼블리셔공정 ) HTML Validator 를이용한표준화준수확인 W3C HTML Validator : http://validator.w3.org/ 브라우저의확장기능 : ( 인터넷사용이불가한경우이용 ) 모질라 (Firefox) 의확장기능오페라의기본내장기능 CSS Validator 를이용한표준화준수확인 W3C CSS validator : http://jigsaw.w3.org/css-validator/ 브라우저확장기능 접근성 (Accessiblily) Validator W3C Web Content Accesibility Guideline http://www.w3.org/wai/intro/wcag.php KADO-WAH http://www.iabf.or.kr/web/kadowah.asp Webxact Accessibility Validator http://webxact.watchfire.com 12
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 디자이너공정 ) UI(User Interface) 스타일가이드디자인의일관성을유지디자인의목표, 컨셉 Color Scheme( 사용되는색상열람 ) Font, Typography( 글꼴크기, 색상, 자간, 장평.. 등 ) Layout ( 문서구조, 크기, 위치, 형태, 성격등 ) 그래픽요소 ( 아이콘, 이미지, 블릿, 버튼등 ) 기타 ( 표, 플래쉬, 멀티미디어에대한상세한규칙 ) 13
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 개발자공정 ) 비즈니스로직 (business logic) 분석및프로그래밍기획자공정의프로세스흐름도만으로전체적인비즈니스로직의설계가가능 각페이지출력 로그인에필요한데이터모델 사용자입력값전달 로그인판정 개인쪽지에필요한데이터모델 페이지전환 팝업기능 에러처리등 14
웹표준화에따른실전웹개발프로세스 개선된방식 개선된웹개발프로세스 ( 개발자공정 ) 비즈니스로직 (business logic) 분석및프로그래밍기획자공정의프로세스흐름도만으로전체적인비즈니스로직의설계가가능 각페이지출력 로그인에필요한데이터모델 사용자입력값전달 로그인판정 개인쪽지에필요한데이터모델 페이지전환 팝업기능 에러처리등 15
메뉴구조도예시 16
경험모델 ( 비지니스플로우 ) 예시 회원 (member) 도서관 A (library a) 도서관 B (library b) 회원로그인 도서관사서로그인 도서관사서로그인 지정도서관선택 신청하기 신청방법선택 도서관리시스템 신청방법선택 온라인신청우편발송 도서관리시스템 현재존재하는도서목록반화 주문확인 신청처리완료 신청처리완료 신청내역확인 마일리지처리 이미신청한도서신청코드, 반납한도서 17
화면흐름도예시 회원유효성검증 (Validation Check) F F01 F03 F04 F99 회원가입 ( 등록 / 인증 ) 회원가입 ( 등록폼 ) 회원확인 회원정보 로그아웃 F02 회원가입 ( 해외거주자등록폼 ) F05 회원탈퇴 F90 F06 로그인 도서관리내역보기 F91 ID/ 비밀번호찾기 F07 나만의 QT F0601 신청목록 F0602 대여목록 F0603 기증목록 F91 F90 F08 F0604 이용약관 저작권관련정책열람 건의사항 도서검색 18
스토리보드예시 PROJECT 도서관리시스템 DOC. NAME STORY BOARD PAGE ID PAGE NO. 19 TITLE 오픈프로세스 사서현황 > 도서신청건수 DESCRIPTION 회원도서오픈프로세스서비스요청도서리스트회원 * 도서화면 : 해당사서가담당하고있는고객의도서대출신청내역을출력함. 관리대상회원대출진행사항신청진행사항인수방문회원정보관리 도서신청 L1 도서신청신청처리현황 1 3 관리사서홍길동 /S0192 이전다음종류상태대출중도서번호 전체 - 검색 2 * 출력테이블 Header 항목 : 선택, 종류, 지역, 도서번호, 상태, 성립일, PTD, 담당사서, 이전사서, 변경후사서, 자격여부, 이전사유, 상세사유 1. 기존의목록을콤보박스로변경 2. 지정된검색조건으로검색결과출력종류 : 전체 (D), 지역, 지점도서관상태 : 신청중 (D), 완료, 반려, 대출중도서번호 : 시작도서번호 - 종료도서번호 Servicing LP 사서현황 - 도서신청건수 * 4홍길동님 : 접속일일 (2004.10.11) 총대출건수 : 120, 보유도서건수 : 107, 보유회원수 3. 이전, 다음변경전사서콤보박스의이전, 다음사서 - 담당사서신청 선택 5 ^ 종류지역 지역서울 도서번호 10927265 --- 관리이전사유 비고 4. 선택된사서의관리건수등출력 변경건수건 1 변경후 LP 이순신 선정 임시저장 도서관내이전신청 지역이전신청 6 7 8 9 LINK PAGE L1 SM01_02 L2 L3 L4 L5 L6 19
스토리보드예시 다양한프로토타이핑툴 - 20 -
웹애플리케이션설계프로세스 사용자인터페이스 (UI) 개발프로세스
웹애플리케이션설계프로세스 사용자경험 (UX) 기반웹애플리케이션설계프로세스
AJAX 표준설계에따른협업 (Collaboration) AJAX 설계및개발은누가해야할까? (Designer vs. Developer)? Layout, Animation Event, markup integration - 23 -
AJAX 표준설계에따른협업 (Collaboration) AJAX 설계및개발은누가해야할까? ( 새로운역할통합관리자 : Integrator) - 24 -
AJAX 표준설계에따른협업 (Collaboration) 웹디자이너및퍼블리셔관점에서의설계필요성 Design is not just what it looks like and feels like. Design is how it works - 스티브잡스 - 1. 디자이너와개발자모두하나의페이지에서다양한액션을프로토타입핑. 2. 하나의페이지에서일어나는액션과사용자경험에대한것을모두담고있기때문에관리할페이지가줄어듭니다. ( 예를들어여러페이지에적용되어있던 css 가변경되어질경우가불필요한작업량이줄어든다.) 3. Ajax/Rich UI 개발자들에게는엘리먼트의 CSS class name 통해서원하는처리를손쉽게할수있다. 즉디자이너에게도 Ajax/Rich UI 개발을위한기술적인이해와사용자경험 (User Experience) 에대한요구사항을디자인단계에서부터적용시켜야한다 UX 와 AJAX/Rich UI 를위한패턴
웹접근성및호환성 - 26 -
웹접근성 (Accessibility) W3C 의웹접근성 장애를지닌사람이웹을이용할수있는것. Web Accessibility means that people with disabilities can use the Web(W3C) The Power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect(tim Berners Lee) 웹접근성의본질적의미 모든사람이다양한조건의환경에서다양한장치를이용하여웹서비스나콘텐츠에접근할수있도록보장하는것. 사용자의신체적상황, 지식, 경험 디바이스 (PC, 포터블기기, 홈네트워크등 ), 소프트웨어 ( 운영체제, 웹브라우저, 응용소프트웨어등 ) 보편적설계 (Universal Design) 접근성 (Accessibility)
웹접근성 (Accessibility) 장애인차별금지및권리구제등에관한법률 ( 이하장차법 ) 모든생활영역에서장애를이유로한차별을금지하고장애를이유로차별받는사람의권익을효과적으로구제하기위한법 2008 년 4 월 11 일시행 2009 년 4 월 11 일집행가능 상시 300 인이상의근로자를사용하는사업장과국가및지방자치단체 법시행후 1 년이경과한날 (2009 년 4 월 11 일 ) 상시 100 인이상 300 인미만의근로자를사용하는사업장 법시행후 3 년이경과한날 (2011 년 4 월 11 일 ) 상시 30 인이상 100 인미만의근로자를사용하는사업장 법시행후 5 년이경과한날 (2013 년 4 월 11 일 ) 장차법준수방안 WCAG(Web Content Accessibility Guide) 1.0 지침준수 KWCAG 1.0 지침준수
웹접근성 (Accessibility) 웹접근성점검체크리스트 인식의용이성 텍스트아닌콘텐츠의인식 영상매체의인식 색상에무관한인식 운용의용이성 이미지맵기법사용제한 프레임의사용제한 깜박거리는객체사용제한 키보드로만운용가능 반복적네비게이션링크 반응시간의조절기능 이해의용이성 데이터테이블구성 논리적구성 온라인서식구성 기술적진보성 신기술의사용 별도의웹사이트제공
웹접근성 (Accessibility) 웹접근성에대한오해 웹접근성을위해웹표준을준수하는경우다양한기능이나화면제공에제한이있음. 핵심사용자계층에차별적가치를제공해주지못하고, 특정한사용자를위한다양한버전을제공해야함. 웹접근성과웹표준의상관관계 웹접근성향상을위해고려해야할사항은디바이스와소프트웨어에독립적인웹표준기술을사용하는것임. 웹표준을준수하면웹접근성이자동적으로향상되는것은아님. 웹접근성은다양한변수 ( 디바이스, 소프트웨어, 기술, 사용자환경등 ) 를고려해야함. 웹표준은웹접근성을보장하는든든한초석이된다.
웹접근성 (Accessibility) 웹접근성의기대효과 웹표준에기반을둔기술은시스템의경제적인효과를제고해줌. 유지보수비용절감 생산성향상 웹개발자의영역을효과적으로분리하여전문성에기반한시스템구축가능케함. 웹 2.0 의서비스관점에서웹접근성을높이면신규사업기회를발굴할수있음. 매쉬업 (Mash-up) 서비스의성공 파레토의법칙 (Pareto Principle) : 80% 에해당하는롱테일 (Long tail) 에관심 ( 아마존, 구글등 )
웹접근성 (Accessibility) 웹접근성점검프로그램 웹사이트의접근성을수동으로점검할수있는프로그램을이용하면직접코드를보지않더라도어느정도해당사이트의접근성을쉽게점검할수있다. KADO-WAH A-Prompt Fujitsu ColorDoctor : 색상에무관한인식 웹브라우저 파이어폭스 (Firefox) 오페라 (Opera) 파이어폭스용확장기능 웹개발자툴바 (Web Developer Toolbar) 파이어버그 (Firebug) HTML 검사기 (HTML Tidy Validator)
웹접근성품질마크 웹접근성품질마크 장애인및고령자가웹사이트이용에불편함이없도록웹접근성표준지침을준수하는우수한사이트에대해웹접근성수준을인정하고이를상징하는품질마크를부여하는제도 주체 품질마크인증기관 : 한국정보문화진흥원 (KADO) 품질마크심의 : 웹접근성품질마크위원회 대상 인터넷을통해정보통신서비스를제공하는웹사이트를운영하는기관및단체 법인등록사업자로서정부, 지자체, 공공기관, 시민단체, 기업체등
웹접근성품질마크 웹접근성품질마크인증기준 " 인터넷웹콘텐츠접근성지침 1.0" 에기초한웹접근성품질마크인증기준 13개항목, 26개요구조건 ( 지표 ) 의중요도별인증기준준수 의무요건 90% 이상, 권고요건 70%, 권장요건 50% 의준수율을만족하는수준 구분중요도 1 중요도 2 중요도 3 개념 의무 (Must) 반드시준수해야함. 권고 (Should) 마땅히준수해야함. 권장 (May) 준수하도록노력해야함. 의미 기본적인요구사항을충족시킴으로써웹접근성을보장 (ensure) 함미준수시웹콘텐츠에접근하는것이불가능 중대한결함을제거함으로써웹접근성을증대 (increase) 시킴미준수시웹콘텐츠에접근하는것이어렵게됨 사소한결함까지제거함으로써웹접근성을향상 (enhance) 시킴미준수시웹콘텐츠에접근하는것이불편하게됨 인증기준 90% 70% 50% 지표수 14 개지표 8 개지표 4 개지표
웹호환성 (Cross Browsing) 웹호환성 운영체제, 브라우저등어떠한환경에구별없이웹서비스와콘텐츠를동일하게사용할수있도록함 ( 웹호환성 = 상호운영성 ) 개발자 : 노가다와짜증의시작이며창작의지를꺾는괴물 웹호환성문제 표준을준수하지않고특정운영체제와특정브라우저에종속적인시스템개발
웹호환성 (Cross Browsing) 웹호환성현황준수율 ( 국내 ) 구분 준수율 공공기관 69.8 민간 65.5 금융기관 32.3 쇼핑몰 57.1 [ 출처 ] 한국소프트웨어진흥원
웹호환성 (Cross Browsing) 웹호환성의필요성 웹접근성확보 미래경쟁력확보 참여 (Participations), 개방 (Openess), 공유 (Sharing) 의정신인웹 2.0 은완전한플랫폼으로써의웹을의미함. 웹으로의진화풀브라우징 (Full Browsing) 추세 이종 (heterogeneous) 플랫폼간의개방화 (Openess) 문제 웹호환성향상 기능중립 사용성향상 웹호환성향상방안 기능중립 표준준수 범용표현지원 표준준수 범용표현지원 웹호환성향상방안
질의응답 주제토의 질의응답 감사합니다. One step ahead & Upgrade your experience! - 38 -