||||<table align=right><tablebordercolor=#21439c><bgcolor=#21439c> {{{+2 {{{#FFFFFF '''웹디자인기능사'''}}}}}}[br]{{{#FFFFFF '''Craftsman Web Design'''}}} || || 관련부처 || [[산업통상자원부]] || || 시행기관 || [[한국산업인력공단]] || [목차] == 개요 == 웹페이지제작에 대해서 보는 자격증. [[산업통상자원부]]가 주무부처로 관장하고 한국산업인력공단에서 주관하는 그래픽 관련 기술시험이다. 참고로 웹디자인기능사도 처음에 국가공인민간자격 이였다. 1, 2, 3, 4회 시험이 열리고 의무검정도 실시된다. == 필기 == *디자인일반 *인터넷일반 *웹그래픽디자인 선지선다형으로 과목당 과락은 없다. 그냥 토탈 60문제중 36문제만 맞으면 합격이다. [[컴퓨터그래픽스운용기능사]]와 [[전자출판]]기능사랑 중복되는 과목들이 있다. 그래서 두세가지 기능사를 동시에 준비하는 사람이 꽤 존재한다. 2020년 기준 필기 응시료는 14,500원이다. == 실기 == 허용 : [[Brackets]] 또는 [[어도비 드림위버]], [[어도비 포토샵]] 또는 [[어도비 일러스트레이터]] 금지 : [[어도비 애니메이트]] 2017년 제2회차 시험부터 평가방법이 위와 같이 변경되었다. 단순히 컴퓨터 작업으로 디자인 작업 및 구현이 아닌, 웹 표준화 기준에 적합한 디자인 및 콘텐츠 구현으로 방법이 변경되었으며, Flash 애니메이션이 삭제되는 대신 ''' [[JavaScript]], [[jQuery]], [[CSS]]를 활용한 애니메이션 구현'''으로 변경되었다. 때문에 난이도가 꽤 상승했다. 응시료는 2020년 기준 20,100원이다. === 난이도 === * [[2016년]] 이전 비슷한 종목자격인 [[컴퓨터그래픽스운용기능사]]랑 평이하다는 평이 많이 나온다. 하지만 둘다 시험을 치뤄봐도 웹디자인이 쉬웠다는 평이 많았고 컴퓨터그래픽스가 웹디자인보다 쉬웠다는 평도 나온다. 컴퓨터그래픽스는 주로 일러스트의 제작과 포토샵의 편집, 인디자인의 서체 작성 위주 등의 고정성 분야이지만 이 시험은 '''입체감, 역동성, 생동감, 색변화'''가 요구되는 시험이기 때문에 컴퓨터그래픽스에 비해서 상당히 어려울 수 있다. 특히 어도비 플래시와 드림위버를 통해서 입체감과 역동감을 줘야하기 때문에 컴퓨터그래픽스에 비하면 어렵고 복잡한 부분이 있다. 가산점 및 채점 분야에서는 둘 다 비슷하면서 다른데 컴퓨터그래픽스에서는 '''어도비 일러스트의 사용 빈도'''에 따라서 가산점이 어느 정도 주어질 수 있지만 이 시험에서는 '''어도비 플래시 및 드림위버 사용 빈도'''에 따라 가산점이 어느 정도 주어진다. 입체감을 구성강조하고 역동성을 입히며 색의 변화성을 강조하는 시험이기 때문에 플래시 및 드림위버 사용 빈도에 가산점이 주어진다. 합격률도 비슷한 상황이며 상술했듯 입체적인 감각과 역동적인 감각이 없을 경우 어려움을 느낄 수 있다. 입체감과 역동성을 위해서는 '''어느 정도의 집중력과 사고력'''이 요구되기 때문에 이런 점을 감안해야 한다. * [[2017년]] 이후 기존의 시험 방식에서 완전히 갈아 엎어졌다고 보면 되고, 디자인 보단 프로그래밍 쪽이 치중됐다. 기본적으로 제공하는 jQuery의 소스는 제외한, HTML, CSS, Javascript를 '''직접''' 작성해야한다. Flash를 배제하는 추세에 맞춰 이 해부터는 Flash의 사용이 불허되므로 애니메이션도 HTML, CSS, Javascript를 이용해서 구현해야 한다. ==== 시간배분/순서 ==== 웹디자인은 시간배분을 잘해야하는 종목이다. 4시간이면 긴시간 같지만 짧은시간이다. 평가 방법이 변경이 되어 애니메이션은 반드시 [[JavaScript]], [[jQuery]], [[CSS]]로 제작해야 하므로 플래시를 사용시 '''실격'''처리가 되니 조심하자. ===== Brackets/어도비 드림위버 ===== * HTML에서 주어진 대로 큰 틀을 잡고 하위 틀을 잡아 완성해둔 후, 내부에 들어갈 텍스트, 이미지 등을 넣는다. * Javascript는 많이 복잡한 편이지만 생각보다 줄이 길지 않으니 천천히 구조를 생각을 해보면서 작성하자. 뚝딱 완성된다. * CSS에서 텍스트, 이미지 등의 효과를 넣어야 하는데, HTML에서 틀을 잡을때 클래스를 주면서 잡았다면 효과를 주기 쉬울 것이다. ===== 포토샵/일러스트레이터 ===== * 제시된 메인 이미지의 사이즈를 확인하여 총합 용량이 초과되는 경우 크기를 줄여야한다. 포토샵을 이용하여 이미지의 크기를 줄이면 된다. 또한 메인 이미지에 적절한 텍스트를 삽입하는 등의 수정을 해야 하는 경우도 있다. * 주어지는 내용에 따라 이미지(아이콘 또는 배너)를 만들어야한다. HTML에서 틀의 크기를 잡아둔걸 생각하며 빠르게 작업 해야한다. 2~3개의 이미지를 간단히 만들면 되니 시간 잡아먹지 않도록 하자. * 텍스트나 다른 도형 등에 색상을 넣을때 hex코드를 참고하기 위해 포토샵이나 일러스트레이터를 켜두면 좋다. === 채점 기준 === 채점은 감독관에 의해 현장채점방식으로 채점된다. 배점표는 아래 항목을 참고하자. ==== 배점표 ==== ||<bgcolor=#333> {{{#white CSS}}} ||<bgcolor=white> 15 || ||<bgcolor=#333> {{{#white HTML 이용}}} ||<bgcolor=white> 15 || ||<bgcolor=#333> {{{#white 프레임/레이아웃}}} ||<bgcolor=white> 10 || ||<bgcolor=#333> {{{#white 제작이미지}}} ||<bgcolor=white> 10 || ||<bgcolor=#333> {{{#white 제공이미지}}} ||<bgcolor=white> 10 || ||<bgcolor=#333> {{{#white 파일포맷}}} ||<bgcolor=white> 5 || ||<bgcolor=#333> {{{#white 화면크기}}} ||<bgcolor=white> 10 || ||<bgcolor=#333> {{{#white 폴더관리}}} ||<bgcolor=white> 5 || ||<bgcolor=#333> {{{#white 링크관리}}} ||<bgcolor=white> 5 || ||<bgcolor=#333> {{{#white 애니메이트}}} ||<bgcolor=white> 15 || 60점 이상이면 합격이다. === 실격 기준 === * 파일의 용량이 '''5MB'''가 넘어갈 경우[* 사실 5MB가 넘으면 제출조차 안 된다.] * '''압축 파일'''로 제출하는 경우 * '''20% 미만의 완성도'''일 경우 * 수험자가 '''프로그램 사용이 미숙'''하면 감독관 판단에 따라 실격 * 스타일을 '''외부 CSS 파일로 처리'''하지 않을 경우 * --'''Flash''' 사용시--[* Flash 프로그램은 2021년부터 사용이 중단되어 해당되지 않는다.] * '''부정행위''' 적발시 == 시험 팁 == * 디자인 요소도 중요하지만, 프로그래밍 요소가 더욱 중요해졌다. 과도하게 디자인 요소에 신경쓰기 보단 [[OME]]스러운 디자인만 피하는 쪽으로 빠르게 작업하는 것을 추천한다. * [[JavaScript]]로 구현해야하는 내용은 보통 3가지가 주어지는데, 기본적인게 모두 완성이 되었을 때를 가정하여 2가지만 해도 나쁘지 않은 점수를 얻을 수 있다. 메인이미지에 적용되는 슬라이드와 페이드인/아웃은 랜덤으로 둘 중 하나는 반드시 나오며 구현하지 못하면 미완성으로 실격 처리되므로 공부를 해도 이해가 어렵다면 외워서라도 시험을 봐야한다. [[분류:기능사]]