대 Frontend 개발 시대에 퍼블리셔는?

 간혹 퍼블리셔가 뭐하는 사람이야? 라고 저에게 물어보는 사람들이 있습니다. 혹은 그 역할이 필요한 거야? 도 있습니다. 그 분들을 위해 이 글을 작성해 봅니다.

 

 지금은 대 Frontend 개발 시대라 불러도 과언이 아닙니다. Frontend는 웹 사이트나 앱의 사용자 인터페이스(UI)를 만드는데 필요한 기술입니다. 최근 몇 년간, 모바일과 웹 기술의 발전으로 인해 Frontend 개발 분야는 더욱 중요해졌습니다. 이제는 사용자 경험(UX)에 더욱 신경을 써야하며, 사용자 인터페이스는 제품 또는 서비스의 성공에 큰 역할을 합니다. 그래서, Frontend 개발자들은 디자인, 개발, 테스트, 유지보수 등 많은 역할을 수행합니다.

 

 물론 회사나 환경에 따라 Frontend 개발자의 역할이 다양해질 수 있지만, 일반적으로 Restful API 개발을 제외한 모든 Frontend 개발 영역이 해당됩니다. 그렇다면 퍼블리셔는 어떤 역할을 할까요?

 

 넓은 범위에서 퍼블리셔는 Frontend 개발자로 분류됩니다. 하지만 이는 보다 특화된 역할이라 할 수 있습니다. 디자이너가 만든 디자인 내역을 HTML, CSS로 구성하는 업무를 주로 담당합니다. 예전 HTML/JSP/Jquery 개발 환경에서는 효율적인 인원으로 인식되어 왔습니다. 그들이 만든 결과물을 자바스크립트나 JSP 개발자가 바로 사용해서 개발 할 수 있었고, 수정 또한 자신이 만든 결과물과 크게 다르지 않아서 가능한 영역이었습니다. 그리고, 역으로 퍼블리셔가 필요한 이유는 업무 분담의 효율화를 꾀하기 위해 생겨난 역할입니다.

 

 빠르게 무언가를 생산하기 위해서는 분업은 가장 좋은 방법 중 하나 입니다. 일반적으로 개발자들은 디자인 측면에서는 많이 취약한 모습을 보입니다. 예를 들어 HTML, CSS 코딩보다 자바스크립트 코딩이 더 쉽고 빠릅니다. 따라서, 퍼블리셔 역할을 가진 인원들은 디자이너 경험을 가진 분들이거나 그쪽에 어느 정도 경험 혹은 적성이 더 맞는 사람들입니다. 그러다 보니 자바스크립트 개발에는 약하지만, HTML, CSS 코딩에 더 강점을 가지고 있습니다. 이러한 퍼블리셔 역할은 SI 업무에 큰 역할을 수행합니다. 짧은 시간에 많은 업무를 강요 되는 환경일 수록 분업화는 빛을 발하기 때문입니다.

 

 여기서 중요한 점은 분업입니다.

 

 서비스가 요구하는 UI/UX 수준이 상승함에 따라, 분업이 필수적이라고 생각합니다. 양적으로 Frontend 개발자의 역할이 늘어나는 것이 아니라, 전문 분야에 따라 구분하고 해당 분야에서 작업하는 것이 바람직합니다. 예전에는 .jsp 시절에 개발자 한 명이 본수 단위(페이지 단위)로 개발을 하였습니다. 개발자 한 명이 Frontend부터 Backend까지 모든 작업을 했었습니다. 하지만 현재는 Frontend 개발자와 Backend 개발자로 분리되어 작업한다는 것을 알고 있습니다. 이는 작업하는 영역이나 언어가 다르기 때문입니다. 마찬가지로, Frontend 개발자와 퍼블리셔도 분리되는 것이 바람직하다고 생각합니다. 다수의 개발자들이 함께 작업한 경험으로 보면, HTML과 CSS는 디자인 경험이 있는 분들이 작업하는 것이 더 적합해 보입니다. 물론 이러한 분들이 Script 영역까지 경험이 있으면 단순한 애니메이션 또는 라이브러리 적용도 가능합니다.

 

 반면, 퍼블리셔 역할을 하는 분들은 자바스크립트 개발 영역에서 어려움을 겪는 경우가 많습니다. 이러한 상황에서는 분업을 하는 것이 더욱 효율적일 수 있습니다. 서로 잘하는 분야에 집중하는 것이 좋은 분업의 한 가지 조건이라고 생각합니다.

이제 다시 Frontend 시대로 돌아가면서, Angular, React, Vue 같은 프레임워크가 대두되고 있습니다. 이에 따라 Svelte, Astro 등 후발주자도 등장하며, 복잡한 서비스 UI/UX에 대응할 수 있는 도구들이 늘어나고 있습니다. 또한 MVVM 패턴을 비롯한 좋은 방법론들도 많아졌습니다. 이러한 환경에서 퍼블리셔는 어떠한 역할을 할까요?

 

 저는 Angular, React, Vue를 모두 서비스 개발에 도입해본 경험이 있습니다. 그러나 퍼블리셔와 같이 일을 제대로 한 것은 React와 Vue였습니다. 이번에는 제 경험을 바탕으로 React, Vue에 도입한 이야기하려 합니다.

 

 React는 Frontend 개발을 위한 훌륭한 자바스크립트 라이브러리입니다. (Framework는 아닙니다.) React는 개발 시 컴포넌트 단위 개발을 지향하며, .jsx 문법을 사용합니다. 그러나 이러한 구성은 퍼블리셔가 접근하기 어렵게 만들었습니다. .jsx 형식은 자바스크립트와 같은 개발 언어적인 접근 방법으로 만들어져 있어 예술적인(?) HTML, CSS를 다루는 퍼블리셔가 이해하기 어렵게 만들었고, 퍼블리셔들은 이것들을 외계인들이 사용하는 언어와 비슷하게 보였습니다. 어떻게든 교육을 해서 같이 가게 만들어 봤지만, className 때문에 퍼블리셔 분들과 갈등을 야기할 줄 몰랐습니다. 지극히, 서양인들 관점에서 접근한 Frontend 개발자의 정의로 만들어진 React는 퍼블리셔와 분업이 너무 힘들게 만들었습니다.

 

 Vue를 도입할 때 React와는 반대로 진행됩니다. Vue는 Progressive Framework라는 사상에 따라 제작되었으며, 현재 개발 중인 .jsp나 순수 HTML 프로젝트에도 즉시 도입하여 사용할 수 있습니다. 이는 전통적인 HTML 구조와 유사하게 구성되어 있음을 의미합니다. 실제로, .vue 파일 형식은 template(HTML) 영역, Script 영역, Style 영역으로 나누어 개발됩니다. 퍼블리셔가 처음에 적용하고 개발하는 방식과 거의 유사하기 때문에 시작하기 쉽습니다. 또한, Frontend 개발자가 개발한 결과물에서 수정하는 것도 손쉽게 진행할 수 있습니다.

 

 React와 Vue는 서로 호불호가 갈리는 대상입니다. React를 더 많이 사용하니 React가 좋다는 성급한 일반화는 오류입니다. Vue 역시 마찬가지입니다. 자신의 환경에 부합되는 라이브러리나 프레임워크를 테스트해보고 선택하는 것이 바람직합니다. (저는 러닝 커브가 낮고, 환경 적응성이 강한 Vue를 선호합니다.)

 

 효율적인 개발을 위해서는 분업이 필수적입니다. 이로써 퍼블리셔라는 역할이 필요하다는 것도 알게 될 것입니다. 각 환경에서는 어떻게 해야 할지 고민해 봤습니다.

 

 React 환경에서 퍼블리셔와 함께 일하려면, 퍼블리셔가 얼마나 일을 할 수 있는지 확인하는 것이 필요합니다. 또한, 일부 포기도 필요합니다. 개발자가 "이 정도는 쉽게 할 수 있으니 퍼블리셔도 이 정도는 해야 한다"는 생각은 잘못된 생각일 수 있습니다. 실제로 퍼블리셔를 교육하는 방법에 대해 고민하고, 퍼블리셔를 도입하는 프로세스를 잘 정립하는 것이 중요합니다. 특히, 개발까지 끝난 결과물에서 퍼블리셔가 어떻게 수정할 수 있는지에 대한 방안도 모색해야 합니다.

 

 반면에 Vue의 경우, React에 비해 퍼블리셔와의 작업이 자유롭습니다. Vue에 대한 교육은 필요하지만, 경험이 어느 정도 쌓이면 컴포넌트 가이드를 제공하여 컴포넌트 단위 개발을 요구해도 퍼블리셔들은 어렵지 않게 작업할 수 있습니다.

 

 본문에서 언급한 것처럼, 효율적인 개발을 위해 퍼블리셔는 필수적입니다. 퍼블리셔의 필요성 여부를 논할 필요는 없지만, 있으면 더 좋습니다. 개발자들이 Convention을 구성해서 협업을 하는 것처럼, 퍼블리셔도 이러한 과정이 필요합니다. 이러한 과정에는 BEM 방법론, SCSS와 같은 CSS 전처리기 사용법, 컴포넌트 단위 CSS 사용 여부, Global CSS 사용 여부, Global 변수 사용, TailwindCSS, WindiCSS, UnoCSS와 같은 유틸리티 퍼스트 도구 등이 포함됩니다. 또한, 퍼블리셔만의 전문적인 분야도 있으며, 적절한 교육 과정이 제공되어야 합니다. (이는 어떤 개발자든지 마찬가지입니다.)

 

 대 Frontend 개발 시대에 퍼블리셔의 역할에 대해 제 소견을 작성해 봤습니다. 제 글이 읽는 분들에게 작은 도움이 되었으면 합니다.