저는 웹 프론트엔드 개발자입니다.
영어로는 Web front-end Developer.
HTML, CSS, Javascript 작성을 주 업무로 한다는 뜻입니다.

저는 그 중에서도 HTML, CSS를 좀 더 집중적으로 다루는 마크업 개발자인데요.
(웹퍼블리셔라는 명칭으로 알고 계시는 분들도 있을겁니다. 네. 제가 그거 하는 사람이에요.)

디자이너가 포토샵으로 만든 웹사이트 디자인을 코드로 변환하는 작업을 하는 사람이라고 생각하시면 쉽습니다.
아래 주소의 영상을 보면 제가 하는 일이 어떤 일인지 대충 살펴보실 수 있을 것 같네요.
(제가 찍은 영상은 아닙니다.)

https://www.facebook.com/remainweb/videos/726851234087867/


HTML, CSS, Javascript가 하는 역할을 각각 나누면 다음과 같습니다.

HTML : 문서의 내용을 담는다
CSS : 그 내용에 디자인을 입힌다
Javascript : 그 내용에 동작을 추가한다


예를들면 이렇습니다.

<h1>예제 코드</h1>
<p>Front-end 역할 설명을 위한 예제입니다.</p>
<button id="xxx">누를 수 있는 버튼</button>

이게 HTML입니다.
예제코드라는 제목과, 짧은 설명글과, 버튼 하나. 라는 [내용]을 담고 있는 [문서]를 만들었습니다.

여기에 CSS를 통해 스타일을 입힙니다.
CSS 코드는 다음과 같이 작성합니다.

h1 {font-size: 20px; font-weight: bold;}
p {color: green;}
button {background: #bc132b; color: #FFF;}

제목은 20px크기로 두껍게, 본문은 초록색 글씨로, 버튼은 붉은색 배경에 흰색 글씨로 보이게 하라는 뜻입니다.
위에 작성한 예제 HTML에 이 CSS를 적용하면 다음과 같은 화면이 됩니다.

예제 코드

Front-end 역할 설명을 위한 예제입니다.

누를 수 있는 버튼


Javascript는 다음과 같이 작성합니다.

document.getElementById("xxx").addEventListener("click", abc);
function abc() {alert('눌렀냐!');}

xxx라는 버튼을 클릭했을 때 '눌렀냐!'라는 메시지를 보여주는 [동작]을 하는 것이지요.
우리가 흔히 생각하는 '프로그래밍'을 하는 작업은 Javascript에서 이뤄집니다.


위의 예제는 서버와 통신하는 작업은 전혀 없습니다.
클릭하면 메시지를 띄우게끔 되어있기는 합니다만, 그건 사용자의 브라우저 상에서 이뤄지는 작업일 뿐 서버와 통신해야 할 이유가 없으니까요.
눌렀을 때 서버상에 누른 횟수를 집계 하고자 한다면 그 때 서버와의 통신이 필요하겠지요.

이렇게 서버를 통하지 않고 사용자의 브라우저에서만 동작하는 특성을 가진 언어인 HTML, CSS, Javascript를 Front-end라고 부릅니다.
Front는 앞, end는 단. 합쳐서 '앞단'이라는 뜻입니다.

앞단이 있으면 뒷단도 있겠지요.
그래서 웹개발에서는 서버 개발자를 Back-end Developer라고 부릅니다. 뒷단 개발자라는 뜻입니다.



사용자들이 보는 것은 앞단이지만 보이지 않는 뒷단에서도 많은 준비작업들이 있습니다.


원래 해보려고 했던 것은 CSS Drawing에 대한 이야기인데, 너무 길어지는 것 같아 다음에 하도록 할께요.