우리가 보고 있는 홈페이지는 여러 기술들이 들어가 있다. 홈페이지에 글자, 그림, 버튼 등을 넣고 보여주는 기술, 회원가입을 하거나 로그인을 하는 기술, 내 아이디와 비밀번호를 데이터베이스에 저장하는 기술 등 매우 다양한 기술의 집합체라고 볼 수 있다. 프런트엔드 개발자는 이 중 어떤 역할을 하는지 알아보자.
디자인을 코드로 바꾸는 역할
프론트엔드 개발자는 “홈페이지를 디자인의 형태로 사용자가 잘 볼 수 있도록 만드는 역할”을 한다. 쉽게 이야기해서 우리가 “naver.com”에 접속했을 때 보이는 글자, 이미지, 검색창, ID와 패스워드를 입력할 수 있는 창 등을 만든다.
이렇게 홈페이지를 구성하는 데에는 “HTML (Hypertext Markup Language)”와 “CSS (Cascading Style Sheet)”라는 프로그래밍 언어를 사용한다. 보통 웹 디자이너가 디자인을 하면 그 디자인에 따라 HTML과 CSS를 이용해서 홈페이지 화면을 만드는데, 여기까지 업무를 하는 사람을 “웹 퍼블리셔”라고 한다.
조금 더 디테일하게 설명해보면 아래와 같다.
- 웹 디자이너가 작업한 디자인을 “HTML”, “CSS”를 이용해서 웹 페이지를 만드는 작업
- 데스크탑(PC), 태블릿, 모바일 등 기기별로 디자인이 잘 보이도록 웹 페이지를 만드는 작업
- 홈페이지를 열었을 때 최대한 빨리 로딩될 수 있도록 속도를 개선하는 작업
- 검색엔진 최적화를 위한 작업
과거에는 웹 퍼블리셔의 경우 프로그래밍 로직(logic)을 다루지 않았기 때문에 개발자로 보지 않는 인식이 있었다. 하지만 최근에는 CSS 프레임워크를 이용해 재사용 가능한 형태로 개발하면서 개발자 영역으로 넘어가고 있는 추세이다. 또한, 웹 퍼블리셔보다는 프론트엔드 개발자 (조금 더 넓은 범위의 직무)를 선호하다 보니 상대적으로 “프론트엔드 개발자가 증가”하는 추세이다.
추가로, 검색엔진최적화(SEO, Search Engine Optimization) 부분은 마케터의 영역이 될 수도 있지만, 프론트엔드 개발자의 역할이 될 수도 있다는 점을 참고하자.
사용자의 입력에 따라 데이터를 화면에 표현하는 역할
“프론트엔드 개발자”가 하는 대표적인 업무가 바로 “사용자의 입력을 받아서 데이터베이스에 있는 데이터를 불러와서 화면에 보여주는 역할”을 하는 것이다.
여기서부터는 Javscript라는 프로그래밍 언어를 알아야 하기 때문에, 프로그래밍 로직(logic)에 대한 이해가 필수입니다. 보통 HTML, CSS까지는 배우다가 Javascript에서 포기하는 케이스가 많은 이유다. 예를 들어, 사용자가 아이디와 패스워드를 입력하고 로그인 버튼을 클릭하면, 로그인이 된 화면을 보여주도록 할 수 있다.
서버로 데이터를 보내고 받는 역할
웹 페이지에서 생긴 데이터들을 서버로 보내는 역할을 의미한다. 과거에는 백엔드 개발자가 하던 영역이었지만, 최근에는 프론트엔드 개발자가 하는 영역으로 점점 넘어오고 있는 추세다.
서버로 데이터를 전달하는 작업은 난이도가 높다기보다 백엔드에서 만들어진 다양한 규칙에 맞추어서 설정해야 하기 때문에 어려움을 겪는다. 특히 백엔드 개발자가 다루는 영역을 알아야 하기 때문에 (서버, 보안, 네트워크 등) 많은 학습이 필요하다.
반대로, 서버에서 데이터들이 오면 이를 웹 페이지에 표현하는 역할도 해야 한다. 최근에는 단순히 웹 페이지에 보여주는 역할 뿐만 아니라 응답속도에 따른 로딩 문제, 서버 응답에 따른 문제 등을 해결해야 하는 경우도 자주 발생한다.
프런트엔드 개발자가 되려면 어떤 언어를 먼저 배워야 할까?
위에서는 HTML, CSS, Jascript 정도를 언급했지만, 실력있는 프런트엔드 개발자로 커리어를 쌓고 싶다면 다양한 기술들을 습득해야 한다.
아래 링크는 2022년 프론트엔드 개발자가 되기 위한 로드맵을 이미지로 볼 수 있다. 여기 나온 기술을 모두 배울 필요는 없으니 (모두 배우려고 해도 계속해서 새롭게 업데이트 되기 때문에 사실상 불가능하다) 참고만 하기 바란다.
이 로드맵을 기준으로 하나하나 공부해도 되고, 아래의 무료 온라인 강의 플랫폼에서 순서대로 학습해도 좋겠다.
https://online.moneynlifehacker.com/frontend-study/
