웹디자인기능사 실기 후기

 

 

 

 

예전부터 웹디자인 기능사를 취득해야지 하면서 계속 필기만 합격해놓고 실기는 미루고 있다가

결국 2년이 지나버려서 실기 못 치고 올해는 꼭 따야겠다는 생각으로 도전!

 

필기는 예전에 공부했어서 그런지 한 일주일 공부하고 87점으로 합격

여자가 응시자가 많아서 그런지 합격률은 전반적으로 남자보다 10퍼센트가까이 더 높다.

2018년 웹디자인기능사 필기합격률

 

 

문제는 실기인데 예전에도 잠깐 독학으로 공부했었지만 HTML, CSS 기초부터 다시 배워보고자

학원을 한 달가량 다녔다

( 솔직히 너무 기초여서 웬만한 웹에 관심 있으신 분은 독학으로도 가능하겠지만 집에서는 도저히 공부가 안되고 내 돈 주고 일마치고 학원이라도 다녀야 게으르지 않을 것 같아서 다니게 됐다.)  

 

필기 합격 후 바로 실기 원서접수

한 달 조금 넘는 기간에 실기 준비를 했지만 실상 제대로 공부한 건 일주일?

(책만보고하면 될줄알고 책만으로 공부하다가 시험일주일남겨놓고 공개와이어프레임이 있다는사실을 뒤늦게알게됨)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

책은 보통 이교재를 많이 구입하시는 것 같다 

나 역시도 처음에는 이교재를 처음부터 끝까지 완독하고 기출 5회까지 연습을 완료함.

 

 

하지만 이 책에 기출 문제대로 실기가 출제되진 않는다는 것을

참 어리석게도 시험 일주일도 남지 않은 상태에서 알게 되었다.

(그래도 완전 생 초보는 이 책으로 틀을 잡는 것도 괜찮다고 생각한다.)

 

 

이 책에 나와있는 기출문제랑 비슷하게 나오겠지라고 생각하고 책에 있는 제이쿼리 내용을 그대로 외웠는데

일주일도 남지 않은 상황에서 처음부터 다시 한다는 생각으로 부랴부랴 와이어프레임부터 다시 짜 보기 시작했다.

 

시험에는 우선 가로 메뉴 3가지, 세로 메뉴 2가지 가로 슬라이드, 세로 슬라이드, 페이드인 페이드아웃 , 탭 메뉴가 랜덤으로 나오는 형태인데 공개 와이어프레임이 있기 때문에 와이어프레임을 모두 연습해본다면 좋았겠지만 시험이 일주일도 남지 않은 상황에서 조금 촉박했다. 그래서 레이아웃 따로 연습, 메뉴 따로, 이미지 슬라이드 따로, 탭 메뉴 따로 하나씩 분리해서 따로따로 연습을 했다. 

 

 

와이어프레임1번 부터 차근차근 연습해보기로 함

 

 

 

 

전체가로메뉴

가로메뉴중에 가장 난이도가있는 전체가로메뉴(색상은 확인을 위해 아무거나 삽입)

 

 

 

 

 

 

 

와이어프레임 1번 Just쇼핑몰 연습

(연습으로 헤더 푸터 구분을 위한 임의의 색상)

일단 디자인은 신경안쓰고 코드위주로 반복연습함 (이미지는 연습용이라서 쇼핑몰에서 캡쳐해서 포토샵으로 사이즈맞춰서 삽입)

 

 

 

 

 

 

세로메뉴

 

세로메뉴의 두가지형태 책에나온 제이쿼리를 살짝응용해보니  만들수 있었다 (코딩에 집중함 색상은 임의의 색상으로 아무거나 넣음)

 

 

 

이미지 슬라이드

상하슬라이드(좌우슬라이드는 제이쿼리소스에서 margintop을 marginleft로 주면 바뀜)

 

페이드인페이드아웃 효과

 

이기적인 책에 나오는 슬라이드는 이미지 하나가 <--- 이쪽으로 갔다가 <---이쪽으로 사라지는 형태가 아니라 <--이렇게 갔다가 -->다시 이쪽으로 가는 역방향 형태라서 가로 슬라이드라고 하기도 좀 애매했다. 세로도 마찬가지였다.

그래서 가로 슬라이드, 세로 슬라이드 소스도 다른 걸로 연습함..

이미지 슬라이드는 이해도 이해지만 반복 숙달, 제이쿼리 코드를 완전히 암기를 해서 가던지,

손에 익히던지 해야 된다고 생각해서

가로 슬라이드, 세로 슬라이드 , 페이드인 페이드 아웃 소스코드를 달달 외우고 연습까지 해서 어떻게 동작하는지까지 어느 정도 이해를 하고 시험장에 가야 된다는 생각으로 연습했다. (시험장 가기 전까지 소스코드 연습했고 핸드폰 갤러리에 소스코드 저장해서 가는 길에도 계속 봤다. 떨어지더라도 정말 최선의 노력은 해보고 떨어지자는 생각이었다.)

 

 

 

 

탭 메뉴 

 

 

 

 

 

 

 

 

 

개인적으로 탭메뉴는 많은 연습이 필요했다.

시험에서는 박스크기를 똑같이 해주고 테두리선이 없는상태로 심플하게 작업했다.

(물론 시험에서는 저런 눈아픈 원색은 사용하지않았다.)

 

 

 

 

모달 창

모달창안에 이미지 삽입한 버전

모달창안에 텍스트삽입한 버전

 

 

모달 창은 이기적 책에도 나오는 부분이라 살짝 응용만 하면 다른 형태로도 얼마든지 만들 수 있는 정도였다.

어떻게 보면 가장 쉬웠던 부분이 모달이 아닐까 생각이 든다 제이쿼리도 단순하고.

 

이기적 책에는 이미지를 클릭하면 모달 창이 뜨지만 시험에는 

첫 번째 공지사항 글을 클릭했을 때 모달 창을 띄워라고 출제된다.

소스코드도 시험에 나오는 코드 중에 가장 간단하다. show() 보여주고 hide() 숨기고

테이블로 공지사항 만들면 이렇게  tr:first-child를 주면 된다. 

제이쿼리중에 그나마 쉬운...

 

 

 

 

 

 

 

일주일 만에 와이어프레임 보고 새로 연습하려니 너무 스트레스를 받았다. 조금 일찍 알았더라도 스트레스받았겠지만;;

거기다가 내가 사는 곳은 시험장이 없어서 다른 지역의 시험장에 가는데만 거의 3시간 정도 걸리고 아침 8시 시험이라 어쩔 수 없이 전날 가는 수밖에 없었다.

 

 

걱정이 돼서 그런지 잠을 거의 자는 둥 마는 둥 2시간 잤나 싶을 정도로 몽롱한 상태로 시험장으로 출발했다.

(솔직히 잠을 푹 자고 맑은 정신에 시험을 보고 싶었다 ㅜ_ㅜ 그래도 마음을 살짝 비우고 시험에만 집중하자는 생각으로 갔다.)

 

 

 

이날 시험은 이거와 똑같은 와이어프레임이 출제됐다.

 

 

솔직히 세로 메뉴에 엄청 복잡하게 출제돼도 각오가 되어있는 상태였다.

 

가로 메뉴 중에 가장 난이도가 낮은 메뉴가 나와서 우선 한숨을 돌렸지만 

페이드인 페이드아웃에 탭 메뉴가 나왔고

한 번도 해보지 않은 푸터형식이 나왔다 푸터는 그렇게 어려운 것은 아니었지만

푸터 연습할 시간이 거의 나질 않아서.... 거의 내 방식대로 만들었다. 그래도 똑같이 구현하긴했다.

 

로고는 주어진 AI파일을 시험에서 주어진 주조색 보조색을 활용에서 색상만 바꿔서 포토샵으로 편집해서 넣었다 디자인일을 해서 잠깐해서 그런지 진짜 이래도 되나 싶을 정도로 너무 성의 없었지만 이 시험에 가장 중요한 부분은 디자인보다도 구현의 목적이 크기 때문에 로고는 그냥 이미지가 넙적해진다거나 길쭉해지지 않고 비율에 맞도록 삽입하면 되는 문제였다.

 

가로 메뉴가 가장 쉬운 메뉴가 나왔다고 방심했던 탓인지 슬라이드 동작이 되질 않아서 한 2분간 뇌 정지가 왔다.

 

하지만 이래저래 생각하면서 소스코드 입력하다 보니 다시 작동이 됐다.

그렇게 방심은 금물이라는 단어를 다시 한번 각인시키며 이미지 슬라이드와 탭 메뉴 제이쿼리부터 입력했다.

왜냐하면 제이쿼리 소스코드가 왠지 시험시간이 지나면 지날수록 생각이 안 나는 거 아닐까 하는 마음이 들어서였다.

 

배너와 바로가기 메뉴는 평소에 했던 데로 article태그로 left, center, right 구간으로 나누어서 작업을 했다.

푸터도 세 구간으로 나누어서 작업을 했다. 

 

배너 있는 곳은 이미지 두장을 활용해라라고 해서 두장 합성해서 흐려진 중간 부분에 글씨를 넣을 생각이었는데

포토샵을 하도 오랜만에 사용해서 인지 툴사용이 서툴러진 것도 있고 디자인 작업하다가 왠지 시간이 금방 지나가 버릴 거 같은 초조함에 그냥 이미지 모서리만 둥글게 처리하고 태그로 글 삽입했다 아마 여기서 감점이 되지 않았나 싶다.

 

바로가기도 아이콘을 사용하여 디자인을 조금이라도 했어야 되는 건가 싶은데 그냥 시커먼 아이콘 3개 사용했다 ㅋㅋㅋ

시간관리를 위해서^^

진짜 디자인을 한 것이 없다고 해도 될 정도로 디자인 작업을 하지 않았다.

디자인이라는 게 많은 생각을 하게 되고 손이 많이 가는 작업이다. 

시험 특성상 디자인은 시험 시간에 낮은 비율을 두자라고 생각했던 거 같다. 

4시간 시험인데 생각보다 빠른 3시간 정도 돼서 작업이 완료되었다.

남은 1시간 동안 수정하고 디자인하려고 했는데 괜히 어설프게 만졌다가 소스코드는 점하나만 잘못 찍혀도 한번 꼬이면 찾기도 힘들기 때문에 그냥 그대로 제출하였다.

 

 

 

 

6월 21일 결과가 나왔다.

아무래도 디자인에서 점수가 많이 깎인 것 같다. 

그리고 푸터메뉴에서 코드가 꼬인 것인지 정렬이 안 맞아서

억지로 margin으로 마이너스 값 줘서 잡아당겨서 넣은 것에서 점수가 깎인 것 같다.

 

2018년 웹디자인기능사 실기합격률

 

응시자가 그렇게 많지는 않지만 합격률도 그리 높은 편은 아닌 시험이라 

한 번에 합격하긴 했지만 정말 힘든 시험이었다.

시험이 끝나고 한 일주일간은 무슨 공부든 생각이든 하고 싶지가 않았다 

그렇게 머리를 식히다 보니 코드들이 기억이 잘 안 난다....ㅠㅠ 너무 나태해지는 것 같아서

지금은 인강으로 또 다른 자격증을 공부 중이다.