티스토리 뷰
#2021년 웹디자인기능사 실기 1회
작년부터 본격적으로 따야지 맘먹었던 웹디자인기능사. 학교 다닐 때 살짝 배워서 기본적인 태그와 첫 세팅 정도는 알고 있는 상태였다. html, css 기초만 알고, 자바스크립트는 배우긴 배웠는데 까먹어서 아예 모르는 채로 시작. 공부하려고 당근마켓에서 책까지 샀는데 몇 페이지 읽지도 않고 나머지는 인터넷으로 검색해가며 공부했다. 맘이 급해서...^^ 책 보고 공부하는 것도 괜찮다! 이기적 in 웹디자인기능사 실기 기본서 👈 요거 정리 잘 돼있었다.
개인적으로 조금 헷갈렸던 것들, 감점되지 않을까 우려스러웠던 것, 참고 사이트 등등 남겨두면 나중에 누군가한테 알려줄 때도 도움이 되지 않을까 하여... 정리해본다. 필기는 작년 여름, 실기는 저번 달에 보고 왔다.
#0 실기 결과
실기 점수는 감점 없이 합격했다. 늘 만점을 맞을 수는 없지만 다음에 볼 시험도 100점을 목표로 하고 공부해야겠다는 다짐을 했다. 시험장 가면 긴장해서 어중간하게 공부하는 게 나한텐 두려운 일이기도 하다. 알고 가도 시험지 보면 패닉 상태가 됨ㅠㅠ 아주 나쁜 성향... 그래도 이번엔 좋은 결과가 나와서 뿌듯하다.
전에 봤던 컴퓨터그래픽스랑 전자출판기능사 때도 나름 잘했다 생각했는데도 90점을 못 넘겼는데, 퍼블리싱이 주를 이루는 시험이라 그런가? 정확하게만 쓰면 높은 점수를 주는 것 같다. 디자인은 별로 생각 안 하고 했음.
2018년부터 따야지 따야지 생각만 하고 막상 공부한 기간은 그때부터 지금까지 합쳐서 5개월...? 되는 것 같다. 아주 징하게도 미룸. 시험 전 3주 정도 하루 3~4시간씩 사이트 만들어가며 공부했다.
#1 시험장 환경
강원도 쪽 폴리텍대학에서 시험을 봤다. 전날 퇴근하고 바로 이동했고, 근처에 숙소를 잡아놨어서 아침에 일어나서 느긋하게 출발해 시험 시각 5분 전에 도착했는데 내가 마지막이었다. 이미 설명하고 계셔서 내가 지각한 줄... 가방도 없이 휴대폰만 덜렁 들고 도착해서 허둥지둥 자리에 앉으려니 부끄러웠다.
브라켓으로 작업했는데 emmet 깔려있었다. 소스도 생각보다 많이 있고, 아이콘도 사용은 안 했지만 스크롤이 끝이 안 보일 정도로 있었고, 로고 이미지도 있었다! 검은 글씨로 돼있어서 컬러 변경을 하고 사용해야 한다. 알아보니 이건 문제마다 다른 듯? 시험장 환경이 안 좋다는 생각은 안 들었다. 어도비도 다 최신이었던 걸로 기억함.
의외의 복병이었던 게, 브라켓에서 크롬 미리보기를 켰는데 크롬창이 화면에 안 떴다. 제시된 텍스트를 봐야 하는데 메모장도 안 뜬다. 분명 작업표시줄 보면 켜져는 있는데... 마우스도 자꾸 화면 밖으로 탈출해서 찾기가 어려웠다.
창이 화면 밖으로 나가 있다는 것은 알았다. 곧이어 내 짧은 지식으로 이것이 듀얼 모니터로 설정이 돼있는 것이 아닐까!라는 생각까지 했다. 그런데 창을 내가 보는 화면 안으로 들여오는 방법을 알 수 없었다. 감독관님께 여쭤보려고 했으나, 이미 금방 전에 어도비 프로그램이 어디에 있느냐는 바보 같은 질문을 한 바로 뒤라 이것만큼은 나 스스로 어떻게든 해야겠다고 마음을 먹었다. 그래서 크롬 말고 익스플로러로 보고, 메모장이 안 보이니 메모장을 활성화 한 채로 전체 복사해서 브라켓에 붙여넣기 해가면서 어거지로 봤다. 지금 와서 생각해보니 물어보는 게 나았던 것 같다. 시험 도중 기능적인 부분만 안 물어보면 된다.
감독관님들 다 친절하셨고, 설명도 자세히 해주신다. 원래 한 시간마다 시험 시간 경과를 알려주는 듯한데, 우리는 수험자 의견을 받아서 매 시간이 아닌 1시간 남았을 때 남은 시간을 안내해주셨다. 어차피 컴퓨터 화면에 남은 시간 다 떠서 별로 상관은 없다.
#2 신경 썼던 점
1. <html lang="ko">
시험 전날에 마지막으로 페이지 만들어보고 오류 검사를 처음으로 돌려봤는데, <html> 태그에 언어 설정을 안 해주면 오류가 나더라. 그래서 달아줌... 예전에 잠깐 배울 때 안 적었던 것 같아서 생략했었는데 emmet 기능으로 ! + tab 쓰면 언어 설정까지 다 작성해준다. en을 ko로 바꾸기만 하면 된다.
2. 임시링크 <a href="#"></a>
임시링크. 공부할 땐 기출문제지를 잘 안 읽어봤는데 시험장 가서 읽어보니 로고, 이미지 슬라이드, 갤러리를 포함한 모든 이미지, 텍스트에 있어야 한다고 하길래 보이는대로 다 달아줌. 팝업창에 있는 텍스트에도 달아주었다... 나만 몰랐을 수도 있지만 적어봄. 깜빡하기 쉬운 것 같다.
또, 임시링크 공백처리는 절대 안 되는 걸로 안다! "#"을 꼭 넣어줘야 한다.
3. <section> 태그 오류
이것도 시험 전날에 오류 검사 돌려보면서 알았다. 어디서 봤는지 모르겠는데 <section> 쓰는 게 구분하기 쉽고 멋있어 보여서 메인 슬라이드, 콘텐츠 부분에다가 쭉 쓰고 있었건만 오류가 뜬다. 헤딩 태그를 필요로 한댔나. 그래서 시험 당일엔 대신 <div>를 사용했다.
4. 디자인
주조색 하나만 골라두고 나머지는 그레이톤으로 맞춰서 해두기만 해도 깔끔. 지저분해 보이진 않는다. 메인 컬러를 뭘로 할지 고민했다. 남도맛기행이 뭔지 몰라서... 남도 맛기행인지 남도맛 기행인지 남도 맛 기행인지...주어진 소스를 보면 아무래도 음식 관련 여행이지 않은가 해서 대충 맛있어 보이는 귤색으로 메인 컬러를 잡았다. 끝나고 나서 찾아보니 다행히 이미지랑 잘 맞는 것 같아서 안심했다.
#3 이미지 슬라이드 감점
위처럼 이미지가 [1] > [2] > [3] 이 순서로 간 뒤 [3]에서 휘리릭 [2]를 거쳐 [1]로 돌아가서 반복되는 애니메이션이 있다. 이게 감점이 되냐는 질문을 종종 봤는데, 감점 안 되는 것 같다. 나도 그렇게 했음. 심미적으로 거슬리면 자연스럽게 [1] > [2] > [3] > [1] > [2] …… 이렇게 반복되는 코드를 연습해도 되겠지만, 감점이 걱정되어서라면 필수는 아님!
당장은 이런 게 있구나~ 하고 이해하고 넘어가는 정도면 될 듯. 실제로 쓸 일이 거의 없어서 금방 까먹는다.
#4 작업 순서
제일 먼저 이미지 작업을 했다. 문제지에서 사이즈 보고 사이즈에 맞춰 형태만 만들어놓는다. html 작업 시 넣어두는 용도. 나중에 시간 남으면 구체적으로 디자인 하면 된다. 파일명만 똑같이 저장하면 문제 없음. 시험장에 가니 소스가 빵빵하게 있어서 마음이 든든했다.
이미지는 다 이런 모양으로 작업했다. 글자 흰색, 드롭쉐도우로 텍스트 밑에 그림자 살짝 넣어서 가독성 높임. 라인은 심심해서 넣어봄. 텍스트 위치나 정렬은 자유롭게, 대신 정돈되어 보이게. 텍스트가 왼쪽에 있을 땐 왼쪽 정렬 사용함. 글씨 잘보이라고 대따 크게 써놨는데 실제 폰트사이즈는 21~24px 정도로 사용. 주어진 텍스트가 생각보다 길어서 적당히 두줄로 끊어 깔끔하게만 써줘도 좋았다. 여기선 폰트가 arial이지만 시험장에선 noto sans 썼다. 무난한 폰트.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>TITLE</title>
<link rel="stylesheet" href="./css.css">
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<header>
<div class="logo">
<a href="#"><img src="#" alt="top_logo"></a>
</div>
<nav></nav>
</header>
<div class="clear"></div>
<!-- HEADER -->
<div id="main">
<div id="wrap">
<a href="#"><img src="#" alt="slide01"></a>
<a href="#"><img src="#" alt="slide02"></a>
<a href="#"><img src="#" alt="slide03"></a>
</div>
</div>
<div class="clear"></div>
<!-- MAIN IMAGE -->
<div id="contents">
<div id="contents01"></div>
<div id="contents02"></div>
<div id="contents03"></div>
</div>
<div class="clear"></div>
<!-- CONTENTS -->
<footer>
<a href="#"><img src="#" alt="bottom_logo"></a>
<copyright></copyright>
</footer>
<div class="clear"></div>
<!-- FOOTER -->
<script src="script/script.js"></script>
</body>
</html>
그다음 HTML을 짠다. 전부 다 적기엔 좀 긴 내용이라 어떻게 정리했는지만 적었다. <header>, <nav>, <footer>와 같이 구분할 수 있는 건 다 써두는 게 편하고 알아보기도 쉽다. 이렇게 큰틀을 잡고 세부적인 부분을 적어내려간다. 한번에 순서대로 쭉 짜도 되겠지만 나는 이렇게 해놔야 빼먹는게 덜하다...ㅎ
<div class="clear"></div>는 섹션이 끝날 때마다 구분해서 밑에다 써줬다. css에서 다르게 적용하는 방법도 있을 텐데 한번에 묶어서 리셋해주려고 저렇게 했음. 어차피 간단한 웹사이트니까 이 정도는 허용되겠지 싶은 맘으루
@charset "utf-8";
* {
margin: 0 auto; /* 가운데 정렬 필요한 경우 */
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #616161;
}
li {
list-style: none;
cursor: pointer;
}
.clear {
clear: both;
}
/* RESET */
기본값은 * {} 를 이용해서 리셋시킨다. box-sizing: border-box; 지정해두면 편하다. 예전엔 전체 선택자에다가 복작복작하게 이것저것 스타일을 넣고 시작했었는데, 공부하다가 전체 선택자에 스타일을 남발하는 건 좋지 않다는 글을 본 적이 있어 진짜 꼭 필요하다고 생각하는 것만 넣어 정리했다.
flexbox는 사용 안 했다. 익스에서 제대로 작동이 안 된다는 말도 봤고, 시험 조건에 다른 브라우저에서 켜도 레이아웃이 동일하게 보여야 한다는 말이 있어서 괜히 레이아웃 꼬일까봐 안 썼다. 그밖에 다른... 어째 최신식 같고 편리해보이는 스타일은 비슷한 이유로 거의 안 썼다... 당시 크롬 화면을 체크할 수가 없어서 더 조심스러웠고 아주 고전적인 방식으로 했음.
또, 가로 메뉴 기준으로 연습을 했어서 조금 헤맸는데, 헤더를 제외한 콘텐츠 부분이 뭔짓을 해도 헤더 옆에 붙어주질 않고 밑에 깔려있어서 고민하다가 메인 이미지, 콘텐츠, 푸터에 각각 margin-left: 200px; 값을 주었다. 좀 야매 같았지만... 얼핏 보기엔 멀쩡해서 그대로 제출했다. 지금 생각해보니 div로 싹 묶어서 정렬했어도 됐을 것 같다.
제이쿼리는 팝업, 세로 메뉴 부드럽게 띄우는 것, 이미지 슬라이드(수평으로) 요 세 개만 구현하면 됐다. 메뉴는 fadeIn/fadeOut으로 띄우고 팝업은 show/hide로, 이미지 슬라이드는 setInterval로 여차저차 작업했다.
여기까지 2시간 반 정도 걸렸고 마지막으로 한 번 훑어보고 이미지 다시 정돈하고 차분히 구경하다가 3시간이 되기 전에 나왔다. 오류 체크는 깜빡하고 안 했는데 위에서 얘기했던 부분만 유의하면 딱히 오류 날 일이 거의 없어서 굳이 신경쓰진 않았다.
#5 참고 사이트
1. W3C www.w3schools.com/jquery/default.asp
jQuery Tutorial
jQuery Tutorial Examples in Each Chapter With our online editor, you can edit the code, and click on a button to view the result. Example $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); Try it Yourself » Click
www.w3schools.com
2. TCP School www.tcpschool.com/
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
3. CONDEPEN https://codepen.io/pen/
Create a New Pen
...
codepen.io
워낙 유명해서 소개랄 것도 없지만 HTML과 CSS는 TCP에서, 제이쿼리는 W3C에서 공부했다. 두 사이트 다 예시도 있어서 공부하기 좋다. 코드 수정하면서 확인해볼 수도 있고. 메인 이미지 구현은 따로 검색해서 찾아보는 게 좋은 것 같다. 이왕이면 여러 개 찾아보고 그중에 짧고 쉬운 거.
CODEPEN은 무슨 코드 연습해볼 때마다 html 선언해가며 서식 만들고 창 열고 확인하는 게 귀찮아서 인터넷 뒤지다가 찾은 사이트. html, css, js를 타이핑 해가며 바로바로 확인할 수 있어서 좋다.
제이쿼리는 사실 보기만 해도 속이 울렁거려서 마지막까지 공부를 미뤘다. 막상 보니까 생각보다 괜찮았다. 쉽게 쓰라고 만든 제이쿼리기도 하고, 특히 웹디자인기능사 시험에 들어가는 부분은 문법만 익힌다면 진짜 짧고 볼 것도 많이 없어서 어느정도 이해하고 가면 좋을 것 같다!
나는 자격증을 따고 취직하려고 했는데 공부 도중 일자리를 지인한테 소개받았다. 현재 퍼블리셔 겸 디자이너(?)로 취직해서 아직 열심히 공부 중... 교육 받는 중이지만 실무를 슬쩍 보니 웹디기능사 공부한 걸로는 턱도 없었고 여전히 갈 길이 멀다.
더 쓸 게 있으면 나중에 추가함. 우리 모두 파이팅~
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- Total
- Today
- Yesterday
- input
- border
- 사이트추천
- 자격증
- hammy
- a
- JavaScript
- css
- Gradient
- 웹디자인기능사
- 객체정렬
- html
- if문
- jQeury
- 웹디자인기능사실기
- jquery
- slideToggle
- 3단메뉴
- switch
- Class
- box-shadow
- object
- 구구단
- float
- 첫글