웹디자인기능사 실기 유형 정리

지난 3월에 있었던 웹디자인기능사 2019년 1회차 시험에 최종 합격했습니다.

웹퍼블리싱을 6개월 정도 공부한 저에게는 무난한 난이도였습니다.

실제 준비 기간은 시험이 있던 그 주 평일 월화수목금 총 5일이었고 하루에 웹 사이트 하나씩 제작하여 유형을 모두 익혔습니다.

시중에 나와있는 '이기적in 웹디자인기능사 실기 기본서'를 살까도 고민했지만 2018년 버전이라 망설여졌고

무엇보다 큐넷에 올라온 2019년도 공개문제가 상당히 잘 만들어져 있어 오직 공개문제로 공부했습니다.

 

http://www.q-net.or.kr/cst006.do?id=cst00601&gSite=Q&gId=&brdId=Q006&code=1204#

공개문제 자료실 목록 | Q-net

하지만 무턱대고 시험을 치기에는 헷갈리는 요소가 분명 존재하고, 유의할 점도 있습니다.

특히 시험 유형을 간단하고 명쾌하게 알려주는 곳이 없어서 저는 스스로 공부하다가 뒤늦게 알아낸 경우가 많았습니다.

그래서 시험 전 알아둬야 할 아주 기본적인 사항과 시험 유형을 쉽게 알려드리겠습니다.

 

웹디자인기능사 공개문제를 보게 되면 첫페이지는 위 사진과 비슷합니다.

이는 실제 시험에서 나눠주는 것과 동일합니다.

여기서 유의해야 할 점은 5MB 용량과 지시하지 않은 사항은 자유롭게 디자인하는 것입니다.

저의 경우에는 제출 직전 최종파일의 합계는 2MB 정도였습니다.

PSD파일을 제출하는 실수만 없다면 5MB는 초과하지 않을 것입니다.

그리고 제가 웹디자인기능사를 공부하면서 놀란 점인데, 생각 이상으로 디자인에 자유도가 높습니다.

차라리 '이대로 완성해주세요.' 하고 정답을 제시해주면 편할텐데 그게 아니기 때문에 스스로의 재량에 따라 디자인을 해야합니다.

 

두번째 페이지는 시험을 치면서 가장 많이 보게 될 페이지입니다.

위에서 디자인에 자유도가 높다고 설명했는데요, 여기서는 그와 반대되는 시험 내에서 반드시 지켜야 할 와이어 프레임이 나와있습니다.

당연히 매 시험마다 와이어 프레임은 조금씩 바뀌어서 출제되고, 몇 가지 유형들이 있는데 그 유형을 모두 파악하고 가야 합니다.

간단하게 살펴보면, 헤더 100px, 슬라이드 영역 300px, 본문 영역 200px, 푸터 100px 이렇게 네 구역으로 구성되어 있습니다.

 

시험에서 중요한 것은 상단 메뉴의 구성입니다.

메뉴바의 유형을 살펴보면 아래와 같습니다.

 

1번 예시

2번 예시

3번 예시

4번 예시

5번 예시

이렇게 총 다섯가지 메뉴로 구성되어 있으며 실제 시험에 어떤 것이 출제될지 모르기 때문에 모두 만들 줄 아셔야 합니다.

얼핏 보면 1번과 2번이 동일한 것으로 보이지만, 2번 유형은 서브 메뉴의 가로가 본문의 100%를 차지해야 합니다.

1번과 3번도 비슷해보이지만 3번은 해당 메인 메뉴의 서브 메뉴만 등장해야하는 차이점이 있습니다.

제가 시험 공부를 하면서 다른 사람들이 제작한 사이트를 방문해봤는데 이를 지키지 않은 분들이 자주 보였습니다.

사소해도 반드시 지켜야 합니다.

1번부터 5번 유형 모두 어려운 난이도는 아니기 때문에 한 번씩 연습해본다면 그 다음은 쉽게 제작할 수 있을 것입니다.

 

 

메뉴 구성과 함께 그 다음으로 중요한 것이 슬라이드 구성입니다.

특히, 슬라이드가 구동되지 않으면 실격 처리되기 때문에 반드시 움직이도록 만들어야 합니다.

슬라이드 유형은 가장 기초적인 가로 슬라이드부터 세로 슬라이드, 페이드 인/아웃 슬라이드 총 세 가지 입니다.

가로 슬라이드와 세로 슬라이드는 제작하는데 거의 차이가 없으며, 페이드 인/아웃 슬라이드는 가로/세로 슬라이드와는 약간 다르고, 보다 어려운 편에 속합니다.

 

 

시험에서 가장 중요한 것이 위 두 가지이고, 이를 무사히 제작했다면 사실상 합격이라고 보셔도 됩니다.

물론 이후의 작업들도 무난하게 제작했다는 가정 하에서 말이죠.

 

본문 영역은 두 가지로 나뉩니다.

첫번째는 공지사항/갤러리를 클릭 이벤트로 제작하고 두번째는 이를 따로 분리배치하여 클릭 이벤트 없이 제작합니다.

당연히 두번째가 훨씬 간단한 편입니다.

 

 

그리고 마지막으로 중요한 점이 바로 공지사항의 첫번째 게시글을 클릭했을 때 나타나는 이벤트입니다.

여기서 주의할 사항은 레이어 팝업창, 모달 레이어 팝업창 두 종류가 있다는 점입니다.

레이어 팝업창은 일반적인 팝업창이라고 보시면 됩니다. 평상시에서 추가로 팝업창 하나만 뜨는 경우입니다.

모달 레이어 팝업창은 특수한 팝업창으로 그 팝업창 외에 다른 컨텐츠는 작동이 안되도록 하는 경우입니다.

이것도 많은 사람들이 간과하는 부분으로 반드시 확인하여 제작해야 합니다.

마지막 푸터는 특이사항 없이 제작하면 됩니다.

 

그 외에 유의사항으로는 css와 js를 별도의 파일로 제작, Table태그 사용 금지,

html파일 제목을 index.html으로 해야 하며, 압축하여 제출시 실격이라는 점 등이 있습니다.

시험장에 들어가면 감독관께서 친절하게 설명해주시고, 제출할 때도 손을 들어서

'이렇게 제출하면 되나요?' 하고 질문하면 옆에서 가르쳐주기 때문에 너무 걱정할 필요는 없습니다.

 

시험 시간은 총 네 시간입니다.

저는 문제 유형을 모두 알고 갔기 때문에 제출을 완료하고도 한 시간 넘게 여유가 있었습니다.

하지만 연습 없이 시험장에 간다면 부담감이 컸을 것입니다.

특히 예상치 못한 부분에서 오류가 발생하면 30분은 훌쩍 지나갑니다.

따라서 혹시 모를 최악의 사태를 대비하여 메뉴 구성과 슬라이드 구성은 수차례 연습, 혹은 암기하고 가는 것이 좋습니다.