웹디자인기능사 실기시험 합격 & 독학 후기(3개월 - 자바스크립트)

목차

 

---

시작하며

오늘 오전에 2023년 웹디자인기능사 4회 실기시험에 응시했고 최종 합격했다. 코딩에 '코'자도 모르던 나였기에, 실기시험을 처음 준비할 때는 많이 막막했다. 하지만 꾸준히 공부하다 보니 어렵게만 보였던 코딩의 개념들이 서서히 이해되기 시작했고, 어느 순간부터는 코딩을 즐기고 있는 나를 발견했다. 

 

지난 몇 개월간 독학으로 시험을 준비했던 과정들을 공유해보려고 한다.

---

자바스크립트 vs 제이쿼리

웹디자인기능사는 Javascript 나 jQuery 중 선택해서 애니메이션을 구현해야 한다. 상대적으로 구조가 간단한 jQuery를 암기해서 시험에 응시하는 경우가 많은 것 같다. 다만, jQuery는 사장되어 가는 라이브러리기도 하고, 시험을 보는 목적자체가 스펙이 아닌 장기적으로 코딩지식을 쌓아가는데 그 목적이 있었기 때문에 개인적으로 처음부터 무조건 자바스크립트로 작업하기로 선택하고 준비했다. 

---

3개월 독학 후 합격

위에서 언급했다시피 3~4개월 전 시험을 준비하기 시작했을 땐, 코딩에 대한 지식이 거의 전무한 상태였다. HTML엔 여러 가지 태그(Head, Body, Title 등등)가 존재한다는 것 정도만 알고 있던 수준이었다.

 

웹디자인기능사는 필기와 실기로 나누어져 있고, 필기 합격 후 실기시험에 응시할 수 있다:

 

[필기시험 후기]

필기시험은 지난 6월에 합격했다. 준비기간은 7일. 디자인과 컴퓨터를 다루는데 어느 정도 익숙한 사람이라면 실기시험은 쉽게 합격할 수 있다.

 

필기시험 후기 & 독학 게시글은 여기로:

 

웹디자인기능사 필기시험 벼락치기(7일) & 합격후기

 

필기시험은 굉장히 쉬운 반면에 실기시험은 난이도가 꽤 높은 편(물론 어디까지나 코딩 지식이 전무하다는 가정 하에)이라 체계적인 준비가 필요했다.

 

필기 합격직후 3회 실기시험(8월 말)을 바로 등록했으나 디자인 공부를 병행하는 과정에서 준비가 부족하다는 판단 하에 취소하고, 오늘 4회 시험에 응시했다.

---

실기시험 준비기간

실기시험은 총 3개월 정도 준비했고 독학으로 공부했다. 가장 큰 도움을 받은 건 유튜브 webstoryboy 채널. 웹디자인기능사 실기강의 플레이리스트 영상(총 40여 개 정도)을 하나하나 따라 해 보면서 시험을 준비했다. 유튜브에 찾아보면 강의가 꽤 여러 개 나오는데, webstoryboy 채널이 가장 체계적이고 최신 방식으로 코딩을 진행(세로 코딩, flex 사용 등등)해서 따라 하며 공부하기 편했다.

 

처음엔 코딩 태그나 개념을 하나하나 이해하려고 하기보단 무작정 따라 하면서 공부를 했다. 일정기간 이상 반복하며 따라 하니 자연스럽게 이해가 되기 시작했다. 

 

HTML이나 CSS의 경우엔 따라 하다 보면 금방 이해가 되지만, 자바스크립트는 달랐다. 처음에 자바스크립트 예제를 따라 해 보면서 너무나 큰 좌절(?)을 했던 기억이 떠오른다. 개념자체를 이해하지 못하면 시험 당일에 무조건 오류가 발생할 거란 확신이 들었고, 시간이 좀 걸리더라도 자바스크립트 개념을 따로 공부하기로 했다. 자바스크립트는 생활코딩 Web 자바스크립트 수업을 들으며 공부했다.

 

HTML, CSS, JavaScript에 대한 개념이 어느 정도 잡힌 뒤로는, 시험 예제 문제를 반복적으로 풀어보면서 준비했다. webstoryboy 예제풀이 영상이 이번에도 도움이 많이 되었다.

*단, webstoryboy 채널의 경우 메뉴와 슬라이드 등의 기본구조를 배우는 영상에서는 자바스크립트 코드를 알려주지만, 예제 풀이 영상에서는 제이쿼리만 사용한다. 따라서, 개인적으로 아래와 같이 자바스크립트 버전으로 따로 예제를 풀어보면서 공부했다.

 

혹시 자바스크립트 관련해서 참고하실 분은 아래의 유형별 문제풀이 포스팅 참고:

 

A-1: https://saejunahn.tistory.com/82

A-2: https://saejunahn.tistory.com/83

A-3: https://saejunahn.tistory.com/84

A-4: https://saejunahn.tistory.com/85

B-1: https://saejunahn.tistory.com/86

C-1: https://saejunahn.tistory.com/87

D-1: https://saejunahn.tistory.com/88

E-1: https://saejunahn.tistory.com/89

 

유형별로 문제를 풀어본 다음엔 시험 주관사인 큐넷에서 제공하는 공개문제를 하나씩 풀어보았다. 결과적으로 시험 보기 3~4일 전에는 모든 유형을 2시간 정도 안에 코딩할 수 있을 정도로 공부했다.

 

3개월 독학 과정을 간단히 요약해 보면 아래와 같다:

 

Month 1: webstoryboy 웹디자인기능사 레이아웃 유형 공부(HTML & CSS)

Month 2: 생활코딩 자바스크립트 입문강의 & webstoryboy 웹디자인기능사 애니메이션 유형(메뉴, 슬라이드 유형)

Month 3: 예제 문제 풀이 반복

---

실기시험 당일

시험장소 - 성남그린컴퓨터아카데미

웹디자인기능사 실기시험 신청을 생각보다 경쟁이 심하다. 서울 특히, 주말(토&일)은 굉장히 빨리 마감된다. 12월 초에 등록하려 했으나 실패하고 결국 차선책으로 11월 말 분당에 위치한 '성남그린컴퓨터아카데미'를 시험장소로 선택했다. 

*서울의 경우도 대부분 시험장소가 외곽에 위치한 경우가 많기 때문에, 실기시험을 신청할 때 신분당선으로 접근이 용이한 경기도 분당 지역을 먼저 노려보는 것도 괜찮다. 어차피 어딜 가나 멀다

 

컴퓨터아카데미답게 시설은 깔끔했다. 시험 전에 잠시 프로그램을 점검하는 시간을 주는데, 이땐 인터넷이 연결되어 있기 때문에 Liver Server도 설치할 수 있다. 모니터도 와이드형에 Visual Studio Code와 브라우저창 반반씩 띄우고 작업하기 좋다. 어도비 포토샵과 일러도 모두 최신 CC 버전으로 설치되어 있다. 혹시 Emmet이나 라이브서버가 없을까 봐 마음의 준비를 하고 갔는데 다행이었다.

 

시험유형

D 또는 E 같은 반응형 유형이 출제될까 봐 준비를 단단히 하고 갔는데, 만만한 B유형(B-4 산업대학교)이 출제되었다. 평소 집에서 맥을 사용하기 때문에 윈도우 키보드에 익숙해지는데 시간이 조금 필요했으나, 금방 적응했다(다행히 시험시간은 4시간으로 충분히 여유가 있다).

 

조금 긴장을 한탓인지 이미지 슬라이드 관련 HTML코드가 조금 꼬여서 처음에 시간을 좀 잡아먹었으나, 다행히 자바스크립트로 애니메이션을 구현하는 부분까지 모두 완벽하게 풀었다. 시험시간은 2시간 15분 정도 소요되었다.

---

시험후기

지난주만 하더라도 걱정을 많이 했는데 시험을 잘 봐서 만족스럽다. 시험을 앞두고 2주 동안 정말 열심히 준비했는데, 그에 대한 보상을 받은 것 같다.

 

사실 웹디자인기능사 실기 시험을 준비하면서 기대했던 것보다 학습시간이 많이 소요돼서 시험을 준비한 걸 좀 후회(?) 하기도 했다. 한창 UX 공부하고 디자인 포트폴리오를 쌓아갈 시기인데, 시간을 많이 뺏겨서 갈수록 초조해졌다. 하지만, UXUI디자인을 공부해 나가는 과정에 있어서 분명히 향후에 도움이 될 거라고 생각했고, 기왕 준비하기 시작했으니 잘 준비해서 한 번에 합격하자고 마음먹고 준비했다.

 

자격증이 취업에 큰 도움이 되지 않는 건 사실이지만 애초에 처음부터 코딩에 입문할 목적으로 시작했기에 후회는 없고, 그 목표도 달성한 것 같다. HTML, CSS와 JavaScript에 대한 기본 이해도를 갖추고 나니 코딩을 더 배워보고 싶은 욕구가 생긴다. 앞으로도 여유가 생길 때마다 차근차근 공부해 볼 생각이다.

---

개인적인 TIP

이해될 때까지 반복학습

코딩은 프로그램에서 작업을 수행하기 위해 사용되는 '언어'로 컴퓨터로 명령하는 것을 의미한다. 즉 새로운 '언어'를 배우는 것과 마찬가지이기 때문에 절대적인 학습시간을 확보해야 한다. 처음엔 답답하고 이해가 되지 않아도, 인내심을 가지고 반복해서 코딩을 하다 보면 어느 순간 패턴이 보이고 이해되기 시작한다. 그때부터 시험준비에도 재미가 붙기 시작한다.

 

chatGPT 활용

코드에 문제가 발생했거나, 혹은 내가 예제 코드를 살짝 수정하고 싶을 때 chatGPT를 이용하면 도움이 많이 된다. 코드를 빠르게 리뷰해 줄 뿐만 아니라 개선점을 찾을 수도 있다. 개인적으로 chatGPT를 통해 리뷰한 코드를 보면서 공부가 많이 되었다. 특히, 메인메뉴의 애니메이션을 구현할 때 도움을 받았다 - 개인적으로 서브메뉴 숫자에 따라서 height를 자동으로 조절하고 싶었는데, chatGPT를 통해 이 자바스크립트 코드를 찾을 수 있었다.