개정일 : `25. 12. 19.

직 종 설 명 서

▣ 직종명 : 웹디자인 및 개발

(Web Design & Development)

[개정일 25.12.19] 웹디자인 및 개발 직종

2026 전국대회부터 적용

순  서

1. 직종정의	1

2. 작업범위	1

3. NCS 연계표(직종 연계 NCS 능력단위)	3

가. 능력단위 정의	3

나. NCS 연계표(과제별 NCS 능력단위)	6

4. 경기 과제에 관한 사항	8

가. 과제시간	8

나. 과제출제	8

다. 과제 작업내용	12

라. 과제 공개에 관한 사항	16

5. 경기 진행 절차	17

가. 경기 일정표(예시)	17

나. 경기 전/중/후	18

6. 채점에 관한 사항	25

가. 채점방법	25

나. 배점기준	26

다. 채점 기준표(예시)	27

7. 안전 및 기타사항	29

8. 적용시기	36

[붙임1] 사용재료 및 시설·장비목록	37

[붙임2] 경기장 구성 및 배치	40

[붙임3] 주요 개정사항	42

[붙임4] 이벤트 경기	44

[붙임5] XAMPP 8.0이상 버전의 GD 활성화 가이드라인	47

[붙임6] 과제 출제 기준 (A모듈 문제은행)	49

[붙임7] 과제 출제 기준 (B모듈, C모듈)	57

1		직종정의
	ㅊ

□ 웹디자인 및 개발 직종은 웹사이트를 제작‧배포하는데 필요한 지식 및 기술, 태도 등을 활용하여, 가상 고객의 다양한 요구사항에 따라 실제로 운영이 가능한 수준의 완전한 웹사이트를 제작하는 직종이다.

□ 웹사이트 제작의 목적은 개인 또는 기업, 기관, 단체가 정보 수집 및 제공, 홍보, 이벤트, 비즈니스 업무처리, 고객과의 상호작용 등을 위한 웹서비스를 제공하는 데 있으며, 고객의 요청이나 새로운 기술을 적용하기 위한 웹사이트 개선을 포함한다.

□ 웹디자인 및 개발 직종은 웹 개발 국제표준과 관련 산업의 최신 기술의 트랜드에 부합하는 웹사이트 제작 및 배포, 운용 능력을 갖추고 산업현장에 적합한 숙련기술인 양성을 목표로 한다.

□ 참가 선수는 변화하는 기술 환경에 적절히 대응하여 웹사이트를 디자인하고 개발하는 데 필요한 다양한 지식에 대해 깊이 이해하고 구현하는 능력을 갖추어야 한다. 따라서 인터넷을 활용하는 기기와 운용환경을 이해하고 다양한 그래픽 소프트웨어 및 프로그래밍 언어 활용에 관한 전문적인 지식 및 기술, 태도 등을 갖추어야 한다.

2		작업범위
	ㅊ

가. 디자인 구성요소 및 프로토타입 제작

○ 시각적 요소의 계층구조, 타이포그래피, 심미성 등을 이해하고, 목표관중에 부합하도록 웹사이트의 디자인 구성요소를 제작한다.

○ 디자인 과정에서 각 구성요소들이 상호간에 미치는 영향을 고려한다.

○ 과제의 지시사항 및 스타일 가이드에 따라 제시된 디자인콘셉트를 유지하면서 시각적 호소력을 증대시킨다.

○ 최신 W3C 웹표준을 준수하여 문서 스타일 및 레이아웃 일관성을 유지함으로써 다양한 기기 및 화면 해상도에 최적화된 웹문서를 제작한다.

○ 다양한 장치의 화면 해상도에서 바르게 작동하는 반응형 디자인을 생성할 수 있어야 한다.

나. 프론트 엔드(front-end) 프로그램 개발

○ 렌더링된 웹페이지의 모양과 행동을 개선시키기 위하여 UI 구성 요소 선택 및 스타일 지정, 레이아웃 생성, 탐색, 양식 유효성 검사 등을 포함한 코딩을 수행함으로써 웹페이지의 기능성 및 심미성을 향상시킨다.

○ 자바스크립트 또는 라이브러리를 활용하여 적절한 데이터처리를 통하여 기능적‧시각적 효과를 구현한다.

- 화면의 스크롤에 따른 동적인 변화(parallax scrolling)를 구현하거나 클라이언트 웹페이지 상에서의 이미지 처리(image processing) 등의 기능을 구현한다.

- 웹페이지에 특정 폰트를 적용하거나 각종 멀티미디어 요소를 제어한다.

- AJAX 기능을 활용하여 XML 또는 JSON 파일에 포함된 데이터를 처리하고 화면에 표시한다.

다. 백 엔드(back-end) 프로그램 개발

○ 데이터의 유효성 검사, 데이터 저장 및 검색을 위한 데이터베이스 사용, 올바른 데이터 전송 등의 작업을 처리하여 브라우저의 요청에 대한 응답으로 반환해야 할 콘텐츠를 생성하는 서버측 프로그램을 개발한다.

○ 세션 지원, 사용자 인증 지원, 데이터베이스와의 연결, 템플릿 라이브러리 등과 같은 웹 서버 공통 기능을 지원하는 개발 프레임워크를 이해하고 활용한다.

- 특정 사용자에 대한 정보 접근을 허락하거나 특화된 서비스 제공 프로그램을 개발한다.

- 현재 사이트의 사용자 정보를 저장하거나 정보에 기반한 다른 형태의 응답을 보낼 수 있는 매커니즘을 활용하여 서버 프로그램을 구현한다.

- 웹 공격에 대처하기 위한 보안 강화 프로그램(SQL Injection, XSS 공격 방어, 암호화, 캡차 등)을 구현한다.

○ SQL 문법을 올바르게 활용하여 특정 데이터베이스 요건을 충족하는 견고한 솔루션을 개발한다.

○ 서버 측 파일 관리(업로드, 수정, 압축 등)나 이미지 처리 프로그램, 웹서버 관리자 프로그램 등을 구현한다.

○ 서버측 프로그래밍을 통해 제공된 정보를 형식과 구조에 부합하도록 데이터베이스에 삽입하여 활용하고, 필요한 경우 데이터베이스에 저장된 데이터를 HTML, XML, CSV, PDF, JSON, XLSX 등의 파일형태로 생성하여 반환한다.

3		NCS 연계표(직종 연계 NCS능력단위)
	ㅊ

가. 능력단위 정의

능력단위 (분류번호)	능력단위 정의
08.문화·예술·디자인·방송 > 02.디자인 > 01.디자인 > 04.디지털디자인
수정 보완 (0802010406_13v1)	수정 보완이란 구현단계에서 만들어진 작업물의 심미적 디자인 요소, 콘텐츠 사용성 요소, 매체 기능적 요소의 보완 사항을 파악하고, 발견된 보완 사항을 수정해 완성도를 높이는 능력이다.
프로토타입 기초데이터 수집 및 스케치 (0802010413_16v2)	프로토타입 기초데이터 수집 및 스케치란 도출된 콘셉트의 방향에 맞게 기초데이터를 수집하고 시각화가이드에 따른 프로토타입을 제작하는 능력이다.
프로토타입 제작 및 사용성 테스트 (0802010414_16v2)	프로토타입 제작 및 사용성 테스트란 도출된 콘셉트의 방향에 맞게 시각화 작업을 해 프로토타입을 제작하고 사용성을 테스트하는 능력이다.
디자인 구성요소 설계 (0802010415_16v2)	디자인 구성요소 설계란 프로토타입 제작을 바탕으로 한 정보구조 및 설계를 통해 사용성과 매체의 특성을 이해하고 시각적으로 구조화할 수 있는 능력이다.
디자인 구성요소 제작 (0802010416_16v2)	디자인 구성요소 제작이란 프로토타입 제작을 바탕으로 한 정보구조 및 설계를 통해 사용성과 매체의 특성을 반영하여 구성요소를 디자인하는 능력이다.
디자인 구성요소 응용 (0802010417_16v2)	디자인 구성요소 응용이란 프로토타입 제작을 바탕으로 한 정보구조 및 설계를 통해 사용성과 다양한 매체의 특성을 반영하여 심미적으로 디자인하고 응용하는 능력이다.
구현 (0802010418_16v3)	구현이란 결정된 디자인 구성요소 제작을 통한 콘텐트 정보설계, 디자인과 매체의 특성에 맞는 구체적이고 사용 가능한 완성품으로 발전시키는 기초 단계를 말한다.
구현 응용 (0802010419_16v3)	구현 응용이란 결정된 디자인 구성요소 제작을 통한 콘텐츠 정보설계, 디자인과 매체의 특성에 맞는 구체적이고 사용 가능한 완성품으로 발전시켜 최적화된 결과물을 도출하고 정리하는 단계를 말한다.
프로젝트 완료 자료정리 (0802010420_16v3)	프로젝트 완료 자료정리란 프로젝트 기획, 진행 상황, 결과까지의 보고서를 작성할 수 있도록 전체 산출물을 분류하고 정리하는 능력이다.
08.문화·예술·디자인·방송 > 02.디자인 > 01.디자인 > 01.시각디자인
디자인 자료화 (0802010109_20v3)	디자인 자료화란 완성된 디자인 결과물을 정리하여 관리하고 결과물에 대한 권리를 보호하기 위하여 지적재산권을 확보하는 능력이다.
비주얼 아이데이션 구상 (0802010116_20v4)	비주얼 아이데이션 구상이란 프로젝트의 디자인 콘셉트에 대한 다양한 생각들을 도출하고 표현하는 능력이다.
비주얼 아이데이션 전개 (0802010117_20v4)	비주얼 아이데이션 전개란 프로젝트의 디자인 콘셉트에 대한 효과적인 생각들을 시각적으로 표현하고 전개하는 능력이다.
시안 디자인 개발 기초 (0802010119_20v3)	시안 디자인 개발 기초란 각종 디자인 작업 도구 및 컴퓨터 프로그램을 사용하여 프로젝트의 콘셉트에 맞는 여러 가지 디자인 시안을 제안하고 제작하는 능력이다.
시안 디자인 개발 응용 (0802010120_20v3)	시안 디자인 개발 응용이란 각종 디자인 작업 도구 및 컴퓨터 프로그램을 사용하여 프로젝트의 콘셉트에 맞는 여러 가지 디자인 시안을 응용하여 제작하는 능력이다.
최종 디자인 실행 (0802010122_20v4)	최종디자인 실행이란 선정된 시안에 필요한 일러스트레이션, 사진촬영, 카피라이팅, 타이포그래피, 레이아웃, 색상 등을 완성하고, 그에 따른 어플리케이션 디자인까지 개발하는 능력이다.
20.정보통신 > 01.정보기술 > 02.정보기술개발 > 02.응용SW엔지니어링
데이터 입출력 구현 (2001020205_19v5)	데이터 입출력 구현이란 응용소프트웨어가 다루어야 하는 데이터 및 이들 간의 연관성, 제약조건을 식별하여 논리적으로 조직화하고 소프트웨어 아키텍처에 4기술된 데이터저장소에 조직화된 단위의 데이터가 저장될 최적화된 물리적 공간을 구성하고 데이터 조작언어를 이용하여 구현하는 능력이다.
서버프로그램 구현 (2001020211_19v5)	서버프로그램 구현이란 애플리케이션 설계를 기반을 개발에 필요한 환경을 구성하고, 프로그래밍 언어와 도구를 활용하여 공통모듈, 업무프로그램과 배치프로그램을 구현하는 능력이다.
인터페이스 구현 (2001020212_19v5)	인터페이스 구현이란 인터페이스 설계서를 확인하고, 인터페이스 설계서에 따라 기능을 구현하고 검증하는 능력이다.
화면 설계 (2001020224_19v5)	화면 설계란 요구사항분석 단계에서 파악된 하면에 대한 요구사항을 소프트웨어 아키텍처 단계에서 정의된 구현 지침 및 UI/UX 엔지니어가 제시한 UI표준과 지침에 따라 화면을 설계하는 능력이다.
화면 구현 (2001020225_19v5)	화면 구현이란 UI 요구사항을 확인하여 설계한 UI 설계를 기반으로 하면을 구현하는 능력이다.
애플리케이션 테스트 수행 (2001020227_19v5)	애플리케이션 테스트 수행이란 요구사항대로 응용소프트웨어가 구현되었는지를 검증하기 위해서 분석된 테스트 케이스에 따라 테스트를 수행하고 결함을 조치하는 능력이다.
프로그래밍 언어 응용 (2001020230_19v4)	프로그래밍 언어 응용이란 응용소프트웨어 개발에 사용되는 프로그래밍 언어의 특징과 라이브러리를 활용하여 기본 응용소프트웨어를 구현하는 능력이다.
프로그래밍 언어 활용 (2001020231_19v4)	프로그래밍 언어 할용이란 응용소프트웨어 개발에 사용되는 프로그래밍 언어의 기본문법을 활용하여 기본 응용소프트웨어를 구현하는 능력이다.
개발자 환경 구축 (2001020233_19v4)	개발자 환경 구축이란 응용소프트웨어 개발을 위하여 운영체제의 기초 기술을 적용하여 응용소프트웨어 개발에 필요한 개발자 환경을 구축하는 능력이다.
개발 환경 운영 지원 (2001020234_19v1)	개발 환경 운영 지원이란 응용소프트웨어 개발을 위하여 구축된 개발 환경을 백업‧복원하고, 소스코드를 관리하는 능력이다.
20.정보통신 > 01.정보기술 > 02.정보기술개발 > 04.DB엔지니어링
데이터베이스 요구사항 분석 (2001020401_19v4)	데이터베이스 요구사항 분석이란 데이터베이스를 설계하고 구현하기 위해 최종사용자의 요구사항을 수집, 분석하고 정의하며, 각 단계의 산출물에 대하여 검증하는 능력이다.
데이터베이스 구현 (2001020405_19v4)	데이터베이스 구현이란 설계된 데이터베이스 모델을 적용하기 위해 DBMS를 설치하고 데이터베이스와 데이터베이스 오브텍트를 생성하는 능력이다.
데이터 전환 (2001020412_19v4)	데이터 전환이란 원천의 데이터베이스, 파일, 문서로부터 목적 데이터베이스 구축에 필요한 데이터를 추출하고 목적 시스템의 데이터 모델에 적합하게 변환, 정제하여 목적 데이터베이스에 적재한 후 그 결과를 검증하여 운영 가능한 데이터베이스를 구축하는 능력이다.
SQL활용 (2001020413_19v4)	SQL활용이란 관계형 데이터베이스에서 SQL을 사용하여 목적에 적합한 데이터를 정의하고, 조작하며, 제어하는 능력이다.
SQL응용 (2001020414_19v4)	SQL응용이란 관계형 데이터베이스에서 SQL을 사용하여 응용시스템의 요구기능에 적합한 데이터를 정의하고, 조작하며, 제어하는 능력이다.
SQL작성 (2001020415_19v1)	SQL작성이란 관계형 데이터베이스에서 SQL을 사용하여 목적에 적합한 데이터를 조회하고 수정하는 능력이다.
20.정보통신 > 01.정보기술 > 02.정보기술개발 > 07.UI/UX엔지니어링
UI/UX 요구 분석 (2001020704_19v3)	UI/UX 요구 분석이란 사용자 리서치 자료를 토대로 사용자의 요구사항을 파악하고 기획된 아이디어를 신속하게 만들어서 시각화하여 테스트하는 능력이다.
UI/UX 콘셉트 기획 (2001020705_19v2)	UI/UX 콘셉트 기획이란 UI/UX 분석 결과를 바탕으로 UI/UX 콘셉트를 도출하고 기능 및 콘텐츠를 정의하는 능력이다.
UI 아키텍처 설계 (2001020706_19v2)	UI 아키텍처 설계란 기획된 콘셉트를 바탕으로 디자인과 구현을 위한 콘텐츠, 정보, 와이어 프레임, 태스크플로우를 설계하는 능력이다.
UI 디자인 (2001020707_19v3)	UI 디자인이란 UI 아키텍처 설계 후 시각적인 요소를 디자인하기 위해 비주얼 디자인 콘셉트를 도출하며 이 콘셉트에 근거하여 GUI 디자인 요소를 선정하는 능력이다.
UI 구현 (2001020708_19v3)	UI 구현이란 UI 설계 산출물과 GUI 디자인 가이드를 바탕으로 UI 설계와 UI 구현 표준을 검토하는 능력이다.
UI 테스트 (2001020709_19v3)	UI 테스트란 구현된 UI를 검증하기 위하여 사용성 테스트 계획, 수행, 분석, 결과 보고를 수행하는 능력이다.
UI 제작 (2001020712_19v3)	UI 제작이란 UI 설계 산출물과 GUI 디자인 가이드, UI 구현 표준을 바탕으로 저작도구를 활용하여 UI를 제작하는 능력이다.

나. NCS 연계표(과제별 NCS 능력단위)

과제		세분류	분류번호	능력단위명	수준	필수	관련
단일과제	A 모 듈	디지털디자인	0802010413_16v2	프로토타입 기초데이터 수집 및 스케치	3	o
			0802010414_16v2	프로토타입 제작 및 사용성 테스트	4	o
			0802010415_16v2	디자인 구성요소 설계	4	o
			0802010416_16v2	디자인 구성요소 제작	5	o
		시각디자인	0802010109_20v3	디자인 자료화	4	o
			0802010116_20v4	비주얼 아이데이션 구상	3		o
			0802010117_20v4	비주얼 아이데이션 전개	4		o
			0802010119_20v3	시안 디자인 개발 기초	3	o
			0802010120_20v3	시안 디자인 개발 응용	4	o
			0802010122_20v4	최종 디자인 실행	5	o
		UI/UX 엔지니어링	2001020704_19v3	UI/UX 요구 분석	5		o
			2001020705_19v2	UI/UX 콘셉트 기획	5		o
			2001020706_19v2	UI 아키텍처 설계	5		o
			2001020707_19v3	UI 디자인	4	o
			2001020708_19v3	UI 구현	3	o
			2001020709_19v3	UI 테스트	2	o
			2001020712_19v3	UI 제작	2	o
	B 모 듈	디지털디자인	0802010406_13v1	수정 보완	4	o
			0802010417_16v2	디자인 구성요소 응용	6		o
			0802010418_16v3	구현	5	o
		응용SW 엔지니어링	2001020212_19v5	인터페이스 구현	5	o
			2001020224_19v5	화면 설계	5		o
			2001020225_19v5	화면 구현	3	o
			2001020227_19v5	애플리케이션 테스트 수행	3	o
			2001020231_19v4	프로그래밍 언어 활용	2	o
			2001020233_19v4	개발자 환경 구축	2	o
			2001020234_19v1	개발 환경 운영 지원	2	o
	C 모 듈	디지털디자인	0802010419_16v3	구현 응용	5	o
			0802010420_16v3	프로젝트 완료 자료정리	5	o
		응용SW 엔지니어링	2001020205_19v5	데이터 입출력 구현	5	o
			2001020211_19v5	서버프로그램 구현	5	o
			2001020230_19v4	프로그래밍 언어 응용	3	o
		DB엔지니어링	2001020401_19v4	데이터베이스 요구사항 분석	6		o
			2001020405_19v4	데이터베이스 구현	4	o
			2001020412_19v4	데이터 전환	5	o
			2001020413_19v4	SQL활용	3	o
			2001020414_19v4	SQL응용	5		o
			2001020415_19v1	SQL작성	2	o

4		경기 과제에 관한 사항
	ㅊ

가. 과제시간

과제	과제범위	제한시간		비고
		전국	지방
A모듈	Speed-Tests 웹디자인 및 개발에 사용되는 기술에 대해 이해하고, 난이도(상, 중, 하)별 단위 문제를 주어진 시간내에 완성한다.	3	3	기술 범위: Design& Publishing, Client-side Programming
B모듈	Design& Publishing 그래픽 응용프로그램을 사용하여 웹사이트 구조 및 구성요소를 디자인하고, 최신 웹표준 기술(HTML, CSS)을 사용하여 프로토타입을 제작한다.	3	3
C모듈	Client-side & Server-side Programming 자바스크립트와 같은 클라이언트 측 코딩 기술을 사용하여 웹사이트의 상호작용 및 효과를 구현하고,데이터베이스 설계‧구축 및 웹 서버 코딩 기술을 활용하여 웹서비스가 가능한 웹사이트를 완성한다.	4	4
이벤트 경기	Team Challenge 팀(4~5명) 단위로 협업을 통하여 특정 주제와 부합하는 웹사이트 등을 디자인하고 구현한다.	4	-	지방대회는 적용하지 않음
계	-	14	10	-

□ 과제 수행은 1일 1과제 수행을 원칙으로 한다. 단, 경기장 상황 등으로 조정이 불가피한 경우 참가선수 및 지도교사의 의견을 반영하여 심사장 및 심사위원 전원의 합의에 따라 경기 일정을 조정할 수 있다.

나. 과제출제

□ 과제 출제자는 매년 심사장이 작성하고 국제기능올림픽 한국위원회가 배포하는 ｢과제출제기준｣에 따라 과제를 출제한다.

□ 모듈별 과제 출제 방법

○ A모듈

- A모듈은 기술 범위, 난이도, 소요 시간을 고려하여 별도의 문제은행을 구성한다.

- A모듈 문제은행 구성

기술 범위	난이도	소요 시간	문제 수
Design& Publishing	상	30분이내	4
Design& Publishing	중	20분이내	8
Design& Publishing	하	10분이내	8
Design& Publishing 소계	-	-	20
Client-side Programming	상	30분이내	4
Client-side Programming	중	20분이내	8
Client-side Programming	하	10분이내	8
Client-side Programming	-	-	20
합계	-	-	40

- 문제은행은 Design& Publishing 기술 20문제, Client-side Programming 기술 20문제를 문제은행 구성의 난이도와 소요 시간에 따라 출제하여 구성한다.

- 문제은행은 매년 기술 트랜드와 산업현장의 수요에 따라 심사장, 부심사장, 직종협의회의 협의를 거쳐 30% 이내의 범위에서 변경할 수 있다.

- 문제은행은 공개를 원칙으로 하며, 마이스터넷 및 직종협의회, 지도교사, 선수에게 공지한다.

- 출제자는 문제은행 구성에 맞도록 각 기술 범위에서 사용되는 단위 기술 요소에 대해 난이도 및 난이도별 소요 시간을 고려하여 문항 수에 맞도록 출제한다.

- 출제자는 선수가 과제에 명시된 작업을 이해하고 수행하는데 필요한 예시, 이미지, 데이터, 파일 등을 과제 내 또는 별도의 선수 제공 파일로 제공한다.

- 출제자는 평가대상(이미지, 웹페이지)을 명시해야 하며, 웹페이지 평가의 경우 평가에 사용되는 웹브라우저 명시해야 하고, Cross Browsing에 관한 테스트가 필요한 경우에는 다른 웹브라우저를 추가로 명시한다.

- Client-side Programming 기술 범위의 문제는 CSS 코딩만으로 구현이 가능하거나 CSS 코딩으로 대부분의 작업을 해결할 수 있는 문제를 배제한다.

- A모듈 경기과제 구성

기술 범위	난이도	소요 시간	전국대회		지방대회
			문항수	시간소계 (분)	문항수	시간소계 (분)
Design& Publishing	상	30분이내	1	30	0	0
Design& Publishing	중	20분이내	2	40	3	60
Design& Publishing	하	10분이내	2	20	3	30
Client-side Programming	상	30분이내	1	30	0	0
Client-side Programming	중	20분이내	2	40	3	60
Client-side Programming	하	10분이내	2	20	3	30
합계	-	180분이내	10	180	12	180

- A모듈 최종 과제는 A모듈 경기 시작 전에 A모듈 과제 구성에 맞도록 문제은행에서 각 기술 범위와 난이도에 따라 문항 수에 맞춰 공개 추첨방식으로 추첨하여 과제를 최종 확정 한다.

○ B모듈

- 출제자는 선수가 과제에 명시된 작업을 수행할 수 있도록 출제의도에 부합하는 선수제공파일을 제공한다. 과제 출제 의도에 따라 로고나 폰트 등을 추가로 제공할 수 있다.

- 출제자는 세부 평가 요소를 고려해서 출제해야 하며, 다른 모듈에서 수행할 작업을 요구해서는 안 된다. 단, 퍼블리싱의 완성도를 위해 필요한 경우, 출제자는 선수들이 활용할 수 있는 별도의 JavaScript 코드(파일)와 그 사용 방법을 제공할 수 있다.

- 출제자는 평가에 필요한 웹브라우저를 선택하여 과제에 명시해야 하며, Cross Browsing에 관한 테스트가 필요한 경우에만 다른 웹브라우저를 추가로 지정할 수 있다.

○ C모듈

- 출제자는 세부평가요소를 고려하여 출제한다.

- 출제자는 메인/서브/기타 페이지의 기능을 구현하기 위한 퍼블리싱을 추가로 요구할 수는 있으나, 다른 모듈에서 평가하는 작업을 요구해서는 안 된다.

- 출제자는 CSS 코딩만으로 구현이 가능하거나 CSS 코딩으로 대부분의 작업을 해결할 수 있는 기능을 구현하도록 요구하지 않아야 한다.

* (사례1) A모듈의 작업내용과 연계하여 HTML파일과 CSS 등의 내용을 변경하지 않고 빈 JS파일을 수정하여 과제 지시사항을 구현하도록 출제한다.

* (사례2) A모듈의 작업내용 중 HTML파일 또는 CSS파일의 일부를 수정 가능하도록 허용하고, 자유롭게 JS 파일을 활용하여 과제 지시사항을 구현하도록 출제한다.

- 출제자는 평가에 필요한 웹브라우저를 선택하여 과제에 명시해야 하며, Cross Browsing에 관한 테스트가 반드시 필요한 경우에만 다른 웹브라우저를 추가로 지정할 수 있다.

- 출제 의도에 따라 API로 구현을 요구하는 경우, API를 이용한 데이터처리에 대해 명시하고, API로 송수신할 기본적인 Data-set(Request, Response)을 제시하여야 한다.

- 출제자는 선수가 과제에 명시된 작업을 수행할 수 있도록 출제의도에 부합하는 선수제공파일을 제공한다.

* 코딩을 위한 기본 템플릿 및 기본 JavaScript 코드 제공 가능

* 비어있는 JavaScript 파일 제공 후 코딩 지시 가능

* 과제 특성에 따른 데이터(txt, xml, json 등) 제공 가능

* 코딩을 위한 기본 템플릿(레이아웃 및 리소스 포함) 제공 가능

* 페이지 구성에 따라 하나 또는 다수의 템플릿 제공 가능

* 기본 PHP 코딩 제공 가능

* 각종 데이터(sql, text, xml, json 등) 파일 제공 가능

○ 이벤트 경기

- 경기 과제는 주제와 미션으로 구성한다.

- 당해연도 기술트랜드를 고려하여 팀 단위의 협업이 가능하고 창의적인 결과물이 예측되는 주제를 정하여 심사위원 전원 합의로 최종 과제를 결정한다.

- 인터넷이 허용되고 개인 디지털 장치의 지참이 가능한 점을 고려하여 선수가 자유로운 환경에서 과제 요구사항을 구현하고, 팀원 간의 협업을 통해 작품을 완성할 수 있도록 출제한다.

다. 과제 작업내용

□ 선수는 아래 표에 제시된 지식‧기술‧태도를 숙지하고 과제를 수행한다.

no.	항목	내용	능력단위 (분류번호)	지식	기술	태도
1	웹사이트 구성요소 및 레이아웃 디자인	ㅇ 웹사이트 레이아웃 제작 방법과 표준 웹사이트 구조	프로토타입 기초데이터 수집 및 스케치 (0802010413_16v2) 프로토타입 제작 및 사용성 테스트 (0802010414_16v2) 디자인 구성요소 설계 (0802010415_16v2) 디자인 구성요소 제작 (0802010416_16v2) 디자인 자료화 (0802010109_20v3)	○
2		ㅇ 그래픽SW (일러스트레이터, 포토샵 등)를 활용한 디자인 구성요소 제작			○
3		ㅇ HTML, CSS 등을 활용한 웹사이트 레이아웃 디자인		○	○
4		ㅇ 디자인을 위한 컬러, 타이포그래피와 구성요소들의 활용 방법		○	○
5		ㅇ 웹 그래픽 제작 방법 이해		○
6		ㅇ 웹사이트 레이아웃 작성을 위한 디자인 적용원리와 기술 이해		○
7		ㅇ 인터넷에 최적화된 이미지 제작 및 관리			○
8		ㅇ 좋은 디자인과 나쁜 디자인에 대한 판단 기술			○
9		ㅇ 디자인 표절 문제에 대해 객관적으로 바라보려는 태도				○
10		ㅇ 이성적 분석력으로 콘셉트를 수립하려는 태도				○
11		ㅇ 사용자 경험을 강조하는 디자인 제작을 위한 적극적인 분석 태도				○
12		ㅇ 최적의 디자인을 수행하기 위해 다양한 시도를 반복하는 적극적 태도				○
13	심미적이고 창의적인 디자인	ㅇ 목표 관중에 대한 이해와 이에 따른 디자인 구성 원리 이해	비주얼 아이데이션 구상 (0802010116_20v4) 비주얼 아이데이션 전개 (0802010117_20v4) 시안 디자인 개발 기초 (0802010119_20v3) 시안 디자인 개발 응용 (0802010120_20v3) 최종 디자인 실행 (0802010122_20v4)	○
14		ㅇ 기업 또는 단체의 아이덴티티, 브랜드, 스타일 가이드에 대한 이해		○
15		ㅇ 여러 화면 해상도에서의 일관된 레이아웃 유지			○
16		ㅇ 문서스타일의 웹브라우저 간 일관성 유지			○
17		ㅇ 새로운 것을 창조하고자 하는 의지와 창조적 열정				○
18		ㅇ 사물에 대한 세심한 관찰력				○
19		ㅇ 계획된 시안 제작을 위한 추진력				○
20		ㅇ 계획적이고 분석적인 사고				○
21		ㅇ 완성도 높은 디자인을 위한 세심한 관찰력				○
22		ㅇ 디자인 완성에 대한 종합적인 판단력				○
23	UI/UX를 고려한 프로토타입 제작	ㅇ HTML 및 CSS에 대한 W3C 최신 웹표준의 이해 및 활용	UI/UX 요구 분석 (2001020704_19v3) UI/UX 콘셉트 기획 (2001020705_19v2) UI 아키텍처 설계 (2001020706_19v2) UI 디자인 (2001020707_19v3) UI 구현 (2001020708_19v3) UI 테스트 (2001020709_19v3) UI 제작 (2001020712_19v3)	○	○
24		ㅇ 최신 W3C 표준 또는 W3C 최종 검토 초안(last call draft) 준수			○
25		ㅇ 인터넷 활용 기기 별 화면 해상도 및 차이점 이해		○
26		ㅇ 다양한 장치의 화면 해상도에서 바르게 작동하는 반응형 디자인 생성			○
27		ㅇ 검색엔진 성능을 지원할 수 있는 웹사이트의 제작			○
28		ㅇ 장애인의 다양한 장애 유형 파악 및 장애인을 위한 웹 접근성 향상(WAI: Web Accessibility Initiative)에 대한 이해		○	○
29		ㅇ 차별화된 UI/UX 접근방법으로 추진하려는 태도				○
30		ㅇ 인터랙션과 트랜지션 요소를 적용하기 위한 객관적 태도				○
31		ㅇ 프로토타입 분석에 대한 목적, 의미, 방법을 충분히 숙지하려는 노력				○
32		ㅇ 자료 수집 및 정리를 체계적으로 수행하는 태도				○
33		ㅇ 새로운 방법으로 정보구조를 생성하려는 창의적인 태도				○
34		ㅇ 비주얼 디자인 콘셉트 도출 의지				○
35		ㅇ 최신 UI/UX와 GUI 트랜드를 조사하고 적극 활용하는 태도				○
36		ㅇ 일관성있고 통일성 있는 GUI 디자인을 하려는 태도				○
37		ㅇ 사용자의 사용편의성(usability)을 고려하여 설계하려는 태도				○
38		ㅇ 프로토타입 개발에 할당된 시간과 리소스를 고려하는 태도				○
39		ㅇ 최상의 결과물을 위한 꾸준한 개선 의지				○
40	클라이언트측 웹페이지 구현	ㅇ Document Object Model (DOM)에 대한 이해	수정 보완 (0802010406_13v1) 디자인 구성요소 응용 (0802010417_16v2) 구현 (0802010418_16v3)	○
41		ㅇ JavaScript를 활용한 DOM 제어 방법			○
42		ㅇ JavaScript를 활용한 상호작용 코드 작성 방법			○
43		ㅇ Canvas 등의 활용을 통한 시각적 요소 활용 및 제어			○
44		ㅇ 웹페이지에 특정 폰트(디바이스폰트 또는 웹폰트) 적용 방법			○
45		ㅇ AJAX 기능을 활용하여 제공된 파일(xml, json 등)에 포함된 데이터 처리 및 표시			○
46	웹페이지 기능 구현 및 테스트	ㅇ 개발자 환경 구축 및 JavaScript 오픈소스 라이브러리 및 프레임워크에 따른 코드 생성방법	인터페이스 구현 (2001020212_19v5) 화면 설계 (2001020224_19v5) 화면 구현 (2001020225_19v5) 애플리케이션 테스트 수행 (2001020227_19v5) 프로그래밍 언어 활용 (2001020231_19v4) 개발자 환경 구축 (2001020233_19v4) 개발 환경 운영 지원 (2001020234_19v1)		○
47		ㅇ 오픈소스 라이브러리 활용 방법의 이해		○
48		ㅇ 프로그래밍 언어를 활용한 멀티미디어 요소의 시각적 움직임 제작 및 제어 방법			○
49		ㅇ 웹페이지의 기능성 및 심미성 향상을 위한 프로그래밍 언어의 활용		○	○
50		ㅇ Client Side에서의 로컬 데이터 활용 방법			○
51		ㅇ Client Side 기술을 활용한 통합 소프트웨어 제작 방법			○
52		ㅇ 산출물 완성도를 위한 적극적인 태도				○
53		ㅇ 주어진 과제를 완수하는 책임감				○
54		ㅇ 개발 수행에 요구되는 표준을 준수하려는 태도				○
55		ㅇ UI표준 및 지침을 준수하려는 태도				○
56		ㅇ 적극적이고 세밀히 분석하는 자세				○
57		ㅇ 프로그래밍 언어의 규칙과 관습을 준수하려는 태도				○
58		ㅇ 문법 오류를 이해하고 수정하려는 적극적인 태도				○
59		ㅇ 기 작성된 코드를 분석하기 위한 치밀한 태도				○
60		ㅇ 스크립트 언어를 이해하고 활용하려는 적극적인 태도				○
61		ㅇ 운영체제 활용 중 발생한 문제를 해결하고자 하는 의지				○
62		ㅇ 사용할 프로그램 특성을 이해하려는 태도				○
63		ㅇ 응용소프트웨어 상의 구조적인 문제점을 분석하고 적용하려는 태도				○
64		ㅇ 예상 밖의 문제 발생 시, 관련 담당자를 통해 문제를 해결하려는 의지				○
65		ㅇ 자신이 수행한 작업에 대한 평가의 객관성				○
66	서버측 웹서비스 구현	ㅇ 요구사항에 부합하는 웹서비스 개발 및 디자인	구현 응용 (0802010419_16v3) 프로젝트 완료 자료정리 (0802010420_16v3)		○
67		ㅇ PHP(Hypertext Pre-processor) 코드 개발방법		○	○
68		ㅇ PHP, XML(Extensible Markup Language), JSON 등을 활용한 웹서비스 구현방법		○	○
69		ㅇ 안전한 웹 애플리케이션 제작 방법		○	○
70		ㅇ 디자인과 기술의 전 과정을 수용하는 적극적인 자세				○
71		ㅇ 내용을 빠트리지 않고 알아보기 쉽게 정리하려는 적극적인 태도				○
72	데이터 입출력을 통한 서버 프로그램 구현	ㅇ API(Application Programming Interfaces), 라이브러리, 프레임워크와 기존 코드 통합	데이터 입출력 구현 (2001020205_19v5) 서버프로그램 구현 (2001020211_19v5) 프로그래밍 언어 응용 (2001020230_19v4)	○	○
73		ㅇ 객체지향(object-oriented) 코드 개발		○	○
74		ㅇ 서버 측 파일 관리(업로드, 수정, 압축 등) 및 이미지 처리		○	○
75		ㅇ Client-side 기술과 Server-side 기술의 통합 (AJAX 등)		○	○
76		ㅇ 오픈소스 프레임워크(Laravel, Yii, Symfony, CodeIgniter 등) 활용 방법		○	○
77		ㅇ 오픈소스 CMS(XE, Wordpress, Drupal, Joomla 등) 활용방법		○	○
78		ㅇ MVC 및 객체지향 프로그래밍		○	○
79		ㅇ 데이터베이스 기술 동향에 대한 이해를 위한 노력				○
80		ㅇ 프로그래밍 언어의 규칙과 관습을 준수하려는 태도				○
81		ㅇ 문법 오류를 이해하고 수정하려는 적극적인 태도				○
82		ㅇ 복잡한 구조 및 절차를 단순화하려는 의지				○
83		ㅇ 라이브러리의 특성을 이해하려는 의지				○
84		ㅇ 개발 수행에 요구되는 표준을 준수하려는 태도				○
85		ㅇ 산출물 완성도를 위한 적극적인 태도				○
86	SQL을 이용한 데이터 처리	ㅇ MySQL의 데이터베이스 디자인 및 구현 위한 데이터 모델링 기법	데이터베이스 요구사항 분석 (2001020401_19v4) 데이터베이스 구현 (2001020405_19v4) 데이터 전환 (2001020412_19v4) SQL활용 (2001020413_19v4) SQL응용 (2001020414_19v4) SQL작성 (2001020415_19v1)	○
87		ㅇ 특정 데이터베이스 요건을 충족하기 위한 견고한 솔루션 개발		○
88		ㅇ SQL문장의 올바른 문법 활용		○	○
89		ㅇ 보안악용에 대한 보호(SQL Injection, XSS, 암호화, 첨부파일, 캡차 등)		○	○
90		ㅇ 제공된 Data가 있는 경우 이를 DB에 요구된 구조와 형식에 맞게 삽입하여 활용하고 필요한 경우 DB에 입력된 Data를 CSV, Excel 등 요구된 형식으로 변환하여 저장		○	○
91		ㅇ XML, JSON 등 웹 서비스 활용 데이터 처리		○	○
92		ㅇ DBMS 내장 함수 사용 능력			○
93		ㅇ 모든 요구사항을 빠짐없이 정의하고자 하는 의지				○
94		ㅇ 필요한 데이터를 빠짐없이 추출하고자 하는 노력				○
95		ㅇ 수집된 모든 데이터에 대해 빠짐없이 분석하고자 하는 책임감				○
96		ㅇ 데이터베이스의 반응속도와 성능에 대한 요구사항을 만족시키고자 하는 자세				○
97		ㅇ 데이터베이스 기술 동향에 대한 이해와 관련 제품들을 파악하기 위한 노력				○
98		ㅇ 데이터 조작 시 제약조건을 준수하려는 태도				○
99		ㅇ 데이터의 무결성을 준수하려는 노력				○
100		ㅇ DBMS, 하드웨어, 운영체제와의 호환성을 분석하고 적용하려는 의지				○
101		ㅇ SQL언어에 대한 이해와 적용 노력				○
102		ㅇ 데이터 품질 개선에 대한 의지				○

라. 과제 공개에 관한 사항

□ 과제의 공개 여부 및 공개 시기, 범위 등은 국제기능올림픽 한국위원회의 방침에 따른다. 단, 별도 방침이 없는 경우 다음과 같이 공개한다.

구분	공개 시기	과제수	공개범위			비고
			과제 문서	채점표	선수 제공파일
A모듈 문제은행	상시	-	공개	공개	공개	• 경기 전, 최종문제 선정
지방 대회	대회 30일전	1개	공개	공개	공개	-
전국 대회		3개	공개	공개	공개	• 경기 전, 최종과제 선정

□ 대회 중, 과제 및 채점표 공개

○ 전국대회 과제(B모듈, C모듈)는 공개된 3개의 과제 중에서 대회 당일 공개 추첨방식으로 1개의 과제를 선정하여 확정한다.

5		경기진행절차
	ㅊ

가. 경기 일정표(예시)

일정	시간	내용	비고
1일차	08:00~08:45	○ 직종별 심사위원회의 - 경기진행 및 심사채점 계획서 작성 등	심사위원 조 편성 계획서 서명(심사위원)
	08:45~09:00	○ 선수입실, 선수 등번호(좌석) 추첨 ○ 과제 공개 추첨	선수, 지도교사 심사위원 참여
	09:00~11:30	○ 선수 본인확인 ○ 선수별 장비 점검 및 S/W 확인	참가선수서약서작성 SW 정품 설치 가능 음악파일 제출
		○ 지도교사 간담회 (심사장, 지도교사)	심사장, 부심사장
	11:30~13:00	○ 점심 식사
	13:00~13:10	○ 선수입실 ○ A모듈 문제 공개 추첨 (문제은행)	자료 반·출입 불가
	13:10~14:00	○ 선정 문제 인쇄 및 배부 ○ A모듈 선수제공파일 배부 (음악파일 포함) ○ 선수용 컴퓨터/모니터 전체 전원 ON	과제 이해 확인서 작성 과제/재점기준 공개
	14:00~17:00	○ A모듈 경기 진행 (3시간)	인터넷사용 1회(5분)
	17:00~17:30	○ 선수 작품 제출 및 백업 ○ 선수용 컴퓨터/모니터 전체 전원 OFF ○ 채점 준비	심사위원
	17:30~20:00	○ A모듈 채점	공개채점실, 심사위원
2일차	08:00~11:30	○ B모듈 과제 및 채점기준 수정 (최종 확인 및 인쇄, 배포준비) ○ 선수제공파일 준비 (USB복사)	심사위원, 비공개
	12:30~12:45	○ 선수입실 ○ 선수용 컴퓨터/모니터 전체 전원 ON	자료 반·출입 불가
	12:45~13:00	○ B모듈 수정과제 및 선수제공파일 배부
	13:00~13:30	○ 과제 수정사항 설명 및 공개 질의응답	지도교사 참여 과제/채점기준 공개 질의응답 내용 기록 과제 이해 확인서 작성
	13:30~16:30	○ B모듈 경기 진행 (3시간)	인터넷사용 1회(5분) A모듈 채점(공개채점실)
	16:30~17:00	○ 선수 작품 제출 및 백업 ○ 선수용 컴퓨터/모니터 전체 전원 OFF ○ 채점 준비	심사위원
	17:00~20:00	○ B모듈 채점	공개채점실, 심사위원
3일차	08:00~11:30	○ C모듈 과제 및 채점기준 수정 (최종 확인 및 인쇄, 배포준비) ○ 선수제공파일 준비 (USB복사)	심사위원, 비공개
	12:30~12:45	○ 선수입실 ○ 선수용 컴퓨터/모니터 전체 전원 ON	자료 반·출입 불가
	12:45~13:00	○ C모듈 수정과제 및 선수제공파일 배부
	13:00~13:30	○ 과제 수정사항 설명 및 공개 질의응답	지도교사 참여 과제/채점기준 공개 질의응답 내용 기록 과제 이해 확인서 작성
	13:30~17:30	○ C모듈 경기 진행 (4시간)	인터넷사용 1회(5분) B모듈 채점(공개채점실)
	17:30~18:00	○ 선수 작품 제출 및 백업 ○ 선수용 컴퓨터/모니터 전체 전원 OFF ○ 채점 준비	심사위원
	17:30~20:00	○ C모듈 채점	공개채점실, 심사위원
4일차	08:00~11:00	○ 이벤트 경기 과제 출제 (심사위원) 및 공개
	12:00~12:30	○ 선수 입실 및 이벤트 경기 팀 추첨 ○ 이벤트 경기 과제 배부 및 질의응답	과제 이해 확인서 작성
	12:30~16:30	○ 이벤트 경기(Team Challenge) 진행 (4시간)	C모듈 채점(공개채점실)
	16:30~17:00	○ 경기 강평 ○ 팀별 과제 제출 및 이벤트 경기 채점 준비	경기종료 확인서 작성 직종 관계자 전원 참석
	17:00~18:00	○ 이벤트 경기 공개 채점 ○ 우수작 발표 및 시상	상장 준비 경기장 내 직종 관계자 전원 참석
		○ 기념 촬영	직종 관계자 전원
	19:00~20:00	○ C모듈 채점	공개채점실, 심사위원
5일차 (8.29,목)	09:00~12:00	○ C모듈 채점	공개채점실, 심사위원
	12:00	○ 채점결과 발표 및 공지	심사위원 1시간 대기
	경기장별 일정	○ 시상식

※ 시간 및 내용은 대회 사정에 따라 일부 변경될 수 있음.

나. 경기 전/중/후

□ 경기 전

○ 경기 전 기능경기관리규칙, 직종설명서, 심사(장)위원 경기진행 및 심사채점 계획서에 따라 선수확인, 등번호 부여 및 자리 배치, 장비 점검, 소프트웨어 변경(또는 추가) 설치 등의 절차를 수행한다.

○ 등번호 추첨 및 활용

- 선수는 경기장 최초 입실 시 무작위 추첨방식으로 직접 등번호를 선택하고, 해당 등번호와 일치하는 곳을 선수의 경기 공간으로 배정한다.

- 채점 시에도 선수 등번호 체계를 사용하며, 채점 비번호를 별도로 부여하지 않는다.

○ 장비 점검 및 S/W 확인‧설치

- 경기장 시설목록 외 소프트웨어는 원칙적으로 사용할 수 없다. 단, 선수의 요청이 있는 경우, 심사위원 전원 합의로 정품 소프트웨어를 설치할 수 있고, 심사위원 입회하에 경기 시작 전에 미리 설치해야 한다.

- 선수 개인별 키보드 및 마우스는 반입을 허용하되, 저장기능이나 통신기능이 없는 것에 한한다.

- 선수에게 허용된 물품 이외에는 경기장에 반입하거나 반출할 수 없다. 반입/반출 여부가 불확실한 물품이나 장비의 경우, 선수가 사전에 승인을 반드시 요청해야 하고, 심사(장)위원은 규칙 및 합의사항에 따라 허용 여부를 결정한다.

○ 심사(장)위원은 경기진행 및 심사채점 계획서에 명시된 요구사항, 주의 및 참고사항, 경기시간 계획 등을 모든 선수에게 공지한다.

- 심사위원용 컴퓨터에서 과제별로 제시된 주 평가용 브라우저를 사용하여 평가하며, 선수가 다른 종류의 브라우저로 작업하거나 확인함으로 인해 발생한 문제는 선수의 책임이다.

- 선수는 반드시 과제지시사항에 따라 과제를 수행/제출해야 하며 이를 준수하지 않아 발생하는 문제(잘못된 경로, 잘못된 파일명, 링크오류 등)로 인한 감점 등은 선수의 책임이다.

○ 심사장은 심사위원의 주관적/객관적 평가항목과 평가점수가 고르게 편성하고 평가할 수 있도록 관련 규칙과 합의사항 등에 근거하여 심사조를 편성할 수 있다.

○ 심사장은 경기 전 모든 점검과 교육을 마친 후, 심사(장)위원 경기진행 및 심사채점 계획서의 주요 내용을 다시 한번 강조하고 심사위원과 선수의 서명을 받아 경기장 내 공개된 장소에 게시한다. 이를 위해, 심사장은 심사(장)위원 경기 진행 및 심사채점 계획서를 홈페이지 등을 통해 사전에 공개하여 내용을 알 수 있도록 해야 한다.

□ 경기 중

○ 기능경기대회 관리규칙, 직종설명서, 심사(장)위원 경기진행 및 심사채점 계획서에 따라 지정된 과제 순서에 따라 경기를 진행한다.

○ A모듈 최종 과제(문제) 선정 방법

- A모듈 경기 시작 전에 A모듈 과제 구성에 맞도록 A모듈 문제은행에서 각 기술 범위와 난이도에 따라 문항수에 맞춰 공개 추첨방식으로 문항을 선정하여 구성한다.

- 선정된 문제로 구성한 최종 A모듈 과제를 마이스터넷 및 직종협의회, 지도교사, 선수에게 공지한다.

○ 과제선정 방법

- 대회 30일 전 과제선정심의위원회에서 선정되어 공개된 3개의 과제 중, 최종 경기과제를 대회 1일차에 공개 추첨한다.

- 참석자(심사위원, 지도교수, 선수) 중 1인을 무작위로 선정하여 추첨자로 결정하고, 추첨방식은 탁구공(또는 종이)에 지역(시‧도)명을 표기하고 이를 불투명한 상자에 담아 추첨한다.

- 최종 과제선정 결과를 마이스터넷 및 직종협의회, 지도교사, 선수에게 공지한다.

○ 과제 수정 방법

- 과제 수정은 전체 심사위원이 참여하고, 별도로 마련된 공간에서 심사장이 배석하여 비공개로 수정한다. 심사위원을 채점조와 과제수정조로 나누어 운영하는 경우에도 과제수정 내용은 전체 심사위원의 합의로 결정한다.

- 심사위원은 경기시작 시간을 고려하여 모듈별 과제를 비롯하여 채점기준표 및 선수제공파일을 수정‧보완한다.

- 모듈별 수정 과제 및 선수제공파일, 채점표 등에 대한 오류 여부를 검증한 후, 최종 수정 과제를 출력하고 선수제공파일을 선수별 USB에 복사하여 준비한다.

- 경기 시작 후, 심사장 또는 심사장의 요청을 받은 심사위원이나 관리요원은 모듈별 최종과제 및 채점기준표를 경기장 밖에 게시하고, 마이스터넷 및 직종협의회 밴드에 공개한다.

- 과제 수정 범위 및 방법

* A모듈은 과제를 수정하지 않는다.

* B모듈, C모듈 과제 수정은 웹디자인 및 개발 직종의 특성과 변별력 등을 고려하여 모듈별로 30% 범위로 제한하며, 모듈 수행시간 및 배점은 변경하지 않는다.

* 과제 수정 방법

① 과제출제기준 적합 여부를 검토하고, 문제점(오‧탈자 및 논리적 오류 등)을 수정한다.

② 공개된 3개 과제 중 선정되지 않은 2개의 과제 내용을 이용하여 과제 원안의 흐름을 흩트리지 않는 범위 내에서 과제를 수정한다.

③ 과제 원안의 수준(또는 난이도)을 고려하되, 산업현장의 흐름을 반영하여 매우 높거나 낮은 수준(또는 난이도)의 수정은 지양한다.

④ 경기장 환경에서 수행하기 어렵거나 불가능한 부분을 제외한다.

- 심사위원은 수정의 범위와 내용을 제안할 수 있고, 토론 등의 방법으로 합의된 결과를 최종 수정과제의 내용으로 결정한다. 이때, 특정 심사위원의 의견이 과도하게 반영되지 않도록 주의하며, 여러 심사위원의 의견이 골고루 반영될 수 있도록 한다.

- 심사장은 심사위원 중 1인을 서기로 지정하여 수정과정에서 발생하는 의견 및 합의 내용을 기록하고 최종 수정과제 파일을 작성하게 한다. 과제수정이 완료되면 심사장은 전체 심사위원을 소집하여 수정 내용을 설명하도록 하고, 오류 검증 및 확인 절차를 갖는다.

- 과제수정이 완료될 때까지 모든 심사위원(심사장 포함)은 휴대전화 또는 녹음(촬영)기 등을 휴대할 수 없으며 부심사장(또는 관리위원)이 수거하여 별도로 보관한다.

- 정해진 시간 내에 수정을 완료하지 못할 것으로 예상되는 경우, 경기일정 등을 고려하여 심사장과 부심사장이 현재까지 논의된 수정안을 검토하여 확정한다.

○ 심사(장)위원의 경기진행 요령

- 심사장은 원활한 경기진행을 위해 모듈별 수정과제 설명 및 질의응답을 전담하는 심사위원을 배정할 수 있고, 해당 심사위원은 선수들에게 합의된 내용만을 전달하거나 답변해야 한다.

- 심사장은 효율적인 경기진행을 위하여 심사위원을 2~4개조(감독조, 휴식조, 과제수정조, 채점조 등)로 나누어 운영할 수 있다.

* 감독조는 경기장 내에서 경기진행 및 감독, 선수 애로사항 해결 등의 직무를 수행한다. 또한 감독조에 속한 심사위원은 경기 진행 중 휴대전화를 사용할 수 없고, 경기 종료 후 선수별 과제 제출 상황 등을 확인하고 이상 유무를 심사장에게 보고한다.

* 휴식조는 다른 심사위원과의 교대 시까지 자유롭게 휴식을 취하거나 식사를 할 수 있다. 단, 경기장 주변을 이탈하지 않아야 하고, 특정 선수의 경기력 및 채점 결과 등 경기 전반에 관련된 사항을 직‧간접적으로 제3자에게 언급하지 않아야 한다.

* 채점조와 과제수정조는 타 심사위원들의 위임을 받은 심사위원들로 구성하되, 심사장이 그 비율을 조정할 수 있다. 단, 채점조는 합의채점 시에만 한정하여 운영한다.

* 심사장은 위 모든 사항을 비롯하여 심사위원의 업무 수행 전반을 관리‧감독하고, 필요 시 관리요원 및 기능경기팀과의 소통으로 원활한 경기진행을 주도한다.

- 심사(장)위원은 선수와 같은 학교에 재학 중인 학생이나 지도교사 등 외부인이 경기 중인 선수에게 접근하지 못하게 하고, 선수 상호 간에 대화를 나누거나 작품과 관련된 파일 등을 교환하지 못하게 한다.

- 경기 중에 경기 시간을 변경할 때는 경기 시간의 2/3 경과 이전에 기능경기대회 관리규칙에 따라 변경한다.

- 기타 경기 진행과 관련된 사항은 관련 규칙에 따라 심사위원의 합의에 따라 결정하고 조치하며 합의가 이루어지지 않을 경우 상위에 보고 절차를 통하여 결정한다.

○ 선수의 경기진행 요령

- 선수는 어떤 경우에도 저장장치를 소지하고 있거나 사용할 수 없다(적발 시, 부정행위로 간주하여 퇴장 조치함).

- 선수는 최소한 경기 시작 10분 전에는 입실을 완료하고 심사위원의 지시에 따라 경기시간을 준수하여 주어진 과제를 수행한다.

- 모듈별 경기 종료 선언 전까지 자신의 작품을 심사위원이 제공하는 선수별 USB에 직접 복사하여 제출한다. 제출한 작품의 작동 여부는 선수 스스로 책임져야 하고 심사위원은 절대로 선수의 작품을 수정하거나 보완하지 않는다.

- 선수는 경기 중에 손을 들어 심사위원에게 질의할 수 있고, 심사위원은 ｢질의/응답 기록지｣를 활용하여 모든 질문과 답변 내용을 기록한다. 이 과정에서 전체공지가 필요한 내용이라고 심사위원이 판단한 경우는 전체 선수에게 일괄 공지하고 기록으로 남겨 경기 후 누구나 열람할 수 있도록 한다.

- 경기 중 화장실 출입이 필요한 경우, 선수는 심사위원에게 손을 들어 직접 의사표시를 하고 심사위원은 선수를 화장실까지 안내하여 부정행위 또는 불미스러운 사고가 발생하지 않도록 한다. 단, 경기 중 화장실 출입에 소요된 시간은 선수의 경기 시간에 포함하며 별도의 추가시간을 제공하지 않는다.

- 경기 중 장비(컴퓨터)의 이상 현상을 감지한 선수는 심사위원에게 해당 사실을 알려야 하고, 장비 자체의 결함으로 판명된 경우에만 심사장의 확인을 받아 장비를 교체 또는 수리할 수 있다. 이때 소요된 시간은 선수의 경기 시간에 포함하지 않으며, 휴식 시간을 이용하여 소요된 시간만큼 경기 시간을 추가로 제공한다.

- 선수는 경기 중 돌발 상황에 대비하여 작업내용을 수시로 저장 또는 백업하여야 하고, 컴퓨터 메모리의 한계를 넘는 수준의 작업을 동시에 수행하여 컴퓨터가 멈추거나 이상 작동을 하지 않도록 스스로 관리해야 한다. 이를 간과하여 발생한 문제는 선수 본인의 책임이며 복구에 소요된 시간을 추가로 제공하지 않는다.

- 선수는 경기 진행 중 심사위원석에 마련된 컴퓨터를 이용하여 5분 동안 인터넷을 이용한 정보를 검색할 수 있다. 단, 심사위원이 배석한 상태에서 일반적인 정보만을 검색할 수 있고, 미리 웹상에 저장해두거나 기록해 둔 자료를 검색하는 것은 금지한다. 심사위원은 선수가 검색한 내용을 별도의 일지에 기록하며, 정보 검색에 소요된 시간은 선수의 경기 시간에 포함하며 별도의 추가시간을 제공하지 않는다.

- 선수는 5분 동안 인터넷을 이용한 정보 검색 시 AI 서비스를 이용할 수 있다. 단, 미리 생성·저장하거나 기록한 내용을 검색하는 것은 금지한다.

- 선수가 제출한 작품은 동일한 환경의 다른 컴퓨터에 복사하여 실행하여도 정상적으로 작동해야 하고 이를 선수 스스로가 보장하여야 한다.

- 선수는 작품 제출 시 복사 오류, 덮어쓰기 오류 등이 발생하지 않도록 주의하여야 하며, 심사위원은 복사 과정에서 USB 또는 컴퓨터 오류로 인한 문제가 발생한 경우 심사장에게 문의하여 조치한다.

- 선수는 경기 중 심사위원이나 집행위원의 지시에 따라야 하고 질서를 지키며 안전사고 예방에 협조해야 한다.

□ 경기후

○ 채점 과정에서 ｢채점 시 유의사항｣ 및 ｢채점기준표｣상의 문제점 등을 발견한 때는 심사위원 전원의 합의에 따라 합리적이고 객관적으로 채점하고, 그 사항을 대회집행본부에 통보한다.

○ 각 모듈별 과제 수행시간이 종료되면, 심사위원은 선수가 직접 본인들의 작품을 USB 저장장치에 저장하도록 하여 수거한다.

- 각 모듈 작업이 종료된 직후 채점하는 것을 원칙으로 한다. 단, 심사장은 경기진행 일정이나 경기장 환경 등을 고려하여 채점 시간을 조정할 수 있다.

6		채점에 관한 사항
	ㅊ

가. 채점방법

○ 과제 별로, USB 저장장치를 이용한 수거 방식을 통해 제출된 작품을 선수 컴퓨터가 아닌 동일한 사양의 심사위원 컴퓨터에서 채점하는 것을 원칙으로 한다.

○ 각 모듈별 작품 수거가 완료되면 과제 출제(수정)위원이 공개한 채점기준에 따라 채점한다. 합의채점의 경우 별도의 채점조를 운영할 수 있으며, 독립채점은 심사위원 전원이 참여한다.

- 독립채점

* ｢기능경기대회관리규칙｣ 제87조(채점요령)에 따라 심사위원 전원이 전자채점 단말기를 사용하여 4등급제로 채점을 진행한다.

- 합의채점

* 객관적 채점항목에 대한 득점/실점/감점 여부는 심사위원의 합의로 결정한다.

* 채점항목에 대한 실점/감점 사유를 별지에 기록하여 선수나 지도교사의 이의 제기 시 정확히 답변할 수 있도록 한다.

○ 과제에서 지정한 방법(웹브라우저 및 주소 등)으로 채점을 진행하되, 확인이 불가능하거나, 링크에러 또는 기타에러 등으로 페이지를 열 수 없어 채점이 불가능한 경우에는 제출 여부와 관계없이 해당 항목을 0점 처리한다.

○ 심사위원 담합방지

- 상대적으로 배점이 높은 합의채점을 선행함으로써 발생하는 부작용을 최소화하기 위하여 ｢독립채점 후 합의채점｣ 진행을 원칙으로 한다. 단, 심사장은 전체 경기일정 등을 고려하여 채점순서를 조정할 수 있다.

- 대회 시작 전 공정하고 투명한 심사채점을 강조하여 언급하고, 심사장을 포함한 심사위원이 선수별 득점 현황 정보를 알 수 없도록 철저한 보안관리에 힘쓴다.

- 심사장은 심사위원들 간의 담합이나 과도한 몰아주기 등의 정황 등을 포착한 경우 대회규칙에 따라 경고 또는 그 이상의 법적 조치를 취할 수 있다.

○ 채점 중 이의제기

- 채점 과정 중, 선수나 지도교사는 직접적인 발언을 통한 이의제기로 심사채점을 중단 또는 지연시키지 않아야 하고, 관련 내용을 서면으로 심사장(또는 부심사장)에게 전달하여 답변을 받아야 한다.

- 이의제기는 선수 또는 지도교사만 할 수 있으며, ｢기능경기대회관리규칙｣에 따라 동일한 내용에 대한 이의제기는 최대 2회까지만 가능하다.

○ 채점표 및 채점 결과 문서 관리

- 채점표를 수기로 작성하는 경우, 심사위원 2명이 동시에 작성하고 추후 비교‧검토를 통해 이상 유무를 반드시 확인한다.

- 심사위원이 작성한 모든 보조채점표는 부심사장에게 제출하여 채점시스템에 입력 및 출력하게 하고, 심사위원은 출력된 채점표와 심사위원별 수기 채점표를 상호 비교‧검토 후 이상이 없는 경우 서명 후 부심사장에게 모든 채점표를 제출한다.

* 심사위원은 채점표를 촬영하거나 복사, 이기, 타인에 유출, 선수별 채점표 열람 등을 금지한다.

○ 이벤트 경기(team challenge)에 참여하여 성실하게 임하는 선수에게는 2점을 부여하여 심사채점 결과에 반영한다. 단, 참가하지 않거나, 참가하더라도 성실하게 임하지 않는 선수에 대한 불이익은 선수 본인에게 책임이 있다.

○ 기타 채점 관련 사항은 ｢기능경기대회관리규칙｣에서 정한 바에 의한다.

나. 배점기준

○ 모듈별 배점 기준에 따르며, 독립채점 항목의 배점 비율은 B모듈 50%를 유지하고, C모듈은 20% 이내를 유지한다.

구분	과제내용	시간	배점	비고
A모듈	Speed Test	3	30	A모듈 과제구성에 따라 난이도별 문항수 적용
B모듈	Design & Publishing	3	30	독립채점 배점 비율 50% 유지
C모듈	Client-side & Server-side Programming	4	40(38)	지방대회 (40점), 전국대회 (38점), 독립채점 배점 비율 20% 이내
이벤트경기	Team Challenge	4	2	전국대회만 적용

○ 모듈별 채점항목 개수 및 점수 상한제

- 각 모듈 당 채점항목의 개수는 20개 이내로 제한하고, 채점항목 간 배점 차이는 1점을 초과할 수 없다.

- 채점항목에 부분채점항목을 두는 경우, 부분채점항목의 개수는 5개 이하로 제한하고 부분채점항목 간 배점은 동일해야 한다.

* 부분채점항목의 배점은 0.5점 또는 1점에 한하여 부여한다.

구분	채점항목	배점
개선전	메인페이지에 로그인을 할 수 있도록 입력폼이 완성되어 있고, 회원이 로그인할 수 있는가?	1.0
	비회원이 로그인을 시도하는 경우 회원가입을 유도하는 메시지를 보여주는가?	0.5
	비회원이 회원가입 버튼을 클릭했을 때, - 회원등록폼 페이지를 보여주는가? (0.5점) - 필수 입력 요소를 누락하면 하이라이트 되는가? (1점)	1.5
개선후	로그인/회원가입 기능의 완성도 (각 1점) 1. 회원이 로그인할 수 있다. 2. 비회원 로그인 시도 시, 회원가입을 유도하는 메시지를 보여준다. 3. 회원가입 시, 필수입력 요소를 누락하면 하이라이트 처리를 한다. ※ 로그인 버튼이 없거나 ID입력이 불가능하면 모두 0점	3.0

다. 채점 기준표(예시)

○ 붙임6의 ｢과제 및 채점기준표 예시｣를 참고한다.

○ 붙임6에서 생략된 ‘독립채점 항목 채점기준’의 예시는 다음과 같다.

채점항목

배점

웹브라우저의 너비가 320px에서 1330px로 확장했을 때 메인페이지 레이아웃의 반응이 적절한가?

점수	상세채점기준
1	레이아웃이 고정되어 있거나 매우 제한된 크기로 조정되어 콘텐츠가 모바일, 태블릿 및 데스크톱에 맞지 않는다.
2	브라우저 크기를 조정할 때 일부 요소가 레이아웃을 방해한다.
3	웹 사이트 요소는 브라우저 크기 조정 시 원활하게 반응한다.
4	웹 사이트가 반응하도록 변경하면 웹사이트의 유용성이 향상된다.

1.0

디자인을 손상시키지 않고 위젯을 사이드 바에 추가할 수 있는가?

점수	상세채점기준
1	위젯을 추가할 수 없거나 추가할 때 디자인이 손상된다.
2	위젯을 추가할 수 있고 디자인은 여전히 일관성이 있지만 완벽하지 않다.
3	디자인을 손상시키지 않고 위젯을 추가할 수 있다.
4	추가된 위젯은 전체 디자인에 잘 통합되어 보여진다.

1.0

갤러리는 고급스럽고 현대적인 모양과 느낌을 가지며, 디자인이 매력적인가?

점수	상세채점기준
1	갤러리 페이지는 존재하지만, 디자인을 확인할 수 없다.
2	갤러리 페이지의 디자인이 창의적인 느낌이 부족하다.
3	갤러리 페이지의 디자인은 창의적이나, 조화롭지 못하다.
4	갤러리는 고급스럽고 현대적인 모양과 느낌이 있으며 창의적이고 매력적이다.

0.5

타이포그래피는 가독성이 높게 디자인되어 있는가?

점수	상세채점기준
1	1개의 글꼴과 크기로 구성되어 있다.
2	2개 이상의 글꼴과 크기를 사용하여 문단을 구성하고 있다.
3	2개 이상의 글꼴과 크기를 사용하고, 줄간격, 색상 등을 적절히 사용하고 있다.
4	글꼴, 줄간격, 색상 등이 잘 어우러지며 가독성이 높게 디자인되었다.

0.5

애니메이션은 사용자의 인지력을 증진시키고, 창의적으로 디자인되었는가?

점수	상세채점기준
1	1가지 기능의 간단한 애니메이션을 적용하고 있다.
2	2가지 이상의 기능으로 애니메이션을 적용하고 있다.
3	2가지 이상의 기능으로 제작된 애니메이션의 디자인이 창의적이나, 사용자의 인지력 증진에는 다소 부족하다.
4	2가지 이상의 기능으로 제작된 애니메이션의 디자인이 창의적이고, 사용자의 인지력을 증진하도록 제작되어 있다.

1.0

라. 채점 공개에 관한 사항

○ 대회본부의 승인을 얻어 가입상자 명단을 경기장에 게시한다.

○ 채점결과 발표 후, 이의 신청은 공식적으로 경기장을 방문한 경우에만 가능하며, 문자메시지나 SNS 등을 활용한 경우는 이의 신청으로 인정하지 않는다.

7		안전 및 기타사항
	ㅊ

□ 안전관리 일반 사항

○ 경기 시작 전, 비상구 및 소화기 위치, 비상 상황 발생 시 대처방안 등에 관한 안전교육을 진행한다.

○ 대회 중, 각종 재해 또는 전염병 확진자 발생 시 심사장은 ｢기능경기대회 관리규칙｣ 제79조 1항 5호 등에 따라 적절한 조치를 수행하며, 선수는 심사위원 및 관리위원의 지시에 따른다.

○ 선수는 경기 전과 경기 중에 장비의 이상 유무를 반드시 확인하여 이상이 있을 경우 조치 후 작업에 임하여야 한다.

○ 선수는 경기장 및 작업대를 청결하게 유지하고, 안전한 작업이 이루어지도록 스스로 노력한다.

□ 과제 공통 사항

○ 시스템 및 작업 환경 이해 및 활용 능력

- 웹디자인 및 개발 과제 수행을 위하여 선수는 다음의 내용을 이해하고 관련 지식과 기술을 갖추어야 한다.

* 컴퓨터의 구동 및 종료, 데이터(폴더 및 파일) 취급 등과 관련된 일반적인 컴퓨터 활용 능력

* 컴퓨터 작업환경(메모리 등의 한계)을 이해하고 올바르게 활용하는 능력

(예) 지나치게 크거나 많은 파일(또는 프로그램)을 한꺼번에 열거나 실행하여 메모리 부족 등으로 시스템이 느려지거나 정지되는 문제 등에 대한 발생 가능성을 사전에 예상하고 주의한다.

* 웹디자인 및 개발 과제 수행에 필요한 소프트웨어 중 선수 본인이 사용하는 소프트웨어의 활용 능력

* 웹사이트의 기본적인 작동 원리와 이에 관련된 지식 및 기술

* 웹서버 구동환경과 경로 등의 관계를 이해하고 이를 바탕으로 작품을 제작하여 구동하는 능력

* 작품을 평가하는 기본적인 환경에 대한 이해와 이를 고려한 작품 제출과정 및 방법, 제출한 작품의 올바른 작동을 보장하는 능력

* 경기 중 작품의 백업주기와 백업파일 생성에 관한 이해와 실행 능력

- 심사(장)위원은 경기 전 또는 경기 중 선수들에게 경기장 환경 및 과제결과물(파일) 제출 방법, 시스템 활용 주의사항 등을 구두로 교육할 수 있다. 단, 작품 제작에 사용되는 소프트웨어 활용방법 등은 경기 전 또는 경기 중 어떤 경우라도 심사(장)위원이 지도할 수 없다.

○ 모든 과제의 평가는 각 모듈별 채점기준에 따른다.

○ 과제 출제 시 주의사항

- 과제 출제 기본 방향

* 과제 출제 시에는 직종설명서의 과제 정의 및 과제 별 세부 작업 내용 범위 내에서 창의적으로 출제한다.

* 과제 출제 시 직종설명서의 과제 설명 및 범위, 평가요소 등을 벗어나는 내용을 출제하지 않는다.

* 과제에서 언급하지 않은 내용을 채점기준에 포함하지 않는다.

- 소프트웨어 버전(version)

* 지방대회는 직전 전국기능경기대회의 버전에 따르고, 전국대회는 과제 출제 전 공지된 ｢과제출제기준｣에 명시된 버전을 따른다.

* ｢과제출제기준｣에 별도로 명시되어 있지 않은 경우에는 대회 6개월 전 최신 안정화 버전을 기준으로 한다.

○ 과제 수행 및 제출 방법

- 과제 수행 방법

* 선수는 과제 지시사항에 따라 선수제공파일만 사용하여 모든 과제를 수행한다.

* 선수는 심사위원용 컴퓨터에서 모든 선수의 작품이 평가된다는 점을 알아야 한다. 따라서 선수의 작품이 동일한 환경의 다른 컴퓨터에서도 정상적으로 작동하도록 선수가 스스로 보장하여야 한다.

* 선수는 경기를 위해 제공되지 않았거나 시스템에 존재하는 허용되지 않은 파일 등을 임의로 사용하여 작품을 제작한 경우, 올바른 작품이 아닌 것으로 간주되어, 평가 시 해당 항목에 대해 0점(객관적 항목) 또는 최하점(주관적 항목)을 받을 수 있음을 알아야 한다.

* 선수는 과제 지시사항에서 화면의 크기, 아이디 및 패스워드, 제출방법 등이 별도로 지정된 경우 이를 반드시 준수해야 한다. 아울러 공식적인 작품 제출방법을 따르지 않고 독자적인 방법으로 제출하여 심사위원이 평가할 수 없는 경우에는 해당 과제 또는 해당 채점항목에 대해 0점이 부여될 수 있음을 알아야 한다.

* 선수는 주어진 시간보다 일찍 모듈 작업을 완성한 후에는 다른 모듈 작업을 수행할 수 있다. 단, 미리 수행하려는 모듈 작업은 미확정 상태의 작업임을 감안하여야 한다.

* 선수는 다른 모듈 작업을 수행 중이라 하더라도 반드시 정해진 시간에 정해진 모듈 작업의 결과물을 지시된 방법에 따라 제출하여야 한다.

* 기타 명시되지 않은 사항에 대해서는 일반적인 웹사이트 제작 방법 및 산업표준에 근거하여 제작한다.

- 과제 제출 방법

* 선수는 과제 지시사항 또는 심사(장)위원의 지시에 따라 작품을 제출해야 하며, 제출된 작품은 채점용 컴퓨터에서도 동일하게 작동하도록 선수 스스로 책임지고 보장하여야 한다. 단, 작품을 저장하는 USB 저장장치의 오류로 인하여 제출한 작품에 문제가 발생한 경우에는 심사(장)위원의 합의에 따라 별도의 조치를 취할 수 있다.

○ 과제 평가 방법

- 심사위원은 매 모듈과제가 끝나고 작품제출이 완료된 후 심사장의 지시에 따라 모듈별 채점을 시작한다. 단, 경기장 및 시스템 환경에 따라 시간조정이 필요한 경우 채점 시간을 조정할 수 있다.

- 심사위원은 과제 및 채점기준, 심사(장)위원 직무수행계획서, 기능경기관리규칙 등이 정한 바에 따라 모든 채점을 진행한다.

□ 경기운영 기본계획

○ 심사(장)위원과 선수는 진실성, 투명성, 공정성, 파트너십의 정신으로 경기에 임한다.

○ 기능경기대회 규칙, 직종설명서, 과제출제기준, 시행자료, 경기과제, 채점기준표, 마이스터넷 공지사항 등 관련 근거에 의해 경기를 운영한다.

- 심사위원과 선수는 위 관련 근거를 사전에 열람하여 숙지한다.

- 관련 근거에 존재하지 않거나 쟁점 사안 발생 시에는 심사위원 전원 합의로 결정하고, 심사위원 부재 등으로 전원 합의가 어려운 경우에는 심사장이 결정한다.

○ 심사장은 원활한 경기운영을 위해서 심사위원에게 특정 임무를 부여할 수 있다.

○ 심사위원은 과제수정 및 심사채점이 진행 중에 외부인과 통신 및 개별 접촉 등을 원칙적으로 금지하며, 공정한 경기진행을 위하여 모든 심사위원의 통신수단 장비를 회수한다. 단, 부득이한 용무로 휴대폰을 사용할 경우 공개된 장소에서 사용해야 한다.

○ 심사위원은 선수의 어떠한 작업 상황에도 일체 개입할 수 없으며, 선수와 대화 시에도 2명의 심사위원이 함께 참여한다.

○ 이의제기 발생 시에는 기능경기관리규칙에 따라 처리한다.

○ 경기장 관람객은 선수와 대화를 시도하거나 이에 준하는 신호를 보내지 않아야 하며, 부적절한 행위가 적발되면 해당 선수는 부정행위자로 판단하여 조치한다.

○ 지방기능경기대회의 경기운영은 직전년도 전국기능경기대회의 ｢심사(장)위원 경기진행 및 심사채점 계획서｣를 참고한다.

□ 직종발전 활동

○ 경기와 채점이 모두 끝난 후 심사위원들은 토론을 통해 빠르게 발전하는 직종의 특성을 반영하여 직종설명서 및 과제 출제 개선안에 대해 토의할 수 있다.

○ 토의에서는 직종설명서, 소프트웨어 버전, 지급재료, 과제출제 등에 대해 논의하여 최신 기술 트랜드와 국제기능올림픽대회의 변화를 적절히 반영할 수 있는 방안을 논의할 수 있다.

○ 심사장은 심사위원들의 의견을 정리하여 경기결과보고에 포함하여 보고하고, 차기 년도 대회에 반영될 수 있도록 건의한다.

□ 만족도 향상 방안

대상	만족도 향상 계획
선수	ㅇ 경기 시작 전, 수정과제에 대한 충분한 설명과 질의응답을 진행한다. ㅇ 선수의 인력을 존중하고 경기장 내 편의를 최대한 보장한다.
지도교사	ㅇ 공정한 경기를 해치지 않는 범위 내에서 경기 준비 및 진행 상황에 대한 정보를 직종협의회에 수시로 제공한다. ㅇ 원활한 경기 진행을 방해하지 않는 범위에서 지도교사 의견을 최대한 반영하도록 노력한다. ㅇ 경기장 개방 및 채점 진행과정 공개 등으로 경기 운영에 대한 신뢰도를 향상한다.
관람객	ㅇ 경기를 방해하지 않는 범위 내에서 별도의 관람로를 마련하여 작업과정 및 작품 관람을 최대한 공개하여 직종에 대한 이해를 돕도록 배려한다.

경기진행 안전관리 관련 주요 사항

Ⅰ

전기 및 장비 사용 안전

❏ 감전 예방

❍ 컴퓨터, 모니터, 노트북 등 모든 전기 장비는 반드시 접지된 콘센트에 연결

❍ 전원 케이블이나 멀티탭의 피복 손상 여부를 수시로 확인하고, 문어발식 연결을 지양

❍ 음료 등을 컴퓨터 주변에 두지 않아 액체로 인한 감전 및 합선 사고 예방

❏ 장비 과열 및 화재 방지

❍ 컴퓨터 본체, 모니터 등의 통풍구가 막히지 않도록 주변을 정리하여 과열 방지

❍ 장시간 사용하지 않을 시에는 모니터 전원을 끄는 것을 권장

❍ 작업장 내 소화기 위치를 숙지하고, 비상시를 대비

II

작업 환경 및 자세 안전

❏ VDT 증후군 예방 (컴퓨터 단말기 증후군)

❍ 모니터는 눈높이에 맞게 조절하고, 화면과 눈의 거리를 50cm 이상 유지하여 눈의 피로를 줄임

❍ 손목과 팔꿈치가 책상과 수평을 이루도록 의자 높이를 조절하고, 손목 받침대 사용을 권장

❍ 장시간 같은 자세로 작업하는 것을 피하고, 경기 중 1~2시간마다 가벼운 스트레칭 실시

❏ 이동 및 작업 공간 관리

❍ 경기장 내에서는 책상 간 간격이 좁으므로 부딪혀 다치지 않도록 주변을 잘 살피고, 뛰지 않고 천천히 걸어 이동

❍ 의자 바퀴나 전선에 걸려 넘어지지 않도록 작업 공간 주변을 항상 정리정돈

❍ 불필요한 출력물이나 종이가 작업 공간에 쌓이지 않도록 관리

III

개인보호구 및 안전수칙

❏ 개인보호구 관리

❍ 웹디자인 및 개발 직종은 유해물질이나 기계적 위험요소가 적어 별도의 의무 보호구는 없으나, 다음 사항을 권장

❍ 시력 보호: 필요한 경우 청색광(블루라이트) 차단 안경 착용 권장

❍ 편안한 복장: 장시간 앉아서 작업하므로 혈액순환에 방해되지 않는 편안한 복장 착용

❏ 경기장 안전수칙

❍ 시설물 안전: 경기장의 장비나 시설물(컴퓨터, 책상 등)을 임의로 변경하거나 파손하지 않음

❍ 전기 안전: 콘센트나 전선에 이상이 발견될 경우, 즉시 손대지 말고 심사위원에게 보고

❍ 정리정돈: 경기 종료 후 자신의 작업 공간을 깨끗하게 정리하고, 폐기물은 지정된 장소에 처리

V

응급상황 대응체계

❏ 응급처치 및 연락망

❍ 구역별 기본 구급함(소화제, 두통약, 밴드 등) 비치

❍ 경기장 내 잘 보이는 곳에 119, 지정 병원 등 긴급 연락망 게시

❏ 상황 유형별 대응 절차

❍ 정전 발생: 당황하지 말고 심사위원의 지시에 따르며, 작업 내용은 수시로 저장하는 습관을 들여 데이터 유실을 최소화

❍ 컴퓨터 및 프로그램 오류: 손들고 조용히 심사위원에게 알려 기술적인 조치를 받음 (임의 조작 금지)

❍ 신체 이상(두통, 소화불량 등): 즉시 심사위원에게 알려 필요한 조치를 받음

❏ 예방 교육

❍ 경기 시작 전, 모든 참가자 대상 장시간 컴퓨터 작업 시의 건강관리 요령, 올바른 자세, 전기 안전 및 비상시 대처 요령에 대한 종합 안전 교육 실시

8		적용시기
	ㅊ

□ 시행시기 : 2026년 전국기능경기대회부터 적용한다.

【 주요 공지사항 】

○ 직종설명서의 내용은 과제출제 및 경기진행, 심사채점 과정 등에서 사전 예고 없이 일부 변경될 수 있음.

○ 직종설명서의 내용보다 경기과제, 채점기준표, 시행자료(시행 시 유의사항, 경기장시설 목록, 선수지참재료 목록, 선수지참공구 목록) 등이 우선함.

붙임1		사용재료 및 시설·장비목록

가. 선수 지급재료 목록

no.	재료명	규격	단위	수량		비고
				지방	전국
1	과제출력용지	A4	장	500	4,000	경기장 당
2	원형 스티커	USB 부착용 숫자 스티커	세트	1	2	경기장 당 번호: 01~50
3	봉인용 특수 스티커	컴퓨터 및 출입문 보안 스티커	장	30	100	경기장 당

나. 선수 지참공구(재료) 목록

no.	품명	규격	단위	수량		비고
				지방	전국
1	필기도구	제한없음	개	1	1	선택
2	유선 키보드 및 마우스 (USB허브 기능 및 저장 기능 불허)	컴퓨터용	개	1	1	선택
3	유선 헤드셋 (USB허브 기능 및 무선수신/저장 기능 불허)	컴퓨터용	개	1	1	선택
4	개인 음악파일* (사전 승인 및 사본 보관 필요)	MP3 등	개	-	1	선택
5	작품 백업용 USB 저장장치**	제한없음	개	1	1	선택

* 선수 개인이 지참한 음악파일을 컴퓨터에 저장하여 듣고자 할 경우, 선수는 경기 전 심사(장)위원에게 제출하여 음악파일의 진위 여부를 검증받아 저장할 수 있다. 단, 심사(장)위원은 반드시 음악파일의 사본을 별도로 보관하여야 한다.

** 선수가 개인작품을 백업하고자 할 경우, 경기가 완전히 종료된 후 심사위원의 지시에 따라 작품 백업용 USB 저장장치를 반입하여 복사할 수 있다. 단, 경기 중에는 USB 저장장치를 소지하거나 경기장에 반입할 수 없다.

다. 경기장 시설‧장비 목록

□ 직종설명서의 시설‧장비 목록에 명시된 소프트웨어만 사용한다.

○ 소프트웨어 버전은 당해년도 전국기능경기대회 과제 출제 전에 확정하여 출제기준에 포함하여 공개하고, 경기 전 시행자료로 공개한다.

○ 소프트웨어 버전 등을 변경하려는 경우, 선수가 정품S/W를 지참한 경우에 한하여 심사(장)위원의 검증과 입회하에 설치할 수 있다.

no.	장비명	규격		단위	지방		전국		비고
					활용 인원	수량	활용 인원	수량
1	선수PC	CPU	∙ Intel i7-14세대 이상	대	1	1	1	1	예비용 5세트 추가
		RAM	∙ 32G이상
		그래픽 카드	∙ NVIDIA RTX 40시리즈 이상 (8GB 이상)
		OS	∙ Windows 11, 64bit, 한글 (최신 업데이트 적용)
		SSD	∙ 512GB 이상
		키보드	∙ 유선 한글(103/106키)
		마우스	∙ 유선, 광학(Optical)
		모니터	∙ 24인치 듀얼모니터 (1인당 2대) - 해상도 및 색조가 동일해야 함
		기타	∙ 사운드카드 ∙ 헤드셋
		전원	∙ PC 셋트별 독립전원 구성
2	LAN공사	∙ 선수용 컴퓨터는 인터넷 연결 동시차단이 가능해야 함 ∙ 심사위원용 컴퓨터는 인터넷 상시 연결 ∙ 유선/무선 기가랜(1 Gbps)이상 (공유기 및 스위칭 장비 포함)		식	-	-	1	1	채점실 네트워크 분리구성
3	음향시설	∙ 스피커, 마이크(유선1, 무선1)		식	공용	1	공용	1
4	선수용 책상	∙ 1,200(W)×800(D)		개	1	1	1	1
5	선수용 의자	∙ 사무용(등받이, 바퀴)		개	1	1	1	1
6	심사위원 PC	∙ 선수PC와 동일 규격 (모니터 포함)		대	공용	1	공용	2	인터넷 상시연결
7	심사위원 책상	∙ 선수용과 동일 규격		개	공용	1	공용	2
8	심사위원 의자	∙ 선수용과 동일 규격		개	공용	2	공용	4
9	검색용 PC	∙ 선수PC와 동일 규격 (모니터 포함)		대	공용	1	공용	3	인터넷 상시연결
10	검색용 책상	∙ 선수용과 동일 규격		개	공용	1	공용	3
11	검색용 의자	∙ 선수용과 동일 규격		개	공용	1	공용	3
12	대형TV	∙ 85인치 이상 ∙ 지방대회는 빔프로젝터로 대체가능		대	공용	1	공용	2	심사위원 PC와 연결
13	화이트보드	∙ 1,800(W)×900(H)		개	공용	1	공용	1
14	컬러복합기	∙ 레이저, 2400dpi이상, 24ppm이상 ∙ 네트워크(유선랜) 지원 ∙ A3/A4 출력 가능		대	공용	1	공용	1
15	외장SSD	∙ 1TB 이상, 보안가능모델 ∙ USB 3.X (전송속도 1000MB/s, 대역폭 10Gbps) 이상 ∙ USB A-Type/C-Type 모두 지원		개	-	-	공용	1	반납제외
16	USB메모리	∙ 64GB 이상 ∙ USB 3.X (전송속도 1280MB/s, 대역폭 10Gbps)		개	1	1	1	1	공용 5개추가 반납제외
17	MS Office	∙ 2016 이상		개	1	1	1	1	S/W
18	한컴오피스	∙ 2018 이상		개	1	1	1	1	S/W
19	GIMP	∙ GNU Image Manipulation Program ∙ GIMP 2.10.X 이상 최신버전		개	1	1	1	1	S/W
20	Sublime Text	∙ Sublime Text 4		개	1	1	1	1	S/W
21	PhpStorm	∙ 최신 버전		개	1	1	1	1	S/W
22	Visual Studio Code	∙ 최신 버전		개	1	1	1	1	S/W
23	Google Chrome	∙ 최신 버전		개	1	1	1	1	S/W
24	bootstrap	∙ 최신 버전		개	1	1	1	1	S/W
25	XAMPP	∙ v8.2.0 Windows Portable		개	1	1	1	1	S/W
26	Laravel	∙ 최신 버전 (https://laravel.com/)		개	1	1	1	1	framework
27	jQuery	∙ 최신 버전 (https://jquery.com/)		개	1	1	1	1	library
28	jQuery UI	∙ 최신 버전 (https://jqueryui.com/)		개	1	1	1	1	library
29	NodeJS	∙ 최신 버전 (NodeJS (with npm))		개	1	1	1	1	S/W
30	React	∙ 최신 버전 (react-cli)		개	1	1	1	1	framework
31	Vue	∙ 최신 버전 (vue-cli)		개	1	1	1	1	framework
32	Zeal Doc	∙ 최신 버전 (https://zealdocs.org/)		개	1	1	1	1	tool
33	VSCode 확장팩	∙ 직종협의회 요청 확장팩		개	1	1	1	1	plug-in
34	Sublime Text 패키지	∙ 직종협의회 요청 패키지		개	1	1	1	1	plug-in
35	-prefix-free	∙ https://projects.verou.me/prefixfree/		개	1	1	1	1	plug-in
36	PC	∙ 선수PC와 동일 규격(모니터 포함)		대	공용	2	공용	2	심사위원 회의실用
37	책상	∙ 1,800(W)×600(D)		개	-	-	공용	8
38	의자	∙ 선수용과 동일 규격		개	-	-	공용	16
39	대형TV	∙ 85인치 이상		대	-	-	공용	1
40	컬러복합기	∙ 레이저, 2400dpi이상, 24ppm이상 ∙ 네트워크(유선랜) 지원		대	-	-	공용	1
41	멀티콘센트	∙ 6구(3,300W) 이상		개	-	-	공용	5
42	PC	∙ 선수PC와 동일 규격(모니터 포함)		대	-	-	공용	2	전국대회 채점실用
43	PC 책상	∙ 1,200(W)×600(D)		개	-	-	공용	2
44	채점용 책상	∙ 1,800(W)×450(D)		개	-	-	공용	6
45	의자	∙ 선수용과 동일 규격		개	-	-	공용	16
46	관람 의자	∙ 규격 제한 없음		개	-	-	공용	30
47	대형TV	∙ 85인치 이상		대	-	-	공용	1
48	멀티콘센트	∙ 4구(3,300W) 이상		개	-	-	공용	5

* 대회 사정에 따라 변동될 수 있으며, S/W는 시설‧장비 목록에 제시된 것만 사용 가능하고, 정확한 버전 정보는 과제출제기준에 별도 공지한다.

* 일부 소프트웨어 및 라이브러리(library), 툴(tool), 플러그인(plug-in) 등은 부심사장(지방대회는 심사장)이 준비하여 경기 시작 전에 별도로 제공한다.

구분	제공사항
XAMPP	※ 최신 Windows Portable 버전을 제공한다. ※ XAMPP 8.0이상 버전의 GD라이브러리 활성화 가이드 참고(붙임5)
Laravel	※ Laravel 프레임워크는 설치용 파일을 제공하되, 설치 시 인터넷 연결이 필요하므로 심사위원 입회하에 선수가 직접 설치한다.
VSCode 확장팩	• HTML CSS Support • Increment Selection • PHP Debug • CSS Peek	• advanced-new-file • Auto Close Tag • Auto Rename Tag • Live Server	• PHP Intelephense(무료버전) • jQuery Code Snippets • HTML to CSS autocompletion
	※ Javascript (ES6) code snippets : 매크로 기능에 대한 위험성으로 제외함 ※ 확장팩은 vsix형식을 다운로드하여 제공하고, 선수가 커맨드팔레트창에서 Install from VSIX로 직접 설치(오프라인 설치)한다.
Sublime Text 패키지	• BracketHighlighter • DocBlockr • Emmet • Material Theme • css format	• SublimeCodeIntel • ColorPicker • jQuery • AdvancedNewFile • A File Icon	• SideBarEnhancements • increment selection • All Autocomplete • IMESupport
Zeal Doc	• CSS.docset • Emmet.docset • HTML.docset • MySQL.docset	• JavaScript.docset • jQuery.docset • jQuery_UI.docset • Laravel.docset	• Apache_HTTP_Server.docset • Bootstrap_4.docset • PHP.docset • SVG.docset

* Emmet 다운로드 :　https://emmet.io/download/

* 모든 플러그인 사용에 대한 책임은 선수에게 있다(플러그인이 설치되지 않은 채점PC에서 정상 작동이 보장되어야 한다).

붙임2		경기장 구성 및 배치

가. 경기장 구성

○ 선수 1인당 작업공간은 3.3㎡(1평) 이상 필요하고, 컴퓨터용 책상(1200× 800mm)과 바퀴가 달려있고 탄력있는 등받이 의자를 비치한다.

○ PC는 육안으로 포트와 배선을 쉽게 확인할 수 있어야 한다.

○ 선수 책상 간 간격은 앞/뒤 120cm 이상, 좌/우 150cm 이상 유지하는 것을 원칙으로 한다.

나. 공간 배치(예시)

붙임3		주요 개정사항

가. 2023.05.22. 개정

항목	개정사항	개정사유
NCS연계	○ 모듈별 작업 내용과 NCS 능력단위 연계 ○ 과제와 일치하는 연관 능력단위를 모두 제시함	직종설명서 표준화
채점에 관한 사항	○ 4등급으로 구분되는 독립채점 방식의 객관성을 확보하기 위해 등급별 채점기준을 구체화하여 출제하도록 함	과제출제기준에만 명시되어 있어서 직종설명서에 반영
과제수정범위 및 방법	○ 내용 추가 “공개된 과제 중 선정되지 않은 2개의 과제 내용을 반영하는 경우, 과제 원안의 흐름을 흩트리지 않는 범위 내에서 수정한다.”	직종협의회 (2022.11.18.) 요구 반영
장비‧시설 목록	○ 내용 및 세부목록 표 추가 “일부 소프트웨어 및 라이브러리(library), 툴(tool), 플러그인(plug-in) 등은 부심사장(지방 대회는 심사장)이 준비하여 경기 시작 전에 별도로 제공한다.”	암묵적으로 시행해 오던 것을 명시화함
	○ XAMPP 8.0 이상 버전의 GD라이브러리 활성화 가이드라인을 별도로 제시함(붙임5)	GD라이브러리 이슈에 의한 최신버전의 SW 활용 문제를 해결함
이벤트경기	○ 이벤트경기 과제 및 경기진행절차 등을 구체적으로 명시함(붙임4)	-

나. 2025.02.21. 개정

항목	개정사항	개정사유
과제 구성	○ A모듈을 Speed-test로 변경 (경기시간:3시간) ○ 기존 A모듈을 B모듈로 변경하고 경기시간을 4시간에서 3시간으로 단축 ○ 기존 B모듈과 C모듈을 병합하여 C모듈로 구성하고 경기시간을 3시간에서 4시간으로 변경	· 선수의 기초 기술 이해를 높이고, 숙련도를 평가할 수 있도록, 국제대회의 규칙 준용 · 직종협의회(2024.12.16.)결정안 반영
과제 출제	○ A모듈 문제는 문제은행 방식으로 별도 구성하고, 경기전 문제은행에서 A모듈 과제 구성안에 맞도록 문제를 공개 추첨하여 최종 과제 구성	· 직종협의회(2024.12.16.)결정안 반영
장비·시설 목록	○ 장비(PC포함) 사양 업데이트 ○ 제공 S/W 변경 - Adobe 사 S/W 제외 : 포토샵, 일러스트 - 대체 S/W 추가 : GIMP (무료버전) - 개발용 S/W 추가 : Node.js, React, Vue ○ 시설 규격 업데이트	· PC 등의 전산장비에 대해, S/W 실행이 원활하도록 사양 업데이트 · 라이선스 확보가 어려운 Adobe사의 그래픽 디자인 프로그램을 국제대회 사용 S/W로 교체 적용 · 최신 기술 트랜드 반영 · 시설 수량 및 규격 명시화 · 직종협의회(2024.12.16.)결정안 반영
경기 일정	○ 경기 일정 변경	· 과제 구성 변경에 따른 경기 시간 및 일정 변경

다. 2025.11.20. 개정

항목	개정사항	개정사유
기술 적용	○ 모듈별 5분 인터넷 검색 시간에 AI 활용 허용	· 산업 현장의 기술 트랜드 반영
과제 출제 및 수정	○ 과제 출제기준 문서 추가 (붙임6, 붙임7) ○ 이벤트 경기 과제 출제 관련 설명 추가 ○ 과제수정 범위 및 과제 수정 시 주의사항 추가	· 과제 출제기준 명확화 · 과제수정 범위 명확화 · 과제수정 주의사항 제시
경기 진행	○ 경기진행 안전관리 관련 주요 사항 추가	· 안전관리 강화

붙임4		이벤트 경기

가. 경기 정의 및 목적

○ 이벤트 경기는 전국기능경기대회에 참가한 선수들이 팀 단위 협업을 통해 웹사이트를 제작하고 발표하는 팀챌린지(Team Challenge)경기이다.

○ 이벤트 경기는 산업현장의 요구에 부합하는 팀워크 역량과 다양한 환경에서 타인과 협력할 수 있는 능력을 제고하기 위함

나. 작업범위 및 NCS 연계표

○ 웹디자인 및 개발 직종의 작업범위에 준하는 작업을 수행하며, 직종설명서의 NCS연계표를 참고한다.

○ 팀 과제 수행을 통해 의사소통능력과 대인관계능력을 제고하는 노력을 해야 한다.

직업기초능력	하위영역	정의
의사소통능력	문서작성능력	업무를 수행함에 있어 글과 말을 읽고 들음으로써 다른 사람이 뜻한 바를 파악하고, 자기가 뜻한 바를 글과 말을 통해 정확하게 쓰거나 말하는 능력이다.
	경청능력
	의사표현능력
대인관계능력	팀워크능력	업무를 수행함에 있어 접촉하게 되는 사람들과 문제를 일으키지 않고 원만하게 지내는 능력이다.
	리더십능력
	갈등관리능력

다. 경기과제에 관한 사항

○ 과제시간 : 4시간

○ 경기과제는 팀 단위의 협업이 가능하고 창의적인 결과물이 예측되는 주제를 정하여 심사위원 전원 합의로 선정한다.

○ 과제는 이벤트 경기 전, 경기장 및 직종협의회 SNS에 공개한다.

과제출제 사례 (제60회 전국기능경기대회)

주제 : AI와 함께하는 슬기로운 웹디자인 및 개발 생활

미션

AI가 제시한 과제를 완성하기 위한 계획을 수립하고 기획합니다.

AI 웹사이트, AI 도구 등을 활용하여 웹사이트를 디자인하고 개발합니다.

사용된 AI 기술에 대해 설명하고, 완성된 작품의 특징을 설명합니다

라. 경기진행절차

○ 팀(team) 구성 방법

- 이벤트 경기에 참가하는 선수를 4~5명 단위로 묶어 하나의 팀으로 구성하며, 각 팀은 무작위 추첨 방식으로 팀원(member)이 결정된다.

- 단, 법무부 소속 선수는 팀 구성에서 배제하고 참가점수(2점)를 부여하는 것을 원칙으로 하며, 선수의 참여 의사가 있는 경우에는 별도의 팀으로 참가할 수 있다.

○ 경기 진행 방법

구분	주 요 내 용
경기 전	ㅇ 심사(장)위원은 참가선수들이 인터넷을 사용할 수 있도록 LAN을 연결한 후, 업로드/다운로드 속도 등의 상태를 확인하고 이상 유무를 점검‧조치한다. ㅇ 각 팀은 팀장과 발표자를 결정하여 명단을 사전에 제출한다.
경기 중	ㅇ 참가 선수들은 소프트웨어 및 장비(노트북PC 등), 개인자료(서적, 메모 등), 인터넷, 휴대전화 등을 자유롭게 사용할 수 있다. ㅇ 참가 선수들은 동료 팀원뿐만 아니라, 지도교사 등의 관람객과 자유롭게 토론할 수 있고, 토론 참여 대상에 제한을 두지 않는다. ㅇ 참가선수들의 경기장 내‧외부 이동에 제한을 두지 않는다.
경기 후	ㅇ 각 팀은 과제 수행 결과물과 발표자료를 USB 저장장치에 담아 제출한다. ㅇ 각 팀별 팀장과 발표자는 수행결과물의 시연과 발표를 10분 이내로 진행한다. 원활한 시연과 발표를 위해 필요한 경우 팀원의 보조를 받을 수 있다.

○ 수상팀 선정 방법

- 이벤트 경기의 수상팀의 선정은 참가선수들이 스스로 결정한다.

- 모든 팀의 발표가 끝난 후, 참가선수는 시연 결과 및 발표력이 우수한 하나의 팀을 선택하는 비밀투표를 실시한다.

- 심사위원은 팀명이 기재된 투표용지를 해당 팀원들에게 배부하며, 공정성을 위해 팀 구성 최소인원수만큼의 투표용지만 사용한다.

- 선수는 투표용지에 1개의 팀명만 기표할 수 있으며, 자신의 소속된 팀에 기표할 수 없다.

- 심사위원은 투표용지에 기재된 팀명과 기표한 팀명의 일치 여부를 반드시 확인해야 하고, 동일한 경우에는 무효표로 처리하여 투표 결과에 반영하지 않는다.

- 심사위원은 공개적으로 개표하여 다득표 순으로 순위를 결정하며, 상위 3개 팀을 수상팀으로 선정한다.

마. 채점 및 경기 결과의 활용

○ 이벤트 경기 참여 실적에 따라 점수(2점 만점)를 부여하고, 웹디자인 및 개발 직종 경기의 B모듈 채점 결과에 합산‧반영한다.

○ 참여한 모든 선수에게 2점을 부여하는 것을 원칙으로 하며, 참여태도가 불량한 선수에게는 심사위원 전원 합의로 1점 또는 0점을 부여할 수 있고, 불참 선수에게는 0점을 부여한다.

○ 이벤트 경기 성적이 우수한 3개 팀은 성적순으로 국제기능올림픽 한국위원회 회장 명의의 상장(대상, 최우수상, 우수상)을 각각 수여한다.

- 심사장은 빈 상장 15장(상장케이스 포함)과 ｢국기한-일련번호｣ 15개를 대회 시작 전에 수령하고, 이벤트경기가 끝나면 상장을 직접 인쇄하여 시상식을 진행한다.

- 심사장은 입상자 명단과 ｢국기한-일련번호｣가 함께 표시된 문서를 작성하여 기능경기부에 제출한다.

붙임5		XAMPP 8.0이상 버전의 GD 활성화 가이드라인

XAMPP에 기본 지원되던 GD 라이브러리가 PHP 8 이후부터는 비활성화되어 있으므로 GD 라이브러리를 활성화하는 가이드라인을 제시한다.

1. 기능경기대회에 제공되는 XAMPP Windows Portable 버전에서 PHP 설치 폴더로 이동한다.
예) C:\XAMPP\PHP

2. PHP 폴더에 포함된 php.ini 파일에 존재하는 GD 관련 구문을 찾아 수정(주석 해제: 세미콜론 제거)하고 저장한다.
빠른 수정을 위해 검색 단축키(□+F)로 “extension=gd”를 검색한다.

<수정 전>	⇒	<수정 후>

3. PHP 실행 환경에서 phpinfo() 함수를 호출하여 활성화 여부를 확인한다.

1) htdocs 폴더 내에 index.php 파일을 만들고 다음과 같이 입력한다.

2) XAMPP Control Panel을 통해 아파치(Apache) 서버를 실행한 후, 웹브라우저(Chrome)로 루프백 주소(127.0.0.1 또는 localhost)로 접근한다.

3) Chrome의 찾기 기능(□+F)으로 “GD”를 검색하여 GD 라이브러리 섹션에 GD Support 설정이 ‘enabled’상태인지를 확인한다.

붙임6		과제 출제 기준 (A모듈 문제은행)

1. 일반적인 유의사항

○ 직종설명서의 과제 및 평가 기준에 따라 A모듈에서 사용될 문제은행 과제를 출제합니다.(2025.3.21.개정)(기출 과제 재사용 금지)

○ 과제 출제 시, NCS 및 산업현장의 직무 등을 반영하되 합리적이고 상식적인 수준의 내용과 방법을 요구해야 하며, 일반적인 웹디자인 및 개발의 범위를 벗어나는 내용은 출제하지 않도록 주의합니다.

○ 직종설명서의 과제출제 기준 및 A모듈 문제은행 구성 기준에 따라 난이도별 소요 시간을 고려하여 과제시간 내에 수행 가능한 수준의 문제은행 과제를 출제해야 합니다.

○ 문제은행 과제를 비롯하여 선수에게 제공되는 각종 데이터를 누락하지 않아야 합니다.

2. A모듈 경기과제 및 문제은행 구성

○ A모듈 과제 구성

기술 범위	난이도	소요 시간	전국대회		지방대회
			문항수	시간소계 (분)	문항수	시간소계 (분)
Design& Publishing	상	30분이내	1	30	0	0
Design& Publishing	중	20분이내	2	40	3	60
Design& Publishing	하	10분이내	2	20	3	30
Client-side Programming	상	30분이내	1	30	0	0
Client-side Programming	중	20분이내	2	40	3	60
Client-side Programming	하	10분이내	2	20	3	30
합계	-	180분이내	10	180	12	180

○ A모듈 문제은행 구성

기술 범위	난이도	소요 시간	문제 수
Design& Publishing	상	30분이내	4
Design& Publishing	중	20분이내	8
Design& Publishing	하	10분이내	8
Design& Publishing 소계	-	-	20
Client-side Programming	상	30분이내	4
Client-side Programming	중	20분이내	8
Client-side Programming	하	10분이내	8
Client-side Programming 소계	-	-	20
합계	-	-	40

○ A모듈 최종 과제는 A모듈 경기 시작 전에 A모듈 과제 구성에 맞도록 문제은행에서 각 기술 범위와 난이도에 따라 문항수에 맞춰 공개 추첨방식으로 추첨하여 과제를 최종 확정 한다.

3. A모듈 문제은행 출제 유의사항

○ 문제은행은 Design& Publishing 기술 20문제, Client-side Programming 기술 20문제를 문제은행 구성의 난이도와 소요 시간에 따라 출제합니다.

○ 문제은행은 매년 기술 트랜드와 산업현장의 수요에 따라 심사장, 부심사장, 직종협의회의 협의를 거쳐 30% 이내의 범위에서 변경할 수 있습니다.

○ 문제은행은 공개를 원칙으로 하며, 문제은행이 변경되는 경우 마이스터넷 및 직종협의회, 지도교사, 선수에게 공지합니다.

○ 출제자는 문제은행 구성에 맞도록 각 기술 범위에서 사용되는 단위 기술 요소에 대해 난이도 및 난이도별 소요 시간을 고려하여 문항 수에 맞도록 출제합니다.

○ 출제자는 선수가 과제에 명시된 작업을 이해하고 수행하는데 필요한 예시, 이미지, 데이터, 파일 등을 과제 내 또는 별도의 선수 제공 파일로 제공합니다.

○ 출제자는 평가대상(이미지, 웹페이지)을 명시해야 하며, 웹페이지 평가의 경우 평가에 사용되는 웹브라우저 명시해야 하고, Cross Browsing에 관한 테스트가 필요한 경우에는 다른 웹브라우저를 추가로 명시합니다.

○ Client-side Programming 기술 범위의 문제는 CSS 코딩만으로 구현이 가능하거나 CSS 코딩으로 대부분의 작업을 해결할 수 있는 문제를 배제합니다.

○ 문제은행의 문제 번호는 Design& Publishing은 A, Client-side Programming은 B를 접두사로 붙여 문제 번호를 정합니다.

Design& Publishing 2번 문제의 문제번호 : A2

예시

○ 문제은행은 문제별로 문제 서두에 문제명(평가명)과 함께 난이도를 표기합니다.

○ 문제에서 요구하는 사항을 풀기 위한 자료 파일(텍스트파일, 미디어파일, 소스코드 등)은 문제은행제공파일 폴더 아래 문제 번호를 폴더명으로 하는 폴더를 만든 후 각 문제에 필요한 파일을 제공 합니다.

4. A모듈 문제은행 출제 범위

○ A모듈 문제은행 출제 문제 수 : 총 20 문제 단위로 출제

기술 범위	난이도	출제기준	출제 문제수	문제 번호 부여
Design& Publishing	하	10분이내 구현 가능한 문제	4	A1~A4
Design& Publishing	중	20분이내 구현 가능한 문제	4	A5~A8
Design& Publishing	상	30분이내 구현 가능한 문제	2	A9~A10
Client-side Programming	하	10분이내 구현 가능한 문제	4	B1~B4
Client-side Programming	중	20분이내 구현 가능한 문제	4	B5~B8
Client-side Programming	상	30분이내 구현 가능한 문제	2	B9~B10
합계	-	180분이내	20	-

○ 출제한 문제는 과제 심의를 거쳐 기술범위와 난이도별 변경 필요 수만큼 선정하여 문제은행에 반영합니다.

5. Design & Publishing 문제은행 출제 범위 및 출제 방법

구분	주요내용
정의	그래픽 응용프로그램을 사용하여 웹사이트 구조 및 구성요소를 디자인하고, 최신 HTML 및 CSS 코딩 기술을 사용하여 웹페이지를 퍼블리싱 하는데 사용되는 단위 기능을 구현 한다.
출제 방법	요구사항 구현을 위한 리소스(이미지, 사진 등), HTML, CSS와 예시 영상 등을 제공할 수 있으며, 디자인과 웹표준 기술(HTML5, CSS3)에 사용되는 기술요소를 적용한 단위 기능의 요구사항에 대해 제한된 시간내에 결과물을 완성할 수 있도록 출제한다.
산출물	과제에서 요구하는 결과물 디자인 파일(*.xcf, *.jpg, *.png), html파일, css파일, 각종 리소스 파일(이미지 등)

○ Design& Publishing 출제 범위(주요 평가요소)

∙ 심벌로고 및 디자인 콘셉트 구현, 심미적이고 창의적인 디자인	∙ 시각적 요소의 계층구조, 타이포그라피, 심미성 등을 적용한 단위 요소 완성
∙ 커뮤니케이션을 위한 비주얼 요소 제작	∙ 사진, 이미지 등에 대한 편집 및 효과적용
∙ 웹페이지 UI 구현	∙ 반응형 웹페이지 UI 구현
∙ CSS를 이용한 다양한 효과 구현	∙ 최신 W3C표준 활용 및 응용

6. Client-side Programming 출제 범위 및 출제 방법

구분	주요내용
정의	JavaScript와 같은 클라이언트 측 코딩 기술을 사용하여 웹사이트에서 사용되는 상호작용 및 효과를 구현한다.
출제 방법	요구사항 구현을 위한 리소스(이미지, 사진 등), HTML, CSS, JS와 예시 영상 등을 제공할 수 있으며, Client-side 기술을 활용한 단위 기능의 요구사항에 대해 제한된 시간내에 결과물을 완성할 수 있도록 출제한다.
산출물	과제에서 요구하는 결과물 결과를 확인할 수 있는 실행파일 (html파일, css파일, JS파일 각종 리소스파일 포함)

○ Client-side Programming 출제 범위(주요 평가요소)

∙ 웹페이지 내에 포함된 애니메이션 요소의 시각적 효과 구현	∙ 웹페이지의 기능성 및 심미성 향상을 위한 스크립트 제작
∙ 이미지 생성 및 편집, 멀티미디어 요소(사운드, 동영상 등)의 재생/제어 등	∙ 마우스 또는 키 이벤트에 대한 처리 및 상호작용 구현
∙ 화면의 로딩 및 움직임에 따른 시각적 효과 및 상호작용 구현	∙ 브라우저 저장소를 활용한 데이터의 저장 및 조회, 처리 등
∙ 선수에게 제공하는 데이터 파일(txt, xml, json 등)에 포함된 데이터 처리 및 표시	∙ jQuery, jQuery UI 같은 JavaScript Library를 이용한 UI 제어, 상호작용 구현

7. 문제은행 예시

○ 기술범위 : Design& Publishing, 난이도 : 하

A1. 필터 추가하기 (난이도:하)

제공된 plane.jpg 이미지에 노이즈 필터를 추가하여 결과 파일을 result.jpg로 제출하세요.

(단, 제출파일이 없거나 result.jpg를 그대로 제출한 경우 0점입니다.)

(예시)

○ 기술범위 : Design& Publishing, 난이도 : 중

A5. 할 일 목록 (난이도:중)

제공된 미디어 파일을 참고하여 웹페이지 상에 할 일 목록을 HTML과 CSS만 사용하여 구현하세요.

체크박스를 선택하면 체크 표시와 함께 사용자 정의된 취소선 효과가 나타나야 하고, 선택되지 않은 상태에서 선택된 상태로 전환될 때 부드러운 전환 효과가 있어야 합니다.

(예시)

○ 기술범위 : Design& Publishing, 난이도 : 상

A10. 대한민국 국기 (난이도:상)

아래 예시의 이미지처럼 HTML과 CSS만을 사용하여 대한민국 국기를 구현하세요.

(예시)

○ 기술범위 : Client-side Programming, 난이도 : 하

B1. 컬러 변형하기 (난이도:하)

HEX 또는 RGB 형식의 색상 값을 입력하면, 해당 색상 형식과 변환된 값(HEX 또는 RGB)을 결과 영역에 표시하는 색상 변환 애플리케이션을 개발하세요.

(예시)

○ 기술범위 : Client-side Programming, 난이도 : 중

B5. 칸반보드(kanban board) 정렬 (난이도:중)

제공파일에 칸반 보드 레이아웃이 제공되었다.

제공된 레이아웃에 있는 각 영역의 아이템을 원하는 위치로 이동하여 정렬(sortable) 할 수 있는 기능을 구현하세요.

- 이동 중인 요소는 약간 기울어진(slightly slanted) 모습으로 보여야 합니다.

- 아이템을 선택하여 원하는 위치로 드래그한 후 이동시킬 수 있어야 합니다.

(예시)

○ 기술범위 : Client-side Programming, 난이도 : 상

B10. 그림판 (난이도:상)

클라이언트 측에서 동작하는 드로잉 도구를 생성하세요.

- 사용자가 자유롭게 그릴 수 있는 캔버스(canvas)가 있어야 합니다.

- 5가지 색상 버튼을 제공하여 사용자가 색상을 선택할 수 있어야 합니다.

- 기본 캔버스 크기는 300px × 300px입니다.

- 캔버스의 오른쪽 하단을 클릭하고 드래그하면 크기를 조절할 수 있어야 합니다.

- JPG 형식으로 저장하는 버튼 1개와 PNG 형식으로 저장하는 버튼 1개를 제공하여, 사용자의 컴퓨터에 그림을 저장할 수 있어야 합니다.

(예시)

붙임7		과제 출제 기준 (B모듈, C모듈)

1. 일반적인 유의사항

○ 직종설명서의 과제 및 평가 기준에 따라 문제은행으로 구성하는 A모듈 출제하지 않습니다. (2025.3.21.개정)

○ 직종설명서의 과제 및 평가 기준에 따라, A모듈을 제외한 B모듈과 C모듈로 구성된 단일 과제를 출제합니다(기출 과제 재사용 금지).

○ 과제 출제 시, NCS 및 산업현장의 직무 등을 반영하되 합리적이고 상식적인 수준의 내용과 방법을 요구해야 하며, 일반적인 웹디자인 및 개발의 범위를 벗어나는 내용은 출제하지 않도록 주의합니다.

○ 대회에서 부여한 과제시간 내에 수행 가능한 수준의 과제를 출제해야 합니다.

○ 과제를 비롯하여 선수에게 제공되는 각종 데이터를 누락하지 않아야 합니다.

2. 과제 주제 및 구성

○ 과제 주제

∙ 출제자는 자유롭게 주제를 정하고, 주제에 적합한 내용을 바탕으로 창의적인 ‘과제명’을 선정하고 과제를 출제합니다. (이전 연도의 과제와 유사한 과제는 지양합니다.)

○ 대회별 과제 구성 및 배점 기준

대회	구분	모듈명	소요일	시간	영역별 배점					주관적배점의 최대반영비율
					design	publish	client	server	합계
지방대회	A모듈	Speed Test	1일	3	30			-	30	0%
	B모듈	Design & Publishing	1일	3	15	15	-	-	30	50%(필수)
	C모듈	Client-side & Server-side Development	1일	4	5	-	35		40	20% 이내
전국대회	A모듈	Speed Test	1일	3	30			-	30	0%
	B모듈	Design & Publishing	1일	3	15	15	-	-	30	50%(필수)
	C모듈	Client-side & Server-side Development	1일	4	5		33		38	20% 이내
	이벤트경기 이벤트경기는 전국기능경기대회 심사위원이 현장에서 직접 출제하므로 출제범위에 속하지 않습니다. 또한 지방기능경기대회는 이벤트경기가 없으며, 이벤트경기에 배정된 배점을 B모듈에 합산하여 적용합니다. (Team Challenge)		1일	4	-	-	-	-	2	-

○ 출제자 공통 유의사항

∙ 출제자는 선수가 2개의 모듈을 모두 수행했을 때, 과제의 주제에 부합하는 완전한 웹사이트가 만들어질 수 있도록 모듈별 요구사항을 반드시 구분하여 제시해야 합니다.

∙ 출제자는 클라이언트(의뢰인), 주제, 목표관중, 과제 세부내용 등 선수가 과제를 수행하는 데 필요한 내용을 제시합니다.

∙ 출제자는 반드시 각 모듈별 경기시간을 고려하여 선수가 작업할 분량을 결정한 후, 과제를 출제해야 합니다.

∙ 출제자는 선수가 각 모듈별 수행을 마친 후 제출해야 할 결과물에 대한 내용을 구체적으로 언급해야 합니다.

∙ 다른 모듈의 평가 내용을 평가하는 과제를 출제하지 않아야 합니다.

B모듈에서, C모듈의 평가요소인 자바스크립트 기능의 정상 작동 여부를 평가하지 않습니다.

예시

∙ 채점기준 작성 시, 동일 유형의 기준을 반복 평가하지 않도록 주의합니다.

<div>태그 사용 시 </div>를 누락하여 발생한 다수의 에러는 하나의 에러로 간주하여 한 번만 평가합니다.

예시

∙ 출제자는 필요에 따라 과제 이해를 돕는 동영상을 별도로 제작하여 선수에게 제공할 수 있습니다.

∙ 평가를 위한 웹브라우저는 Google Chrome으로 한정되어 있으므로, 웹브라우저 간 호환성 테스트(Cross Browsing)가 반드시 필요한 경우에만 다른 웹브라우저를 추가로 지정할 수 있습니다(출제가가 해당 웹브라우저 직접 제공).

∙ 출제자는 출제의도에 부합하는 리소스들을 ｢선수제공파일｣로 제공하여, 선수가 과제에 명시된 작업을 수행할 수 있도록 보장해야 합니다.

○ 채점 항목 개수 및 점수 상한제 (2020.5.27.개정)

∙ 채점기준의 각 모듈별 만점 기준은 모듈별 배점합계를 적용해야 합니다.
(100점 만점으로 작성 금지 - 전국대회 기준, B모듈:30점, C모듈:38점).

∙ 선수 작품의 완성도를 높이기 위하여 채점항목 간 배점 균형을 고려해야 합니다.

∙ 각 모듈 당 채점 항목의 개수는 20개 이하로 제한하고, 중요도와 난이도를 고려하여 배점의 크기를 조정하되 채점항목 간 배점 차이는 1점을 초과할 수 없습니다.

∙ 합의(객관적)채점 항목은 필요에 따라 채점기준과 부분채점기준으로 나누어 제시할 수 있습니다. 단, 부분채점기준의 개수는 5개를 초과할 수 없고, 부분채점기준의 배점은 0.5점 또는 1점에 한하여 부여하되 부분채점기준 간 배점에는 차등을 두지 않습니다.
( 합의채점 항목의 배점 = 부분채점기준의 개수 × 부분채점기준의 배점 )

∙ 합의(객관적)채점 항목의 부분채점기준 적용 사례

예시

구분	채점기준	배점
수정전	메인페이지에 로그인을 할 수 있도록 입력폼이 완성되어 있고, 회원이 로그인할 수 있는가?	1.0
	비회원이 로그인을 시도하는 경우 회원가입을 유도하는 메시지를 보여주는가?	0.5
	비회원이 회원가입 버튼을 클릭했을 때, - 회원등록폼 페이지를 보여주는가? (0.5점) 필수 입력 요소를 누락하면 하이라이트 되는가? (1점)	1.5
수정후	로그인/회원가입 기능의 완성도 (각 0.5점) 회원이 로그인할 수 있다. 비회원 로그인 시도 시, 회원가입을 유도하는 메시지를 보여준다. 회원가입 시, 필수입력 요소를 누락하면 하이라이트 처리를 한다. 단, 로그인 버튼이 없거나 ID입력이 불가능하면 모두 0점	1.5

○ 독립(주관적)채점 항목의 채점기준 작성 방법 (2021.5.21.개정)

∙ 출제자는 독립채점 항목의 채점기준 및 상세채점기준, 배점을 각각 제시해야 합니다.

∙ 독립채점 항목의 채점기준의 개수와 배점은 각 모듈별 ‘주관적 배점의 최대 반영비율’에 따라 결정해야 합니다.

∙ 출제자는 독립채점 항목의 달성도를 가늠할 수 있는 ｢상세채점기준｣을 4단계로 구분하여 제시해야 합니다. 상세채점기준의 단계별 점수는 배점의 크기와 관계없이 최저 1점부터 최고 4점까지 부여합니다.

∙ 각 단계별 상세채점기준은 참가선수가 과제를 정상적으로 제출한 경우만을 가정하여 작성합니다. 즉 최저점수(1점)에 대한 기준으로 ‘미제출’은 고려하지 않습니다(‘미제출’에 의한 심사채점 불가 항목은 자동으로 0점 처리됩니다).

예시1

구분

채점기준

배점

수정전

웹브라우저의 너비가 320px에서 1330px로 확장했을 때 메인페이지 레이아웃의 반응이 적절한가?

1.0

수정후

웹브라우저의 너비가 320px에서 1330px로 확장했을 때 메인페이지 레이아웃의 반응이 적절한가?

점수	상세채점기준
1	레이아웃이 고정되어 있거나 매우 제한된 크기로 조정되어 콘텐츠가 모바일, 태블릿 및 데스크톱에 맞지 않는다.
2	브라우저 크기를 조정할 때 일부 요소가 레이아웃을 방해한다.
3	웹 사이트 요소는 브라우저 크기 조정 시 원활하게 반응한다.
4	웹 사이트가 반응하도록 변경하면 웹사이트의 유용성이 향상된다.

1.0

예시2

구분

채점기준

배점

수정전

디자인을 손상시키지 않고 위젯을 사이드 바에 추가할 수 있는가?

1.0

수정후

디자인을 손상시키지 않고 위젯을 사이드 바에 추가할 수 있는가?

점수	상세채점기준
1	위젯을 추가할 수 없거나 추가할 때 디자인이 손상된다.
2	위젯을 추가할 수 있고 디자인은 여전히 일관성이 있지만 완벽하지 않을 수 있다.
3	디자인을 손상시키지 않고 위젯을 추가할 수 있다.
4	추가된 위젯은 전체 디자인에 잘 통합되어 보여진다.

1.0

예시3

구분

채점기준

배점

수정전

갤러리는 고급스럽고 현대적인 모양과 느낌을 가지며, 디자인이 매력적인가?

0.5

수정후

갤러리는 고급스럽고 현대적인 모양과 느낌을 가지며, 디자인이 매력적인가?

점수	상세채점기준
1	갤러리가 존재하나, 디자인을 확인할 수 없다.
2	갤러리는 현대적인 모양과 느낌을 가지고 있다.
3	갤러리는 고급스럽고 현대적인 모양과 느낌을 가지고 있다.
4	갤러리는 고급스럽고 현대적인 모양과 느낌이 있으며 디자인이 매우 매력적이다.

0.5

예시4

구분

채점기준

배점

수정전

타이포그래피는 가독성이 높게 디자인되어 있는가?

0.5

수정후

타이포그래피는 가독성이 높게 디자인되어 있는가?

점수	상세채점기준
1	1개의 글꼴과 크기로 구성되어 있다.
2	2개 이상의 글꼴과 크기를 사용하여 문단을 구성하고 있다.
3	2개 이상의 글꼴과 크기를 사용하고, 줄간격, 색상 등을 적절히 사용하고 있다.
4	글꼴, 줄간격, 색상 등이 잘 어우러지며 가독성이 높게 디자인되었다.

0.5

예시5

구분

채점기준

배점

수정전

애니메이션은 사용자의 인지력을 증진시키고, 창의적으로 디자인되었는가?

1.0

수정후

애니메이션은 사용자의 인지력을 증진시키고, 창의적으로 디자인되었는가?

점수	상세채점기준
1	1가지 기능의 간단한 애니메이션을 적용하고 있다.
2	2가지 이상의 기능으로 애니메이션을 적용하고 있다.
3	2가지 이상의 기능으로 제작된 애니메이션의 디자인이 창의적이나, 사용자의 인지력 증진에는 다소 부족하다.
4	2가지 이상의 기능으로 제작된 애니메이션의 디자인이 창의적이고, 사용자의 인지력을 증진하도록 제작되어 있다.

1.0

3. B모듈 : Design & Publishing 출제 범위 및 출제 방법

구분	주요내용 (B모듈)	수행 시간	배점
정의	그래픽 응용프로그램을 사용하여 웹사이트 구조 및 구성요소를 디자인하고, 최신 HTML 및 CSS 코딩 기술을 사용하여 웹페이지를 퍼블리싱한다.	3	30
출제 방법	주제와 부합하는 메인페이지를 선수가 직접 디자인하고, 디자인 결과물과 동일하게 웹표준 기술(HTML5, CSS3)을 사용하여 퍼블리싱하도록 출제한다(서브페이지 포함 가능).
산출물	디자인 파일(*.xcf, *.jpg, *.png), html파일, css파일, 각종 리소스 파일(이미지 등)
배점 비율	전체 배점을 독립채점 50%, 합의채점 50%로 구성한다.

○ B모듈의 출제 범위(주요 평가요소)

∙ 심벌로고 및 디자인 콘셉트 구현, 심미적이고 창의적인 디자인	∙ 시각적 요소의 계층구조, 타이포그라피, 심미성 등
∙ 커뮤니케이션을 위한 비주얼 요소 제작	∙ 목표관중 분석 및 이해
∙ 인터넷에 최적화된 이미지 제작‧관리	∙ 반응형 웹페이지 디자인 및 제작
∙ 특수한 니즈(요구사항)를 지닌 사용자그룹을 위한 문제해결능력	∙ 웹 브라우저간의 일관성을 위한 효율적이고 효과적인 CSS 활용
∙ 레이아웃의 일관성 유지	∙ 최신 W3C표준 활용 및 응용

○ B모듈의 출제 기본 방향

∙ 출제자는 선수가 각종 그래픽 소프트웨어 및 HTML, CSS 등을 활용하여 웹사이트 구성요소를 디자인하고 레이아웃을 제작할 수 있도록 B모듈의 출제범위(평가요소)를 고려하여 출제합니다.

∙ 출제자는 심미성이 높은 메인페이지의 디자인과 프로토타입을 요구하되, 출제 시 C모듈에서 추가될 서브페이지의 레이아웃을 동시에 고려합니다. 또한 과제 특성 상 필요한 경우, 서브페이지의 디자인과 프로토타입을 함께 요구할 수 있습니다.

∙ 출제자는 다른 모듈에서 요구하는 작업(Client-side 및 Server-side 수준의 프로그래밍)을 수행할 것을 요구해서는 안 됩니다.

∙ 퍼블리싱의 완성도를 위해 필요한 경우, 출제자는 선수들이 활용할 수 있는 별도의 JavaScript 코드(파일)와 그 사용방법을 제공할 수 있습니다.

∙ 출제자는 ｢경기장 시설 및 장비｣ 목록을 참고하여, 대회 규칙으로 허용된 시설 및 장비, 소프트웨어 등으로 과제 수행이 가능하도록 출제해야 합니다.

4. C모듈 : Client-side & Server-side Development 출제 범위 및 출제 방법

구분	주요내용 (C모듈)	수행 시간	배점
정의	Client-side는 메인/서브페이지에 JavaScript와 같은 클라이언트 측 코딩 기술을 사용하여 웹사이트의 상호작용 및 효과를 구현한다. Server-side는 데이터베이스를 설계 및 구축하고, 웹 서버 코딩 기술을 활용하여 과제의 주제에 부합하는 웹서비스가 가능한 완전한 웹사이트를 구축한다.	4	전국(38), 지방(40)
출제 방법	메인/서브페이지의 HTML/CSS파일의 일부를 수정할 수 있도록 허용하고, B모듈 작업결과물의 틀을 허물지 않는 범위 내에서 Client-side & Server-side 기술을 활용하여 과제 지시사항을 구현하도록 출제한다. 이때, JavaScript, PHP, MySQL 등의 코드를 자유롭게 사용할 수 있게 하고, 구현 결과를 특정 페이지에서 확인할 수 있게 출제한다.
산출물	XAMPP 폴더 전체
배점 비율	전체 배점을 독립채점 20%, 합의채점 80%로 구성한다.

○ C모듈의 출제 범위(주요 평가요소)

∙ 웹페이지 내에 포함된 애니메이션 요소의 시각적 효과 구현	∙ 웹페이지의 기능성 및 심미성 향상을 위한 스크립트 제작
∙ 이미지 생성 및 편집, 멀티미디어 요소(사운드, 동영상 등)의 재생/제어 등	∙ 마우스 또는 키 이벤트에 대한 처리 및 상호작용 구현
∙ 화면의 로딩 및 움직임에 따른 시각적 효과 및 상호작용 구현	∙ 브라우저 저장소를 활용한 데이터의 저장 및 조회, 처리 등
∙ 선수에게 제공하는 데이터 파일(txt, xml, json 등)에 포함된 데이터 처리 및 표시	∙ jQuery, jQuery UI, jQuery Mobile 등과 같은 JavaScript Library를 활용한 효과 제작 및 UI 제어, 상호작용 구현
∙ PHP(Hypertext Pre-processor) 코드 개발	∙ MVC 및 객체지향 프로그래밍
∙ 데이터베이스 설계 및 데이터 모델링	∙ 사용자 입력 값 전송(POST, GET) 및 처리
∙ 서버 측 파일 관리(업로드, 수정, 압축, 변환 등) 및 이미지 처리	∙ SQL(Structured Query Language)을 이용한 데이터 처리
∙ 보안악용에 대한 보호(Sql Injection, XSS, 암호화, 첨부파일, 캡챠 등)	∙ Client-side 기술과 Server-side 기술의 통합(AJAX 등)
∙ 오픈소스 프레임워크(Laravel, CodeIgniter 등) 활용 방법	∙ API(Application Programming Interfaces), 라이브러리, 플러그인을 활용한 기능 구현
∙ PHP, XML(Extensible Markup Language), JSON 등을 활용한 웹서비스 구현	∙ DB의 구조와 형식에 적합하도록 데이터 저장 및 활용
∙ DB에 입력된 데이터를 처리, 조회, 출력, 특정형식(CSV 등)으로의 변환 및 저장 등

○ C모듈의 출제 기본 방향

∙ 출제자는 선수가 Client-side & Server-side 구현 기술을 활용하여 완전한 웹사이트로서의 기능을 갖추도록 출제해야 합니다.

∙ 출제자는 메인페이지 및 서브페이지의 완성도를 고려하여 기능 구현을 요구해야 하며, 이때 CSS 코딩만으로 구현이 가능하거나 CSS 코딩으로 대부분의 작업을 해결할 수 있는 문제는 출제하지 않아야 합니다.

∙ 출제자는 C모듈의 출제범위(평가요소)를 고려하여 출제하되, 평가에 필요한 요소나 특정 페이지(메인/서브페이지 또는 새로운 페이지)를 반드시 지정하여야 합니다.

∙ 과제의 특성에 따라, 출제자는 별도의 템플릿을 제공할 수는 있으나 과제 전체 레이아웃이나 디자인에 영향을 주는 템플릿은 제공할 수 없습니다.

∙ 출제자는 메인/서브 페이지 또는 새로운 페이지(다이얼로그 등)의 기능구현을 위한 최소한의 퍼블리싱을 추가로 요구할 수 있으나, 과도한 퍼블리싱 작업을 요구하지 않아야 하며, 채점항목에는 포함할 수 없습니다.

주관적(독립) 채점을 위한 입력 폼이나 다이얼로그 디자인 변경 등은 허용함

예시