2026 · 전국기능경기대회

웹디자인 및 개발

ㅇ 대회명 :
2026 인천광역시 · 제61회 전국기능경기대회
ㅇ 대회장소 :
부평공업고등학교(인천광역시 부평구 주부토로 194)

경기일정 (8.23~8.27)

시간 내용 비고
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모듈 채점 공개채점실, 심사위원
시간 내용 비고
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모듈 채점 공개채점실, 심사위원
시간 내용 비고
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모듈 채점 공개채점실, 심사위원
시간 내용 비고
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모듈 채점 공개채점실, 심사위원
시간 내용 비고
09:00~12:00 ○ C모듈 채점 공개채점실, 심사위원
12:00 ○ 채점결과 발표 및 공지
○ 시상식		 심사위원 1시간 대기
경기장별 일정

대회장비

장비명 비고 설치 안내
오피스 · 이미지
MS Office 2016 이상
한컴오피스 2018 이상
GIMP GNU, 2.10.X 이상 최신버전
에디터 · IDE
Sublime Text Sublime Text 4
PhpStorm 최신 버전
Visual Studio Code 최신 버전
브라우저
Google Chrome 최신 버전
서버 · 프레임워크 · 라이브러리
Bootstrap 최신 버전
대회에서는 선수 PC가 인터넷에 연결되지 않으므로 CDN 방식은 쓸 수 없고, 컴파일된 CSS/JS 파일(zip)을 미리 받아 제공하는 방식입니다. 아래 링크에서 bootstrap-5.3.8-dist.zip(컴파일된 CSS/JS만 포함, 2026년 7월 기준 최신 버전)을 다운로드하세요. 
https://github.com/twbs/bootstrap/releases/download/v5.3.8/bootstrap-5.3.8-dist.zip
압축을 풀면 css/bootstrap.min.css, js/bootstrap.bundle.min.js 파일이 나오며, 이 파일들을 프로젝트 폴더로 복사해 <link>/<script>로 로컬 경로를 지정해 사용합니다.
공식 다운로드 페이지
XAMPP(Portable) v8.2.0 이상, Windows Portable
2026년 7월 기준 XAMPP는 PHP 8.2 버전까지만 제공됩니다.
아래 링크에서 해당 버전의 Portable ZIP 또는 installer를 다운로드하세요.
XAMPP 8.2.12 다운로드

GD 라이브러리 활성화

일부 과제에서 이미지 처리(GD 라이브러리)를 사용할 수 있습니다. xampp\php\php.ini 파일을 열어 아래 줄을 찾아 앞의 세미콜론(;)을 지워 주석 해제하세요. 
;extension=gd  →  extension=gd

Laravel 설치 시 추가 설정

Composer로 Laravel을 설치하려면 zip 확장도 함께 활성화해야 합니다. 같은 파일에서 아래 줄도 주석 해제하세요. 
;extension=zip  →  extension=zip
저장 후 XAMPP Control Panel에서 Apache를 Stop → Start로 재시작해야 적용됩니다.
Laravel 12.x (PHP 8.2 호환, laravel.com)
Laravel 최신 버전(13.x)은 PHP 8.3 이상이 필요하나,
XAMPP 제공 버전(PHP 8.2)과 호환되지 않습니다.
Composer 설치 후, 터미널에서 아래 명령어로 PHP 8.2와 호환되는 Laravel 12.x를 설치하세요. 
composer create-project laravel/laravel laravel-project "12.*"
jQuery 최신 버전 (jquery.com)
jQuery UI 최신 버전 (jqueryui.com)
NodeJS 최신 버전 (npm 포함)
아래 링크에서 Windows용 설치 파일을 받아 실행합니다.
설치가 끝나면 명령 프롬프트에서 node -v, npm -v로 설치를 확인하세요.
nodejs.org 다운로드
React 최신 버전 (Vite 기반)
create-react-app은 2025년 공식적으로 지원 종료(deprecated)되어,
React 팀이 권장하는 Vite 기반으로 프로젝트를 생성합니다. 
npm create vite@latest my-app -- --template react
Vue 최신 버전 (Vite 기반)
vue-cli는 현재 유지보수 모드로 전환되어, Vue 팀이 권장하는 create-vue(Vite 기반)로 프로젝트를 생성합니다. 
npm create vue@latest
문서 · 부가 도구
Zeal Doc 최신 버전 (zealdocs.org)
아래 docset이 제공됩니다.
  • 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

docset 다운로드 방법

Zeal 실행 후 상단 메뉴 File → Docset Library(또는 File → Options → Docsets)에서 원하는 docset을 선택하고 Download 버튼을 눌러 받습니다.

docset 설치 경로 (참고용)

  • Portable로 설치 시: (Zeal 설치 폴더)\docsets — 프로그램 폴더 안에 자체적으로 저장
  • Installer로 설치 시: C:\Users\(사용자명)\AppData\Local\Zeal\Zeal\docsets
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 파일로 제공되며, 명령 팔레트(Ctrl+Shift+P)에서 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
-prefix-free projects.verou.me/prefixfree
아래 JS 파일을 그대로 다운로드해 프로젝트에 포함하면 됩니다.
prefixfree.min.js 다운로드

참고: 평가용 웹브라우저는 Google Chrome으로 한정되며, 크로스 브라우징 테스트가 필요한 경우에만 출제자가 다른 브라우저를 직접 제공합니다. 즉 대부분 Chrome 단일 브라우저로만 채점이 진행되기 때문에, 여러 브라우저의 CSS 접두어(vendor prefix) 차이를 자동으로 보정해주는 -prefix-free가 실제로 필요한 상황은 거의 없습니다.

직종설명서

마이스터넷 > 기능경기대회 > 정보광장 > 직종설명서

전국기능경기대회 과제 후보

마이스터넷 > 기능경기대회 > 전국기능경기대회 > 과제출제

8월 22일(개회식)까지 남은 시간

일
시간
분
초