[디자이너 두명] 웹디자인 기능사 실기 독학 가능할까? (+ 필수 준비물, 팁 공유)

저번 시간에는 웹디자인 기능사 필기시험에 대해 다룬 글이 있었는데

현재는 웹디자인 기능사 실기를 독학으로 준비하는 나의 과정을 서술해보려 한다.

 

웹디자인 기능사 실기는 어쩌면 디자인보다 코딩 위주의 시험이라고 봐야 한다.

디자인은 웹상에서 들어가는 로고, 메인 이미지를 포토샵으로 제작하는 정도이고

디자인의 미려함과는 상관없이 가이드 안에 들어가면 (예를 들어 로고를 텍스트 타입으로 만드세요 같은...) 되는 수준이다.

 

그렇다면 코딩 전혀 모르던 디자이너가 웹디자인 기능사 실기를 독학으로 가능할까?

 

평소 코드 구조를 어느 정도 볼 줄 아는 상태라면 충분히 가능하다고 생각한다.

우선 나는 책도 없이 독학하는 중인데, 디자인할 때 쓰는 Sketch프로그램의 연동 프로그램인 Zeplin 할 때만 간간히 코드를 보았지 내가 직접 코딩을 하는 손 코딩 자체가 처음이라 코딩하는 자체가 익숙하지 않다.

오타는 남발하고 세미콜론도 까먹고 괄호는 어디서 어디까지 닫아야 하는지 처음에는 막막하고 힘들다.

하지만 코딩은 구조와 기능만 안다면 충분히 익힐 수 있고, 내가 생각했을 땐 암기나 이해의 문제가 아닌 익숙함의 문제이다.

 

 

 

 

[웹디자인 기능사 실기 독학을 위한 준비]

 

필수 준비물

 

1. 웹에디터 설치하기 (Brackets,  Visual Studio Code,  Subrime, sublime text 3...)

 

나처럼 책도 없이 처음부터 독학하는 분들은 무엇부터 해야 할지 막막할 것이다.

우선 코드를 직접 칠 수 있는 프로그램을 다운받아야한다. 

추천하는 프로그램은 Brackets 이 프로그램을 추천하는 이유는 웹디자인 기능사 실기 시험장에서 허용하는 프로그램라는 점.

브라켓은 무료로 설치가 가능하고 Mac/Windows 모두 사용이 가능하다!

 

http://brackets.io/

A modern, open source code editor that understands web design

해당 홈페이지로 들어가면 다운로드가 가능하니 참고하시길.

 

 

 

 

 

2. 제이쿼리 설치하기

 

이제 준비하려고 마음먹고 이 글을 보는 분들은 제이쿼리가 뭐야? 하실 텐데

제이쿼리는 간단히 설명하자면, 자바스크립트 코드는 복잡하고 긴 언어이다. 그래서 자바스크립트를 간략하게 줄여서 쓸 수 있는 라이브러리라고 생각하면 된다! 근데 또 막상 엄청 간단한 건 아님 

독학하면서 많은 분들이 자바스크립트와 제이쿼리에서 좌절하시는데, 시험에서는 나오는 기능들이 한정되어 있으니 익숙해지기만 한다면 문제없다고 생각한다

 

제이쿼리 설치하는 방법은 크게 2가지이다.

첫 번째는 구글에서 제공하는 웹 주소를 직접 코드에 기입하는 것.

아래가 구글에서 제공하는 주소이니 복사해서 해당 코드를 HTML 안에 기입하면 된다. (어떻게?? 하는 분들은 아래 꿀팁2번글 참고)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

 

두 번째는 직접 제이쿼리 파일을 다운 받아 코드에 연결하는 것.

이 방법을 추천한다! 그 이유는 시험장에서도 이 방법과 같이 파일을 공유해주기 때문이다.

https://jquery.com/download/

Download jQuery | jQuery

제이쿼리 사이트에 접속하여 Download the compressed, production jQuery 3.4.1 를 클릭한 후

코드 새창이 열리면 Ctrl+S, 맥 사용자는 command+S 를 눌러 저장 후 해당 코드를 HTML 안에 기입하면 된다. (어떻게?? 하는 분들은 아래 꿀팁2번글 참고)

 

 

 

---

 

 

꿀팁 공유

 

1. 브라켓 확장 기능 (Emmet)

브라켓을 사용하는 분들은 단축키를 통해 빠르고 간편하게 손코딩을 할 수 있는 확장기능 Emmet이다.이걸 쓰면 코딩속도가 *3배는 증폭된다!

설치 방법은 브라켓 프로그램을 열고 오른쪽 블록 버튼을 누르면 창이 하나 뜨는데 거기서 검색으로 Emmet을 입력하면 설치가 가능하다.

사용 방법은 값을 입력하고 tab을 누르면 끝! 여러 가지 명령어가 있는데, 가장 많이 사용하는 것은 하단을 참고하자

 

#값 ---> 아이디 값 코드를 생성

.값 ----> 클래스 값 코드를 생성

.값*5 ----> 같은 클래스 값 5개를 생성

head+body ----> head와 body를 동일한 선상에 생성

head>tite ----> head안에 title 코드 생성

 

하지만 시험장에서 못 쓸 가능성을 염두에 두고 써야 한다는 점. 시험장마다 있을 수도 있고 없을 수도 있다고 한다. 만약에 없으면 내가 깔면 되는건가? 라고 생각할 수 있지만 시험장에서는 인터넷이 안되고, 내가 다른 프로그램을 함부로 설치하면 불이익을 줄 수 있으니 만약 시험장 컴퓨터에 해당 확장 기능이 깔려 있지 않는다면 그냥 손코딩 할 수밖에...

 

 

 

 

 

2. 무료 강의 사이트 (생활코딩)

 

나는 정말 개발 구조도 모르고 개념도 하나도 모른다! 그래서 너무 힘들어!! 하시는 분들부터

어떤 기능의 태그가 있는지 모르겠어!! 하는 분들까지 보기 너무 좋은 사이트이다! 게다가 무료!!!!개꿀!!!

https://opentutorials.org/course/1

생활코딩

강의 속도 자체도 느린 편이고 영상 하나하나가 짧기 때문에 (10분 내외) 가벼운 마음으로 보기에도 아주 좋다.

추천하는 코스는

 

WEB1 - HTML & Internet

WEB2 - CSS

WEB2 - JavaScript

 

이거 다 보려면 일주일은 걸릴텐데 빠르면 3일까지도 가능!

일단 이거 쭉 한번 훑어보면 구조와 개념 이해는 확실하게 된다.

 

정규 코스 말고도 여러 쏠쏠한 강의들은 아래를 참고

제이쿼리 설치하는 방법	https://opentutorials.org/course/53/45
CSS셀렉터 문제 풀이	https://opentutorials.org/course/2418/13354
마진이 겹쳤을 때	https://opentutorials.org/course/2418/13464
div 영역이 세로로 안내려갈 때  (블록태그 이해)	https://opentutorials.org/course/2418/13403
CSS 효과 모음	https://opentutorials.org/course/2418/13357

 

 

 

 

3. 공개 문제

 

큐넷에서 시험자를 위한 실기시험 공개 문제를 다운로드 받을 수 있다. 생각보다 모르시는 분들이 많은 것 같다.

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

공개문제 자료실 상세 | Q-net

독학에 있어서는 문제 연습이 필수인데 무료로 다운로드 가능하고

실제 시험도 이 중에서 한 문제가 나온다고 해도 될 정도로 문제가 아주 똑같이 나온다고 하니 꼭꼭 다운받아 풀어보자.이 정도면 진짜 책 필요 없다

 

 

 

 

 

4. CSS 셀렉터 연습 게임

 

이건 실기 연습 문제 좀 풀어봤고, 이제 시간 단축이 필요한 분들에게 도움이 될 것 같아 적어봤다

CSS 셀렉터란, HTML에서 짠 코드를 디자인적으로 꾸며줄 때 해당 아이디값 또는 클래스값을 불러와줘야 하는데 이걸 어떻게 하면 효과적으로 불러올 것인가? 에 대해 연습할 수 있는 사이트이다.

http://flukeout.github.io/

CSS Diner

웹디자인 기능사 실기 준비하시는 분들은 14번까지만 풀면 된다!

14번까지 실제 개발자도 아주 흔하게 쓰는 기능들이니 꼭 풀어 볼 것!

혹시 모르는 문제를 만났을 땐 생활코딩에 해설이 나와있으니 참고할 것! (상단 2번 문단 참고)

 



 

 

 

---

 

 

시험 연습 어떻게 해야 할까?

 

우선 내가 추천하는 절차는 생활코딩 모두 시청 후 html부터 구조를 짜보는 것이다.

 

내가 맨 처음 짜본 HTML 구조 세로형

가로형

 

 

이런 식으로...

그리고 이것이 익숙해져서 CSS와 자바스크립트를 익힌다면

 

요로코롬 완성형의! 실기 문제 연습이 완료된다!!!

 

나는 맨 처음 짜 본 HTML 구조에서 맨 아래 연습 문제까지 25일 걸렸다.2~3일에 한 번씩 공부했지만...

정말 성실히 공부한다면 내 생각엔 2주면 가능할지도 모른다는 생각이 들었다.

나머지는 이제 익숙해지는 과정뿐

 

이 25일간의 중간과정은 다음 포스팅에서 자세하게 기입할 예정