아래의 내용들은수험자 입장에서 2020 웹디자인 기능사 공개문제를 모아 분석한 내용을 담고 있습니다.틀린 내용이 있을 수 있으며, 저 역시 배우는 입장이기에 무조건적인 맹신보다는공부하는 관점에서 정리한 내용임을 참고하시기 바랍니다.
(2022년 기준!!!)웹디자인 기능사 실기 후기를 모아 봤을 때, 그리고 직접 시험을 쳐 본 결과공개문제 12개 중 하나가 출제되는 것으로 확인됩니다.공개문제만 잘 파면 되고, 공개문제에 없는거 나오면 어쩌지? 하는 걱정 안해도 됩니다.
오랜만에 블로그에 왔더니 알음알음 퍼져서 많은 분들이 활용하고 계시고 있더라구요. 기쁜 마음입니다. 개인적인 시점에서는 지금 보니 어려울게 없는 문제들이지만, 막상 시험을 치러 가는 입장에서는 막막하실거란걸 너무나도 잘 알고 있습니다. 다만, 이 문서는 웹디자인 기능사에 대한 어느정도의 학습과 준비가 되어 있을 때 유용한 문서임을 꼭 감안하고 봐주세요. 처음부터 A to Z로 떠먹여주는게 아니라, 시험 직전에 보면서 놓치기 쉬운 것을 확인하는 용도에 가깝습니다.
(특히 컴퓨터 학원에서) 상업적으로 사용하는 것도 알고 있습니다. 애초에 이 요점정리 자체가 개인 스터디에서 시작했고, 단순한 문제 분석이라 별 내용 아닌 것도 알고 있으며, 공부하는 사람들에게 알려지면 도움이 되겠구나 싶어 퍼블릭하게 공유했기 때문에 출처만 분명히 해주시면 됩니다. 감사 댓글이라면 더더욱 감사하구요.
요구사항
컬러가이드
모든 공개문제는 주조색/보조색을 자율에 맡김
배경색은 모든 문제가 #ffffff
텍스트 색깔은 대부분#333333 → 단, 공개문제 기준 한 문제가 텍스트 색깔이 달랐으니 꼭 확인하고 넘어갈 것
💡
→ CSS 작성 시 *{color: #333333;} (또는 별도로 지정 된 텍스트 색깔)을 넣고 시작하면 됨 → 단, a 태그 전역 설정 시 {color: inherit;} 추가 필요 (아래 예시 참고)
header, footer의 내용물은 어떻게 중앙 정렬 해야 하죠? → header의 내용물(logo, nav)과 footer의 내용물(f_logo, f_menu, copyright, family 등)을 감싸는 div 요소를 추가하고 해당 div에 width 값과 margin: 0 auto;를 줍니다.
3. wrap의 width가 1000px(+세로형 nav)이면서 왼쪽 정렬 (공개문제 C)
💡
다른 부분은 1번과 크게 차이 없지만 wrap에 {margin: 0 auto;}를 주면 안됨.왼쪽 정렬이라 명시되어 있기 때문.
요소별 유형 분석
공통
위의 공통 사항 중 놓치기 쉬운 부분들 위주로 기재
배너/바로가기 : 공개문제 풀이 시 기존 제공되는 이미지를 삽입만 하였으나, 실제 문제에서는 주어진 리소스로 편집하고 디자인하여 이미지를 완성 해야 함.
배너 : contents 폴더에 다양한 원본 이미지를 제공하며, 그 중 하나를 선택해서 제공 텍스트와 함께 이미지 편집. 레이아웃에 들어갈 사이즈를 미리 정하고 그 크기에 맞게 맞춰서 제작하는 것을 추천하며 제공되는 텍스트와 맞는 이미지 선택이 필요함 ex) 제공 텍스트 "SNS 팔로우 이벤트" → 스마트폰이 들어간 이미지 선택
바로가기 : contents 폴더에 다양한 아이콘 이미지를 제공하며, 그 아이콘들 중 선택하여 제공 텍스트와 함께 이미지 편집. 아이콘 사용 역시 제공되는 텍스트와 맞는 아이콘 선택이 필요함.
🤔
제가 시험을 봤던 C-1 (해운대 빛축제)에서는 ["행사시간표" "예약하기" "오시는길"] 처럼 텍스트로 어떤 바로가기가 들어갈지 텍스트로만 제공이 되어서, 3개의 바로가기 이미지를 제작하라는 뜻으로 이해하고 각각 이미지를 제작해 ul>li>a>img 로 만들어서 넣었습니다. 채점결과가 잘 나온걸 보면 이게 맞는 방법으로 보입니다.
하단 로고 : 하단 로고의 경우 무조건 무채색으로 변경해야 함. 제공되는 로고든 직접 만든 로고이든 모두 해당 됨
메뉴는 크게 가로형과 세로형으로 나뉘며 가로형은 세 가지 타입, 세로형은 두 가지 타입으로 나뉨
가로형의 경우,
서브메뉴(.lnb)가 모두 펼쳐지는 타입
서브메뉴(.lnb)가 모두 펼쳐지되, 양 옆으로 날개가 함께 펼쳐지는 타입
서브메뉴(.lnb) 단독으로 펼쳐지는 타입
세로형의 경우
서브메뉴가 아래로 펼쳐지는 타입
서브메뉴가 옆으로 펼쳐지는 타입
💡
메뉴는 와이어프레임 이미지를 보고 판단해야 함
로고
로고의 경우 직접 만들거나기본 제공되는 두가지 경우
직접 만드는 경우, 심벌 없이 워드 타입(텍스트만)으로 제작해야 함
로고가 제공되는 경우 필수적으로 주제에 맞게 색상 변경을 해야하며, html 삽입 또는 이미지 수정 시 종횡비가 바뀌어선 안됨
❓
종횡비는 뭐죠? → 사진의 가로/세로 비율을 의미합니다. CSS에서 width 또는 height 값 중 하나만 적용하거나 포토샵으로 이미지 크기 조절 시 비율 고정 옵션 선택하면 종횡비가 유지됩니다.
슬라이드
a>img*3를 감싸는 요소가 필요하며, 기본 요구사항인 '컨텐츠에 임시 링크 부여' 및 'CSS 제거 시 컨텐츠가 블록형태로 쌓여야 함'을 맞추어야 하므로 ul>li*3>a>img의 형태가 이상적
위/아래의 경우, 3개의 li가 블록(display: block)으로 쌓여있어야 함
좌/우의 경우, 3개의 li가 인라인(보통 float: left 사용) 형태로 늘어트려야 함
페이드의 경우, 3개의 li의 position이 같으면 편하므로 li에 position: absolute 적용
💡
슬라이드는 js/jquery가 핵심이지만, 동작을 위한 html/css 구조 역시 중요
탭 메뉴
와이어프레임 기준으로 판단
공지사항/갤러리가 한 영역에 있으면 탭 메뉴 제작 필요 (이 말인 즉슨 JS 기능을 하나 더 짜야된단 이야기)
갤러리
공개문제 기준 12문제 중 2문제에만 해당되는 특별한 경우이나, hover 시 투명도 변화를 요구하는 문제도 존재 → 지시서를 대충 읽으면 감점되기 좋은 요소
갤러리 역시 ul>li로 작업하는 경우가 많으므로, li나 img에 :hover 를 걸고 opacity 속성을 넣어주면 됨
갤러리 역시 바로가기/배너와 마찬가지로 리소스를 원본이미지로 제공하며, 이미지를 크롭/리사이징 하는 작업 필요 (용량 제한때문)
주의사항
실격 사유
: 완성된 파일들의 지정된 용량(5MB 이하)을 지키지 않거나Slide가 정상 작동하지 않으면 실격 처리.
(시험장에서 감독관들이 두번 세번 강조하는 내용)
오탈자는 고칠 것
: 오탈자는 고치면 됨. "무조건 그대로 넣어야 되나?" 하고 고민 할 필요 없음.
(제가 그랬음...)
.psd / .ai 파일은 제출 금지
: 용량 초과의 원인이 될 수 있음. 가급적 제출폴더가 아닌 바탕화면이나 제공폴더 안에서 작업 후 옮기는 방식으로 할 것.
이게 왜 안됨?
모달창을 구현하는데 z-index가 안먹힌다
z-index 속성이 들어간 요소에 position 속성이 들어 있는지 확인하세요.
z-index는 position이 없으면 동작하지 않습니다.
(가로/세로형) 슬라이드가 동작하지 않는데, JS 코드에는 문제가 없다
슬라이드의 이미지를 감싸는 ul 또는 div에 position 속성이 들어 있는지 확인하세요.
가로/세로형 슬라이드로 많이 사용하는 jQuery 메소드인 .animate는 해당 요소에 position속성이 없으면 동작하지 않습니다.
아까는 잘 되던 JS가 모두 동작하지 않는다
그 이전에 동작을 했는데 코드 추가 후 모든 요소가 동작하지 않으면 문법 문제일 가능성이 높습니다. 크롬의 관리자 도구(F12)의 콘솔 창을 이용해 스크립트 관련 오류 메세지가 있다면 문법부터 다시 챙겨봅시다.
괄호가 빠졌는지, 특정 문법(메소드 사이의 . 이나 () 등)이 빠졌는지 확인해보세요. 이 역시 크롬 관리자 도구 콘솔창의 메세지를 통해 문제점을 확인할 수 있습니다.
코드에 문제가 없고, 문법도 다 맞는데 작동하지 않는다
HTML에서 script를 연결하는 부분에 jQuery파일과 app.js의 순서가 올바른지 확인하세요.
HTML은 위에서 아래로 읽는 방식으로 동작하기 때문에 jQuery를 먼저 읽지 않으면 동작하지 않습니다.
마치며
저 역시 시험을 준비했던
(시험 치고 와서 마무리 정리중...)
사람이고, 정확한 요소 별 채점 기준을 공개하진 않기 때문에 처음에 말했듯이 정확한 정보가 아닐 수도 있고, 완벽하다고 보기엔 어렵습니다. 다만 어쨌든 시험의 형태를 띄고 있기 때문에, 유형별로 정리하면 연습을 하는 데에 도움이 되지 않을까 하는 생각이 들어서 만들어 본 페이지에요. 부디 이 페이지가 공부하는데에 작은 부분이라도 도움이 되었으면 좋겠습니다. 읽어주셔서 감사합니다!
💡→ 파일 업로드는 프로젝트 전체가 아닌 단일 파일만 검사하기 때문에 비추천 → 실제 시험장에서는 W3C 유효성 검사를 돌릴 수 없기 때문에(인터넷 연결 안됨) 평소에 연습 시 점검하여 고치는 습관 들여야 함
(시험장에서 감독관들이 두번 세번 강조하는 내용)
(제가 그랬음...)