필기객관식 · 60문항 · 1시간
- 웹디자인구현, 웹페이지제작(60문항)
- 프로토타입 기초데이터 수집 및 스케치 · 프로토타입 제작 및 사용성 테스트 · 디자인구성요소설계제작 · 구현 및 응용 · 조색 · 배색 · 프로젝트 완료 자료 정리
웹디자인개발기능사 공부법
웹디자인개발기능사는 HTML·CSS·JavaScript로 웹페이지를 직접 만드는 웹디자인 분야 기능사예요. 2025년부터 웹디자인기능사에서 이름이 바뀌었고, 상시가 아니라 정기 기능사 일정으로 1년에 4번 시행해요. 필기는 UX 기획·사용성 테스트, 디자인 구성요소, 웹 구현, 조색·배색을 '웹디자인구현, 웹페이지제작' 한 과목 60문항으로 묻고, 실기는 제공된 자료로 메인페이지를 3시간 정도 동안 만드는 작업형이에요. 필기는 코드 문항과 색채 암기로 넘을 수 있지만, 실기는 메뉴·슬라이드·탭·레이어 팝업을 시간 안에 동작하게 만드는 손 연습이 핵심이에요.
- 난이도
- 쉬움
- 평균 합격률
- 74.2%
- 필기 과목 수
- 1과목
- 연간 시행 횟수
- 연 4회
- 예상 준비 기간
- 1~2개월(실기 연습 별도)
- 시험 시간
- 필기 60분(CBT, 60문항, 객관식 4지택일) · 실기 작업형 3시간 정도
웹디자인개발기능사는 한국산업인력공단이 시행하는 국가기술자격으로, 큐넷 정기 기능사 일정에 따라 1년에 네 번 시행돼요. 응시 자격 제한이 없고, 필기는 출제기준상 '웹디자인구현, 웹페이지제작' 한 과목에서 객관식 4지 택일형 60문항을 60분 동안 풀어요. 필기·실기 모두 100점 만점에 60점 이상이면 합격이에요.
2025년부터 종목 이름이 웹디자인기능사에서 웹디자인개발기능사로 바뀌었어요. Q-Net 종목 코드(7798)와 종목별 검정현황은 그대로 이어지므로, 2024년까지의 통계는 웹디자인기능사 시절 수치예요. 지금 출제기준은 2025년 1월 1일부터 2027년 12월 31일까지 적용되고, 2026년 10월 18일 기준 그 뒤의 새 기준은 아직 올라와 있지 않아요.
필기 주요항목 7개는 프로토타입 기초데이터 수집 및 스케치, 프로토타입 제작 및 사용성 테스트, 디자인구성요소설계제작, 구현 및 응용, 조색, 배색, 프로젝트 완료 자료 정리예요. 크게 보면 UX 기획과 사용성 조사, 화면 설계와 이미지·매체, HTML·CSS·JavaScript 구현, 색채(조색·배색)가 한 과목 안에 섞여 나와요. 코드 문항은 실기와 그대로 이어지고, 색채는 순수 암기라 표로 정리해 두면 점수를 지키기 쉬워요.
실기 과목은 '웹디자인 실무'이고, 수험자에게 주는 이미지·텍스트 같은 자료로 메인페이지를 디자인해 HTML·CSS·JavaScript로 만들어 제출하는 작업형이에요. 시험 시간은 3시간 정도예요. 이 자격은 지정된 교육·훈련과정을 마치고 내·외부 평가를 거쳐 받는 과정평가형으로도 취득할 수 있지만, 해당 종목을 운영하는 교육훈련기관이 있어야 해요.
웹디자인개발기능사 출제기준 주요항목 (2025.1.1 ~ 2027.12.31)
세부·세세항목은 빼고 주요항목만 옮겼습니다. 전체 기준은 출처에서 볼 수 있습니다.
실기작업형 · 3시간 정도
- 웹디자인 실무
- 프로토타입 기초데이터 수집 및 스케치 · 프로토타입 제작 및 사용성 테스트 · 디자인 구성요소 설계·제작 · 구현 및 응용
출처 Q-Net 웹디자인개발기능사 출제기준 (2025.1.1~2027.12.31) · 확인일 2026년 10월 18일
웹디자인개발기능사 추천 학습 순서
- 1HTML5 문서 구조·시맨틱 요소와 CSS 박스 모델·명시도·position·flex·미디어 쿼리 정리하기
- 2JavaScript 변수·형 변환·DOM·이벤트·setInterval과 jQuery 메서드를 콘솔에서 직접 실행해 보기
- 3와이어프레임·스토리보드·정보구조, 이미지 형식과 용량 계산, 게슈탈트·타이포그래피 익히기
- 4먼셀·NCS·CIE L*a*b* 표색계, 혼합·대비·배색, UX 조사 방법과 저작권을 표로 정리하기
- 560문항 모의고사로 합격선을 넘긴 뒤 Q-Net 공개문제로 3시간 실기 연습을 시작하기
웹디자인개발기능사 독학으로 가능할까?
필기는 문제집과 CertHub CBT 반복으로 독학하는 수험생이 많아요. 실기도 에디터와 크롬 브라우저만 있으면 집에서 연습할 수 있고, Q-Net에 2026 공개문제(과제 24개)가 올라와 있어 과제를 하나씩 3시간 안에 만들어 보는 방식으로 준비할 수 있어요. 코딩이 처음이라면 HTML·CSS 기초 강의를 짧게 듣고 시작하는 편이 시간을 아껴요.
웹디자인개발기능사 추천 교재
수험생이 많이 찾는 교재를 모았어요. 링크를 눌러 최신 가격과 후기를 확인해 보세요.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹디자인개발기능사 과목별 공략법
- 웹디자인구현, 웹페이지제작 (60문항)
- 영역별로 나눠 공부해요. 웹 구현은 박스 모델 너비·명시도·rem 같은 계산과 태그·속성 이름을 에디터에 직접 쳐 보며 익히고, 디자인 구성요소는 이미지 형식(SVG·JPEG·PNG·GIF)과 용량 계산을 짝지어 외워요. 색채는 먼셀 H V/C, NCS 검은색도·유채색도처럼 표기 순서를 표로 만들고, 가법·감법혼합 결과 색을 짝으로 외우면 점수 확보가 쉬워요. UX 영역은 조사 방법마다 '무엇을 알아내는가'를 한 줄씩 붙여 두세요.
웹디자인개발기능사 학습 계획표
4주 집중 계획 — HTML·CSS를 조금이라도 다뤄 본 사람
웹 퍼블리싱 강의를 듣거나 개인 블로그·포트폴리오를 직접 만들어 봐서 태그와 CSS 속성 이름이 익숙한 사람이에요. 하루 1~2시간 필기 공부를 하고, 실기 연습은 따로 병행한다고 가정했어요.
1주차HTML5·CSS 문항 굳히기
- 시맨틱 요소, alt·label·colspan 같은 속성, HTML5에서 폐기된 요소를 카드로 정리해요
- 명시도와 박스 모델 너비, rem 계산을 예상문제 숫자를 바꿔 직접 풀어요
- position·flex·grid·미디어 쿼리 예제를 에디터에서 직접 확인해요
2주차JavaScript와 디자인 구성요소
- 변수 선언, 형 변환(+ 연산자, ==와 ===), DOM 선택, classList, 이벤트, setInterval을 콘솔에서 실행해 봐요
- 와이어프레임·스토리보드·사이트맵과 정보구조 유형을 한 줄씩 정리해요
- 이미지 형식(SVG·JPEG·PNG·GIF)과 이미지·영상 용량 계산을 연습해요
3주차색채와 UX 조사
- 먼셀·오스트발트·NCS·CIE L*a*b* 표기법과 가법·감법·병치혼합을 표로 묶어요
- 대비·잔상 현상과 톤온톤·세퍼레이션·악센트 배색을 예시와 함께 외워요
- 페르소나·카드 소팅·A/B 테스트·5초 테스트를 '무엇을 알아내는가'로 짝지어요
4주차모의고사와 실기 준비 시작
- 60문항 모의고사를 실제 시간으로 세 번 이상 풀어요
- 틀린 문항을 주제별(UX 기획·디자인 구성요소·웹 구현·색채)로 세어 약한 주제의 표로 돌아가요
- Q-Net 공개문제 하나를 골라 메뉴·슬라이드 부분만 먼저 만들어 봐요
8주 병행 계획 — 코딩이 처음이고 일이나 학업과 함께 준비하는 사람
HTML 태그도 처음 보는 비전공자, 디자인 전공생, 직장인이에요. 평일 하루 1시간, 주말 2~3시간 정도를 가정했고, 뒤쪽 주차에는 실기 연습을 겹쳐 쓰도록 짰어요.
1~2주차HTML과 CSS 기초
- 에디터와 크롬 브라우저를 준비하고, 문서 구조·제목·문단·목록·링크·이미지 태그로 간단한 페이지를 만들어요
- 선택자, 색 표기, 글꼴, 박스 모델을 하나씩 바꿔 가며 화면이 어떻게 달라지는지 확인해요
- 예상문제를 풀며 낯선 태그·속성에 표시하고 뜻을 한 줄씩 적어요
3~4주차레이아웃과 JavaScript 기초
- flex로 헤더·메뉴·본문·푸터 배치를 만들고, 미디어 쿼리로 좁은 화면 배치를 바꿔 봐요
- 변수·조건문·함수와 querySelector·addEventListener로 버튼을 누르면 글자가 바뀌는 예제를 만들어요
- setInterval로 이미지 세 장이 돌아가는 슬라이드를 만들어 봐요
5~6주차디자인 구성요소·색채·UX
- 게슈탈트 법칙, 타이포그래피 용어, 이미지 형식과 용량 계산을 정리해요
- 표색계와 혼합·대비·배색을 표로 만들어 하루 10분씩 넘겨요
- UX 조사 방법과 저작권(보호기간, CCL 기호)을 카드로 정리해요
7~8주차필기 실전 + 실기 기초
- 60문항 모의고사를 실제 시간으로 풀고 60점을 안정적으로 넘는지 확인해요
- 주말에는 Q-Net 공개문제 하나를 3시간 안에 끝까지 만들어 보는 연습을 시작해요
- 필기 합격 발표 며칠 뒤 실기 접수가 열리니, 응시할 회차의 실기 접수 기간을 미리 봐 둬요
웹디자인개발기능사 실기 대비
실기 과목은 '웹디자인 실무'이고, 출제기준상 프로토타입 기초데이터 수집과 스케치, 프로토타입 제작과 사용성 테스트, 디자인 구성요소 설계·제작, 구현 및 응용을 수행하는 작업형이에요. 시험 시간은 3시간 정도이고, Q-Net 안내의 시험장 주요 장비는 컴퓨터와 프린터, 안전등급은 1등급이에요.
Q-Net에 올라 있는 2026 공개문제(과제 24개)를 보면, 주어진 사이트맵·와이어프레임·컬러 가이드에 따라 로고, 메인·서브 메뉴, 슬라이드, 공지사항·갤러리 탭과 레이어 팝업, 배너, 바로가기, 푸터를 갖춘 메인페이지를 HTML·CSS·JavaScript로 만들어요. 수험자 제공 파일에는 이미지와 텍스트가 들어 있고 jQuery 같은 오픈소스도 쓸 수 있어요. 과제마다 슬라이드 방향(위아래·좌우·페이드)과 영역 배치가 다르니 공개문제 전체를 훑어보세요.
- 웹 표준 조건을 처음부터 지키기
- 공개문제의 기술적 준수 사항은 HTML5 웹 표준과 W3C 유효성 검사 오류 없음, CSS3 기준 오류 없음, CSS·JavaScript를 별도 파일로 연결, Chrome 개발도구 Console 탭 오류 없음, Table 태그가 아닌 CSS 레이아웃이에요. 시험 중에는 인터넷과 유효성 검사 서비스를 쓸 수 없으니, 연습 때 검사기로 오류가 나지 않는 코드 습관을 미리 들여 두세요.
- 접근성 요구 사항 챙기기
- 모든 이미지에 alt 속성을 넣고, 로고·메뉴·버튼·바로가기처럼 상호작용이 필요한 콘텐츠는 임시 링크(#)를 걸어 Tab 키로 이동·선택할 수 있어야 해요. CSS를 끄면 콘텐츠가 세로로 나열되도록 구조를 짜고, 제목·본문·메뉴 텍스트의 위계가 보이도록 글꼴 크기와 굵기를 나눠요.
- 슬라이드는 실격과 직결
- 슬라이드를 JavaScript(jQuery 포함)나 CSS로 만들지 않으면 실격이고, 움직이지 않는 이미지 한 장만 둔 경우도 실격이에요. 공개문제는 매 3초 이내 전환, 자동 시작과 반복을 요구하니, setInterval이나 CSS animation으로 만드는 방법 하나를 정해 손에 익혀 두세요.
- 제출 형식 지키기
- 바탕화면의 비번호 폴더에 index.html을 최상위로 두고 images·css·script 같은 하위 폴더로 자료를 나눠 저장해요. 전체 용량은 10MB를 넘기지 않고 ai·psd처럼 웹에서 쓰지 않는 파일은 빼며, 채점위원 컴퓨터에서도 동작하도록 모든 리소스를 폴더 안에 넣어요. 압축해서 제출하면 실격이에요.
- 3시간 시간 배분
- 로고 디자인과 이미지 편집에 시간을 너무 쓰면 메뉴·슬라이드·탭·팝업 동작을 끝내지 못해요. 레이아웃 뼈대 → 메뉴 → 슬라이드 → 탭과 레이어 팝업 → 꾸미기 순서처럼 동작부터 완성하는 순서를 정해 두고, 과제 기준 20% 이상을 완성하지 못하면 실격이라는 점도 기억하세요.
웹디자인개발기능사 자주 헷갈리는 개념 TOP 12
CertHub 예상문제 100문항 가운데 비슷한 개념끼리 보기로 맞붙여 둔 문항을 골라 정리했습니다. 응시자 오답률 통계가 아니라 문항 구성을 보고 고른 목록입니다.
1박스 모델 너비
흔한 실수 — width에 padding과 border가 이미 들어 있다고 보고 200px을 골라요.
바로잡기 — 기본값인 content-box에서는 width가 콘텐츠 영역만의 너비라 padding·border를 양쪽 모두 더해야 해요. border-box일 때만 width에 padding·border가 포함되고, margin은 어느 경우에도 포함되지 않아요.
2선택자 명시도
흔한 실수 — 선택자가 길수록, 또는 뒤에 쓴 것일수록 무조건 이긴다고 생각해요.
바로잡기 — 명시도는 (아이디, 클래스·속성·가상 클래스, 요소) 개수로 비교해요. 요소 선택자를 아무리 많이 이어도 클래스 하나를 못 이기고, 명시도가 같을 때만 나중에 쓴 규칙이 적용돼요.
3position의 기준
흔한 실수 — absolute는 항상 바로 위 부모를 기준으로 움직인다고 골라요.
바로잡기 — absolute는 position이 static이 아닌 가장 가까운 조상이 기준이라, 부모에 position: relative를 주지 않으면 더 바깥 요소나 최초 컨테이닝 블록이 기준이 돼요. fixed는 일반적으로 뷰포트 기준이에요.
4justify-content와 align-items
흔한 실수 — flex에서 가로 정렬은 align-items라고 외워요.
바로잡기 — justify-content는 주축, align-items는 교차축 정렬이에요. flex-direction이 row면 주축이 가로라서 가로 가운데 정렬은 justify-content: center예요.
5rem과 em
흔한 실수 — rem도 부모 요소의 글자 크기를 기준으로 계산해요.
바로잡기 — rem은 루트(html) 요소, em은 부모(또는 자신)의 글자 크기가 기준이에요. html이 16px이면 1.5rem은 어디에 쓰든 24px이에요.
6JavaScript 형 변환
흔한 실수 — "5" + 3을 8로, 1 === "1"을 true로 골라요.
바로잡기 — + 연산자는 한쪽이 문자열이면 이어 붙여 "53"이 되고, ===는 자료형까지 비교하므로 숫자 1과 문자열 "1"은 false예요. 형 변환 후 비교하는 ==만 true예요.
7const와 defer
흔한 실수 — const 변수도 다시 대입할 수 있고, defer는 내려받는 즉시 실행한다고 생각해요.
바로잡기 — const는 재할당이 안 되고(객체 속성 변경은 가능), defer는 문서 해석이 끝난 뒤 작성 순서대로 실행해요. 받는 즉시 순서 없이 실행하는 것은 async예요.
8이미지 형식
흔한 실수 — JPEG도 투명 배경을 지원하고, PNG가 256색 제한이 있다고 헷갈려요.
바로잡기 — JPEG는 손실 압축·투명 미지원, PNG는 무손실·알파 채널, GIF는 256색·애니메이션, SVG는 벡터예요. 확대해도 깨지면 안 되는 로고는 SVG가 알맞아요.
9비트와 바이트
흔한 실수 — 용량 계산에서 비트 값을 그대로 바이트로 읽어요.
바로잡기 — 24비트 색은 픽셀당 3바이트, 5Mbps는 초당 5메가비트라 바이트로 바꾸려면 8로 나눠야 해요. 1920×1080 24비트는 약 6.22MB, 5Mbps 60초는 37.5MB예요.
10가법혼합과 감법혼합
흔한 실수 — 빛을 섞을 때와 물감을 섞을 때의 결과 색을 서로 바꿔 외워요.
바로잡기 — 빛의 가법혼합은 R+G=노랑, 셋을 합치면 흰색이에요. 색료의 감법혼합은 C+M=파랑, 셋을 섞으면 검정에 가까워져요.
11표색계 표기 순서
흔한 실수 — 먼셀 5R 4/14의 4를 채도로, NCS 2030의 20을 흰색도로 읽어요.
바로잡기 — 먼셀은 색상 명도/채도(H V/C) 순서라 4가 명도, 14가 채도예요. NCS 뉘앙스는 검은색도 다음 유채색도라 2030은 검은색도 20%, 유채색도 30%예요.
12톤온톤과 톤인톤
흔한 실수 — 두 이름이 비슷해 정의를 서로 바꿔 골라요.
바로잡기 — 톤온톤은 같은 색상 계열에서 명도 차를 크게 두는 배색이고, 톤인톤은 톤을 비슷하게 맞추고 색상에 변화를 주는 배색이에요.
웹디자인개발기능사 합격 전략
- 필기는 코드·색채·UX가 한 과목에 섞여 나오니, 문항 비중이 큰 웹 구현부터 굳히고 색채는 표로 반복해요.
- 계산 문항(박스 모델, rem, 이미지·영상 용량, 색차)은 식만 세우면 확실히 맞히는 문항이라 꼭 챙겨요.
- 필기 공부 중에도 HTML·CSS 예제를 직접 쳐 보면 실기 준비가 함께 돼요.
- 실기는 웹 표준 조건(W3C 오류 없음, CSS·JS 별도 파일, alt, Tab 키 이동)과 실격 조건(슬라이드 미제작, 압축 제출)부터 확인해요.
- 공개문제를 3시간 타이머에 맞춰 풀며 레이아웃 → 메뉴 → 슬라이드 → 탭·팝업 순서로 동작부터 완성하는 습관을 들여요.
공부한 내용을 웹디자인개발기능사 예상문제 100문항으로 점검하기
웹디자인개발기능사 공부법 자주 묻는 질문
Q. 웹디자인개발기능사 필기는 어떻게 구성되나요?
출제기준상 '웹디자인구현, 웹페이지제작' 한 과목에서 객관식 4지 택일형 60문항이 나오고 시험 시간은 60분입니다. 100점 만점에 60점 이상이면 합격입니다.
Q. 웹디자인기능사와 무엇이 다른가요?
2025년부터 종목 이름이 웹디자인개발기능사로 바뀌었고, Q-Net 종목 코드와 검정현황 통계는 웹디자인기능사 시절부터 이어집니다. 현행 출제기준(2025.1.1~2027.12.31)을 기준으로 공부하고, 옛 이름의 교재는 지금 주요항목과 맞는지 확인해서 쓰세요.
Q. 2027년에 출제기준이 바뀌나요?
2026년 10월 18일 기준 Q-Net에 올라 있는 출제기준은 2025년 1월 1일부터 2027년 12월 31일까지 적용되는 것 하나입니다. 2027년 시험도 이 기준으로 치러집니다.
Q. 응시 자격이 있나요?
응시 자격 제한이 없어 누구나 필기부터 응시할 수 있습니다. 필기에 합격하면 같은 회차의 실기 접수 기간에 원서를 낼 수 있습니다.
Q. 실기는 어떤 시험인가요?
수험자 제공 파일로 메인페이지를 디자인하고 HTML·CSS·JavaScript로 만들어 제출하는 작업형이며, 시험 시간은 3시간 정도입니다. 100점 만점에 60점 이상이면 합격이고, 실기 응시료는 20,100원입니다. 과제는 Q-Net 공개문제로 미리 볼 수 있습니다.
Q. 과정평가형으로도 딸 수 있나요?
Q-Net 안내에 따르면 이 종목은 과정평가형으로도 취득할 수 있습니다. 국가직무능력표준(NCS) 기반의 지정 교육·훈련과정을 이수하고 내·외부 평가를 통과하는 방식이며, 해당 종목을 운영하는 교육훈련기관이 있어야 합니다. 운영 기관은 과정평가형 자격 홈페이지(CQ-Net)에서 확인하세요.
기준일 2026년 10월 18일 · CertHub가 직접 작성한 학습 가이드입니다.
CertHub 예상문제집 · PDF
웹디자인개발기능사 예상문제 100제
공부법대로 이론을 마쳤다면, 실전 형태 문제로 빈틈을 확인해 보세요.
- 출제기준 과목 구성에 맞춘 자체 제작 예상문제
- 전 문항 정답 · 해설 수록 (오답 보기까지)
- 빠른 정답표로 먼저 채점 → 틀린 문항만 정독
- A4 인쇄 최적화 PDF, 가정용 프린터 출력 가능
5,000원
구매하러 가기기출문제 원본이 아닌 CertHub 자체 제작 예상문제입니다. 디지털 콘텐츠 특성상 다운로드가 시작된 이후에는 환불이 어렵습니다. 결제와 다운로드는 외부 판매 페이지(래피드)에서 진행됩니다.
다른 종목 예상문제 PDF 보기