웹디자인(HTMl/CSS/JS)을 온라인으로 배우는 방법 소개 (2016년 기준)

HTML5 등장 이후 웹디자인 계에도 많은 변화가 이루어졌고, 현재에도 그 변화는 계속 이어지고 있습니다. 전통적인 웹디자인 구축 방식이었던, 웹디자이너가 웹사이트를 통이미지로 구축한 후 이미지를 잘라서 개발자에게 넘기면, 개발자가 이를 바탕으로 웹사이트를 구축, 데이터베이스에 연결하고 서버에 발행하던 방식에서 이제는 조금 더 작업자간 경계가 모호해지는 쪽으로 흐름이 이어지고 있습니다.

그 단례로 이제는 웹디자이너라고 하면 포토샵은 기본이고 그만큼 CSS 또한 잘 다루는 사람으로 인식이 되는 측면도 있는데요, 자바스크립트 역량에 따라(국내 한정)웹퍼블리셔라는 직책명을 갖기도 합니다. 이번 포스트에서는 시대 웹디자이너의 필수 소유 역량인 HTML/CSS/JS를 온라인으로 배울 수 있는 방법에 대해 간략히 정리해 보고자 합니다.(2016년 08월 기준)

1. 국내 HTML/CSS/JS 온라인 강의 사이트

국내에는 사실 HTML/CSS/JS 관련 온라인 강의 수가 많은 편은 아닙니다. 관련 교육은 사설 교육 기관(디자인정글, 그린섬, SBS, 패스트캠퍼스 등등)에서 가장 활발하게 이루어지고 있으며, 대부분 오프라인 기반이며 수강료 또한 매우 비쌉니다. 하지만 그 중에도 온라인으로 이용 가능한 HTML/CSS/JS 관련 강의 사이트로는 다음 두 가지 항목을 들 수 있습니다.

1) 생활코딩 (무료)

• URL : https://opentutorials.org/course/3
• 국내 굴지(?)의 프로그래밍 관련 학습사이트인 생활코딩입니다. 모든 강좌들은 공개 동영상 강좌이며, 이따금씩 오프라인 워크숍도 진행하는 것으로 알고 있습니다. 프로그래밍 관련 지식이 전혀 없는 사람도 매우 쉽게 이해할 수 있도록 강사자분이 매우 많은 배려를 담아 강의를 진행하는 곳입니다. 특히 웹 관련 전반적인 개념 이해에 도움을 많이 주는 편입니다. 프로그래밍/웹 쪽에 처음 입문하시는 분 또는 단순 HTML/CSS를 넘어서 프로그래밍/웹 자체에 대한 이해 또는 JS/서버스크립트 쪽으로 스킬 영역을 넓히시려는 웹디자이너 분들에게 추천 드립니다.

2) 웨버스터디 (무료)

• URL : http://webberstudy.com/
• 온라인 코스라기 보다는 웹디자인(HTM/CSS) 관련 내용을 '국내 실정에 맞게' 정리하여서 온라인 책자 형태로 발행한 웹사이트입니다. 생활코딩처럼 별도의 비용 청구는 없으며, 이 페이지 또한 전반적인 개념 파악 및 기본적 스킬 획득에 도움이 됩니다. 책자 형태로 정리가 일목요연하게 잘 되어있어, 언제든 들어와서 관련 내용을 파악할 수 있는 장점이 있습니다. 하지만 별도의 동영상이나 튜토리얼은 존재하지 않습니다. 

3) 이지스퍼블리싱 유튜브 채널 

• URL : https://www.youtube.com/playlist?list=PLG7te9eYUi7sYC6thUvVvRpY3rggeDcbW
• 별도 온라인 코스는 아니고 'Do It Html5css3 웹 표준의 정석'이라는 서적의 영상 자료물로 유튜브에 공개된 영상들입니다. 실무에서 활용되는 테크닉 위주로 설명되어 있는 것으로 보입니다. 

2. 해외 HTML/CSS/JS 온라인 강의 사이트

해외의 경우 코딩 관련 교육 자체가 매우 활발하여, 웹디자인 관련 온라인 코스도 굉장히 많은 편입니다. 최신 기술 트렌드를 포괄하는 온라인 강의들도 많으며, 더불어 MOOC(대학공개수업과정) 관련 강의들도 다수 있어 깊이 있는 지식을 쌓을 수도 있습니다. 다만 모든 콘텐츠가 영어로 제작되어 있기 때문에, 언어의 압박이 있을 수 있지만, 따라하기 위주의 튜토리얼 강의들은 사실 영어를 잘 몰라도 이해하는 데에 큰 무리는 없으며, 문장 보다는 어휘 위주로 학습이 진행되기 때문에 관련 어휘들에 대한 친숙도가 있다면 영어를 잘 못해서 수업을 듣는 데에 큰 무리는 없을 것입니다.

해외 수업을 듣는 것의 또 다른 강점은 바로 코딩 관련 용어들에 대한 지식을 영어를 기반으로 쌓을 수 있다는 점입니다. 컴퓨터사이언스의 시작도 현재 주류의 움직임도 영어로 진행되고 있기 때문에 관련 지식을 영어를 통해서 체득하는 것은 분야에 대한 이해도와 활용도를 높이는 데에 있어 큰 강점이 될 것입니다.

1. 코드아카데미 (무료)

• URL : https://www.codecademy.com/ 
• 코드 아카데미는 온라인 코드 교육의 선구자적 역할을 하고 있는 웹사이트로서 실용적인 프로그래밍 기술 보다는 프로그래밍 자체를 이해하는 데에 보다 중점을 두는 콘텐츠를 제공하고 있습니다. html,css, jss, jquery, php 등의 강의가 있으며 개념과 실습위주로 알기 쉽게 컨텐츠를 제공합니다. 특히 웹 상에서 바로 코드를 실행할 수 있는 기능을 제공하는데 타 업체에 비해서 아주 완성도가 높기 때문에, 바로 실습을 진행하는 것이 매우 쉽게 진행될 수 있을 것입니다.

2. 트리하우스 (유료)

• URL : https://teamtreehouse.com/
• 트리하우스는 프론트엔드개발/디자인 중심의 강의를 제공하는 웹사이트입니다. 더불어 기초적인 서버 관련 내용도 이 사이트에서는 다루고 있습니다. 최신 기술 관련 업데이트가 매우 빠르며, 동영상 강의의 수준이 높은 편입니다. 또한 각 내용들이 체계적으로 잘 조직되어 있으며, 뱃지 등의 게임요소로 학습에 대한 동기부여를 자연스럽게 주는 장점이 있습니다. 모바일 최적화도 잘 되어 있어서 모바일 상에서도 온라인 학습을 꾸준히 이어 나가고 있습니다. 또한 웹브라우저 상에서 실습에 최적화된 기능을 제공하기 때문에 쉬운 따라하기 또한 가능합니다. 월 30달러 정도의 비용을 지불해야 합니다.

3. 튜츠플러스 (유료)

• URL : http://tutsplus.com/
• 기초적인 개념 보다는 실용적 기술 중심으로, 다양한 트렌드에 부합하는 기술들을 배울 수 있는 곳입니다. 가격 또한 월 15달러로 비교적 저렴한 편입니다. 코드 외에 디자인 관련 내용도 굉장히 많으므로, 코드 기반으로 디자인 역량을 키우는 데에도 매우 적합한 사이트입니다.

4. 코드스쿨 (유료)

• URL : http://www.codecademy.com/
• 트리하우스와 유사한 프론트엔드 개발/디자인 중심의 강의를 제공하는 웹사이트입니다. 트리하우스와 큰 차이점은 없으나, 전반적 강의 내용이 조금 더 어려운 편입니다. 사이트의 UX도 트리하우스가 초급자에게는 더욱 잘 구성되어 있습니다. 월 30달러 정도의 비용이 듭니다.

5. 린다 (유료)

• URL : https://www.lynda.com/
• 종합 교양/취미 교육 사이트인 린다닷컴입니다. 상세한 웹디자인 관련 내용은 부족한 편이지만, 일반적 수준의 강의를 들을 수 있습니다. 월 30달러 수준.

6. 유데미 (유료)

• URL : https://www.udemy.com/
• 린다와 마찬가지로 종합/교양 취미 교육 사이트입니다. 일반적 수준의 웹디자인 관련 강의를 들을 수 있습니다. 월 30달러 수준.

7. 코세라 (MOOC-대학공개수업과정)

• URL : https://www.coursera.org/
• 세계 유명 대학의 실제 대학 수업을 온라인으로 공개적으로 들을 수 있는 사이트입니다. 실용적인 웹디자인 관련 기술을 빠르게 배울 수 있는 방향은 아니지만, 실제 대학 강의처럼 깊이 있는 내용들을 파악할 수 있습니다. 또한 무료인 장점이 있으며, 사용자가 원하는 것에 따라 모든 강의 완료 후 certificate을 발급받을 수 있습니다. 실시간으로 진행되는 수업을 들을 경우, 팀 프로젝트를 진행할 수도 있으며, 별도의 과제나 시험이 있을 수 있습니다.

8. 에드엑스 (MOOC-대학공개수업과정)

• URL : https://www.edx.org/
• 코세라와 마찬가지로 대학의 실제 대학 수업을 온라인으로 공개적으로 들을 수 있는 사이트입니다. 코세라와 같은 역할을 하며, 코세라와는 다른 대학의 수업들로 콘텐츠가 이루어져 있습니다.