brunch

You can make anything
by writing

C.S.Lewis

by 최대표 Oct 08. 2016

비전공자의 프로그래밍 도전 -1

나의 프론트엔드 학습 순서

처음 웹 퍼블리셔 과정을 선택하게 된 이유는 다음과 같다.


1. 혼자서 웹을 만들고 싶다.

2. 데이터베이스나 개발언어를 배우지 않는다면 혼자서 완전한 웹은 제작할 수 없다.

3. 하지만 HTML5와 CSS3를 배운다면 개인 소개용 웹이나 회사 소개용 웹 정도는 만들 수 있을 것이다.

4. 또한 WORDPRESS나 XE등을 이용한다면 좀더 기능이 들어간 웹도 제작할 수 있을 것이다.


웹은 어느곳을 가더라도 필요하기 때문에, 앞으로 도움이 될 것이라고 생각하고 배우기 시작했다. 


과정은 프론트엔드 과정이었지만, 마지막에 Java와 Android를 1개월정도 진행하였다. 그 과정을 통해 매우 허접하지만 개인적으로는 뜻깊은 앱을 하나 제작할 수 있었다.

https://play.google.com/store/apps/details?id=com.cafe24.choiwj1012.taxcalculator


모든 결과물은 실무에서 쓰기엔 말도안되는 퀄리티라는 것을 잘 안다. 그래도 아무것도 모르던 사람이 어떤것을 제작해서 만들 수 있다는건 정말 매력적인것 같다. 


그렇다고 해도 배우면서 참 아쉬운 부분이 많았다. 혹시 같은 길을 가고자 하는 분이 있다면, 도움이 될까 하여 내가 처음부터 공부하게 되었을 경우를 생각해 보았다.


첫째, 일단 내가 하고자 하는 목표를 설정한다.


내가 만들고 싶은 웹의 주제를 선정하고 생각한다. 주제가 결정 되었으면 웹 기획은 어떻게 할지, 웹이 제작되는 순서가 어떤지 등을 찾아 공부하고 미리 그려본다. IA(정보구조)도 만들어보고, 다른 사이트를 참고해서 기능정의서도 만들어보고, 고객을 가상으로 생각해서 요구사항들도 만들어 본다.


추천하는 도서는 처음부터 다시 배우는 웹 기획 (한빛미디어) 이다. 기획이라는 것이 정답이 없기 때문에 많은 분들의 정보를 찾아서 참고하고 직접 그려보고 생각해 보는 것이 가장 좋을것 같다.


둘째, 이미 나온 책들을 통해 계속 만들어보고, 그걸 통해서 내가 생각하는 다른 페이지를 제작해본다.


처음에 많은 사람들이 보는 DOIT HTML5나 모던웹을 위한 HTML5 류의 기본서는 각 태그에 대한 정의는 있지만, 전체적인 그림을 볼 수 있는 예시는 부족했다. 그래서 다른 책을 통해 전체적인 웹페이지를 그려보고 거기서 코드도 배워보고 내가 만들고자 하는 곳에 적용도 하는 식으로 연습을 하였다.


추천하는 도서는 인터랙티브 웹디자인북(한빛미디어)모던 웹사이트 디자인의 정석(위키북스) 이다. 기본서와 함께 이 두권을 제대로 할 수 있으면 초보자 수준에서 괜찮은 웹페이지를 만들어 낼 수 있을 것이다. 


셋째, 자바스크립트의 경우는 프론트엔드에서 처음으로 프로그래밍적인 요소가 들어가는 과정이라 쉽지 않았다. 전혀 들어보지 않은 부분이라 일단 책을 보면서 이해가 안가도 그냥 넘어가고 코드를 써보고 생각하고, 다시 돌아와서 또 써보고를 반복하는 것이 괜찮은 방법이었다.


추천하는 도서는 자바스크립트 + JQUERY 완전정복 스터디 1 ~ 3 (위키북스) 였다. 다른 책보다 이 책은 다양한 예시로 구성되어있고, 실제로 필요한 예제로 구성되어있어서 지루하지 않게 볼 수 있었다. 


넷째, 코딩 툴에 대한 사용법 (atom + emmet)과 처음부터 github를 이용해서 내 코드를 관리하면 좋았을 거 같다. 


emmet을 사용하면 코드 쓰는 속도가 증가하고 minimap을 쓰면 긴 코드에서 위아래로 이동하기가 용이하다. 이 밖에도 여러가지 기능이 있는데, 조금만 투자하면 좀더 편하게 작업 가능하다. github는 요새 사용하기 시작했는데, 처음 배울때 부터 익숙해져서 버전관리라는 개념도 익혀두고 매일 commit을 하면서 내가 얼마나 공부하고 있는 체크하는 용도로 사용도 가능하다. (일일 커밋이라는 말이 있다)


추천하는 도서는 소셜 코딩으로 이끄는 gitHub 실천기술(제이펍)모던 웹사이트 제작(한빛미디어)가 있다.


다섯째, bootstrap이나 angular.js 까지 배워두면 좋다. 


부트스트랩을 사용하면 정형화된 디자인으로 빠르게 코딩이 가능하다. css가 거의 필요없을 정도이다. 물론 커스터마이징을 위해서는 less와 css를 알아야 하지만, 기본적인 내용 만으로도 꽤 괜찮은 디자인의 페이지를 제작할 수 있다. 기본적인 html과 css는 당연히 알아야 하고 추가적으로 bootstrap이나 angular.js까지 알아둔다면 분명 도움이 될 것이다.


추천하는 도서는 부트스트랩 사이트 디자인(프리랙)이 있다. 부트스트랩은 책도 좋지만 w3schools를 이용하거나 공식사이트(한글번역된곳이 있음)를 이용해도 충분히 배울 수 있다.

http://www.w3schools.com/bootstrap/default.asp

http://bootstrapk.com/


마지막으로 프론트엔드 개발자가 되겠다고 생각했다면 그 업무가 무엇일지 알아야 할 것이다.

다음의 내용은 https://taegon.kim/archives/4810 이곳에서 발췌한 글이다. 읽어보면 좋을 글이다.

프론트엔드가 단순히 디자인 나온 부분을 코딩하고 땡이 아닌 분야다. 디자인을 하고 그에 맞게 코딩을 하는것은 물론이고, 각 기기의 호환성, 이미지나 효과들에 대한 성능 최적화, 백엔드 접속에 대한 안전성 확보 등 할일이 많은 분야다. 지금도 배운지 얼마 되지 않아 아는것이 별로 없지만, 무엇을 해야 하는지 알고 목표를 명확히 세우고 배운다면 빠른 성장이 있을 것이라고 생각한다.


그렇게 5개월이라는 시간을 보냈지만, 정부지원을 받는 교육이다보니 도움이 안되는 이론교육이 꽤 긴 시간으로 할당되어있었고, 포토샵 일러스트 디자인, 자바 안드로이드 를 빼면 정작 프론트엔드를 배운 시간은 3개월 정도밖에 되지 않았다. 정말이지 너무 짧고 아쉬웠다. 그리고 이렇게 만든다고 해도 게시판이나 기능이 들어간 웹을 만들지 못한다는 생각에 현재는 자바 웹개발자 과정을 수강중에 있다.


(모든 글은 아무것도 모르는 비전공자가 막 공부하기 시작할 때 느낀 점입니다. 수정사항이 있거나 좋은 의견이 있다면 댓글 부탁드려요!) 


작품 선택
키워드 선택 0 / 3 0
댓글여부
afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari