1. 개요
Front-end. 프로그래밍의 한 분야. 웹사이트나 앱 등의 사용자 인터페이스(UI)를 개발하는 분야를 말한다. 반대말은 백엔드. 안드로이드 혹은 iOS 개발도 넓게 보면 프론트엔드 개발에 포함될 수 있다.프로그래밍에서의 프론트엔드라 함은 컴퓨터 소프트웨어에서 사용자와 상호작용하는 부분을 지칭하고, 백엔드는 반대로 프론트엔드로부터 사용자의 입력을 받고, 그 입력을 처리하여 출력할 결과물을 다시 프론트엔드로 넘기는 부분을 지칭한다.
프론트엔드 개발자를 쉽게 말하자면, 나무위키에 접속하면 보이는 왼쪽 위의 '나무위키' 버튼, 그 옆의 '최근 변경', '최근 토론', '특수 기능', 그 오른쪽의 검색창, 그 아래의 실시간 검색어 등등, 이렇게 일반 사용자 눈 앞(Front)에 보이는 것을 개발하는 사람이다.
전 세계적으로 프론트엔드/백엔드 관련 얘기를 한다면 거의 대부분은 웹 프로그래밍을 말하지만, 개념 자체는 웹 개발에 한정되진 않는다. 아예 프론트엔드와 백엔드가 완전히 별개의 주체에서 개발하여 따로 배포하는 경우도 있다.[1]
프론트엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구조를 지향하는 업무 스타일의 개발 방식으로 프론트단의 비지니스 로직과 사용자 영역의 개발을 담당하는 사람이다. 이와 다른 방식의 업무 스타일 직군으로는 웹퍼블리셔(UI 개발)와 개발자(서버 개발자)의 업무 분리 방식이 있다. 이 경우는 주로 서버 사이드가 클라이언트를 감싸는 방식이다. MVC로 치면 View 부분에 해당하는 영역을 맡는다.
2. 설명
프론트엔드 개발자는 백엔드 API에서 가져온 데이터의 출력, 입력을 통한 비즈니스 로직 구성과 사용자와 대화하는 사용자 인터페이스 부분을 작업하는 개발자를 말한다.분별하기 헷갈리는 직종으로 웹 퍼블리셔가 있는데, 웹 퍼블리셔(해외에서는 UI 개발자로 불린다)는 HTML 중심이거나, 서버 사이드가 감싸는 구조 형태의 웹을 지향하는 웹 퍼블리셔와 개발자의 업무 스타일의 직군으로서 웹표준 반응형 웹과 UI를 만드는 디자인 쪽에 가깝기에 데이터 처리, 비즈니스 로직을 개발하진 않는다. 요즘은 마크업 개발자라고 불린다. 클라이언트 사이드 영역이기도 하지만, 프론트엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구조를 지향하는 업무 스타일의 직군으로서 웹 퍼블리셔와 같이 인터페이스의 디자인 관점도 있지만, 웹 퍼블리셔와 달리 DOM 조작이 아닌 컴포넌트 아키텍처와 데이터 상태의 변화로 처리하며, 이벤트나 서버와 API 통신해서 비즈니스 로직을 푸는 관점을 가장 중시한다.
프론트엔드 개발자는 프론트 영역 전반과 서버에 대한 이해력을 필요로 한다. 프론트엔드 개발자가 담당하기도 하지만, 종종 업무 효율을 위해 디자인 영역(HTML, CSS)만 작업해주는 마크업 개발자가 따로 있는 경우도 있으며, 프론트엔드 개발자는 해당 작업 파일을 받아 포팅 작업을 하고, 프론트엔드 영역을 개발하게 된다. 즉 프론트엔드 개발자는 바닐라 JS와 HTTP 프로토콜, 웹팩 등이 중요하다고 볼 수 있다.
백엔드 개발자도 기존 개발자와 스펙이 조금 다르고, 백엔드의 뷰는 화면 개발이 아닌 API 개발이고, 백엔드 인증 처리도 따로 알아야 하며, 데이터베이스 분석과 API서버를 개발한다. 웹 퍼블리셔와 개발자로 나뉜 방식은 모든 호출을 서버에서 가져와야 했고, 컴포넌트화가 안 되었지만, 프론트엔드와 백엔드로 나뉜 개발 방식은 서버의 컴퓨터와 사용자 컴퓨터가 http통신으로 데이터만 교환하고 완전히 분리 구조를 지향한다. 점점 데이터의 복잡성이 커지고, SPA(Single Page Application) 및 재사용성이 중요함에 따라 각광받는 직종이다. 이런 거 만들어주는 사이트들도 존재한다.
웹이 아닌 모바일쪽 프론트엔드라면 입력을 감지하고 이에 알맞는 기능을 동작시키는 기술도 중요하다. 하드웨어는 매우 기본적인 센서만 제공하기 때문에, 이를 해석하여 정확한 반응을 묘사해야하는 것은 프론트엔드 개발자의 영역이다. 스마트폰 앱을 사용할 때 사용자가 쓰는 다양한 손가락 제스처 동작 기능들이 여기에 해당한다. 스마트폰은 유저가 어느 x, y 위치에 손가락을 눌렀는가 에 대한 정보만 개발자에게 제공한다. 개발자는 이 단순한 정보를 해석하여, 유저가 한번 터치한건지, 두번 터치한건지, 화면을 스크롤한건지, 화면을 스와이프 한건지 해석하고 어떠한 동작이 기능 구현에 있어 필요한지를 고려하여, 손가락만으로 원활하게 작동하는 그래픽 리액션을 표현해야한다.
3. 프론트엔드는 비개발자?
흔히 백엔드를 비롯한 서버 프로그래밍, 시스템 프로그래밍 분야의 현업은 물론이고 지망생 쪽에서도 프론트엔드 개발자를 개발자 취급하지 않거나 낮게 보는 문화가 어느 정도 있는 것은 사실이다. 하지만 그렇다고 해서 프론트엔드의 가치가 떨어지는 것은 절대 아니다. 두 분야가 추구하는 방향이 다를 뿐이다.백엔드나 서버 프로그래밍은 최적화된 로직과 리소스 관리를 통해 언제 어디서든 적재적소의 데이터를 보내주는 것을 최고의 가치로 꼽는다. 예시를 들자면 서버 이용자가 1명이든 수억명이든 동일한 속도로 아웃풋이 나와주면 잘 설계된 백엔드 서버 애플리케이션이라고 할 수 있다. 일반인들이 와닿게 설명하자면 콘서트 예매와 수강신청에 갑자기 수백, 수천명이 몰려도 사이트가 마비되지 않으며, 인터넷 방송 시청자가 갑자기 수만명 몰려들어도 렉 없이 잘 송출되는 서버가 좋은 백엔드 서버라 할 수 있다.
이를 보조하기 위해 더 효율적인 코딩 로직, 보다 완벽한 리소스 관리, 최적의 스케쥴링을 추구하는게 백엔드와 시스템 나아가 서버 프로그래밍 계열 직군이라고 할 수 있다. 대규모로 구축된 웹사이트의 경우 밀리초 단위로 효율성에 차이가 나도 누적되면 무시못할 퍼포먼스 차이를 보일 수 있다. 단순 로직의 효율을 떠나서 미리 상품처럼 개발되어 있는 프레임워크들이 많고 이들 간의 궁합도 중요하기 때문에 어떤 방식으로 구현해야 하는지, 지속적인 유지보수는 가능한지, 충돌 여부나 의존성 문제는 발생하지 않는지도 백엔드에선 중요한 가치다.
이상이 백엔드 쪽에서 보는 개발의 '주안점'이다. 프론트엔드는 좀 이야기가 다르다. 동시에 수없이 많은 인풋, 아웃풋을 처리해 주어야 하는 백엔드 서버와 달리 프론트엔드는 일단 보내온 데이터를 가지고 브라우저 화면에 띄워주면 되기 때문에 흔히 말하는 '사용자 인터페이스(UI)', '사용자 경험(UX)'가 매우 중요하다. 그냥 데이터를 나열해놔도 이용이 불가능한 것은 아니지만 대부분의 비전공 일반인들은 알아보기 힘들며, 설령 관련 지식이 있어도 개발자로서 접근하는 것과 하나의 이용자로서 사이트를 이용하는 것은 별개의 문제다. 아무리 개발자라고 해서 인터넷 쇼핑에서 물건 하나 사자고 일일히 상품 번호와 수량을 코드로 입력하는걸 반기진 않는다. 따라서 이를 위해 필요한 것이 프론트엔드다.
프론트엔드에서 추구하는 가치는 디자인적 측면과 예술적인 부분이 꽤 많이 가미된다. 프론트엔드의 '입문'만은 쉽다고 하는 이유도, 전공 지식이 없으면 아예 접근조차 힘든 백엔드 쪽과 달리 일단 프론트엔드는 사람이라면 공통적으로 '보는 눈'이 있기 때문에 결과물에 기본적인 심미성은 갖출 수 있기 때문이다. 프론트엔드를 은근히 무시한다는 밈 자체도 입문이 어느 정도 쉽기 때문에 그런 면이 없지 않아 있다.
하지만 프론트엔드도 깊게 파고들면 상당히 고차원적이고 어렵다. 백엔드는 정량적인 측정을 통해 칼같이 우수한 성능을 줄세울 수 있지만 프론트는 그게 아니다. 더 유저 친화적이고 더 좋은 인터페이스라는 건 꽤 모호하고 어찌보면 정답이 없다. 우수한 프론트엔드 개발자가 되기 위해선, 디자인적 재능이 어느 정도 갖춰질 필요가 있다. 다시 말해 백엔드와 달리 '예체능'과 유사한 분야가 프론트다.