출제양식

Size: px

Start display at page:

Download "출제양식"

소미 창
7 years ago
Views:

1 기능경기대회 과제출제 양식 (지방, 전국대회, 선발 및 평가경기) 직 종 명 : 웹디지인 및 개발 출제 위원 : 작성 일자 : (인) 검토 위원 : 검토 일자 : (인) 한 국 산 업 인 력 공 단

2 제51회 전국기능경기대회 분 과 전기전자 정보처리 직 종 명 웹디자인 및 개발 경기시간 12시간 Website Design 과제 과제 소개 MODUS는 IT 상품 판매 가상 웹사이트이다. MODUS는 당신의 디자인이 반응형이길 바란다. 반응형 웹사이트는 사용자가 웹사이트에 컴퓨터, 태블릿이나 스마트폰으로 접속하기 위한 최적의 보기 경험을 제공하는 것이다. Siyelo 웹사이트의 새로운 디자인을 개발하고 세 가지 디바이스들에서 보여질 내용과 레이아웃을 결정하는 것이다. 프로젝트와 과제 설명 당신의 작업은 MODUS를 위한 웹사이트와 로고의 디자인을 제작하는 것이다. 당신은 당신의 디자인에 사용될 텍스트와 이미지를 제공 받았다. 당신은 제공받은 이미지와 텍스트를 모두 사용할 필요는 없지만, 당신의 웹사이트가 전체적으로 좋은 이미지를 주기 위한 충분한 텍스트와 이미지가 있다는 것을 알아야 한다. 당신이 원한다면 다른 텍스트와 정보를 추가할 수 있다. 텍스트는 내용과 관계없이 디자인만 채점된다. 사이트 내용 구조 헤더 - 로고, 네비게이션, 검색버튼 메인 메뉴 - 7개의 링크 환영 - 환영 제목, 텍스트와 이미지 OUR TEAM - 이미지, 버튼과 강조된 항목 카테고리별 링크 버튼 - 2 -

프로젝트와 과제 설명 당신의 작업은 MODUS를 위한 웹사이트와 로고의 디자인을 제작하는 것이다. 당신은 당신의 디자인에 사용될 텍스트와 이미지를 제공 받았다.

3 푸터 - 회사 정보 + 카피라이트 텍스트 당신은 사이트 내용 구조 에서 정의된 대로 사이트의 각 내용 부분의 같은 이미지들을 사용해야만 한다. 파일 생성 사이트 디자인은 실제 픽셀 사이즈로 보여져야 한다. 각 이미지는 각 스크린에서 페이지 접힘을 암시하기 위해서 해당하는 스크린 해상도에 정확하게 보이는 테두리도 4 픽셀 보다 작은 넓이로 포함해야 한다. 로고타입을 제외한 원본 디자인의 디자인 아이템은 당신의 제출 작업에 사용되지 않을 수 있다. 선수 이행사항 서버 또는 USB 저장장치의 루트 디렉토리에 XXX_Website_Design 폴더를 만들고 당신의 파일을 저장하시오. XXX 는 당신의 등번호 이다. 파일들의 이름은: - 컴퓨터: XXX_Computer_mockup.png - 태블릿: XXX_Tablet_mockup.png - 스마트폰: XXX_Smartphone_mockup.png 추가 이미지들은 웹사이트의 개발에 도움이 될 숨겨진 요소들, 애니메이션이나 다른 추가 정보를 강조하기 위해 생성될 수 있다. 이미지들의 소스파일을 XXX_Website_Design 폴더 내 XXX_source_files 폴더에 저장하시오. 소스파일들은 레이어들을 포함하는 파일이다

선수 이행사항 서버 또는 USB 저장장치의 루트 디렉토리에 XXX_Website_Design 폴더를 만들고 당신의 파일을 저장하시오. XXX 는 당신의 등번호 이다. 파일들의 이름은: - 컴퓨터: XXX_Computer_mockup.

4 Website Design 과제 채점표 번호 구분 평가내용 배점 1 주관 로고는 웹사이트 이름인 EnviroFund 정체성을 갖고, 제공된 웹사이 트의 테마와 연관된다 주관 디자인은 이미지와 텍스트의 좋은 균형을 보여준다 주관 공백이 디자인의 명료함을 증진시키기 위해 사용되었다 주관 디자인들은 정의된 타겟 청중에게 매력적이다 주관 디자인의 품질과 요소들의 독창성이 디자인 내에 사용되었다 객관 파일과 소스파일이 알맞은 파일 포맷으로 제출되었다 객관 사이트 내용 구조에 정의된 대로 디자인 레이아웃이 완성되었다 계

2.00 4 주관 디자인들은 정의된 타겟 청중에게 매력적이다. 2.00 5 주관 디자인의 품질과 요소들의 독창성이 디자인 내에 사용되었다.. 2.00 6 객관 파일과 소스파일이 알맞은 파일 포맷으로 제출되었다.

5 Website Design 과제 최종 작품 - 5 -

6 Website Layout 과제 과제 소개 Siyelo는 IT 상품 판매 가상 웹사이트이다. Siyelo는 당신의 디자인이 반응형이길 바란다. 반응형 웹사이트는 사용자가 웹사이트에 컴퓨터, 태블릿이나 스마트폰으로 접속하기 위한 최적의 보기 경험을 제공하는 것이다. Siyelo 웹사이트의 새로운 디자인을 개발하고 세 가지 디바이스들에서 보여질 내용과 레이아웃을 결정하는 것이다. 프로젝트와 과제 설명 새로운 디자인 샘플들은 정의된 디바이스와 해상도에서 작동하도록 개발되어야 한다. 컴퓨터 (1440 가로 x 900 세로) 태블릿 (768 가로 x 1024 세로) 스마트폰 (320 가로 x 480 세로) 회사 설명 이름 : Siyelo 사업: 쇼핑몰 색상 : #dfe3e2, #c43c01 와 #8ccbd2 사이트 내용 구조 헤더 - 로고, 탑 메뉴 (home, sitemap, contact us), 텍스트와 이미지 검색 텍스트 입력과 검색 버튼 메인 메뉴 - 4개의 링크 (work team community contact) 환영 - 환영 제목, 텍스트와 2 개 이미지 새 상품 - 이미지, 가격, 텍스트, 지금 구입 버튼과 강조된 NEW 주요 상품 - 이미지, 가격, 텍스트와 지금 구입 버튼 카테고리별 상점 - 링크 소셜 미디어 - 3개의 소셜 버튼 (Facebook, Twitter, YouTube) 푸터 - 회사 정보 + 카피라이트 텍스트 - 6 -

컴퓨터 (1440 가로 x 900 세로) 태블릿 (768 가로 x 1024 세로) 스마트폰 (320 가로 x 480 세로) 회사 설명 이름 : Siyelo 사업: 쇼핑몰 색상 : #dfe3e2, #c43c01 와 #8ccbd2 사이트 내용 구조 헤더 - 로고, 탑 메뉴 (home, sitemap, contact

7 고객은 아래 파일들을 당신에게 제공했다. 현재 웹사이트 샘플(HTML) 회사 로고(벡터와 레스터) 고 해상도 이미지(요청된다면 사용할 대체 이미지) 아이콘 소셜(요청된다면 사용할 대체 이미지) 당신은 사이트 내용 구조 에서 정의된 대로 사이트의 각 내용 부분의 같은 이미지들을 사용해야만 한다. 파일 생성 사이트 디자인은 실제 픽셀 사이즈로 보여져야 한다. 각 이미지는 각 스크린에서 페이지 접힘을 암시하기 위해서 해당하는 스크린 해상도에 정확하게 보이는 테두리도 4 픽셀 보다 작은 넓이로 포함해야 한다. 로고타입을 제외한 원본 디자인의 디자인 아이템은 당신의 제출 작업에 사용되지 않을 수 있다. 선수 이행사항 서버 또는 USB 저장장치의 루트 디렉토리에 XXX_Website_Design 폴더를 만들고 당신의 파일을 저장하시오. XXX 는 당신의 등번호 이다. 파일들의 이름은: - 컴퓨터: XXX_Computer_mockup.png - 태블릿: XXX_Tablet_mockup.png - 스마트폰: XXX_Smartphone_mockup.png 추가 이미지들은 웹사이트의 개발에 도움이 될 숨겨진 요소들, 애니메이션이나 다른 추가 정보를 강조하기 위해 생성될 수 있다. 이미지들의 소스파일을 XXX_Website_Layout 폴더 내 XXX_source_files 폴더에 저장하시오. 소스파일들은 레이어들을 포함하는 파일이다

선수 이행사항 서버 또는 USB 저장장치의 루트 디렉토리에 XXX_Website_Design 폴더를 만들고 당신의 파일을 저장하시오. XXX 는 당신의 등번호 이다. 파일들의 이름은: - 컴퓨터: XXX_Computer_mockup.png - 태블릿: XXX_Tablet_mockup.

8 Website Layout 과제 채점표 번호 구분 평가내용 배점 1 주관 2 주관 요청된 세 개 모든 해상도/디바이스에 대한 디자인의 전체인상과 느 낌은 훌륭한가? 디자인은 가독성, 네비게이션, 리사이징, 스크롤링 등에 대해 적절하 고 참신하게 창작되었는가? 주관 디자인과 색상이 제공된 것처럼 회사 테마에 맞는다 주관 보여지는 콘텐츠와 화면 해상도에 따른 변화가 균형이 맞는가? 주관 태블릿과 스마트폰이 터치 기반 디바이스에 최적화되었다. 대화형 기 능과 버튼 사이즈들 객관 파일과 소스파일이 알맞은 파일 포맷으로 제출되었다 객관 사이트 내용 구조에 정의된 대로 컴퓨터 레이아웃이 완성되었다 객관 사이트 내용 구조에 정의된 대로 태블릿 레이아웃이 완성되었다 객관 사이트 내용 구조에 정의된 대로 스마트폰 레이아웃이 완성되었다 객관 HTML과 CSS에 사용된 코드를 설명하기 위한 내부 주석이 있다 객관 12 객관 CSS가 W3C validator를 사용하여 3.0에 유효한지 검증된다. 각 에러 타입당 0.25점 감점 코드가 W3C validator를 이용하여 HTML 5에 유효한지 검증된다. 각 에러 타입당 0.25점 감점 객관 넓은 스크린 레이아웃(1280px 가로)은 제공된 스크린 이미지와 구글 크롬에 서 매치된다. 발견되는 각 에러마다 (0.25) 감점 객관 15 객관 16 객관 17 객관 18 객관 19 객관 좁은 스크린 레이아웃(720px)은 제공된 스크린 이미지와 구글 크롬에서 매 치된다. 발견되는 각 에러마다 (0.25) 감점 좁은 스크린 레이아웃(480px)은 제공된 스크린 이미지와 구글 크롬에서 매치된다. 발견되는 각 에러마다 (0.25) 감점 사이즈를 800px 로 줄이는 동안 스크린이 좁은 스크린 사이즈에 맞게 변경 된다. 발견되는 각 에러마다 (0.25) 감점 HTML 과 CSS 의 내부에 코드 사용을 설명하기 위해 코멘트 되었다. HTML 에 최소 5 개 이상 코멘트, CSS 에 최소 5 개 이상 코멘트. CSS 가 W3C 유효성 검사기를 사용하여 레벨 3 에 검증되었다. 발견되는 각 에러 타입 당 (0.25) 감점. HTML 가 W3C 유효성 검사기를 사용하여 HTML5 에 검증되었다. 발견되는 각 에러 타입 당 (0.25) 감점 계

2.00 10 객관 HTML과 CSS에 사용된 코드를 설명하기 위한 내부 주석이 있다. 1.00 11 객관 12 객관 CSS가 W3C validator를 사용하여 3.0에 유효한지 검증된다. 각 에러 타입당 0.25점 감점 코드가 W3C validator를 이용하여 HTML 5에 유효한지 검증된다. 각 에러 타입당 0.25점 감점 1.00 1.00 13 객관 넓은 스크린 레이아웃(1280px 가로)은 제공된 스크린 이미지와 구글 크롬에 서 매치된다.

9 Website Layout 과제 최종 작품 - 9 -

10 Client Side 과제 1. 과제 소개 당신의 작업은 다음의 주요 기능(또는 내용)을 포함하는 어플리케이션을 만들어야 한다. Drag & Drop 또는 클릭하여 이미지 파일 선택 기능으로 차트를 표시한다. 제공된 템플릿은 다음과 같이 두 영역으로 구분되어 있다. 1. 차트 영역 : 이 영역 에는 데이터를 차트 형태로 표시한다 2. 바 영역 : 바를 왼쪽으로 드래그하면 원형 차트가 나타나고 오른쪽으로 드래그하면 삼각형 차 트가 나타난다. 3. 버튼 영역 : 버튼을 클릭하면 선택된 년도에 해당하는 데이터로 차트의 모양이 바뀐다. 과제의 요구사항을 완성하기 위한 다른 요소들은 선수 스스로 만들어야 한다. 선수는 필요하다면 영역들을 위한 새로운 그래픽 디자인 요소를 만들 수도 있고 사용성과 사용자 경험을 충족시키기 위한 스크립트를 추가할 수도 있다. 선수는 모든 이미지, 또는 정보는 Server가 아닌 Client Side에서 Local storage에 저장되어야 함 을 반드시 이해하고 작업해야 한다. 본 과제에 포함된 이미지는 과제를 시각적으로 표시하는 예시이므로 선수는 예시를 참고하여 과 제를 완성하되 반드시 예시와 똑같은 화면으로 구성할 필요는 없다. 선수 이행사항 1. 당신의 작업 파일을 XXX_Client_Side 폴더에 저장하시오. XXX는 당신의 등번호이다

선수는 필요하다면 영역들을 위한 새로운 그래픽 디자인 요소를 만들 수도 있고 사용성과 사용자 경험을 충족시키기 위한 스크립트를 추가할 수도 있다. 선수는 모든 이미지, 또는 정보는 Server가 아닌 Client Side에서 Local storage에 저장되어야 함 을 반드시 이해하고 작업해야 한다.

11 2. 선수는 필요하다면 제공된 HTML과 CSS를 변경할 수 있다. 또한 필요하다면 그래픽 요소를 직접 제작하여 사용할 수 있다. 3. 애니메이션을 위해서 JavaScript 또는 CSS3 모두 사용할 수 있다. 4. 당신은 이 작업을 위해서 공통으로 제공된 JavaScript Library를 당신의 선택에 따라 자유롭게 사용할 수 있다. 단, 이 과제는 Client Side 과제이므로 Server Side 코딩(PHP, MySql 등)을 사용한 경우 과제 전체 또는 해당 부분을 평가 대상에서 제외할 것이다. 5. 이 작업은 3시간 안에 종료되어야 한다. 6. 이 과제는 Google Chrome 브라우저에서만 평가될 것이다

당신은 이 작업을 위해서 공통으로 제공된 JavaScript Library를 당신의 선택에 따라 자유롭게 사용할 수 있다.

12 Client Side 과제 채점표 번호 구분 평가내용 배점 1 주관 어플리케이션의 Look & Feel이 훌륭한가? 주관 제공된 이미지와 동일하게 작성되었는가? 객관 이미지와 동일하게 그래프가 나타난다 객관 바를 왼쪽으로 드래그하면 원형 차트가 나타나고 객관 바를 오른쪽으로 드래그하면 삼각형 차트가 나타난다 객관 각 버튼을 클릭하면 선택된 년도에 해당하는 데이터로 차트의 모양 이 바뀐다 계

13 Server Side 과제 과제 소개 국제기능올림픽대회조직위원회는 이전 대회의 결과를 분석하고 비교하고자 한다. 그들은 그들이 가 진 데이터를 이용하여 상호작용적인 웹 어플리케이션을 만들어 분석 결과를 관심 있는 사용자들에 게 제공하고자 한다. 이 웹 어플리케이션을 통해 사용자들은 이전 대회의 결과를 보다 시각적이고 다른 관점에서 데이터를 볼 수 있다. 당신의 작업은 국제기능올림픽대회조직위원회의 의뢰에 따라 이와 같은 목적의 서버사이드 웹 어플 리케이션을 제작하는 것이다. 프로젝트와 과제 설명 당신에게는 이전 대회의 자료가 XML 파일로 제공되었다. 사용자는 필요한 데이터를 XML에서 추출하여 화면에 표시할 수 있어야 한다. 화면에 표시할 데이터는 두 가지이다. 1. 국가별 직종 별 연도 별 메달 현황 표 국가별 직종 별 연도 별 메달 현황표는 선택된 국가의 2007년, 2009년, 2011년 3개 년도의 직종별 메달 종류를 표시하는 표이다. 이 표의 모양은 아래와 같다. 이 표에의 상단에는 XML 파일에 포함된 모든 국가 리스트가 콤보박스 형태로 표시되어야 한다. 국가리스트에 표시되는 국가 이름은 국가코드 - 국가이름 형식의 영문으로 한다(예, KR - Korea)

프로젝트와 과제 설명 당신에게는 이전 대회의 자료가 XML 파일로 제공되었다. 사용자는 필요한 데이터를 XML에서 추출하여 화면에 표시할 수 있어야 한다. 화면에 표시할 데이터는 두 가지이다. 1.

14 표의 첫 줄에는 Trade, 2007, 2009, 2011 이 표시된다. Trade는 직종을, 나머지 숫자는 데이 터를 추출할 년도를 나타낸다. 첫 줄을 제외한 나머지 줄들에는 순서대로 직종번호와 직종명, 연도 별로 선택한 나라가 획 득한 메달 종류가 위의 표 예시와 같은 방식으로 표시되어야 한다. 제목 표시줄을 제외한 각 줄들의 정렬 순서는 직종 번호 순이다. 직종명은 17 Webdesign 과 같이 XML로부터 직종의 번호와 영문 명칭을 추출하여 표시 한다. 연도 별 데이터는 표 상단의 콤보박스에서 선택한 나라의 각 연도 별 메달 종류가 표시되어 야 한다. 메달을 획득하지 못한 년도의 칸은 빈 칸으로 표시된다. 이와 같은 방식으로 모든 나라의 모든 직종의 정보를 표에 표시한다. 국가가 선택되지 않은 경우 표는 첫 줄(칼럼의 타이틀 줄)을 제외하고는 다른 줄들은 표시되 지 않아야 한다. 국가선택 콤보박스는 선택이 변경될 때마다 자동으로 반영되어 표가 페이지 이동 없이 변경 되어야 한다. XML 코드를 읽고, 분석하고 화면에 표시할 표를 생성하는 코드는 반드시 서버사이드 코드 (PHP)로 작성되어야 한다. 즉, XML의 분석 및 분석 결과를 표시하는 코딩이 클라이언트 사 이드에서 이루어지면 안 된다. 단, 선택 시 AJAX를 활용하여 PHP 파일을 호출하고 결과 값 을 화면에 표시하는 것은 허용된다. JavaScript는 반드시 PHP 파일을 호출하고 PHP 파일로 부터 생성된 결과를 화면에 그대로 표시하는 역할만 한다. 2. 직종 별 연도 별 국가 별 점수 현황 그래프 이 그래프는 직종 별로, 연도별로 선택한 국가의 획득 점수를 아래 그림과 같이 꺾은선 그 래프 형식으로 보여준다. 그래프 표시 영역 위에는 직종(직종번호 직종명)과 국가(국가코드-국가명)를 선택할 수 있 는 콤보박스가 존재하여 선택이 변경됨에 따라 즉시 그래프를 변경한다. 직종, 국가 모두 빈값이 선택된 경우에는 그래프에 x축의 연도 표시와 y축의 눈금 외에 아 무 것도 그려지지 않는다. 직종만 선택되고 국가가 선택되지 않은 경우에는 선택된 직종의 2007, 2008, 2011년 전체국 가의 평균점수가 그래프에 표시되어야 한다. 직종과 국가가 선택된 경우에는 선택된 직종에서 선택된 국가가 연도별로 획득한 점수를 그 래프에 표시하여야 한다. 또한 선택한 국가의 선택한 직종의 연도 별 점수와 함께 전체 참 여 국가의 평균 점수가 다른 색으로 구분하여 표시되어야 한다. 그래프 우측에는 색깔별로 국가, 평균 등의 범례가 표시되어야 한다. 그래프는 x 축에 그림 예와 같이 2007, 2009, 2011 연도가 표시되어야 하며, y 축에 점수가 10 단위로 구분되어 표시되어야 한다. 숫자의 범위(최저점과 최고점)는 모든 숫자를 표시할 수 있는 것으로 개발자가 판단하여 정한다. XML 코드를 읽고, 분석하고 화면에 표시할 그래프를 생성하는 코드는 반드시 서버사이드 코드(PHP)로 작성되어야 한다(예, PHP의 GD를 이용한 그래프 그리기). 즉, XML의 분석 및 분석 결과를 표시하는 코딩이 클라이언트 사이드에서 이루어지면 안 된다. 단, 선택 시 AJAX를 활용하여 PHP 파일을 호출하고 PHP로부터 생성된 그래프 이미지를 화면에 표시하

이와 같은 방식으로 모든 나라의 모든 직종의 정보를 표에 표시한다. 국가가 선택되지 않은 경우 표는 첫 줄(칼럼의 타이틀 줄)을 제외하고는 다른 줄들은 표시되 지 않아야 한다. 국가선택 콤보박스는 선택이 변경될 때마다 자동으로 반영되어 표가 페이지 이동 없이 변경 되어야 한다.

15 는 것은 허용된다. JavaScript는 반드시 PHP 파일을 호출하고 PHP 파일로부터 생성된 결과 (그래프 이미지)를 화면에 그대로 표시하는 역할만 한다. 그래프 예시 * 위 그래프에서 3개의 선이 보이고 있으나 이는 예시일 뿐이고 실제로는 직종만 선택되고 국가는 선택되지 않았을 때는 녹색의 평균점수(Average)만 보여야 하고, 직종과 국가 모두 선택되었을 때는 선택된 국가의 그래프와 평균점수 그래프 두 개만 보여야 한다. 선수 이행사항 1. 이 과제의 수행시간은 3시간이며, 당신은 당신이 작업한 결과물을 XXX_Server_Side 폴더에 저장하여야 한다. XXX는 당신의 등번호이다. 3. 템플릿(레이아웃)은 과제의 media 폴더(디렉토리)에 저장되어 있으며 당신은 공통으로 제공된 PHP 또는 JavaScript 라이브러리들은 필요한 경우 자유롭게 사용할 수 있다. 4. 이 과제는 Google Chrome에서 평가될 것이다

선택된 국가의 그래프와 평균점수 그래프 두 개만 보여야 한다. 선수 이행사항 1. 이 과제의 수행시간은 3시간이며, 당신은 당신이 작업한 결과물을 XXX_Server_Side 폴더에 저장하여야 한다.

16 Server Side 과제 채점표 번호 구분 평가내용 배점 1 주관 XML 데이터를 추출하고 처리하는 코드는 전문가다운가? 주관 어플리케이션을 구성하는 서버 측 코드들은 잘 조직되었는가? 객관 4 객관 5 객관 6 객관 7 객관 8 객관 9 객관 10 객관 어플리케이션을 열면 국가별 직종 별 연도 별 메달 현황표 가 제목과 함께 화면에 표시되고 표가 나타난다. 최초에는 선택된 직종이 없어 표의 타이틀 만 표시된다. 어플리케이션을 열면 직종 별 연도 별 국가 별 점수 현황 그래프 가 제목 과 함께 화면에 표시되고 최초에는 선택된 직종이 없어 눈금과 연도만 표시 된 빈 차트가 표시된다. 국가별 직종 별 연도 별 메달 현황표 위의 국가선택 콤보박스에는 XML에 포함된 모든 국가 목록이 국가 코드 오름차순 정렬로 국가코드-국가명 형 식으로 목록화 되었다. 이 데이터는 반드시 제공된 XML 파일로부터 추출되 어야 한다. 국가별 직종 별 연도 별 메달 현황표 위의 국가선택 콤보박스에서 국가를 선택하면 즉시 해당 국가의 직종별, 연도별 획득 메달이 과제 설명과 같이 XML에서 추출하여 표시된다. 국가별 직종 별 연도 별 메달 현황표 에 표시되는 직종은 직종번호-직종 명칭 형식으로 직종번호 기준 오름차순 정렬되었다. 직종 별 연도 별 국가 별 점수 현황 그래프 위의 콤보박스 중 국가는 선 택하지 않고 직종만을 선택하면 해당 직종의 평균 점수가 과제 설명에 따라 PHP 코드를 통해 꺽은선 그래프로 그려진다. 직종 별 연도 별 국가 별 점수 현황 그래프 위의 콤보박스에서 직종과 국 가를 모두 선택하면 과제 설명에 따라 해당 직종의 평균 점수와 해당 국가 의 해당 직종 연도 별 점수가 PHP 코드를 통해 꺽은선 그래프로 그려진다. 꺽은선 그래프의 각 선들은 서로 다른 색으로 구분되었고 우측으로는 각 선 의 색에 따른 범례가 표시되었다 계

국가별 직종 별 연도 별 메달 현황표 위의 국가선택 콤보박스에는 XML에 포함된 모든 국가 목록이 국가 코드 오름차순 정렬로 국가코드-국가명 형 식으로 목록화 되었다. 이 데이터는 반드시 제공된 XML 파일로부터 추출되 어야 한다.

17 지급재료 목록 직 종 명 일련 번호 재 료 명 규 격(치 수) 단 위 1인당 소요량 공 동 소요량 1 CD 650MB 이상 장 1 1 비 고 선수 당 1장씩 (참고자료 CD는 경기장당 1개씩 지급해야 하므로 별도 구입) 2 CD라벨 114.5mm Diameter 개 1 선수 당 1개씩 3 CD케이스 개 1 선수 당 1개씩 4 복사용지 A4 장 10 선수 당 10장씩 5 복사용지 A3 장 10 선수 당 10장씩 6 XAMPP XAMPP Portable for Windows 장 1 7 외장형 HDD 80GB 이상 대 경기장 당 1장씩 (참고자료 CD 에 함 께 수록) 경기장 당 1 대씩 (심사위원용) 선수들의 작품(비번호 폴더)저장

5mm Diameter 개 1 선수 당 1개씩 3 CD케이스 개 1 선수 당 1개씩 4 복사용지 A4 장 10 선수 당 10장씩 5 복사용지 A3 장 10 선수 당 10장씩 6

18 경기자 지참공구 목록 직 종 명 일련 번호 지 참 공 구 명 규 격 단 위 수 량 비 고 1 흑색 사인펜 개 1 필수 2 흑색 유성 네임펜 개 1 필수 3 마커 또는 색연필 색상은 자유 세트 1 필요시 4 키보드 컴퓨터용 개 1 필요시 5 마우스 컴퓨터용 개 1 필요시

필요시 4 키보드 컴퓨터용 개 1 필요시 5 마우스 컴퓨터용 개 1 필요시 6 7 8 9 10

19 경기장 시설목록 직 종 명 웹 디자인 및 개발 일련 번호 1 시 설 및 장 비 명 규 격(치 수) 단위 수량 비 고 선수PC (최신사양) 2 Linux Server(웹용) IBM호환 최신기종 (RAM 8G이상), 사운드카드, 스피커 또는 헤드셋, 키보드, 마우스 등이 포함된 PC 최신 APM, FTP, SAMBA 서버 S/W 설치 대 1 대 1 3 스위치허브 50포트 이상(VLAN) 대 1 4 LAN 공사 5 컴퓨터 모니터 선수 PC-허브-서버 연결(선수PC는 인터넷 연결 차단) 24인치 이상(wide형) 듀얼모니터 식 1 6 컴퓨터책상 800mm 1200mm 이상 개 1 7 의자 사무용(등받이,바퀴) 개 1 8 경기장프로젝터 또는 대형TV 경기운영용 개 1 9 채점실프로젝터 또는 대형TV 경기장과 채점실이 다를 시 개 1 10 심사위원PC/모니터 프린터 (또는 복합기) 선수PC와 동일 규격 및 동일 S/W 설치 선수용 (공동수량은 예비용) 결과물 제출 및 심사용 대 2 1인당 모니터 2대 대 1 과제 등 출력용 대

이상(wide형) 듀얼모니터 식 1 6 컴퓨터책상 800mm 1200mm 이상 개 1 7 의자 사무용(등받이,바퀴) 개 1 8 경기장프로젝터 또는 대형TV 경기운영용 개 1 9 채점실프로젝터 또는 대형TV 경기장과 채점실이 다를 시 개 1 10

20 과제출제 기준재료 단 1인당 공동 구분 재료명 규격(치수) 위 수량 수량 OS Windows 10 64bit 한글 개 1 5 비고 S/W XAMPP v Window Portalbe 개 1 xampp-portable-win VC11-installer.exe S/W Dreamweaver CC 영어버전 개 1 필요시 낮은 버전 정품 개별설치 가능 S/W Photoshop CC 영어버전 개 1 S/W Illustrator CC 영어버전 개 1 S/W EditPlus 4.0 개 1 평가판 가능 S/W Notepad 개 1 무료 S/W Sublime Text 2 Portable + Plugin 개 1 평가판 가능 S/W Sublime Text 3 Portable + Plugin 개 1 평가판 가능 S/W PhpStorm 개 1 평가판 가능 S/W WebStorm 개 1 평가판 가능 S/W Brackets 1.6.Extract + Plugin 개 1 무료 S/W MS IE 11 개 1 무료 S/W MS Edge 개 1 무료 S/W FireFox Developer Edition 48.0a2 ( ) 개 1 무료 S/W Chrome v m (64-bit) 개 1 무료 S/W Filezilla Client 개 1 무료 LIB jquery 개 1 무료 LIB jquery UI 개 1 무료(모든 테마 )포함 LIB bootstrap 개 1 무료 LIB prefixfree.min.js 개 1 o/prefixfree/ F/W Laravel 5.2 개 1 PHP Framework F/W CodeIgniter 개 1 PHP Framework DOC manual PHP, MySql 개

1 개 1 무료 S/W Sublime Text 2 Portable + Plugin 개 1 평가판 가능 S/W Sublime Text 3 Portable + Plugin 개 1 평가판 가능 S/W PhpStorm 2016.

순 서 1. 직종설명 1 2. 경기과제에관한사항 2 3. 사용재료 경기장구성및배치 경기장시설 ᆞ 장비목록 경기진행절차 채점에관한사항 안전관리 공통사항 적용시기 주요개정사항 31 [

개정일 : `18. 5. 8 직종설명서 직종명 : 웹디자인및개발 (Web Design & Development) - 1 - 순 서 1. 직종설명 1 2. 경기과제에관한사항 2 3. 사용재료 22 4. 경기장구성및배치 23 5. 경기장시설 ᆞ 장비목록 23 6. 경기진행절차 25 7. 채점에관한사항 29 8. 안전관리 29 9. 공통사항 30 10. 적용시기