| 웹디자인기능사 Craftsman Web Design | |
| 관련부처 | 산업통상자원부 |
| 시행기관 | 한국산업인력공단 |
1. 개요
웹페이지제작에 대해서 보는 자격증. 산업통상자원부가 주무부처로 관장하고 한국산업인력공단에서 주관하는 그래픽 관련 기술시험이다. 2025년 '웹디자인개발기능사'로 명칭 변경 예정이다.1, 2, 3, 4회 시험이 열리고 의무검정도 실시된다.
2. 필기
- 디자인일반
- 인터넷일반
- 웹그래픽디자인
선지선다형으로 과목당 과락은 없다. 그냥 토탈 60문제중 36문제만 맞으면 합격이다.
컴퓨터그래픽스운용기능사와 전자출판기능사랑 중복되는 과목들이 있다. 그래서 두세가지 기능사를 동시에 준비하는 사람이 꽤 존재한다.
2020년 기준 필기 응시료는 14,500원이다.
3. 실기
허용: Visual Studio Code, 어도비 포토샵, 어도비 일러스트레이터, Notepad++금지: 어도비 애니메이트
2017년 제2회차 시험부터 평가방법이 위와 같이 변경되었다. 단순히 컴퓨터 작업으로 디자인 작업 및 구현이 아닌, 웹 표준화 기준에 적합한 디자인 및 콘텐츠 구현으로 방법이 변경되었으며, Flash 애니메이션이 삭제되는 대신 JavaScript, jQuery, CSS를 활용한 애니메이션 구현으로 변경되었다. 때문에 난이도가 꽤 상승했다.
포토샵과 일러스트레이터를 사용한다는 점에서 컴퓨터그래픽스운용기능사나 전자출판기능사와 공통점이 있지만 차이점도 있는데, 컴퓨터그래픽스운용기능사와 전자출판기능사가 포토샵과 일러스트레이터, 인디자인을 활용한 '디자인'에 초점을 맞추고 있다면 웹디자인기능사는 포토샵과 일러스트레이터로 이미지 파일을 제작하긴 하나 본질적으로 '프로그래밍'에 초점을 맞추고 있다. 또한 컴퓨터의 기종을 선택할 수 있는 컴퓨터그래픽스운용기능사 및 전자출판기능사와는 다르게 웹디자인 기능사는 무조건 IBM호환용(윈도우)으로만 시험을 칠 수 있다.
응시료는 2020년 기준 20,100원이다.
3.1. 난이도
- 2016년 이전
가산점 및 채점 분야에서는 둘 다 비슷하면서 다른데 컴퓨터그래픽스에서는 어도비 일러스트의 사용 빈도에 따라서 가산점이 어느 정도 주어질 수 있지만 이 시험에서는 어도비 플래시 및 드림위버 사용 빈도에 따라 가산점이 어느 정도 주어진다. 입체감을 구성강조하고 역동성을 입히며 색의 변화성을 강조하는 시험이기 때문에 플래시 및 드림위버 사용 빈도에 가산점이 주어진다.
합격률도 비슷한 상황이며 상술했듯 입체적인 감각과 역동적인 감각이 없을 경우 어려움을 느낄 수 있다. 입체감과 역동성을 위해서는 어느 정도의 집중력과 사고력이 요구되기 때문에 이런 점을 감안해야 한다.
- 2017년 이후
기본적으로 제공하는 jQuery의 소스는 제외한, HTML, CSS, Javascript를 직접 작성해야한다. Flash를 배제하는 추세에 맞춰 이 해부터는 Flash의 사용이 불허되므로 애니메이션도 HTML, CSS, Javascript를 이용해서 구현해야 한다.
3.1.1. 시간배분/순서
웹디자인은 시간 배분을 잘 해야 하는 종목이다. 4시간이라고 하면 얼핏 길어 보이지만 코딩하고 제작이미지 작성하고 하다 보면 의외로 시간이 금방 가기 때문이다.평가 방법이 변경되어 애니메이션은 반드시 JavaScript, jQuery, CSS로 제작해야 하므로 플래시를 사용시 실격처리가 되니 조심하자.
3.1.1.1. Visual Studio Code
- HTML에서 주어진 대로 큰 틀을 잡고 하위 틀을 잡아 완성해둔 후, 내부에 들어갈 텍스트, 이미지 등을 넣는다.
- Javascript는 많이 복잡한 편이지만 생각보다 줄이 길지 않으니 천천히 구조를 생각을 해보면서 작성하자. 뚝딱 완성된다.
- CSS에서 텍스트, 이미지 등의 효과를 넣어야 하는데, HTML에서 틀을 잡을때 클래스를 주면서 잡았다면 효과를 주기 쉬울 것이다.
3.1.1.2. 포토샵/일러스트레이터
- 제시된 메인 이미지의 사이즈를 확인하여 총합 용량이 초과되는 경우 크기를 줄여야한다. 포토샵을 이용하여 이미지의 크기를 줄이면 된다. 또한 메인 이미지에 적절한 텍스트를 삽입하는 등의 수정을 해야 하는 경우도 있다.
- 주어지는 내용에 따라 이미지(아이콘 또는 배너)를 만들어야한다. HTML에서 틀의 크기를 잡아둔걸 생각하며 빠르게 작업 해야한다. 2~3개의 이미지를 간단히 만들면 되니 시간 잡아먹지 않도록 하자.
- 텍스트나 다른 도형 등에 색상을 넣을때 hex코드를 참고하기 위해 포토샵이나 일러스트레이터를 켜두면 좋다.
3.1.2. 요구사항
시험마다 요구사항이 조금씩 다르지만, 기술적 준수 사항들은 항상 공통적으로 적용된다.- HTML 문서는 HTML5를 기준으로 작성되어야 한다. 따라서 HTML 문서 최상단에
<!DOCTYPE html>로 문서 형식 선언을 해야 한다. - HTML, CSS, JavaScript 모두 오류가 없어야 한다. 실제 시험장에서는 인터넷이 차단되어 W3C 유효성 검사 사이트에 접속할 수 없으므로 이 부분은 충분한 연습이 필요하다. 단, JavaScript의 경우 개발자 도구를 열어 콘솔창을 보면 오류 여부를 알 수 있다.
- CSS와 JavaScript는 별도의 파일로 만들어서 HTML 파일에 연결해야 한다.
- 인코딩은 반드시 UTF-8로 해야 한다. HTML 파일의 경우
<head>태그의 하위 요소로 인코딩을 명시하는 메타태그(<meta charset="UTF-8">)를 넣어주고, CSS 파일의 경우 맨 윗부분에@charset "UTF-8";을 적어준다. - 마우스로 클릭해서 상호작용할 필요가 있는 콘텐츠는 마우스 없이 키보드의 Tab 키만 눌러도 이동이 가능하도록
<a href="#">식으로 임시링크를 건다. - 다양한 해상도에서도 페이지 레이아웃이 일관성을 유지해야 한다.
<table>태그를 레이아웃용으로 사용해서는 안 된다.- CSS를 비활성화하면 콘텐츠가 세로로 나열되게끔 HTML 코드를 작성해야 한다.
- 타이틀(title), 바디(body), 메뉴(menu) 텍스트의 글꼴을 적절히 설정하여 사용자가 텍스트간의 위계질서(hierarchy)를 직관적으로 알 수 있도록 해야 한다.
- 모든 이미지에는
<img src="foo" alt="bar">식으로 alt 요소를 지정하여 대체 텍스트를 표현할 수 있도록 해야 한다. - 브라우저의 종류에 관계없이 메인페이지의 레이아웃과 구성요소의 크기 및 위치 등이 동일하게 표시되어야 한다.
3.2. 채점 기준
채점은 감독관에 의해 현장채점방식으로 채점된다. 배점표는 아래 항목을 참고하자.3.2.1. 배점표
| CSS | 15 |
| HTML 이용 | 15 |
| 프레임/레이아웃 | 10 |
| 제작이미지 | 10 |
| 제공이미지 | 10 |
| 파일포맷 | 5 |
| 화면크기 | 10 |
| 폴더관리 | 5 |
| 링크관리 | 5 |
| 애니메이트 | 15 |
60점 이상이면 합격이다.
3.3. 채점 제외(실격) 기준
다음 중 어느 하나에 해당되면 채점 대상에서 제외되어 불합격 처리된다.- 기권
- 수험자가 시험 도중 기권 의사를 표시한 경우
- 미완성
- 제한시간을 초과한 경우
- 20% 미만의 완성도일 경우
- 슬라이드 배너 이미지가 움직이지 않고 하나만 보이는 경우
- 오작
- 작업물이 요구사항과 현격히 다르다고 채점위원이 판단한 경우
- 스타일을 외부 CSS 파일로 처리하지 않을 경우
- 파일의 용량이 5MB가 넘어갈 경우[1]
- 압축 파일로 제출하는 경우
- 슬라이드 배너를 CSS와 JavaScript(jQuery)가 아닌 다른 방법(
Flash[2], 애니메이션 GIF 등)으로 구현한 경우 - 기타 실격 사유
- 수험자가 프로그램 사용이 미숙하면 감독관 판단에 따라 실격
- 부정행위 적발시
4. 시험 팁
- 디자인 요소도 중요하지만, 프로그래밍 요소가 더욱 중요해졌다. 과도하게 디자인 요소에 신경쓰기 보단 OME스러운 디자인만 피하는 쪽으로 빠르게 작업하는 것을 추천한다.
- JavaScript로 구현해야하는 내용은 보통 3가지가 주어지는데, 기본적인게 모두 완성이 되었을 때를 가정하여 2가지만 해도 나쁘지 않은 점수를 얻을 수 있다. 메인이미지에 적용되는 슬라이드와 페이드인/아웃은 랜덤으로 둘 중 하나는 반드시 나오며 구현하지 못하면 미완성으로 실격 처리되므로 공부를 해도 이해가 어렵다면 외워서라도 시험을 봐야한다.