본문 바로가기

자격증, 시험 준비

[웹디자인 기능사] 웹디 실기 독학과 후기 (웹디 실기 준비 방법과 휘경동 시험장 후기)

반응형

 

 어제 대망의 웹디자인 기능사 실기 시험을 치고 왔다! 시험 공부를 본격적으로 하기 전부터 HTML과 CSS, JQuery 를 공부하고 있었기 때문에 시험 공부에는 딱 열흘 투자했는데, 충분히 합격할거라고 생각하는 중이다. 결과는 7월이 지나야 나오지만, 슬라이드를 포함해 지시사항대로 구현을 했고, 특별히 오류는 없었으니 합격하지 않았을까 싶다.

 

( 2022.3.26일 업데이트 : 시험 결과에 관한 후기를 쓰지 않았는데, 첫 실기시험으로 바로 합격을 했다.

참고로 지금은 웹퍼블리셔로 새로운 직장에서 근무중이다. )

 

 그런 의미로 오늘은 따끈따근 웹디자인 기능사 실기 시험에 대한 정보와 공부 방법, 후기를 남겨볼까 한다.

 앞으로 웹디자인 기능사 시험을 준비하시는 분들에게 참고가 되었으면!

 

<웹디자인 기능사 실기 시험접수>

 이건 뭐, 필기 시험 후기에서 부터 언급했어서 딱히 할말은 없지만 시험접수가 제일 어려운듯하다. 이 글을 보시는 분들은 아마 다들 접수한 후가 아닐까? 접수전이라면, 접수 전날 사전입력을 하고 휴대폰과 컴퓨터, 인터넷이 가능한 기기는 모두 동원하여 접수 대기를 타시기를! (어플로도 가능하니 어플 확인도 필수)

 나는 접수 첫날, 둘째 날에도 실패하고, 셋째 날 오후 2시에 오픈하는 시험장 접수를 성공했으니, 접수시간이 끝날때까지 열심히 도전하다보면 한타임 쯤은 잡을 수 있지 않을까. 접수만 성공해도 반은 성공한거라 생각한다.

<웹디자인 기능사 실기 공부 자료와 TIP>

 웹디자인 기능사도 다른 국가 자격 시험과 같이 공개문제가 있기 때문에 공개 문제를 바탕으로 공부를 하면 훨씬 쉽게 다가갈 수 있다. 실제 시험장 문제도 공개문제와 똑같이 출제가 되었기 때문에 다른거 볼 필요 없이 12개의 공개 문제만 다 풀이할 수 있어도 합격할 수 있을 것이라 생각한다. 

👀 필수! 웹디자인기능사 공개문제 다운로드

 

국가자격 종목별 상세정보 | Q-net

 

www.q-net.or.kr

 저작권 문제로 블로그에 공개 문제를 업로드 하지말라고 시험장 감독관에게 들어서 큐넷 홈페이지 첨부했다. 위 홈페이지에서 웹디자인 기능사에 대한 전체적인 설명을 볼 수 있을 뿐만 아니라 출제기준과 공개문제를 다운로드 받을 수 있다.

👀 웹디자인기능사 실기시험 예제 사이트

 

웹디자인기능사 실기시험 예제 사이트

웹디자인기능사 실기시험 예제 사이트입니다. 웹디자인기능사 실기시험을 독학하시는 분들께 도움이 되었으면 좋겠습니다. 감사합니다.

webdesignmilk.com

 웹디자인 기능사 실기 공개문제 1번 ~ 12번까지의 유형과 수험자에게 제공되는 임시 자료를 다운로드 받을 수 있고, 완성된 코드와 설명도 볼 수 있다. (실제 시험과 가장 유사한 형태인듯!)

 나는 HTML과 CSS를 이미 공부를 한 상태에서 시험 준비를 한거라 수험자 제공 자료만 다운로드 받아서 직접 코딩을 하는데 사용했는데, 잘 모르는 상태에서 독학으로 시험을 준비하는 분이라면 위 웹사이트는 엄청난 도움이 될 것 같았다. 꼭 참고하세요!

 

 * 아래에 내가 실전 예제를 연습하며 코딩했던 전체 파일도 업로드 해두었으니 필요하신 분은 다운로드 받아서 봐도 될 것 같다.

👀 YouTube 웹스토리보이의 웹디자인 기능사

 

웹디자인 기능사

 

www.youtube.com

 웹디자인 기능사 실기를 검색하면 가장 많이 보이는 웹스토리보이의 웹디자인 기능사 실기 강의 영상이다.

 기본 유형을 다루는 강의와 실전사이트 3개를 만드는 강의로 진행되는데 실전사이트 강의는 실제 웹디자인 기능사 공개문제보다는 난이도가 있지만, 실무에서는 비교적 더 도움이 될만한 보다 현실적인 웹사이트로 구성한 듯 했다.

 시험은 정해진 유형이 있기 때문에 HTML과 CSS를 이전에 다뤄봤다고 해도 연습 강의는 한번씩 보는 것을 추천한다. 더 쉽고 빠르게 시험 문제를 파악할 수 있을 것이다.

 

 강의를 만드신 웹스님은 포트폴리오를 만들면서 알게된 강사 유튜버인데 웹디자인 기능사 대비 강의 뿐만 아니라 다양한 웹코딩 자료와 스터디 수강생들의 포트폴리오 영상도 볼 수 있어 많은 도움을 받고 있다.

👀 YouTube 율희쌤의 웹디자인 기능사 문제 풀이

 

웹디자인기능사-문제풀이

 

www.youtube.com

 웹스토리보이의 실전사이트 강의가 어렵게 느껴진다면, 공개문제로 문제풀이를 하는 율희쌤의 강의도 추천한다.

이어폰으로 들으면 한쪽으로밖에 안들리는 단점이 있어 살짝 불편함도 있었지만 설명도 잘 해주시고, 유형도 잘 다루어 주시고, 관련 파일을 요청하면 보내주시기도 한다. 

 (하지만 나는 개인적으로 웹스토리보이님의 강의가 좀 더 좋았고, 추천한다.)


👀 HTML5 유효성 검사를 해주는 사이트

 실기시험 요구사항에 HTML5 기준 웹 표준을 준수하여야 한다고 되어 있기 때문에 내가 작성한 코드가 HTML5를 준수하는지 확인을 해야한다. 아래 사이트에 파일을 첨부해 확인할 수 있지만 실기 시험장에서는 인터넷이 되지 않기 때문에 확인할 수가 없으니 평소 코딩을 할 때 웹 표준을 준수하는 습관을 들이는 것이 중요하다.

 

The W3C Markup Validation Service

파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사

validator.kldp.org

 연습 때에는 위 사이트에서 예제 하나가 끝날 떄 마다 유효성 검사를 해주면 좋을 것 같다.


 

 ⭐아래 파일은 내가 실전 연습을 하며 공개문제를 바탕으로 제작했던 12가지 유형의 웹사이트인데,

혹시나 참고하실 분이 있으시다면 참고하시면 될 것 같다.

웹디자인기능사 공개문제 실전연습.zip
4.32MB
웹디자인 기능사 실기 시험 예제

 "웹디자인기능사 실기시험 예제 사이트"에서 다운로드 받은 자료를 바탕으로 제작했고, css, script, images 폴더는 따로 분리했지만 파일 자체는 12개 모두 같은 폴더에 넣어서 관리했다. 각 html 파일을 확인하고, 같은 번호의 css파일과 script, images 파일을 확인하면 된다.

 공개 문제 지시사항을 제대로 못봐서 빠뜨린 것도 조금 있기 때문에(ex. 헤더와 푸터 부분이 브라우저의 100%가 되게 하라는 것, 상호작용이 필요한 모든 콘텐츠의 임시링크 부분 등) 100% 정답이라고는 할 수는 없지만 합격에 참고할만한 자료는 아닐까 싶다. 


웹디자인 기능사 실기시험 한번 더 Check List 

  • 지시사항을 꼼꼼히 읽고 문제에서 요구한대로 제작했는지 한번 더 확인하자.
  • 슬라이드 구현을 못하면 감점이 아니라 실격이기 때문에 슬라이드 부분은 무조건 암기해야 한다.
  • Google Chorme과 Internet Explorer로 html파일을 열어 제대로 나오는지 확인하자.
  • 폴더 용량이 5MB가 넘으면 실격이기 때문에 제출 전 폴더 용량도 확인하자. (그런데 사실 용량이 5MB 이상 나올 경우는 드문 것 같다. 실전연습 12개 다 합쳐도 5메가가 나오지 않아서.. 용량걱정은 딱히 안해도 되겠지만 체크는 필수!)
  • 혹시 모를 경우를 대비하여 저장은 틈틈히 한다.
  • 시험 당일 준비물 : 신분증(필수), 펜 하나(들고는 갔지만 안썼다), 수험표는 안들고가도 됨

유용한 브라켓 단축키 

Emmet 

: Emmet이 있으면 유용하게 사용할 수 있으니 찾아보고 가는것도 좋을 것 같다.

 

 ! + tab   DOCTYPE 선언 & html 문서 자동완성 (Emmet이 없을 경우를 대비해 외워 가는것도 추천)

!DOCTYPE html
<html lang="ko">
  <head>
      <meta charset = "utf-8">
      <title>Document</title>
  </head>
  <body>
  </body>
</html>

 

div.slide + tab  →  클래스명이 "slide"인 div태그 생성

<div class="slide"></div>

 

div#slide + tab  →  아이디명이 "slide"인 div태그 생성

<div id="slide"></div>

 

ul>li*4>a[#] + tab  →  아래와 같은 코드를 한번에 만들어줌 (메뉴를 만들때 사용)

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

 

단축키

Ctrl + D  →  커서가 있는 해당 줄을 복사하여 바로 아래에 붙여넣음

Ctrl + Shift + /  →  커서 위치에서 주석 만들기 (그냥 Ctrl + / 이렇게 하면 커서가 위치한 줄의 맨 앞에서 주석을 만든다. 주석을 딱히 만들지 않아도 되지만 사용하실 분들이라면 참고하세용)

휘경동 서울국가자격시험장 웹디자인 기능사 실기 후기 

 나는 휘경동 서울국가자격시험장에서 시험을 쳤다. 그나마 서울에 접수해서 다행이라고 생각했지만, 아침 8시 30분 시험이라 여섯시 반부터 일어나야만 해서 너무 피곤했던 하루였다.

 비가 추적추적 내리는 날이었고, 날씨가 꿉꿉해서 그런지 시험장 내부도 왠지 꿉꿉한 기분이었다. 그래도 지난번 필기 시험을 응시하러 갔을 때는 직업전문학교라 더 좁고, 대기실도 없어 건물 밖에 서서 기다려야만 했는데 여기는 대기실이라도 있어서 다행이었다.

 

 시험장 입실시간은 8시 30분이었지만 신분증 확인, 시험 유의사항과 설명 등으로 9시에 본격적으로 시작을 했다. 10분정도 늦게 온 사람이 있기는 했는데 별말 없었던 걸 보니 입실은 가능한듯 했다.  

 코로나로 인해 자리 배치는 앉은 자리 그대로 했고, 시험 시간이 길어서 그런지 시험 중에 화장실에 가고 싶으면 손을 들라고 했다. 

 

 시험 문제는 같은 시험장에 있는 사람 모두 같은 유형을 받았고, 우리는 7번 유형 '세계의 미술작품'을 했었다. 큐넷 홈페이지에 올라와 있는 자료와 완전히 똑같은 시험지였다. 슬라이드는 위에서 아래로, 탭메뉴와 패밀리 사이트는 없는 유형이었다. 저거 두개 만드는게 제일 귀찮았는데 다행이다 싶었다.

 감독관들이 충분히 설명을 해주시겠지만, 시험장 컴퓨터에 나의 비번호와 같은 폴더를 만든 후에 그 안에서 작업을 하면 된다. 수험생에게 제공되는 폴더 안에는 필요한 이미지와 작성 해야할 문구가 들어있고, 이를 활용해 지시사항에 따른 웹사이트 코딩을 하면 된다. 연습할 때 자료에서는 로고 이미지는 따로 없어서 '세계의 미술작품' header폴더의 로고를 보고 살짝 당황헀었다. 로고의 색을 바꾸는 작업이 있었고, 로고 원본 파일이 ai파일이라 일러스트로 작업을 해야 했다. 사실 포토샵과 일러스트를 거의 만질 줄 몰라서 약간 당황했지만 색만 바꾸면 되는 작업이라 이래저래 클릭하다가 방법을 찾아서 무사히 색을 변경했었다. 포토샵으로는 슬라이드 이미지 사이즈 변경만 했다. 포토샵과 일러스트 버전은 CS6인가? 낮았던 걸로 기억한다. 

 에디터 프로그램은 브라켓을 사용했고, Emmet이 깔려있는지 걱정하시는 분들이 많던데 다행히 설치가 되어있어서 편하게 사용했었다. 다만 라이브 서버가 에러가 잦아서 너무 불편했었다. 계속 라이브 서버를 새로 켜며 작업을 했었다. 집에서 할 때는 그런 일이 없었는데, 시험장 컴퓨터 문제인 것 같다.  

 

 컴퓨터와 자세가 너무 불편하기는 했다. 모니터와 나 사이에는 코로나 때문인지 투명 가림막이 있었고 (이상하게 모니터 뒤에서부터 가리는게 아니고, 모니터 앞에 투명 가림막이 있었다....), 언제적 시스템인지 키보드와 마우스는 책상 밑에 서랍식으로 있고(책상 위로 올리고 싶은 마음이 굴뚝같았다..), 나는 계속 노트북만 사용하다가 자판이 높은 키보드를 쓰려니 타자도 잘 안쳐지고 너무 불편했었다.

 연습을 할때와 환경이 다른것도 시험을 칠때 고려해야 할 것 같았다. 물론 시험 시간이 4시간이라 시간적 여유는 충분했지만.

 

 시험 시간 4시간 중,  2시간 반 정도 지나서 나온 것 같다. 이상하게 시험 중에 연습할 때 잘 안되던 것들의 총체적 집합으로 반복되었다. 지금도 왜 안되었는지 이해되지 않는 CSS 부분이 있었는데, 결국 해결을 못해서 HTML을 수정하여 해결을 했었다. 완성을 한 후 슬라이드 구현과 크롬과 인터넷 익스플로러, 콘솔의 에러를 몇번이나 확인하고 문서를 모두 닫았다. 시험을 다쳤다고 의사표현을 하면 감독관이 용량을 확인하고(2.7MB 정도 나왔던 것 같다), 감독관의 컴퓨터로 내 파일을 옮긴 후에, 감독관의 컴퓨터에서 내 작업물이 잘 작동하는지 크롬과 인터넷 익스플로러에서 열어보게 한다. (잘 안되면 수정하게 하나..?) 잘 동작하는 것을 확인한 후 시험장에서 나올 수 있었다.  

 내가 시험장에서 나올때 즈음엔 거의 반정도 시험을 끝마치고 이미 퇴실한 상태였다. 그 중 2명은 기권을 했었다. (기권이라고 감독관 컴퓨터에 써져 있었다.) 애초에 오지 않은 사람도 많았던 것 같다. 응시인원이 23명이었는데, 겨우 14명만 왔었다.

 

 시험장에서 나올때 문제지를 가지고 와도 되는데, 나는 이미 큐넷에 공개된 문제라 따로 가지고 나오지는 않았다. 그런데 지금 잠깐 확인해 보니 내가 연습때 만든 사이트랑 조금 다른것 같은데..? 헤더, 푸터 100% 나는 안했는데 내가 문제를 잘못 읽었을까? 여튼 문제지는 혹시 모르니 가져오는 것을 추천한다. 나처럼 나중에 확인해보고 싶은 뭔가가 생각날 수도 있으니까.

 큰 실수가 없었다면 합격일거라고 생각은 하지만, 섣불리 판단했다가 실망한 적이 있어서 결과가 나올때까지는 기다려봐야 알것 같다. 제발 예상대로 합격하기를!!!

반응형