5. 프론트엔드 개발

개발에도 여러 종류가 있다. 최근 핫한 머신러닝 개발부터 OS 개발, 웹 개발에 이르기까지 개발자의 전문 분야와 개발 대상에 따라 그 갈래가 나뉘어진다. 웹/앱 개발은 이렇게 많은 갈래 중의 하나다. 그리고 이 분야 내부에서도 프론트엔드/백엔드 개발로 나누어진다. 스타트업 개발자 채용 공고들을 살펴보면 많은 경우 프론트엔드/백엔드 스킬셋을 구분하여 채용한다.

로켓펀치(https://www.rocketpunch.com/) 채용 공고 중

프론트엔드와 백엔드, 말그대로 하면 '앞'과 '뒤'이다. 이해하기 쉽게 이야기하자면, 화면을 기준으로 앞/뒤를 구분한다고 보면 된다. 화면 앞에 보이는 건 프론트엔드, 화면 뒤에 있어 보이지 않는 건 백엔드가 담당한다. 여기서는 먼저 프론트엔드 개발만 다루어보려고 한다.

일단 웹사이트를 마주 보고, 화면 앞에 보이는 것들이 무엇인지 정리해보자. 위에 링크했던 로켓펀치(https://www.rocketpunch.com/)에 한번 접속해보고, 로켓펀치의 웹사이트에서 일단 눈에 보이는 것들을 나열해보자.

상단의 메뉴바

로켓펀치 소개 화면

롤링되는 이미지 배너

그리고 "무료가입" 버튼을 눌러보면, 가입을 유도하는 팝업이 나타난다. 팝업에서 성, 이름 아무것도 적지 않고 '회원가입' 버튼을 누르면 아래와 같이 안내문이 뜬다.

회원가입을 하거나 로그인을 할 때 ID를 입력했는지 하지 않았는지, 패스워드를 정확히 입력했는지 아닌지 검사하는 일련의 프로세스를 일반적으로 'validation'이라고 말한다. 저렇게 검사한 후 뜨는 안내문까지 validation 의 기능으로 포함한다. 이런 것도 다 화면에 보이는 요소이므로, 위 목록에 추가하자. 그런 후 약간만 다듬어주면 목록이 이렇게 구성된다.

상단의 메뉴바/메인/하단의 메뉴바로 구성된 레이아웃

이미지와 텍스트로 이루어진 박스들

자동으로 롤링되는 애니메이션들

팝업

Validation

프론트엔드 개발자가 담당하는 (최소한의) 영역은 바로 이런 것들이다. 이미지를 롤링되게 해주거나, 팝업이 뜬다거나, 화면을 예쁘게 구성하는 것들- 디자이너가 디자인한 웹 화면을 프론트엔드 개발자에게 전달하면, 프론트엔드 개발자는 이것을 화면이 실제 동작하게끔 구성하고, 눈에 보이는 애니메이션이나 이벤트들(이름을 넣지 않았을 때 이름을 입력하세요! 라고 뜨는 것들)을 개발한다.

프론트엔드 개발자가 주로 사용하는 언어들은 jQuery/Javascript, CSS, HTML과 같은 것들이다. jQuery/Javascript는 화면에 경고창을 띄워주거나, 이미지를 롤링하거나, 팝업을 띄우는 등 이벤트/애니메이션을 발생시킬 때 주로 쓰인다. CSS는 스타일을 관장하는 언어로, 텍스트의 색깔이나 크기, 배경화면의 이미지, 박스의 크기 등을 설정할 때 쓰인다.

프론트엔드 개발자는 본래 '웹 퍼블리셔'라는 이름으로 불렸다. 말 그대로 웹의 영역만 터치하는 사람이었는데, 최근에는 jQuery/Javascript 가 다루는 부분이 많아지고 중요해짐에 따라 "프론트엔드 개발자"의 중요도 역시 매우 높아지고 있다. 예컨대 페이스북처럼 실시간으로 사용자들의 뉴스피드를 업데이트해야 하는 경우, 특정한 액션이 있을 때 (사용자가 화면을 리프레시했을 때) 에만 화면이 바뀌는게 아니고, 새로운 포스트가 있을 때마다 계속해서 화면이 바뀌어야 한다.(사용자가 F5를 눌러 새로고침하지 않더라도!) 이런 경우 끊임없이 데이터를 확인하여 화면을 계속해서 바꾸도록 개발하는 것도 프론트엔드 개발자의 역할이다.

사실 나는 프론트엔드 개발자다. 그래서 프론트엔드를 엄청 좋고 대단하다고(그러니까 막 연봉좀 팍팍 올려달라고) 쓰고 싶지만, 일단 자중하고... 다음 포스트에서 백엔드를 다루면서 여기서 못다한 프론트엔드에 대해 설명을 추가해보도록 하겠다.