학원에 찾아오는 또는 실무자 조차도 퍼블리싱과 프런트엔드의 구분을 못하는 경우가 종종보입니다.
작업영역이 비슷하고 기업이나 개발자 개인의 의견도 조금씩 달리 해석이 되고 있는 두분야의 차이점을 정리해 보고자 합니다.
퍼블리싱와 프런트엔드의 정의
웹개발 프로세스를 보면 크게 기획, 디자인, 개발로 볼수 있는데요.
여기서 개발을 세분화 해 보면 퍼블리싱 > 프런트엔드 > 백엔드 순으로 진행된다고 볼수 있습니다.
디자인 결과물을 html문서화 하는것이 퍼블리싱이라고 한다면 프런트엔드는 실제 데이터와 연동되는 브라우저의 동작부분을 제작하게 됩니다. 작업목표를 두고 표현한다면 퍼블리싱은 디자인의 html문서화, 프런트엔드는 그 문서의 실제동작/연동화라고 하면 구분이 될것 같습니다.
기업마다 팀환경마다 작업의 구분이 같을수 없지만 대체로 단순 UI모션은 퍼블리셔가 서버와 연동되는 데이터값 처리같은 동작은 프런트엔드 개발자 영역으로 봅니다. 경우에 따라서는 자바스크립트 자체를 프런트엔드 개발자가 전임하는 경우도 있고 퍼블리셔가 자바스크립트 업무를 대부분 하는 경우도 있습니다.
이는 자바스크립트라는 공통된 업무영역이기 때문이죠.
퍼블리셔와 프런트엔드 개발자의 업무스킬
퍼블리셔의 업무스킬
- 디자인을 웹문서화
디자인된 웹페이지를 HTML, CSS, Javascript, jQuery 등의 웹 기술을 사용하여 구현합니다. - 웹표준 준수
웹표준에 따른 웹사이트의 접근성, 호환성, 검색 엔진 최적화 등을 고려하여 웹사이트를 개발합니다. - 반응형웹(Responsiveness Web) 구현
다양한 기기와 화면 크기에서 웹사이트가 적절하게 표시되도록 반응형 웹디자인을 구현합니다. 이는 모바일 기기에서의 웹사이트 사용 경험을 개선하는 데 중요한 역할을 합니다. - 크로스 브라우징
다양한 웹 브라우저에서 웹사이트가 일관되게 표시되도록 관리합니다. 이는 각 브라우저의 특성과 호환성을 고려하여 웹사이트를 제작하는 것을 의미합니다. - 웹사이트 성능 최적화
웹퍼블리셔는 웹사이트의 로딩 속도를 최적화하고, 성능 향상을 위해 압축, 캐싱, 이미지 최적화 등의 기술을 사용합니다. 빠른 로딩 속도는 사용자 경험을 향상시키고, 검색 엔진 최적화에도 영향을 미칩니다. - 웹사이트 유지보수
기존 웹사이트의 내용 수정, 기능 추가, 버그 수정 등을 수행하여 웹사이트의 원활한 운영을 유지합니다. 웹퍼블리셔는 정기적인 보수 및 업데이트 작업을 수행합니다.
프런트엔드 개발자의 업무스킬
- 웹 인터페이스 개발
웹사이트나 웹 애플리케이션의 사용자 인터페이스를 개발합니다. HTML, CSS, Javascript 등을 사용하여 시각적인 디자인을 적용합니다. 이를 통해 사용자가 직관적으로 웹사이트를 이용할 수 있도록 인터페이스를 구현합니다. - 프론트엔드 프레임워크 활용능력
프론트엔드 개발자는 프론트엔드 프레임워크 또는 라이브러리를 사용하여 웹사이트를 개발합니다. 대표적으로 React, Angular, Vue.js 등이 있으며, 이를 활용하여 사용자 인터페이스를 구축하고 상태 관리, 라우팅, 컴포넌트 재사용 등의 기능을 구현합니다. - 웹사이트 성능 최적화
프론트엔드 개발자는 웹사이트의 로딩 속도를 최적화하고 성능 향상을 위해 여러 기술을 사용합니다. 이를 위해 파일 압축, 리소스 캐싱, 코드 최적화 등을 수행하여 사용자 경험을 향상시킵니다. - 협업 및 문서화
프론트엔드 개발자는 디자이너, 백엔드 개발자, 프로젝트 매니저와 협업하여 웹사이트의 개발과 유지보수를 진행합니다. 또한, 코드와 기능에 대한 문서화를 작성하여 향후 유지보수 및 협업에 도움을 줍니다.
같은 점과 다른 점
우선 두 직업군의 같은점은 둘다 화면단, 즉 브라우저에서 돌아가는 클라이언트단 개발자라는 점입니다.
그말은 개발스택도 겹쳐지는 영역이 많기때문에 기업마다 개인의 역량별 작업의 범위가 유동적이라 할수 있습니다.
브라우저에 사용되는 언어는 HTML, CSS, Javascript가 유일무이하죠.
다른점은 작업의 목표가 다르다고 할 수 있는데요.
디자인을 웹문서화 한다는 목적이 퍼블리셔라면 웹문서의 동작화 한다는 점은 프런트엔드 개발자의 영역이라고 볼수 있습니다.
그에 따라서 퍼블리셔는 디자너와 좀더 협업점이 많고 프런트엔드 개발자는 백엔드 개발자와 협업점이 많다고 볼수도 있을것 같습니다.
마크업을 하는 퍼블리셔는 웹표준 웹접근성등을 알야야 하고 자바스크립트로 동작을 만드는 프런트엔드 개발자는 순수스크립트를 잘하거나 한개이상의 프런트엔드 프레임워크를 다룰수 있어야 합니다.
신입 퍼블리셔/프런트엔드 준비사항은?
앞서 말했듯이 퍼블리셔와 프런트엔드의 업무영역은 상당부분이 교차되어 있습니다.
신입개발자가 준비한다면 진입장벽이 퍼블리셔가 훨씬 유리하다고 할수 있고 프런트엔드 개발자는 큰기업 말고는 신입 채용 공고가 거의 없어 보입니다. 신입 채용공고가 있다고 하더라도 요구스펙을 보면 대부분 중고신입(경력자가 신입으로 지원)을 겨냥한 것으로 보여질 정도입니다.
웹개발을 처음 접하고 본인이 프런트엔드에 관심이 가는 분이라면 퍼블리셔를 추천을 드립니다. 퍼블리셔의 장점은 진입장벽이 프런트엔드 개발자보다 진입장벽이 낮아 가성비있는 짧은 교육만으로도 취업이 가능한 점이라고 할수 있습니다. 취업후에 개으름을 피우지 않는다면 본인의 스펙트럼을 넓혀 프런트엔드 영역까지 넓히고 더 나아가 백엔드까지 넓혀 결국은 풀스텍을 지향하는것이 개발자들의 로드맵이 아닐까 싶네요.