웹디자인개발기능사 실기은 주어진 이미지·텍스트로 웹사이트 메인페이지를 디자인하고 HTML·CSS·JavaScript로 만들어 제출하는 작업형 시험입니다.
100점 만점에 60점 이상이면 합격입니다(시행령 제20조③).
준비는 출제기준 6개 주요항목으로 범위를 잡고, Q-Net 2026 공개문제 24과제로 문제지 구성과 영역별 구현을 익히는 순서로 정리했습니다.
이 글은 Q-Net 종목정보, 실기 출제기준(2025.1.1~2027.12.31), 2026 공개문제와 국가기술자격법령 원문을 대조해 정리했습니다.
공개문제 요구사항은 저작권 보호 대상이라 구성만 요약했습니다.
웹디자인개발기능사 실기 시험 방식 한눈에 보기
| 항목 | 내용 | 출처 |
|---|---|---|
| 실기 과목명 | 웹디자인 실무 | 시행규칙 별표 8, 출제기준 |
| Q-Net 표기 | 웹디자인 실무작업 | Q-Net 종목정보 |
| 검정 방법 | 작업형 | 출제기준, Q-Net 종목정보 |
| 시험시간 | 3시간(2026 공개문제), 3시간 정도(출제기준·Q-Net) | 공개문제, 출제기준, Q-Net |
| 합격 기준 | 100점 만점에 60점 이상 | 시행령 제20조③ |
| 장소·장비 | 실내, 컴퓨터·프린터, 안전등급 1등급 | Q-Net 종목정보 |
필기는 객관식 60문항 시험이고, 필기에 합격한 날부터 2년간 필기가 면제됩니다(시행령 제21조①).
필기 범위는 웹디자인개발기능사 필기 공부방법, 면제 기간은 필기시험 면제 기간과 조건에 있습니다.
개정 시행규칙 별표 8의2에도 실기 과목이 「웹디자인 실무」로 같아 2028년 이후에도 유지될 예정입니다.
2028년 이후 적용 출제기준은 2026년 11월 1일 Q-Net 목록에 미게시입니다.
웹디자인개발기능사 실기 출제기준 6개 주요항목
실기 출제기준은 직무를 「분석, 설계, 구현 과정을 거쳐 인터넷 환경에서 사용할 웹페이지를 제작하는 직무」로 정의합니다.
주요항목 6개, 세부항목 20개로 이뤄져 있습니다.
| 주요항목 | 세부항목 |
|---|---|
| 1. 프로토타입 기초데이터 수집 및 스케치 | 기초데이터 수집, 레퍼런스 조사·분석, 아이디어 스케치 |
| 2. 프로토타입 제작 및 사용성 테스트 | 프로토타입 제작, 사용성 테스트, 테스트 수정사항 반영 |
| 3. 디자인구성요소설계 | 스토리보드, 심미성·사용성·매체성 구성요소 설계 |
| 4. 디자인구성요소제작 | 스토리보드, 심미성·사용성·매체성 구성요소 제작 |
| 5. 구현 | 콘텐츠 구현, 기능 요소 구현, 개발 요소 구현 |
| 6. 구현 응용 | 콘텐츠 구성, 기능 요소 활용, 개발 요소 협업 |
1·2번은 자료를 읽고 시안을 정하는 단계이고, 3·4번은 로고·레이아웃·색상 같은 디자인 요소를 만드는 단계입니다.
5·6번은 코드로 화면과 동작을 구현하는 단계로 볼 수 있습니다.
출제기준 찾는 법과 적용기간 읽기는 큐넷 공개문제 출제기준 찾는 방법에 정리돼 있습니다.
웹디자인개발기능사 실기 공개문제 문제지 구성
Q-Net 자료실의 「[공개문제]웹디자인개발기능사(2026)」는 2025년 12월 22일 등록됐습니다.
첨부 PDF에 쇼핑몰·축제·박물관·대학교·금융 등 주제가 다른 24과제가 들어 있습니다. 과제마다 문제지 구성은 같습니다.
| 문제지 순서 | 담긴 내용 |
|---|---|
| 가~나. 주제·개요 | 과제명과 제작할 웹사이트의 목적 |
| 다. 요구사항 | 제작 방식, 문자 인코딩, 컬러 가이드, 사이트 맵, 와이어프레임 |
| 라. 세부 영역별 지시사항 | A Header(로고·메뉴), B Slide, C Contents, D Footer별 지시 |
| 마. 기술적 준수 사항 | 웹 표준·유효성, 외부 CSS·JS, 접근성, 브라우저 동작 기준 |
| 바. 제출방법 | 비번호 폴더, 최상위 index.html, 용량 제한 |
| 수험자 유의사항·지급재료 | 필기구, 지참 제한, 실격 사유, 지급 USB |
컬러 가이드에서 배경색과 기본 텍스트 색이 지정되고, 지정되지 않은 영역 비율·글자체·크기는 주제에 맞게 수험자가 정합니다.
와이어프레임은 과제마다 영역 배치가 다릅니다.
공개문제는 실제 출제 문제와 다를 수 있다고 안내되므로 응시 전에 최신 게시물을 다시 확인하세요.
문제지 공유 범위는 국가기술자격 시험문제 저작권을 보세요.
영역별 구현 연습 포인트
아래는 공개문제 지시사항의 유형을 묶은 것이고, 실제 과제의 세부 지시가 우선합니다.
| 영역 | 공개문제에서 반복되는 지시 유형 |
|---|---|
| A Header | 지정 크기의 워드타입 로고 직접 제작, 메인·서브 메뉴 마우스 오버 효과 |
| B Slide | 제공 이미지·텍스트로 슬라이드 제작, 과제별 전환 방향(위아래·좌우·Fade-in), 자동 반복 |
| C Contents | 공지사항·갤러리·배너·바로가기, 탭 전환, 레이어 팝업 또는 모달 창과 닫기 버튼 |
| D Footer | 로고 무채색 처리, Copyright·SNS 등 제공 텍스트 배치 |
슬라이드 전환 방향과 팝업 방식은 과제마다 다르게 지정됩니다.
한 가지 방식만 외우기보다 방향·효과를 바꿔 구현하는 연습을 해 두는 편이 대응하기 쉽습니다.
콘텐츠는 HTML 코딩으로 작성해야 하고 이미지로 통째로 넣으면 안 된다는 지시가 함께 있습니다.
기술적 준수 사항과 제출 점검
공개문제의 기술적 준수 사항을 점검 항목으로 바꾸면 다음과 같습니다.
시험장은 인터넷이 차단돼 유효성 검사 서비스를 쓸 수 없으므로 평소 연습에서 습관을 들여야 합니다.
- HTML5 웹 표준과 CSS3 기준으로 유효성 오류가 없는지
- CSS와 JavaScript를 별도 파일로 만들어 연결했는지
- Chrome 개발도구 콘솔에 오류가 없는지
- 상호작용 요소에 임시 링크를 걸고 Tab 키로 이동할 수 있는지
- Table 태그가 아닌 CSS로 레이아웃을 잡았는지
- 모든 이미지에 alt 속성이 있는지
- 비번호 폴더 최상위에 index.html을 두고 용량 제한 안에서 압축 없이 저장했는지
채점은 수험자 컴퓨터가 아닌 채점위원 컴퓨터에서 열어 보므로, 연결된 이미지·스크립트 파일이 모두 폴더 안에 있어야 합니다.
ai·psd처럼 웹에 쓰지 않는 파일은 제출하지 않습니다.
슬라이드를 만들지 않고 이미지 하나만 둔 경우, 압축해 제출한 경우, 비번호 폴더에 저장하지 못한 경우 등은 실격입니다. 실격 사유와 시험장 소프트웨어 목록은 웹디자인개발기능사 취득방법에 정리돼 있습니다.
웹디자인개발기능사 실기 시험장 환경 확인
공개문제는 시험장 기본 소프트웨어로 Photoshop·Illustrator, Notepad++, Visual Studio Code, Chrome 등을 적습니다.
Dreamweaver는 쓸 수 없다고 안내하므로 연습도 코드 편집기 기준으로 하세요.
지참공구는 수험표·신분증·필기도구이고 USB·키보드·마우스 같은 외부장치는 가져갈 수 없습니다.
회차별 지참 목록은 실기시험 지참준비물 확인 방법으로 조회합니다.
같은 컴퓨터 작업형 디자인 종목은 컴퓨터그래픽스운용기능사 취득방법, 코드 작업형 실기는 정보처리기능사 실기 준비방법과 비교해 볼 수 있습니다.
내 조건으로 응시할 수 있는 다른 자격증도 찾아볼 수 있습니다.
자주 묻는 질문
Q. 실기는 메인페이지만 만드나요?
2026 공개문제 24과제는 모두 메인페이지 제작을 요구합니다. 사이트 맵의 서브 메뉴는 메뉴 구조로 구현하고, 상호작용 요소에는 임시 링크를 걸도록 안내합니다.
Q. jQuery를 써도 되나요?
공개문제 요구사항은 제공된 jQuery 오픈소스를 활용할 수 있다고 적고 있습니다. 슬라이드는 JavaScript(jQuery 포함)나 CSS 중 하나 이상으로 만들어야 합니다.
Q. 공개문제와 똑같이 출제되나요?
게시물은 실제 출제 문제가 공개문제와 일부 다르거나 바뀔 수 있다고 안내합니다. 공개문제는 문제지 형식과 요구 수준을 익히는 용도로 보세요.
Q. 실기에 떨어지면 필기를 다시 봐야 하나요?
필기 합격일부터 2년 안에는 필기가 면제되어 실기만 다시 접수할 수 있습니다. 재접수 기준은 실기시험 재접수에 있습니다.
Q. 출제기준이 2028년에 바뀌나요?
현재 실기 출제기준 적용기간은 2027년 12월 31일까지이고, 이후 출제기준은 2026년 11월 1일 기준 미게시입니다. 실기 과목명은 별표 8의2에서도 같아 유지될 예정입니다.
함께 보면 좋은 글
- 웹디자인개발기능사 취득방법
- 웹디자인개발기능사 필기 공부방법
- 큐넷 공개문제 출제기준 찾는 방법
- 국가기술자격 시험문제 저작권
- 실기시험 지참준비물 확인 방법
- 실기시험 재접수
- 필기시험 면제 기간과 조건
- 컴퓨터그래픽스운용기능사 취득방법
- 정보처리기능사 실기 준비방법
- 국가기술자격 합격 기준과 과락
참고 이 글의 근거 자료입니다(2026년 11월 1일 조회).