웹 디자인 기능사 실기 후기
어제 웹 디자인 기능사 4회차 실기 시험을 보고왔습니다.4일이라는 짧은 기간동안 준비했기 때문에 조금 걱정이 있었는데요. 무난하게 잘 치르고 나온 것 같다는 생각이 듭니다. 다른 분들도 도움이 될 수 있도록 단기간 공부 노하우랑 실기 후기를 적어보도록 하겠습니다.
1. 시험 과정
먼저 처음 시험장에 도착을하면 따로 방을 마련해서 사전 교육을 짧게 진행합니다. 수험자 유의사항을 이야기하고 소지품에 대해 각별히 주의를 줍니다. 전자기기 등을 소지하기만 해도 부정행위로 간주될 수 있다고 강하게 이야기 하시더라고요. 그리고 여기서 신분증을 미리 체크를 하고 '비번호'를 주더라고요.
처음 웹디자인 기능사 공부를 할 때 비번호라는 말이 나오길래 도대체 이게 뭐지? 생각했었거든요. 그냥 번호더라고요. 특이한 점은 이 번호판에 달려있는 집게로 옷을 집어서 등 뒤로 넘겨줘야 해요. 뒤에서 시험관들이 내 등에 매달린 번호를 볼 수 있도록 말이죠.
수험표는 따로 출력할 필요가 없어요. 수험번호도 딱히 사용할 곳이 없더라고요. 시간이 되면 컴퓨터가 있는 시험장에 들어가서 한번 더 주의사항들을 안내받고 시험을 시작해요. 중간에 다 끝나면 먼저 확인받고 나갈 수 있어요. 저는 2번째로 빨리 끝내서 나왔답니다.
2. 코딩 소프트웨어
일단 기본적으로 브라켓을 많이 사용하실 것 같아요. 브라켓은 대부분의 시험장에 다 설치가 되어있는 것 같아요. 그런데 만약 본인이 자주 사용하는 소프트웨어가 설치되어있지 않다면 어떻게 해야 할까요? 아! 먼저 본인이 시험치를 시험장에 어떤 소프트웨어가 설치되어있는지부터 확인을 해야겠죠?
실기 시험을 접수하고 수험표 확인을 하면 기타사항에 '시설현황'이 적혀있어요. 제가 시험을 치른 곳은 포토샵2021(영문), 일러스트2021(영문), 브라켓이 설치되어있다고 나오네요.
저는 비쥬얼스튜디오코드를 사용하기 때문에 미리 해당 프로그램을 USB에 담아서 가져갔어요. 시험관에게 비쥬얼스튜디오 코드를 설치하고 싶다고 이야기 했고 옆에서 감독관이 지켜보는 조건으로 컴퓨터에 설치 후 사용했답니다.
비쥬얼스튜디오코드는 웹디자인 기능사 정식프로그램으로 채택이 되었기 때문에 원래 미리 시험장에 연락해서 설치를 요구하셔도 돼요. 그런데 저는 혹시나 모르는 일이 발생할 수 있다고 생각해서 USB도 챙겨간거예요.
3. 시험 팁
시험을 처음 보는 거지만 포토샵은 깔짝 깔짝 해본적이 있어서 이미지 관련해서는 별 걱정 안하고 갔다가 크게 당황을 했어요. 이미지 파일이 엄청나게 크더라고요. 용량도 크기 때문에 그대로 썼다가는 용량초과로 바로 탈락할 수도 있을것 같아요. 그리고 비율도 단순히 width와 height로 조절했다가는 망하는 사이즈더라고요.
슬라이드 이미지는 적절하게 크롭해서 필요한 부분만 사용을 했고요. 로고같은 경우는 일러스트 파일로 있어서 이것도 좀 당황을 했지만 마찬가지로 포토샵으로 가져와 적절히 크롭해서 사용했어요.
그리고 가장 중요한 부분인데요. 꼭!!! 꼭!!!!! 인터넷 익스플로러도 크롬과 같이 표현되는지 확인해주셔야 해요. 크롬에서는 메뉴 슬라이드 다운이 잘 작동됐는데 익스플로러에서는 작동을 안했다는 분도 계셨던것 같거든요. 그리고 글자체같은 경우 직접 지정을 해주지 않으면 각 브라우저의 기본 글자체로 표현이 돼요. 그래서 되도록 동일하게 표현될 수 있게 글자체를 지정해주시는 것이 좋아요.
4. 공부 팁
어느 정도 프론트 엔드를 다뤄보신 분이라면 웹디자인기능사 실기는 상당히 쉬운편에 속하거예요. 그런데 처음 접하시는 분이라면 너무나 막막하죠. 그렇다면 가장 중요한 것은 외워야할 부분을 최소화 시키는거예요.
기출문제를 보시면 알겠지만 이미 공개된 문제들이 서로 비슷하고 공통적으로 작성되는 부분이 많아요. 그렇기 때문에 실상 외워야 할 부분이 크지 않죠. 그런데 youtube 나 다른 블로그를 보면 상당히 불필요한 것들을 많이 집어넣어 두더라고요. 예를 들어서 프레임을 나눌 때에도 div를 여러개 사용해서 구분하던데 이럴 필요가 전.혀. 없어요.
코드는 간단하면 간단할 수록 우수한 거예요. 그래서 일단 전체 완성 코드를 가져다가 본인에게 맞도록 가장 간소한 코드로 바꿔주셔야 해요. 불필요한 div들이나 구성들을 다 덜어내고 스타일 효과도 불필요한건 다 빼버리는거죠.
그리고 동일하게 가져가는 부분들은 명칭도 동일하게 해주는거예요. 예를 들어서 저는 헤더부분 프레임을 작성할 때 아래처럼 해요.
<div class="header">
<div class="logo">
</div>
<div class="menu">
</div>
</div>
class명은 최대한 단순하게 해주시고 그 내부 구성도 최대한 간소하게 해주셔야만 부담감이 줄어서 쉽게 합격할 수 있다고 생각해요. 절대 유튜브나 책에 나와있는 것들을 그대로 외우려고 하지 마세요. 그렇게 했다간 공부기간이 한달을 넘어갈지도 몰라요.
5. jQuery
동적 작동을 하는 부분은 자바스크립트로 작성을 해야해요. 그런데 순수 자바스크립트로 작성을 하려고 하면 좀 어려워요. 그래서 간편하게 프레임워크로 나온 제이쿼리를 사용하는거예요. 다시 설명하자면 자바스크립트로 기능을 구현하려면 10줄 넘는 코딩이 필요한데 동일한 기능을 압축시켜서 3줄로 줄여놓은 라이브러리가 제이쿼리에요.
방금 라이브러리라는 말을 했는데 제이쿼리를 사용하려면 이 라이브러리가 필수예요. 원래 인터넷이 연결되면 바로바로 다운받아서 해당 기능을 사용할 수 있지만 웹디자인 기능사 시험은 인터넷 연결을 금지하기 때문에 라이브러리를 수험자파일로 제공받아서 집어넣어 사용하는거예요.
대략적인 개념은 이정도로 하고 이 제이쿼리를 사용할 때에도 최대한 단순한 코드를 사용해야 해요. 제가 생각하는 가장 단순한 소스를 아래에 작성해볼게요. 모든 유형의 제이쿼리들을 모았어요.
jQuery(document).ready(function(){
//메뉴 슬라이드다운(전체)//
$('.main_menu > li').mouseover(function(){
$('.sub_menu').stop().slideDown(500);
}).mouseout(function(){
$('.sub_menu').stop().slideUp(500);
});
//메뉴 슬라이드다운(전체+bg)//
$('.main_menu>li').mouseover(function(){
$('.sub_menu, .bg').stop().slideDown(500);
}).mouseout(function(){
$('.sub_menu, .bg').stop().slideUp(500);
});
//메뉴 슬라이드다운(일부) //
$('.main_menu>li').mouseover(function(){
$(this).find('.sub_menu').stop().slideDown(500);
}).mouseout(function(){
$(this).find('.sub_menu').stop().slideUp(500);
});
// 이미지 페이드인아웃 //
$('.slide a:gt(0)').hide();setInterval(function(){
$('.slide a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.slide');
}, 3000);
// 이미지 애니메이트(상하) //
var num=1;
setInterval(function(){
if (num<3 ) {
num++;
$('.slide ul').animate({
top: '-=300px'
}, 'slow');
} else {
num=1;
$('.slide ul').animate({
top: '0'
}, 'slow');
}
}, 3000);
// 공지사항&갤러리 //
$('.tab_title a').click(function(){
$('.tab_title a').removeClass('active');
$(this).addClass('active');
var i= $(this).parent().index();
$('.tab_body > div').fadeOut(0);
$('.tab_body > div').eq(i).fadeIn(0);
});
// 팝업 열기 //
$('.notice li:first-child').click(function(){
$('.modal').addClass('popup');
});
// 팝업 닫기 //
$('.btn').click(function(){
$('.modal').removeClass('popup');
});
});
위 소스를 살펴보면 //~~~//되어있는 부분은 주석 처리예요. 실행이 되지 않는 부분이기 때문에 이게 무엇인지 구분할 때 자주 사용해요. 여러분이 이 소스가 무엇인지 알아보기 쉽게 하도록 달아뒀어요. 그리고 $는 목적어를 지칭할 때 사용해요. 예를 들어서 아래를 살펴볼게요.
$('.btn').click(function(){
$('.modal').removeClass('popup');
});
저 코드를 한글로 바꿔보면 다음과 같아요. "클래스명이 btn인 애를 클릭하면 다음 기능을 작동 시켜라. 클래스명이 modal인 애에서 popup클래스명을 제거해라."
쉽죠? 이렇게 단순히 영어로만 코드를 작성하려고 하면 잘 안외워져요. 그 코드가 의미하는 내용을 생각하면서 하셔야 쉽게 기억이 난답니다.
6. 마지막 팁
시험을 시작하면 다른부분 작성할 생각하지 마시고 시험지 확인하신 후 해당하는 제이쿼리 내용들을 먼저 쭈욱 작성하세요. 제이쿼리는 다른것들 하다가 작성하려고 하면 갑자기 기억이 안 날 수 있어요. 이렇게만 하시면 4일 하루 4시간 가량 공부하시고 합격하실 수 있을거예요.
