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