웹 개발자는 무슨 일을 하는 걸까? - 프론트앤드(front end), 백앤드(back end), 풀스택(full stack)

나 같은 경우는, 구인구직에서 항상 '프론트 앤드 개발자', '프론트 앤드' 개발자 등등의 문구가 보일 때마다

'저건 어떤 일일까?' 라는 궁금증이 있었다.

​

웹 개발을 포함해서, 무엇인가를 만들어 낼때 우리는 "보여지는 부분"과"기능적인 부분"으로 나뉜다.

​

예를들면 요리에서 "보여지는 부분"은 플레이팅이라고 볼 수 있다. 음식의 색깔, 모양, 향기, 어떤 접시에 담을지 등등 문자 그대로 보여지는 부분이고

​

요리에서 "기능적인 부분"은 맛이라고 볼 수 있다.

음식을 만들때도 우리는 2가지 내용들을 고려해야 한다.

갑자기 음식 이야기를 꺼낸 이유는 웹 싸이트를 만들 때도 똑같은 고민을 해야하기 때문이다.

​

1. 프론트 앤드 Front-end는 보여지는 부분을 고민하는 부분이다.

 

예를들어 여기 구글 웹 싸이트가 있다.

 

Front-end 개발자들은 아마 이렇게 생각할 것이다.

 

Front-end에서 일하는 개발자들은 글자를 위치시키고, 사진을넣고, 크기를 조절하고, 색깔을 조절하는 등

브라우저 상에서 웹사이트가 "어떻게 보여질지"를 고민하고 실현 시키는 일을 한다.

​

Front-end에서는 HTML/ CSS/ JavaScript(JS) 세가지의 언어가 주로 사용되고 각각의 역할은 다음과 같다.

​

1. HTML은 기본적인 요소들을 화면에 생성한다.

​

HTML을 배우면 할수 있는 것들

- 웹페이지에 글자쓰기

- 웹페이지에 박스만들기

- 웹페이지에 그림넣기

- 글씨나 그림등에 링크걸기

​

이밖에도 다양하게 쓰이지만 기본적으로 위 기능들이 가장 많이 사용된다.

​

HTML을 사용한다면 다음과 홈페이지는 우선 같은 모습이 된다.

글씨, 박스, 그림 등을 화면에 넣는다. HTML을 흔히 "뼈대"라고 하는 이유

​

2. CSS는 HTML로 구현된 화면의 요소들을 꾸미는 역할 을 한다.

​

CSS를 배우면

- 글자의 색깔, 크기, 폰트, 위치 등을 정할 수 있다.

- 이미지, 아이콘, 배경화면, 배경색깔, 위치, 크기 등을 조정 할 수 있다.

- 간단한 애니메이션 효과(마우스 포인터를 올렸을때 움직임, 메뉴 drop box등등)를 할 수 있다.

​

이 밖에도 더 훨씬더 다양한 기능들이 있지만, 우선 이정도다.

만약 CSS를 통해 웹페이지를 꾸미게 되면 위에 허접했던 웹페이지가 아래처럼 조금 덜 허접하게 변한다.

조금은 봐줄만 해졌다.

​

3. 마지막으로 Java Script인데 JavaScript를 배우면 '웬만한건 다 가능' 해진다. (신이 된다.)

게임도 만들 수 있으며

그림판도 만들 수 있다.

물론, 초보가 Java Script를 배워 봤자 아래와 같이 수많은 빨간 글자들만 많이 볼 수 있을 뿐이다.

얏호

Java Script의 핵심은 "컴퓨터가 여러가지 정보를 파악하게 하는 것"에 있다.

예를들어, 다음과 같은 일들을 하고 싶다면 JavaScript를 배워야 한다.

1. 사용자가 오른쪽 화살표 키보드"→를 눌렀을 때, 홈페이지에서 어떤 효과가 나타나게 하고 싶을때

2. 사용자가 마우스를 클릭 했을때 동작하는 버튼을 만들고 싶은 때

3. 사용자가 입력한 정보를 저장 했다가 다음에 다시 사용하고 싶을 때 등등

​

요지는 Java Script는 홈페이지가 사람의 어떤 '행동'에 반응할 수 있도록 해준다.

여기엔 두가지 요소가 필요한데

- 홈페이지가 어떤 행동(신호)을 파악한다.

- 그에 따라 특정한 기능을 수행한다.

​

끝.