Hello IT 프론트엔드 개발을 시작하려고 해 입문편

Hello IT 프론트엔드 개발을 시작하려고 해 : 입문편 - HTML, CSS, JS 기본기부터 Git을 활용한 버전 관리와 클론 코딩까지, 2022년 세종도서 학술부문 선정도서 ㅣ HIT 시리즈 1
박영웅 지음 / 패스트캠퍼스 / 2022년 2월

내 전공은 경영학과다. 대학교 1학년 때 교양수업을 들으면서 HTML에 대해 들었고, 독학으로 공부해서 웹사이트를 만들었다. 남들은 드림위버 같은 웹저작도구를 사용할 때 나는 HTML을 배워서 그래픽이 빠진 코딩이라는 것을 해보았다. 그리고 20년이 훌쩍 지난 지금에 와서 다시 관심이 생기기 시작했다.

먼저 프론트엔드라는 말부터가 생소했다. 프론트엔드라는 말이 있으면 백엔드라는 말도 있는걸까? 검색해보니 있다. ^^;; 프론트엔드가 눈에 보이는 영역에 대한 부분이라면 백엔드는 눈에 보이지 않는 서버에서 작용하는 기술에 대한 부분을 말한다.

이 책은 프론트엔드의 기본 중의 기본인 HTML, CSS, JS를 다룬다. 웹페이지의 기본 구조와 내용은 HTML, 디자인 담담은 CSS, 동작 담당은 JavaScript라고 할 수 있다. 웹페지의 기본 골격은 HTML로 만들고, 사용자들에게 아름답게 보이게 하는 것은 CSS로, 다양한 동작의 구현은 JavaScript로 이룰 수 있다.

프론트엔드를 학습하고 싶어하는 다양한 형태의 비전공자들을 위해 학습로드맵을 제시한다. 이 책은 [입문편]으로 진전을 이루고 싶은 사람은 [실전편]을 연계해서 배울 수 있도록 구성되어 있다. 나에게는 생소하지만 패스트캠퍼스에서 가장 잘 나가는 강의를 책으로 만든 것이라 한다. 강의 내용 중 생초보들이 꼭 알아야 하는 내용만 담았단다. 나처럼.

책의 두께는 상당하지만 저자가 제시하는 30일 2회독 학습 플랜을 따라가다 보면 나같은 비전공자도 잘 해낼 수 있을 것 같다. HTML 부분은 예전에 공부한 기억이 있어서인지 술술 잘 읽혔다. HTML의 기초조차도 모르는 사람일지라도 어렵지 않게 학습할 수 있는 수준이다.

무작정 시작하기 전에 코딩을 위한 필수 도구인 VS Code(Visual Studio Code)를 설치해서 사용하는 방법부터 알려준다. 나는 메모장으로 HTML 코딩을 해서 확장자 .htm으로 저장하는 방법으로 배웠는데 이 책은 VS Code를 통해 코딩하는 법을 알려준다. 이것또한 그다지 어렵지 않다. 더불어 Codepen.io 사이트를 통해 쉽게 코딩하는 법도 유용하다.

HTML은 복습하는 기분으로 끝냈다. 문제는 CSS다. CSS는 제법 매력적이다. 코딩을 통해서 디자인을 할 수 있다는 것이 신기하다. 글자의 크기를 조절하고 색을 입히는 수준이 아니라 필터를 통해 흐림효과나 흑백, 색상 반전 등을 적용하는 것이 신기할 따름이었다. 우리가 워드 프로세서 프로그램에서 간단한 아이콘들로 적용 가능한 것들이 이런 코딩으로 이루어져 있다는 것을 깨닫는 순간이다. 초보가 커다란 깨달음을 얻은 순간이다.

자바 스크립트는 내겐 CSS보다 더 신세계다. 글자를 움직이게 하고, 웹사이트의 메뉴바를 드롭다운으로 만드는 것은 시작에 불과하다. 다양한 애니메이션 효과를 적용할 수도 있다. 왕초보인 내게는 아직 어렵지만 이해가 되어가는 것이 신기하다.

막연하게 코딩을 어렵게만 생각했다. 그러나 내가 하고 있는 HTML부터가 코딩의 시작이었고, 이제는 CSS, JS의 기초도 알게 되었다. 좀더 공부해서 이 책의 다음 버전인 [실전편]을 공부하면 실력이 더 좋아지리라 믿는다.

코딩을 공부해서 개발자가 되려고 하는 것은 아니지만 관련 업무를 할 때 꼭 알아야할 지식이라 생각한다. 웹개발에 대한 지식은 빠르게 발전하는 21세기에 반드시 갖추어야할 지식이다. 웹개발에 관심이 있는 왕초보들에게 적극 추천한다.

* 출판사로부터 책을 제공받아 감사하게 읽고 주관적인 의견을 적었습니다.