0008. 웹 프런트엔드의 시작

1. 벌써 우리는 프로그래머?

웹 프런트엔드라는 말이 아무렇지 않게 이해가 되었다면, 우리는 이제 감히 코딩을 시작해도 될 준비가 된 것이 아닌가 싶다. 이 문장은 써놓고도 무슨 말인지 헷갈리는데, 자신감이 없으면 원래 말이 장황한 법이다.

이제는 우리가 프로그래머의 길로 들어서는 것이기 때문에 살짝 어려운 용어가 나와도 이해할 준비가 되어있어야 한다. 우리는 이제부터 전문가니까 말이다.

 

앞서서 말한 것처럼(해석 : 난 설명했는데 기억하고 있음?)

우리가 컴퓨터와 소통하려면 언어를 알아야 한다. 특히, 웹과 소통을 하려면 웹의 언어를 알아야 한다. 웹 프런트엔드를 시작하기 위해서는 3대장이 있다는 것부터 알아야 할 것이다.

디자인이 진짜 3대장같다.

 

2. 웹 프런트엔드 3대장

시작하자마자 언어를 3개나 소개하니까 마음이 무겁다. 왠지 다 배워야 할 것 같고, 양이 상당할 듯싶어 보인다. 하지만 3가지의 언어는 각자의 기능이 있고 연결되어 있다. 또한, 다른 언어에 비해 다루기 쉽다고 한다.

필자는 약자충이라 약자부터 간단히 알아보고 가겠다.

 

HTML : Hyper Text Markup Language
CSS : Cascading Style Sheet
JS : Java Script

약자를 굳이 외울 필요는 없다. 하지만 알아두면 있어 보이니까 한 번은 읽어보자.

 

위에서 3가지의 언어라고 표현했지만 실제로 HTML이나 CSS를 언어라고 하면 개발자들이 노트북으로 때린다고 한다. JS는 언어라고 해도 된다.

 

간단한 예시를 들어보자.
여러분이 영어로 열심히 책을 쓰고 있다. 그러면 여러분은 영어라는 언어를 가지고 책이라는 논리를 갖춘 결과물을 만들어낸 것이다. 그런데 누군가 와서 여러분이 쓴 책에 밑줄을 좍좍 그었다. 그러면서 본인도 밑줄이라는 언어로 책을 썼다고 주장한다.
힘들게 영어로 책을 쓴 여러분이 저 사람을 책으로 패도 판사는 무죄를 줄 것이다.

이처럼 HTML은 프로그래밍 언어라고 하기보다는 정보를 표시하는 밑줄(마크업 언어) 정도로 보면 된다.

편의상 앞으로는 언어라고 표현하겠다.

 

 

그런데, 프로그래밍 언어가 아니라면 왜 맞을 위험을 감수해 가면서까지 배우는 것일까?

당연히 기능이 있기 때문이다. 3가지 언어의 기능을 자동차에 빗대어 알아보자.

 

자동차를 생각해 보면 튼튼한 뼈대가 있고, 그 곁을 강판이 둘러싸며 자동차의 디자인을 결정해 준다. 그리고 그 안에 엔진을 비롯해 다양한 장비들이 들어간다.

 

HTML : 자동차의 뼈대처럼 우리가 보는 웹 화면의 뼈대를 만들어 준다. 
CSS : 자동차의 외관으로 디자인을 결정한다.
JavaScrpit : 자동차를 움직이게 만드는 동력생성기관 엔진, 다양한 전장장비라고 할 수 있다.

HTML, CSS, JS는 뼈를 만들고, 디자인하고, 움직이게 만드는데 필요한 3대 장인 것인 셈이다.

그러면 아래의 그림도 별도의 설명 없이 이해가 가능할 것이다.

 

 

사람의 뼈대를 만드는 HTML, 외부 생김새를 만드는 CSS, 몸을 움직이게 만드는 근육인 JS로 사람이 구성되고 비로소 완성되는 것이다.

 

 

설명이 길게 돌아왔지만, 결국은 우리는 웹 브라우저의 화면을 만들 것이다. 앞에서 설명한 바를 생각하면 각각의 언어가 어떻게 기능하는지 쉽게 알 수 있을 것이다.

 

 

3. 앞으로의 계획

필자의 단기 목표는 웹 브라우저에서 바로 볼 수 있는 간단한 서비스를 만드는 것이다. 나의 홈페이지를 만들고, 사용자들이 부담 없이 쓸 수 있는 서비스를 만들어서 올리려고 한다. 자신의 얼굴이 어떤 동물과 닮았는지, 자신의 얼굴을 디즈니 캐릭터로 바꾸면 어떤 모습일지, 나의 이상형은 어떻게 생겼는지 등 여러분이 실생활에서 한 번씩 재미 삼아해 보는 서비스를 만드는 것이 목표다. 거기에 광고를 붙인다면 운 좋게 좋은 수익이 날 수도 있는 것은 덤이다.

 

이를 위해서 모든 언어를 처음부터 완벽하게 마스터할 생각은 없다.

핵심적인 부분만 빠르게 학습하고, 필요한 부분은 골라서 심화학습을 하려고 한다. 물론 순서는 HTML → CSS → JS로 갈 것이다. 이후에는 필요한 경우에 백엔드도 배워볼까 한다. 당장 활용도가 높고 수익이 나는 코딩을 배우려는 것은 아니다. 다만, 코딩과 친해지면서 할 수 있는 것들을 늘려나가는 것이 목표라고 볼 수 있다.

 

우리가 외국인과 소통하기 위해서 언어를 처음부터 각 잡고 공부할 필요는 없다. 소통하면서 문법을 모르고 소통하기도 하고, 때로는 단어를 나열하기도, 손짓 발짓 다 써가면서 소통한다. 그렇게 외국인과 소통하는 데는 언어를 완벽하게 할 필요는 없다. 물론, 수준 높은 대화를 위해서는 통역사처럼 전문적으로 배워야 할 것이다. 하지만 우리는 프로그래머가 아니라 언어를 이용하여 뭔가를 만드는 것을 핵심으로 하는 사람들이기 때문에 흥미를 잃지 않고 필요한 것을 배워서 효과적으로 활용하는 것이 더 중요할 것이다.

이렇게 말하는 이유는 이제 각 잡고 하는 공부는 더 이상 못하겠어서는 아닐 것이다. 아마도.