45 2 직종명웹디자인및개발과제명대회운영사이트과제번호제 과제 경기시간 3 시간비번호 심사위원확인 ( 인 ). 요구사항 가. 과제요약 국제기능올림픽대회의주최측은원활한대회운영에필요한영문웹사이트를 개설하기로결정하였다. 선수는주최측으로부터제공받은사진 (reference.jpg) 으로부터사이트에사용할 메인컬러를추출한후, 요구사항에따라메인페이지및서브페이지, 로그인페이지등을 일관성있게디자인한다. 나. 선수이행사항 메인페이지 - 메인페이지는헤더영역, 내비게이션영역, 콘텐츠영역, 푸터영역으로구분된다. - 헤더영역에는 administrator login 링크와직접제작한심벌로고가존재해야한다. 심벌로고는반드시 reference.jpg 로부터추출된그래픽요소와텍스트요소를포함해야한다. - 헤더영역에는아이콘과결합된 3개의 Spot 메뉴 (skills, competitors, countries) 가있어야한다. 각메뉴에사용되는아이콘은직접디자인한다. - 내비게이션영역에는 4개의메인메뉴 (Home, Get involved, News, What s on, Sponsors) 가존재해야하고, 특정메뉴가사용자에의해선택되었음을알수있도록디자인해야한다. - 콘텐츠영역에는 contents.txt 의내용을표시한다. 또한 Upcoming events에나열된 5개의텍스트요소는제공된이미지를활용하여그내용을직관적으로파악할수있도록디자인한다. - 푸터영역에는 footer.txt 파일의텍스트를포함하여메인메뉴와 SNS공유아이콘을적절하게배치한다.
서브페이지 - subpage.txt 파일의내용을적용하되, 메인페이지디자인의특성과일관성이있어야한다. - Video highlights에는 4개의동영상에대한스냅샷을표시하고, 각동영상에는다운로드가능한링크 ( 그래픽요소 + 텍스트요소 ) 를만든다. 스냅샷과링크는제공된자료에서이미지와텍스트를직접추출하여제작한다. - statistics.txt 파일을참고하여경기직종및참가국현황 (Skills Competition and Participant Status) 을시각적으로디자인하여적용한다. 로그인페이지 - 영문과국문중하나를선택하여로그인페이지를제작한다. - 페이지에는선수가직접제작한 로고 가포함되어야하며, 회원가입 및 아이디찾기 링크가존재해야한다. - 로그인폼은아이디와암호를입력할수있게제작해야하고, 로그인버튼이존재해야한다. - 페이지에는소셜네트워크 (SNS) 로그인기능을포함하여야한다. - 사이트이용에관한부가적인텍스트를추가한다. 2. 선수유의사항 선수는작업결과물을저장한이미지 (jpg 또는 png) 를원본파일 (psd, ai 등 ) 과함께제출한다. 선수는작업을시작하기전에제공받은 선수제공파일 을반드시백업을한후진행하여야한다.( 선수의실수로제공파일을수정하거나삭제한경우에도다시제공하지않는다.)
45 2 직종명웹디자인및개발과제명 KAZAN CITY 과제번호제 2 과제 경기시간 3 시간비번호 심사위원확인 ( 인 ). 요구사항 가. 과제요약 한국기능올림픽위원회에서는 209 년국제기능올림픽이열리는러시아카잔을소개하는 웹페이지의프로토타입과제를공모하는중이며, 제작한프로토타입의제안발표심사를 거쳐최종당선공모작을발표할계획이라고한다. 선수는공모중인과제에최종선정될수있도록제공된도면과각종파일을사용하여 요구사항을모두반영한프로토타입을완성해야한다. 나. 선수이행사항 공통사항 - 페이지내에존재하는모든링크에는임시링크 (#) 를적용한다. - 로고 & 메뉴영역은페이지를세로방향으로스크롤이되더라도항상같은위치 ( 페이지상단 ) 에보이도록해야한다. - 화면우측상단 ( 로고 & 메뉴영역아래쪽 ) 에위치하는 TagCloud 버튼과 PopUp 버튼은 CSS로만들어야하고, 스크롤을하더라도항상같은위치에보이도록한다. - 페이지내모든요소는복사를방지하기위하여마우스로선택또는우클릭을방지 ( 컨텍스트메뉴생성하지않는것까지포함 ) 하여야한다. - HTML과 CSS 코드에는유지및보수가용이하도록반드시주석 ( 한글만인정 ) 을활용하여야하고, HTML 페이지에존재하는모든이미지에는 alt와 title 속성을사용해야한다. - HTML 및 CSS가 W3C(World Wide Web Consortium) 표준에부합해야하며, HTML 구조와 CSS 코딩스타일은가독성이좋아야한다. - 완성된페이지는 Google Chrome에서정상적으로작동하여야한다.
심벌로고 - character폴더에제공된 svg파일을이용하여 KAZAN 이라는텍스트 ( 색상 : #23f20) 를심벌오른쪽에표시하여심벌로고를완성한다. 단, 글자 Z 는색상이 #f7c400인상태에서 80도회전하고, 회전후에는아래쪽에서위쪽으로다른색상 (#b42a) 을채우는애니메이션을반복수행하도록한다. 드롭다운메뉴 - 메인메뉴중하나에마우스를올리면하이라이트되고, 벗어나면하이라이트를해제한다. - 메인메뉴중하나에마우스를클릭하면서브메뉴가아래로펼쳐진다 ( 이때메뉴아래에존재하는이미지나텍스트가밀려나면안된다 ). - 서브메뉴가펼쳐져있을때, 각각의서브메뉴에마우스를올리면하이라이트되고마우스커서가벗어나면하이라이트를해제한다. - 마우스커서가서브메뉴에서벗어나면, 펼쳐진서브메뉴는사라진다. - 서브메뉴의바탕색은메인메뉴의바탕색과차이를둔다. 이미지슬라이드 - media폴더에제공된 4개의이미지 (slide-0.jpg~slide-04.jpg) 를사용한다. - 이미지만바뀌면안되고, 이미지가좌에서우또는우에서좌로이동하면서전환되어야한다. - 슬라이드는매 2초마다하나의이미지에서다른이미지로부드럽게전환되어야한다. - 웹사이트를열었을때자동으로시작되어반복적으로 ( 마지막이미지를보여준후에는다시첫번째이미지부터시작 ) 슬라이드되어야한다. - 슬라이드좌, 우버튼을활용하여이동시킬수있어야한다. 단, 첫번째와마지막슬라이드이미지에서좌, 우버튼은비활성화되어야한다.( 도면참고 ) - 특정슬라이드이미지를선택하여볼수있어야한다.( 도면참고 ) 텍스트영역 - 제공된더미텍스트전체에그라디언트밑줄을적용한다. 그라디언트시작과종료색상은각각 #97d6ec와 #e8ae5로하고, 밑줄의두께는그라디언트색상을식별할수있어야한다.( 텍스트영역효과샘플.png 참고 ) - 텍스트가출력되는폭은전체메뉴의가로폭과같아야한다. 이미지영역 - CSS 기능을활용하여제공된이미지 (memo.jpg) 가페이지레이아웃에잘어울리도록적당한크기로잘라서표시한다.( 단, 그래픽툴을사용하여물리적으로자르면안됨 ) - 이미지에마우스를올리면이미지의가로중심선을기준으로이미지전체를뒤집을수있고, 마우스가이미지영역을벗어나면원래상태가되어야한다. - 이미지뒷면에는메모를남길수있어야하고, 수정이가능해야한다.( 웹브라우저를닫은후재실행시에도웹브라우저종료전메모상태를유지한다.)
동영상영역 - 별도의웹브라우저플러그인 (plug-in) 없이제공된동영상 kazan.mp4 을재생할수있도록웹페이지에삽입하여야한다. - 삽입된동영상의종횡비 (aspect ratio) 를유지하는것은물론, 컨트롤바를제공하여야한다. 단, 자동반복재생은하지않는다. 팝업창 - 웹페이지를열었을때자동으로팝업창이보여야한다. - 팝업창에는제공된이미지파일 (map.jpg) 을왜곡없이삽입하여야한다. 단, 팝업창에는스크롤바가없어야하고, 팝업창밖으로이미지가잘려나가거나이미지가왜곡 ( 종횡비포함 ) 되어보이면안된다. - 팝업창에는별도의 오늘하루보이지않기 라디오버튼과 닫기 버튼이존재하여야하며, 정상적으로작동하여야한다. - 화면우측상단에위치한 PopUp 아이콘으로도팝업창을볼수있어야하고, 팝업창내버튼동작에따라정상적으로작동해야한다. 푸터영역 - media폴더에제공된 4개의아이콘이미지 (sns-0.jpg~sns-04.jpg) 를영역왼쪽에나란히배치한다. - 각아이콘에마우스를올리면아이콘의색상이회색조로바뀌고, 일정한간격만큼위쪽방향으로올라가야한다. - 마우스를아이콘에서내리면원래상태를유지하여야한다. 태그클라우드 - 화면우측상단에있는 TagCloud 열기 (#) 버튼을클릭하면아래의단어들을보여주는박스가부드럽게펼쳐지고, 닫기 (X) 버튼을클릭하면초기상태로돌아온다. KAZAN, 기능올림픽, 맛집, 경기장, Web-Design, 숙소, 관광, 금메달 - 펼쳐진박스에는 Tag Cloud 라는제목텍스트를표시하고, 클라우드텍스트크기는 5단계로서로다르게적용되었음을확인할수있어야한다.
2. 선수유의사항 프로토타입은 W3C 표준을준수하여 HTML5 과 CSS3 으로제작하여야하며, 자바스크립트와그래픽툴 ( 포토샵등 ) 을일체사용하지않는다. 선수가작업한내용이웹브라우저에서정상적으로작동하는데필요한모든리소스 ( 폴더 및각종파일 ) 를제출한다.(index.html 파일을열었을때정상작동하여야함 ) 선수는작업을시작하기전에제공받은 선수제공파일 을반드시백업을한후 진행하여야한다.( 선수의실수로제공파일을수정하거나삭제한경우에도다시제공하지 않는다.) 3. 도면 사이트맵 & 레이아웃 주메뉴 (Main menu) 서브메뉴 (Sub menu) History - Hot Place Restaurant Kremlin Kazan Cathedral Baumana Street Kazan Arena Tan Dzen Bushe Relab Board - Tour Info. -
45 2 직종명웹디자인및개발과제명 funit 출판사관리자페이지 과제번호 제 3 과제 경기시간 3 시간비번호 심사위원확인 ( 인 ). 요구사항 가. 과제요약 funit 출판사 는홈페이지에신간도서목록을노출시키는기능을갖춘관리자페이지를 개발하기로결정하였다. 관리자페이지는 신간도서리스트 영역과 시뮬레이션 (simulation) 영역으로구성되며, 도서선택기능및도서재배치기능, 시뮬레이션기능, 웹페이지반영기능을포함한다. 선수는제공된템플릿을참고하여 js 폴더에있는 script.js 파일을수정하여요구사항을 구현하여야한다. 나. 선수이행사항 공통사항 - 자바스크립트코드에는유지및보수가용이하도록반드시주석 ( 한글만인정 ) 을활용하고, 코딩스타일은가독성이좋아야한다. - 과제수행에필요한경우, 제공된 html파일과 css파일을수정할수있다. - 완성된페이지는 Google Chrome에서정상적으로작동하여야한다. 신간도서리스트 영역 - 도서선택기능 마우스클릭으로이미지를선택또는선택해제가가능 (toggling) 해야한다. 단, 다중선택과다중선택해제는고려하지않는다. 2 마우스클릭으로선택된이미지는반투명상태가되고이미지위에숫자 (,2,3, ) 를차례대로표시하여선택한순서를알수있어야한다. 3 이미지를선택하면, 화면우측상단에 5초간토스트 (toast) 메시지를보여준다. 단, 토스트메시지형식은선택한이미지의 title과 선택완료 문자열을포함한다. 예 )
4 여러개의이미지를선택한후, 특정이미지를선택해제하면이미지위에표시된숫자도선택한순서에따라차례대로바뀌어야한다. 예를들어, 3개의이미지 (,, ) 를선택한후, 을클릭하여선택해제하면 는 로바뀌고 은 로바뀌어야한다. - 도서재배치기능 신간도서리스트 영역내에서이미지를마우스로드래그 & 드롭 (drag&drop) 으로순서를재배치할수있어야한다. 2 특정이미지를마우스로드래그하여다른이미지위에드롭하면두이미지끼리의위치교환이이루어져야하고, 화면우측상단에 5초간토스트메시지로교환내용을출력한다. 예 ) 시뮬레이션 (simulation) 영역 - 한개이상의이미지를선택한상태에서 미리보기(simulation) 버튼을클릭하면시뮬레이션영역에해당이미지를보여주는데, 이영역에는한줄에 5개씩두줄에걸쳐총 0개의이미지를담을수있다. - 미리보기(simulation) 버튼클릭시, 이미지를선택한순서대로원본크기의이미지를차례대로 ( 좌 우, 상 하 ) 시뮬레이션영역에배치한후롤링 (rolling) 시킨다. - 단, 롤링조건은다음과같다 ( 롤링 (rolling) 샘플.mp4 참고 ). 롤링동작은이미지가 0개를초과한경우에만작동되어야하며, 한번에 2줄씩 0개의이미지가롤링되어야한다. 2 회롤링속도는 3초, 롤링후정지시간 ( 롤링간격 ) 은 2초로한다. 3 롤링동작이반복될때마다롤링횟수를 씩증가하여페이지에표시한다. 4 롤링정지 (pause): 롤링되는이미지에마우스를올리면진행중이던롤링동작을즉시정지시켜야한다. 정지상태는완전히롤링이되지않은상태이므로롤링횟수를증가시켜서는안된다. 5 롤링재개 (resume): 정지상태에서이미지로부터마우스커서가벗어나면멈추었던상태에서롤링동작이자연스럽게이어져계속되어야한다. ( 롤링을정지하기전상태부터다시시작하는것이아님에주의한다.) 웹페이지반영기능 - 이기능은관리자가시뮬레이션결과를확인한후, 웹페이지에노출시키기위한데이터를생성하는것이다. - Send Webpage 버튼을클릭하면, 시뮬레이션영역에나열된모든이미지의순서대로도서목록 ( 카테고리, 이미지파일명, 도서명 ) 을 campaign.json 파일로저장한다 ( book.txt 참고 ).
2. 선수유의사항 선수가작업한내용이웹브라우저에서정상적으로작동하는데필요한모든리소스 ( 폴더 및각종파일 ) 를제출한다.(index.html 파일을열었을때정상작동하여야함 ) 선수는작업을시작하기전에제공받은 선수제공파일 을반드시백업을한후 진행하여야한다.( 선수의실수로제공파일을수정하거나삭제한경우에도다시제공하지 않는다.)
45 2 직종명웹디자인및개발과제명재택근무관리과제번호제 4 과제 경기시간 3 시간비번호 심사위원확인 ( 인 ). 요구사항 가. 과제요약 국내최대여행사 MuDo 는직원의복지증진과업무의효율성향상을위하여 재택근무를관리하는프로그램을개발하기로하였다. Bootstrap 을활용한기본페이지를바탕으로 MySQL, PHP 등을활용하여버킷리스트 관리프로그램을제작한다. 필요한경우제공된 jquery, jquery UI, Bootstrap 의 기능들을활용하여새로운인터페이스를구성할수있다. 나. 선수이행사항 공통사항 - 시작페이지는 login.php( 또는 login.html) 이어야하고, 로그인을한경우에만해당메뉴와페이지를볼수있어야한다. - DB에저장된데이터를검색할수있어야한다. - 완성된페이지는 Google Chrome에서정상적으로작동하여야한다. 데이터베이스생성 - 선수는제공된 _db_table.xlsx 을참고하여 2개의기본테이블 ( 직원, 재택근무 ) 을생성한다. 단, 재택근무테이블의컬럼 (column) 정보는과제전체의요구사항을만족할수있도록선수가직접구성해야한다. - 필요한경우, 별도의테이블을추가로생성하여관리할수있다. - 무결성보안검증을위해직원의비밀번호는 SHA256+salt 방식으로암호화하여 DB에저장 ( 예를들어, ID, salt값, 해시키값 ) 하고, 관리자는회원관리메뉴에서직원의암호화된비밀번호를확인할수있어야한다. 로그인 - DB의직원테이블에등록된직원은로그인 / 로그아웃이가능해야한다. - 잘못된 ID와 password로로그인을시도한경우, 아이디와패스워드가일치하지않습니다. 라는에러메시지를보여준다. - 재택근무관리메뉴는관리자가로그인시에만보이고접속가능해야한다.
재택근무조회 - 직원은월간재택근무신청현황을재택근무일순으로조회할수있다. ( 신청일시, 이름, 부서명, 직급, 재택근무일, 최대신청횟수, 잔여신청횟수, 신청사유, 상태 ) - 상태는 승인, 반려, 승인대기, 신청중복 등 4가지중하나만표시한다. 여기서 신청중복 상태는동일한부서직원이같은날짜에재택근무를신청하고, 관리자가결정을내리지않은경우의상태를의미한다. - 관리자가직급을변경한경우, 변경시점이전의기록은변경전상태가그대로유지되어야한다. - 날짜를선택 ( 년, 월 ) 하여, 월별로자신의재택근무이력을조회할수있다. 재택근무신청 - 직원은날짜 ( 년, 월, 일 ) 를지정하여재택근무일을신청할수있다. 단, 부서의직원이 명인경우에는재택근무를신청할수없다.
- 월별로최대신청횟수를초과하지않는범위내에서재택근무를신청할수있다. 단, 최대신청횟수를초과한경우에도 신청사유 를제시하면신청은할수있다. - 직원은직급별로재택근무를신청할수있는최대신청횟수가다음과같이제한된다. 직급월별최대신청횟수과장 5 대리 3 사원 - 재택근무최대신청횟수는직급에따라월별로초기화되어야한다. - 자신과동일한부서의다른직원이승인받은날짜와중복될경우재택근무를신청할수없으며, 이경우에는 중복으로인해신청이불가능합니다. 라는메시지를출력한다. 다만, 동일한부서에근무하는다른직원의신청날짜와중복되더라도관리자에의해승인 / 반려처리가완료되지않은상태에서는신청할수있다. - 재택근무신청일시는 재택근무신청 버튼클릭시점의시스템의날짜와시간이다. 재택근무신청현황 - 관리자는직원들이재택근무를신청한모든내역을확인할수있다. ( 신청일시,ID, 이름, 부서명, 직급, 재택근무일, 최대횟수, 잔여횟수, 신청사유, 승인여부 ) - 승인여부는 승인, 반려 를선택할수있는버튼이존재한다. - 관리자는직원의재택근무신청을승인또는반려할수있다. - 최대 ( 신청 ) 횟수를초과한직원의신청건은잔여횟수를 - 로표시 ( 하이라이트처리 ) 하고, 관리자는신청사유를확인하고승인또는반려처리할수있다. - 동일한부서에근무하는여러명의직원이동일한날짜에재택근무를신청한경우, 부서명과재택근무일을하이라이트처리하여관리자가부서별로구분할수있어야한다. 이경우, 관리자는해당부서에근무하는한명의직원에대해서만승인처리를할수있으며, 동일부서의다른직원들의신청은자동으로즉시반려처리되어야한다. 직원관리 - 관리자는모든직원들의현황 ( 순번, 아이디, 비밀번호 (Hash), 이름, 직급, 부서명, 관리 ) 을확인할수있고, 직원추가, 직급및부서변경, 퇴사처리등의작업을할수있어야한다. - 관리자는직원을추가하는경우, 중복된아이디를부여할수없다. - 관리자가직원을추가할경우, 해당직원의비밀번호를암호화하여 SALT값과함께 DB에저장해야한다. - 관리자가직원의직급과부서를변경한경우, 직원의재택근무최대신청횟수와잔여신청횟수가즉시변경되어야한다.
2. 선수유의사항 선수는작업을시작하기전에제공받은 선수제공파일 을반드시백업을한후 진행하여야한다.( 선수의실수로제공파일을수정하거나삭제한경우에도다시제공하지 않는다.) 선수는 xampp 구동과관련된모든서비스 ( 또는프로세스 ) 를종료한후, xampp 폴더 전체를압축하여심사위원이배포한 USB 에담아제출한다. 선수는스스로제출한최종결과물이심사위원의컴퓨터에서도동일하게작동할수있도록보장해야한다. 또한심사위원컴퓨터에서경로등의문제로정상표시되지않거나작동에이상이있는경우에도이를심사위원이수정하지않고채점기준에따라채점이진행된다는것에유의한다.
지급재료목록직종명웹디자인및개발 일련번호 재료명규격 ( 치수 ) 단위 인당소요량 공동소요량 비 고 외장하드 TB 이상개 선수작품보관용 2 USB 저장장치 6GB 이상개 선수작품제출용 3 과제출력용지 A4 장 200 4 번호표시스티커 5 6 7 8 9 0 2 3 4 5 6 7 8 9 20 2 22 23 24 25 26 27 USB 부착용원형번호표시스티커 세트
선수지참재료 ( 장비 ) 목록직종명웹디자인및개발 일련번호 재료명 규격 ( 치수 ) 단위 인당소요량 공동소요량 필기도구일반개 선택 2 개인키보드및마우스컴퓨터용개 3 개인유선헤드셋컴퓨터용개 4 개인음악파일 MP3 등개 5 6 7 8 9 0 2 3 4 5 6 7 8 9 20 2 22 23 24 25 작품백업용 USB 저장장치 - 개 비 고 선택 (USB 허브기능및무선수신 / 저장장치가없어야함 ) 선택 (USB 허브기능및무선수신 / 저장장치가없어야함 ) 선택 ( 사전승인및사본보관필요 ) 선택 ( 경기종료후사용가능 )
경기장시설목록직종명웹디자인및개발 일련 번호 시설및장비명규격 ( 치수 ) 단위수량비고 선수 PC ( 최신사양 ) 2 컴퓨터모니터 IBM 호환최신기종 ( RAM 6G 이상 ), 사운드카드, 스피커또는헤드셋, 키보드, 마우스등이포함된 PC 24 인치이상 (wide 형 ) 듀얼모니터 ( 인당 2 대 ) 대 H/W 대 2 H/W 3 OS Windows 0 이상 ( 한글 ) 개 S/W 4 XAMPP XAMPP for Windows Portable v7.2.x 이상최신버전 개 S/W 5 Dreamweaver 최신영어버전개 S/W 6 Photoshop 최신영어버전개 S/W 7 Illustrator 최신영어버전개 S/W 8 EditPlus 최신버전개 S/W 9 Sublime Text 최신영어버전개 S/W 0 PhpStorm 최신영어버전개 S/W WebStorm 최신영어버전개 S/W 2 Brackets 최신영어버전개 S/W 3 Visual Studio Code 최신영어버전개 S/W 4 Internet Explorer 최신버전개 S/W 5 FireFox Developer Edition 최신버전개 S/W 6 Google Chrome 최신버전개 S/W 7 컴퓨터책상 800mm 200mm 이상개 비품 8 의자사무용 ( 등받이, 바퀴 ) 개 비품 9 심사위원 PC/ 모니터 선수 PC 와동일규격및동일 S/W 설치 대 4 20 프린터 ( 또는복합기 ) 과제등출력용대 2 22 23 24 인터넷연결 H/W, 심사 ( 장 ) 위원 PC 연결
45 2. 채점시유의사항직종명웹디자인및개발 가. 채점방법 m 과제별로, USB 저장장치를이용한수거방식으로제출된작품을선수컴퓨터가아닌동일한사양의심사위원컴퓨터에서채점하는것을원칙으로한다. m 각과제별로모든선수의작품수거가완료된후에채점할수있다. m 채점은과제출제 ( 수정 ) 위원이정한채점기준에의하며, 채점기준은경기집행및심사채점에지장이없는범위내에서심사장을포함한심사위원전원의합의로채점실시전에공개할수있다. m 주관적항목의채점은채점번호표를사용한 4등급제방식으로, 객관적항목의채점은심사조별합의채점방식으로한다. m 과제에서지정한웹브라우저를사용하여지정된주소를열어채점한다. 단, 지정된주소에서확인이불가능하거나, 링크에러및기타에러등으로페이지를열수없을경우작업완성여부와관계없이관련항목은 0점처리한다. m 기타채점관련사항은기능경기대회관리규칙에서정한바에의한다. 나. 주관적채점항목배점등급 채점항목별배점을 4 등급제를적용하여채점하고배점비율에따라득점을환산하여합산한다. 등급배점비고 매우잘함 4 잘함 3 보통 2 나쁨
2. 채점기준표 ) 주요항목별배점 ( 과제종료후채점 ) 직종명 웹디자인및개발 과제 번호 일련 번호 주요항목 배점 독립 채점방법 합의 비고 제과제제2과제제3과제제4과제 주관적항목 2 2 객관적항목 3 주관적항목 5 2 객관적항목 20 주관적항목 5 2 객관적항목 20 주관적항목 0 2 객관적항목 25 합계 00
2) 채점방법및기준 과제 (Website Design) 일련 번호 2 3 4 5 6 구분주요항목세부항목 ( 채점방법 ) 배점 주관적항목 (2) 메인페이지 서브페이지 심벌로고는 reference.jpg 로부터추출된심벌과텍스트를이용하여페이지의특성을반영하고있다. Spot 메뉴의디자인은심미적이고, 사용된아이콘은메뉴의정체성을잘표현한다. 콘텐츠영역의 Upcoming events 에는이미지와텍스트를활용한디자인결과가적용되어있고, 그내용을직관적으로파악할수있다. 경기직종및참가국현황의디자인은그내용을직관적으로파악할수있다. 서브페이지에사용된색상과디자인특성은메인페이지디자인과의일관성을유지한다. 동영상다운로드링크가그래픽요소와텍스트요소를활용하여시각적으로전문가답게디자인되었다. 로그인페이지에사용된색상과디자인특성이메인페이지디자인과잘 7 로그인 어울린다. 페이지 8 로그인페이지에포함된각요소들이균형감있게배치되어있다. 9 0 디자인완성도 선수가제출한메인페이지, 서브페이지, 로그인페이지는디자인이창의성과심미성면에서전문가다운디자인결과를제시하였다. 헤더영역의심벌로고에는 administrator login 링크와직접제작한심벌로고가존재한다. 아이콘과함께제작된 3개의 spot메뉴 (skills, competitors, countries) 가 메인포함되어있다. 2 페이지내비게이션영역에는 4개의메인메뉴가존재한다. 3 4 푸터영역에는메인메뉴와 SNS공유아이콘을배치하였다. 객관적 5 항목 Video highlights 에는 4개의동영상스냅샷을포함한다. (3) 6 서브페이지 내비게이션영역에는사용자에의해특정메뉴가선택되었음을보여준다. Video highlights 에는이미지와텍스트를추출하여제작된링크가존재한다. 7 시각적으로디자인된경기직종및참가국현황이존재한다. 8 로그인페이지에직접제작한로고가포함되어있다. 9 회원가입및아이디찾기링크요소가존재한다. 20 로그인페이지 아이디입력, 암호입력, 로그인버튼요소들이존재한다. 2 소셜네트워크 (SNS) 로그인요소가존재한다. 22 사이트이용에관한부가적인텍스트가존재한다. 2 2 2
2 과제 (Website Layout) 일련번호 구분 주요항목 세부항목 ( 채점방법 ) 배점 프로토타입의레이아웃과구현결과가제안발표에사용해도될만큼구현주관적전문가답게제작되었다. 2.0 2 항목 레이아웃 전체레이아웃과콘텐츠배치등이균형감이있고심미적이다. 2.0 3 (5) HTML 및 CSS 코드는한글주석을적절하게사용하여유지보수에유지보수용이하도록하였다. ( 영문주석은인정하지않음 ).0 4 페이지내에존재하는모든링크에임시링크 (#) 를제공한다. 0.5 5 로고 & 메뉴영역은페이지를스크롤하더라도항상같은위치에존재한다..0 6 공통요소화면우측상단의 TagCloud 버튼과 PopUp 버튼은스크롤시에도항상같은위치에존재한다. 0.5 7 페이지내모든요소에는선택및우클릭방지처리가되어있다. 0.5 심벌로고에있는글자 Z 의색상이 #f7c400 인상태에서 80도회전하고, 8 심벌로고 회전후에는아래쪽에서위쪽으로다른색상 (#b42a) 을채우는 2.0 애니메이션이정상적으로반복수행된다. 9 메인메뉴중하나에마우스를올리면하이라이트되고, 벗어나면하이라이트를해제한다. 0.5 0 메인메뉴중하나에마우스를클릭하면서브메뉴가아래로펼쳐진다. 드롭다운 ( 이때메뉴아래에존재하는이미지나텍스트가밀려나면 0점 ) 0.5 메뉴서브메뉴가펼쳐져있을때, 각각의서브메뉴에마우스를올리면하이라이트되고마우스커서가벗어나면하이라이트를해제한다. 0.5 2 마우스커서가서브메뉴에서벗어나면, 펼쳐진서브메뉴는사라진다. 0.5 3 서브메뉴의바탕색은메인메뉴의바탕색과차이를둔다. 0.5 4 슬라이드동작은 ( 좌 우또는우 좌 ) 매 2초마다부드럽게전환된다. 0.5 이미지슬라이드좌, 우버튼을활용하여이동시킬수있어야한다. 5.0 슬라이드 ( 첫번째와마지막슬라이드이미지에서좌, 우버튼이동작하면, 0점 ) 6 객관적특정슬라이드이미지를선택하여볼수있다. 0.5 7 항목텍스트영역더미텍스트에그라디언트밑줄을적용하고, 그색상을확인할수있다..0 (20) CSS를이용하여페이지레이아웃에잘어울리도록 memo.jpg 를잘라서 8.0 표시하고있다. ( 단, 그래픽툴을사용하여물리적으로자른경우, 0점 ) 9 이미지영역 이미지에마우스를올리면이미지의가로중심선을기준으로이미지를뒤집고, 마우스가이미지영역을벗어나면원래상태가된다..0 20 이미지뒷면에는메모를남길수있어야하고, 수정이가능해야한다.( 웹브라우저를닫은후재실행시, 메모가없으면 0점 ) 2.0 2 삽입된동영상은종횡비를유지하고, 컨트롤바를제공한다..0 동영상영역 22 웹페이지에서동영상을재생할수있고, 자동반복재생을하지않는다..0 23 웹페이지를열었을때스크롤바가없는팝업창을보여주고, 종횡비를유지하여왜곡이없는이미지가정상적으로삽입되어있다. 0.5 24 팝업창 팝업창에는별도의 오늘하루보이지않기 라디오버튼과 닫기 버튼이존재하고, 정상적으로작동한다. 0.5 25 PopUp 아이콘으로팝업창을정상적으로볼수있다.( 단, 이미 오늘하루보이지않기 버튼을클릭하여닫은후에도팝업창이보이면 0점 ).0 아이콘이미지에마우스를올리면아이콘의색상이회색조로바뀌면서 26 푸터영역 일정한간격만큼위쪽방향으로올라간후, 마우스를아이콘에서내리면.0 원래상태로되돌아온다. 27 열기 (#) 버튼과닫기 (X) 버튼이정상적으로작동한다. 0.5 태그 Tag Cloud 라는제목텍스트를표시하고, 클라우드텍스트크기는 28 클라우드 0.5 5단계로서로다르게적용되었다.
3 과제 (Client Side) 일련번호 2 3 4 구분주요항목세부항목 ( 채점방법 ) 배점 주관적항목 (5) 제어효과 유지보수 페이지내에서이루어지는모든효과 ( 도서선택, 재배치, 토스트메시지, 롤링동작등 ) 가사용자의흥미를유발시킨다. 자바스크립트코드는확장이가능하며, 가독성이좋다. 2.0 자바스크립트코드는한글주석으로스크립트의용도와목적을분명하게표시하여유지보수에용이하도록하였다. ( 영문주석은인정하지않음 ) 마우스클릭으로이미지를선택또는선택해제를할수있다..0 2.0.0 5 마우스클릭으로선택된이미지는반투명상태가된다..0 6 7 도서선택기능 이미지를마우스로클릭하면이미지위에숫자 (,2,3, ) 를차례대로표시하여선택한순서를알수있어야한다. 이미지를선택하면, 화면우측상단에 5 초간토스트 (toast) 메시지 ( 이미지의 title 과 선택완료 문자열 ) 를보여준다..0.0 8 여러개의이미지를선택한후, 특정이미지를선택해제하면이미지위에표시된숫자도선택한순서에따라차례대로바뀐다. 2.0 9 0 도서재배치기능 이미지를마우스로드래그하여다른이미지위에드롭하면두이미지끼리의위치교환이이루어진다. 이미지위치교환시, 화면우측상단에 5 초간토스트메시지로교환내용을출력한다. 2.0.0 2 객관적항목 (20) 한개이상의이미지를선택한상태에서 미리보기 (simulation) 버튼을클릭하면시뮬레이션영역에해당이미지를보여준다. 미리보기 (simulation) 버튼클릭시, 이미지를선택한순서대로원본크기의이미지를차례대로 ( 좌 우, 상 하 ) 시뮬레이션영역에정상적으로배치한다..0.0 3 롤링 (rolling) 동작이정상적으로작동한다.( 이미지가 0 개이하인경우롤링이되면 0 점 ) 2.0 4 시뮬레이션 회롤링속도를 3초, 롤링후정지시간을 2초로각각적용하고있다.0 5 롤링동작이반복될때마다롤링횟수를 씩증가하여페이지에표시된다..0 6 롤링되는이미지에마우스를올리면진행중이던롤링동작을즉시정지시킨다..0 7 완전히롤링이되지않은정지상태에서는롤링횟수를증가시키지않는다..0 8 정지상태에서이미지로부터마우스커서가벗어나면멈추었던상태에서롤링동작이자연스럽게이어져계속된다. ( 롤링을정지하기전상태부터다시시작하면 0 점 ) 2.0 9 웹페이지반영기능 Send Webpage 버튼을클릭하면, 시뮬레이션영역에나열된모든이미지의순서대로도서목록 ( 카테고리, 도서명, 이미지파일명 ) 을 campaign.json 파일로저장한다.0
4 과제 (Server Side) 일련번호 구분 주요항목 세부항목 ( 채점방법 ) 배점 관리자아이디와사용자아이디로로그인이가능하며로그인기능이정상적으로동작한다..0 2 로그인 잘못된 ID와 password 로로그인을시도한경우, 아이디와패스워드가일치하지않습니다. 라는에러메시지를보여준다..0 3 관리자가로그인한경우에만재택근무관리메뉴를보여준다. ( 직원로그인시, 재택근무관리메뉴가보이면 0점 ).0 4 직원은월간재택근무신청현황을재택근무일순으로조회할수있다.0 승인, 반려, 승인대기, 신청중복 상태가정상적으로반영되어 5.0 표시된다. 재택근무관리자가직급을변경한경우, 변경시점이전의기록은변경전상태가 6 조회.0 그대로유지된다. 7 날짜를년도와월만선택하여월별로자신의재택근무이력을조회할수있다..0 8 직원은날짜 ( 년, 월, 일 ) 를지정하여재택근무일을신청할수있다.( 월별최대신청횟수범위내에서만가능해야함 ).0 9 최대신청횟수를초과한직원이 신청사유 를제시하여재택근무를신청할수있다..0 0 재택근무 부서의직원이 명인경우에는재택근무를신청할수없다..0 신청 재택근무최대신청횟수는직급에따라월별로초기화된다..0 2 자신과동일한부서의다른직원이승인받은날짜와중복될경우 중복으로인해신청이불가능합니다. 라는메시지를출력한다..0 동일한부서에근무중인다른직원의신청날짜와중복되더라도관리자에 3.0 객관적의해승인 / 반려처리가완료되지않은상태에서는신청할수있다. 4 항목관리자는직원들의모든신청현황을확인하고승인또는반려할수있다..0 (25) 최대신청횟수를초과한직원의신청건에는잔여횟수가 - 로표시되고 5.0 하이라이트처리되어있다. 동일한부서에근무하는여러명의직원이동일한날짜에재택근무를 재택근무신청현황 신청한경우, - 부서명과재택근무일이하이라이트처리되어있고, 관리자가부서별로 6 구분할수있다. (점) 2.0 - 관리자는해당부서에근무하는한명의직원에대해서만승인처리를할수있으며, 동일부서의다른직원들의신청은자동으로즉시반려처리가된다. (점) 7 관리자는모든직원들의현황 ( 순번, 아이디, 비밀번호 (Hash), 이름, 직급, 부서명, 관리 ) 을확인할수있다..0 8 관리자는직원에대해퇴사처리를할수있다..0 9 관리자가직원의직급및부서를변경하면, 직원의재택근무최대신청횟수와잔여신청횟수가즉시변경되어야한다..0 20 직원관리관리자가직원을추가하기위해아이디를등록하는경우아이디중복처리가정상적으로이루어진다..0 2 관리자가직원을추가하는경우, 타직원과동일한암호를입력하더라도 SALT 값에의해생성된해시값은다르게저장된다. 2.0 22 모든직원의암호가 SHA-256 기반의해시값으로다르게저장되어있음을관리자가확인할수있다..0 23 검색검색어로검색하면 DB 에저장된데이터가정상적으로검색된다..0