웹사이트를 독학으로 만들고 싶다면? 공부 방법과 순서

일단 이 글을 쓰는 저는 오래된 경력의 개발자도 아니고, 현직 개발자도 아닙니다.
굳이 표현하자면, 방구석 개발자라고 할 수 있겠네요.
전 오래전부터 코딩에 꽤 관심을 가지고 혼자서 독학을 하면서 도서관에서 책도 빌리고, 필요한 책은 구입도 하면서 열심히 공부를 했습니다.
그러다가 한번 독학에서 벗어나서 전문적으로 배워보고 싶어서 국비지원으로 코딩을 전문으로 가르치는 학원에서 6개월 과정의 교육을 듣고 수료했었고, 취업도 했었지만 지금은 사정상 그만두고 혼자서 서비스를 만들려고 하는 중입니다.

일단 저는 웹사이트를 만들려고 하고 있습니다.
그래서 저처럼 여러 가지 서비스들 중에서도 웹사이트를 만들려고 생각하는 사람, 그중에서 과거의 저처럼 독학으로 공부를 하려고 하는데 '도대체 웹사이트를 만들려면 어떤 언어를 배워야 하는 것인지', '어떤 순서로 어떻게 공부해야 하는 것인지' 조차 감이 안 오는 초보분들을 위해서 글을 써보려고 합니다.

Photo by James Harrison on Unsplash

처음은 무조건 HTML

HTML을 프로그래밍 언어라고 하지는 않지만, 일단 HTML은 프로그래밍을 공부하기 전에 어렵지 않게 재미를 붙이면서 공부를 할 수 있는 언어고, 또 웹사이트를 만들려고 하는 사람이라면 당연히 무조건 알아둬야 하는 언어입니다.

생활코딩 HTML 수업

본 수업은 HTML에 대한 심화된 내용을 다룹니다. HTML의 기본문법과 HTML의 주요한 태그들에 대한 수업을 담고 있습니다.

생활코딩 WEB1 - HTML & Internet

우리는 지금부터 코딩, 웹, 인터넷, 컴퓨터라는 거대한 주제에 대한 탐험을 시작할 거예요. 이 여행을 시작하기에 앞서서 한가지 준비가 필요한데요. 바로 우리들의 상상력입니다.

독학으로 코딩을 하는 사람이라면 한 번도 보지 않았을 리가 없는 생활코딩의 수업입니다.
이 두 개의 링크에 들어있는 수업들을 다 보고 나면 HTML은 끝났다고 보시면 됩니다.
참고로 만들어진지 몇 년 지난 수업이라, 약간 오래된 정보가 하나 있습니다.
수업 중에 코드 에디터라는 것을 다운로드하는 때가 있는데, 영상에서는 '아톰'이라는 코드 에디터를 다운로드하지만, 여러분들은 비주얼 스튜디오 코드^{Visual Studio Code}라는 에디터를 다운로드하시길 바랍니다.

두 개 중에서 아래의 링크는 실습은 거의 없는 이론 위주의 수업입니다.
무슨 말인지 잘 모르겠고 어렵다 싶으면 건너뛰고 다음으로 넘어가도 상관은 없을 것 같습니다.
하지만 어느 정도 공부를 한 후에 다시 보면 이해가 될 내용들이니 나중에라도 꼭 한번 봐보시길 바랍니다.

HTML 카테고리를 만들었습니다.

HTML 코드 공유를 위해 HTML 카테고리를 만들었습니다.

이 블로그에서도 HTML 카테고리를 만들었으니 많은 관심 부탁드립니다.
생활코딩 HTML 강의 영상에서 다루지 않은 코드들을 알려드리겠습니다.

그 다음은 CSS

HTML의 다음은 CSS입니다.
CSS 또한 프로그래밍 언어라고 하지는 않습니다.
그래서 그렇게 난이도가 높지는 않습니다.
아, 선택자 공부를 할 때는 조금 어렵긴 합니다.

생활코딩 CSS 수업

CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어입니다. 화가가 붓을 만드는 법을 알 필요는 없지만, 붓을 만드는 사람보다 붓 질에 대해서는 훨씬 잘 할 수 있어야 할 것입니다.

생활코딩 WEB2 - CSS

이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

CSS 공부도 생활코딩에 양질의 수업들이 마련되어 있습니다.
이 모든 것이 무료로 들을 수 있는 수업이라는 것에 감탄을 하지 않을 수 없습니다.

참고로 블로그를 운영하시는 분들, HTML과 CSS만 배워놔도 블로그에서 정말 할 수 있는 것이 많습니다.

자바스크립트 JavaScript

HTML과 CSS 순으로 공부를 했다면, 아마도 보통 그다음으로는 자바스크립트^JavaScript를 공부하게 될 겁니다.
이 세 가지 언어들이 웹사이트의 프론트엔드^front-end를 담당하는 언어들입니다.
그리고 그중에서 자바스크립트는 프로그래밍 언어입니다.
이때부터 '변수'나 '반복문' 같은 단어들을 듣게 될 겁니다.

생활코딩 WEB2 - JavaScript

이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다.

역시 또 생활코딩의 강의입니다.
이 수업에서는 웹사이트의 다크모드 기능을 구현하면서 자바스크립트를 가르칩니다.

드림코딩 자바스크립트 기초 강의 (ES5+)

새로운 언어를 배울때 바로 문법부터 공부하는 것보다 언어의 탄생배경과 이 언어를 배웠을때 어느 분야에서 활용할 수 있고, 나에게 어떤 이득이 생길 수 있는지에 대한 이해가 필수입니다🙌 우리 이번영상에서는 전반적인 역사의 흐름을 통해 기본적인 개념들을 이해해보는 시간을 가져보도록 할께요

자바스크립트 강의 영상은 유튜브 채널 드림코딩에도 있습니다.
여기까지 공부하시는 분들은 생활코딩과 드림코딩의 구독자가 될 것입니다.

이후부터는..

웹사이트의 프론트엔드를 담당하는 언어 세가지를 배웠으니 이제부터는 백엔드를 담당하는 언어들을 공부하며 진짜 프로그래밍을 하게 될텐데..
이때부터는 선택지가 많습니다. Java.. python.. php.. node.js 등등..
뭘 배우는 것이 좋을지.. 다 장단점들이 있는 언어들이기 때문에 뭐 하나를 여기서 딱 추천드릴 수는 없고, 각 언어들에 어떤 차이점들이 있는지, 그 언어로 어떤 것들을 할 수 있는지 등을 많이 검색해서 찾아보시고 선택하시길 바랍니다.

참고로 저같은 경우에는 자바^Java와 파이썬^python과 php를 배워봤는데..
오로지 웹사이트만을 만들 생각이라면 php를 추천합니다.
그리고 기회가 된다면 이 블로그를 통해 php에 대해서 포스팅을 시작해볼까 합니다.