FE가 뭘까

FrontEnd(FE)

웹서비스란 사용자가 어떤 입력을 하고 입력을 통해 더 가치있는 데이터를 만들어 사용자에게 잘 전달하는 것을 의미한다. 이 과정에서 프론트엔드는 사용자와 서비스를 연결해주는 과정의 모든 것들을 구현하는 역할이라고 할 수 있다.
즉, 프론트엔드 개발자가 필요한 이유는 사용자에게 웹을 통해 서비스를 제공하기 위해서 이다. 그리고 본질은 서비스와 사용자, 인간과 인터넷 간에 상호작용을 할 수 있는 배경을 만드는 일인 것이다.

정리하면, 프론트엔드 개발자는 사용자에게 서비스를 제공하는데, 그 안에서 서비스와 사용자는 상호작용을 해야하며, 그 경험과 교류가 이루어지는 필드를 개발하는 직업이라고 생각한다.

1. 데이터를 예쁘게 잘 보여주기

서버에서 내려오는 데이터를 HTML, CSS를 통해 요구하는 디자인의 형태로 나타내는 영역이다.
디자인 -> 코드 작업, 서버데이터 -> 코드 작업이 섞여있다. 그리고 국내에서는 디자인 -> 코드 작업을 하는 사람을 퍼블리셔라고 부른다. 최근의 경우에는 프레임워크에서 재사용이 가능한 형태로 디자인과 CSS를 같이 하며 컴포넌트로 만들어내는 과정을 작업하며 프론트엔드의 영역의 한 부분이 되고 있따.

2. 데이터(화면)을 조작하기

사용자의 입력을 받아 적절히 다른 데이터(화면)으로 변경하는 역할을 담당한다.
현재 화면을 데이터로 구성 -> 사용자의 이벤트 감지 -> 이벤트를 적절한 행동으로 분류 -> 행동에 맞는 Web API 동작 -> API 결과에 따른 데이터 생성 -> 기존 데이터와 조립, 데이터 변경 -> 데이터 출력

3. 서버로 데이터를 보내기

이러한 데이터들을 서버로 보내는 역할을 담당한다. 이 부분에는 백엔드에 의존성이 있어 인증, 보안, 헤더 등 백엔드에서 만들어둔 설정에 따라 작업해야한다. 학습과 협업이 중요한 영역이다.

4. 서버에서 받은 데이터 다루기

서버에서 데이터를 전달 받아 화면에 필요한 데이터로 전환하는 변환 과정을 의미한다. 이 역시도 백엔드와 협업의 과정이 필요하다.

글을 찾아보고 프론트엔드 역할을 정리하다 보니 웹 퍼블리셔라는 직업이 다루는 부분과 백엔드가 다루는 부분에서 적절하고 절묘하게 섞여 들어간 느낌이 프론트엔드 같다. 잘 설명되어 있는 글에서는 색구분이 뚜렷하게 되있는게 아니라 그라데이션처럼 존재하는 것이라고 표현하기도 했다. 분명하게 경계선을 잡을 순 없지만 어느 시점이 노랑이고, 초록인지느 구분할 수 있다는 것만 기억하면 될 듯!
아무튼 1~4 ...
여기까지가 일반적인 프론트엔드가 다루는 범위이다. 이외에도...

5. 개발 환경 관리하기, 서버로 배포하기

프로젝트 개발환경을 설정하고 스택을 정리하고 컨벤션을 조율하거나, 일정과 이슈관리 분배, 배포 프로세스, 릴리즈 관리 등도 중요하게 여겨진다. 이러한 역할을 하는 사람을 PL(project leader)라고 부른다.

6. 개발자들을 위한 개발

React와 같은 도구를 개발하는 업무이다. 공통 모듈, 라이브러리, 디자인 시스템 같은 것들을 만들고 배포할 수 있다.

FE가 생겨난 이유

Web의 역사

프론트엔드는 웹산업의 거대한 발전이 이루어지며 세분화되는 과정에서 생겨났다고 볼 수 있다.

WEB 1.0

하이퍼텍스트

가상의 공간에서 텍스트에 새로운 문서에 대한 링크가 존재하는 하이퍼텍스트가 등장했다. 누구나 쉽게 HTML을 이용해 이 하이퍼텍스트를 쉽게 만들고 HTTP를 통해 이 문서를 접근하여 읽을 수 있었다.

CGI(Common Gate Interface) 통신

정적 -> 동적 페이지 생성이 가능해졌다. 이 때 홈페이지 서비스들이 만들어지게 된다. 이떄부터 사용자는 정보를 서버로 보내고 데이터 보관을 할 수 있게 되었다.
ex) 방명록 -> 게시판, 커뮤니티

Javascript 등장

서버 뿐만 아니라 브라우저에서도 실행 가능한 스크립트 언어 Javascript가 만들어졌다.

CSS 등장

HTML 스타일 작성의 유지보수가 어려워지자 컨텐츠와 스타일을 분리하고자 하는 CSS가 탄생했다.

웹의 상업화

웹페이지 개발의 수요는 올라갔지만 이땐 아직 로직의 영역이 중요하지 않았다.

WEB 2.0

Flash, RIA(Rich Web Application)

정적 문서 구조에서 사용자와 적극적인 상호작용을 통해 화면이 동적으로 변해야한다고 주장하며 Flash가 등장했다. 하지만 보안, 많은 리소스를 위한 로딩, 검색엔진 불포함 등의 단점들에 의해 웹에서는 대안을 찾길 바랬고, Flash는 게임시장에서 발전하게 되었다. (죽어버린 플래시.. 안뇽)

웹과 OS

그 때 당시 검색엔진과 구글애드로 잘 나가던 구글은 웹을 자신들의 OS로 만드려는 시도를 하게 된다. 이 과정에서 MS의 Internet Explorer에 대항하기 위해 여러 브라우저들이 만들어지기 시작했으며 이는 웹 표준과 웹 접근성의 토대가 된다.

웹 표준

Window, Internet Explorer, ActiveX 등의 독점으로 인해 자체 표준이 되가는 상황에서 웹 종사자들이 다 같이 웹을 쓸 수 있도록 하는 웹 표준이 만들어진다. 이를 지켜 Html, CSS, Javascript를 만들면 브라우저 관계 없이 동작할 수 있음을 의미했다. 이 때부터 Flash 대신 Javascript와 Css를 이용하여 동적으로 화면을 만드는 능력을 요구받게 된다. 접근성에 대한 강조와 더불어 조금 더 전문성을 요하는 구간이 생겨나 이 지점이 프론트엔드의 시작점이라고도 볼 수 있겠다.

jQuery

웹 표준 API 포함, 훨씬 쉬운 문법, IE 크로스브라우징(웹 제작시의 호환성을 의미), Ajax까지 해결한 jQuery의 등장으로 프론트엔드에서 웹디자이너와 웹개발자의 영역이 분리되기 시작한다.
웹디자이너 - HTML,CSS를 개발자가 사용할 수 있도록 만들어 넘겨주는 일이라는 프로세스가 생겼던 것.

Node, Npm

javascript를 가지고 서버 환경을 개발할 수 있는 Node가 탄생했으며 Node에서 사용한느 module 방식의 개념이 보편화 되기 시작했다. npm이라는 module을 패키징하여 등록하고 관리할 수 있는 도구가 생기면서 Javascript의 생태계 성장에 박차를 가한다.

이러한 과정들을 통해 Javascript는 거대한 개발환경이 갖춰지며 더 높은 가치를 창출할 수 있는 웹 서비스들이 나올 수 있는 환경이 점차 마련되었다.

백엔드와 프론트엔드 전문성의 분리, React

내가 굳이 이렇게 역사를 일일히,, 정리할 필요는 없었지만 프론트는 띡 생겨난게 아니란 걸 말하고 싶었다. 이러한 과정들을 거쳐서 웹의 중요성이 증대되고 웹 서비스는 거대해지며 웹 산업이 발전하는 과정에서 백과 프론트로 세분화된 것이다.
백엔드는 데이터를 처리하기위한 도구, 배포 등의 새로운 도전과제를 맞이했다면
프론트 역시 화면을 어떻게 동적으로 다루어야하는지에 대한 역할 등 더 필요한 역할들을 맡게된 것이다.
또한 React를 기점으로 프론트엔드 개발의 체계가 잡히게 되었다.

현재의 입지

프론트엔드는 이제 하나의 생태계가 되었다. 웹은 너무 당연한 서비스의 출발지이며 웹 문서는 현재 웹 애플리케이션으로 변모했다. 이제는 데이터를 다루는 도구가 되었으며 이 유통과정의 산업 규모는 커졌다.
데이터를 유통하면 돈이 되는 세상에서 데이터를 시각화하고 컨트롤 하려는 수요는 계속 늘어날 것이다. 이 과정에서 프론트엔드의 수요는 늘어날 것이고, 데이터를 조작하고 실시간으로 연결하고자 하는 과정에서의 새로운 서비스들은 앞으로 더 확장될 것이다. 프론트엔드의 수요는 곧 프론트엔드의 성장을 의미하겠지!

난 왜 FE를 직무로 선택했는지

왜 개발자가 되고자 했더라

FE를 선택했는지를 이야기하기 전 왜 개발자가 되고 싶었는지부터 생각해보았다. 전과 전에 내가 왜 기획과 마케팅에서 개발자로 진로를 바꾸고 싶어했는지가 이 이유가 될 수 있을 거 같다.

나는 새로운 것들을 생각해내고 직접 만드는 것을 좋아한다. 남들이 생각하지 못한 아이디어가 마구 샘솟았고, 그 아이디어를 기획으로 옮기고 그에 대한 마케팅 전략을 수립하고... 사람들과 함께 디벨롭 시키는 과정을 좋아했던 거 같다. 실제로 호평을 받거나 내 아이디어가 채택 되는 경우도 많았다. 미친듯이 마케팅 소학회 활동을 했던 이유인 거 같기도! 근데 그렇게 내 기획의 의도대로 모든 과정을 마치고 나면, 아직 내 머릿속에 남아있는 실제로 구현됐으면 하는 부분들까지는 실행되지 않는 것에 대한 아쉬움이 늘 남았다. 사실 내가 아직 학생이고, 기업에 기획서를 전달하는 역할과 활동만 해봐서 그랬을 수도 있다. 실제 내가 기획자로 회사에서 일을 했다면 그 과정에 참여했을 수도 있겠지. (근데 취업한 언니들 보니까... 아닌거 같아... 그런 곳 많이 없더라... 아직 한국사회가 말랑해지려면 시간이 필요한 듯해..)

어쨌든 난 내가 낸 아이디어가 아니어도, 최대한 가까이서 그 니즈를 갖고 있는 상대와 소통하면서 그걸 바탕으로 결과물을 만들어 보고 싶었다. 기획자가 서비스에 대해 직접 상호작용하면서 문제점을 개선하고, 어떻게 해야 사용자가 좋아할지를 고민하는 부분까지 관여하는 역할은 아니니까.
(뭐, 이런 꼬리를 무는 생각들에서 난 내 결과물을 눈으로 바로 확인 할 수 있는 걸 흥미있게 생각한다는 것도 알 수 있었다.)
그렇기에 아이디어가 채택되고 실행되는 것에 보람을 느끼는 것보다 그게 실제로 어떻게 완성되고 만들어지는지를 더 흥미롭게 생각한다는 것을 알게 되었다! 이건 즉, 기획자가 아닌 개발자가 되고 싶다는 것을 깨닫는 계기였다! 그게 더 내 목표에 부합하는 활동이라고 생각했기 때문이다.

개발자가 되고자 했던 이유 - 고객과 상호작용 즉, 사용자와 인터넷(나)와의 상호작용을 통해 가치 있는 서비스를 만들고자 했던 내 욕구 때문이라고 정리해본다. 그게 인간과 소통하고 싶은 내 욕구 또한 반영된 거 겠지 ㅎㅎ
(경영인)고객과 상호작용 = (개발자)사용자와 인터넷(나)의 상호작용 = (구냥 나)사람과 사람의 가치있는 소통
머 이런 로직...
사실 결은 비슷한 것 같다 ~,~ 경영에서도 결국 고객을 잘 이해하는 사람이 더 가치있는 서비스를 제공할 수 있고, 더 좋은 브랜드가 될 가능성을 만든다. 개발도 똑같다고 생각했다. 궁극적으로 사용자에게 좋은 경험을 제공할 수 있는 결과물을 내야하기에.

그래서 프론트엔드

개발자가 되기로 결심했던 이유들만 봐도 내가 매료되었던 개발의 부분은 프론트엔드가 담당하는 역할임을 알 수 있다.
기획자의 의도를 반영해서 보여주고 그에 대한 사용자의 피드백을 받고 서비스를 제공할 수 있는 건 프론트엔드가 할 수 있는 가장 큰 매력이라고 생각했고, 그래서 프론트엔드 개발이 하고 싶다고 생각했다!
트렌드와 감각에 대한 부분에 대해서도 할 이야기가 많지만 일단은 이런 부분에 대해서만 정리해보았다.

사실 뭐 당장 떠오르는 것들을 정리해보느라 횡설수설한 거 같긴 한데 지금 생각들은 이렇다. 머 더 공부를 하다보면 생각이 바뀔순 있겠지! ~

이거 쓰다보니 좋은 프론트엔드 개발자가 어떤건지에 대해서도 생각해볼 필요가 있눈거 같다 ㅎㅅㅎ