brunch

You can make anything
by writing

C.S.Lewis

by 더오픈프로덕트 Jun 14. 2024

웹 퍼블리셔와 프론트엔드 개발자 과거와의 비교

웹 퍼블리셔와 프론트엔드 개발자 역할과 책임이 과거와 비교하여 상당히 달라졌습니다. 기술의 진보와 사용자 요구의 변화는 두 직종의 경계를 허물며 새로운 협업과 전문성을 요구하고 있습니다. 과거와 현재의 비교를 통해 웹 퍼블리셔와 프론트엔드 개발자의 역할이 어떻게 변해왔는지, 그리고 앞으로의 전망에 대해 살펴보겠습니다. 이 글에서는 두 직종의 변화와 SPA 프로젝트에서의 구체적인 역할을 하는지에 대해 얘기해보고자 합니다.


과거의 웹 퍼블리셔와 프론트엔드 개발자


웹 퍼블리셔는 HTML과 CSS의 전문가로서, 디자이너가 만든 시안을 웹 페이지로 변환하는 역할을 주로 맡았습니다. 이들은 HTML과 CSS를 사용해 웹 페이지를 구성하고, jQuery를 사용하여 간단한 동적 기능을 구현했습니다. 웹 표준을 지키며 다양한 브라우저에서 일관된 화면을 제공하기 위해 브라우저 호환성을 신경 썼고, 반응형 웹 디자인의 도입으로 미디어 쿼리를 사용하여 다양한 화면 크기에 대응하기 시작했습니다. 각 페이지는 별도로 작성되었으며, 코드의 재사용성이 낮았습니다. 때문에, 복잡한 레이아웃을 구현하는 데 많은 시간이 소요되었습니다.


프론트엔드 개발자는 주로 jQuery를 사용하여 DOM 조작과 이벤트 처리를 담당했습니다. AJAX를 통해 서버와의 비동기 통신을 처리하고, 사용자 인터페이스의 기능적 부분을 구현했습니다. 복잡한 상태 관리 도구가 없이도 간단한 상태 관리를 통해 애플리케이션의 상태를 유지했습니다.


현재의 웹 퍼블리셔와 프론트엔드 개발자


오늘날 웹 퍼블리셔는 CSS-in-JS와 같은 최신 CSS 기술을 사용하여 복잡한 레이아웃을 구현하고, 다양한 디바이스에 맞춰 반응형 디자인을 적용합니다. 웹 접근성(Accessibility) 표준을 준수하여 모든 사용자가 접근할 수 있도록 하며, Figma, Sketch, Adobe XD 같은 디자인 협업 도구를 활용해 디자이너와 협력합니다.


프론트엔드 개발자는 React, Angular, Vue.js 등의 최신 JavaScript 프레임워크 및 라이브러리를 사용해 복잡한 싱글 페이지 애플리케이션(SPA)을 개발합니다. Redux, MobX, Recoil 등의 상태 관리 라이브러리를 통해 애플리케이션 상태를 효율적으로 관리하고, Webpack, Babel 등의 도구를 사용해 모듈 번들링과 트랜스파일링을 수행합니다. Jest, Cypress 등을 사용해 단위 테스트와 E2E 테스트를 수행하고, RESTful API와 GraphQL을 통해 백엔드와 통신합니다. 또한 지속적 통합/지속적 배포(CI/CD) 파이프라인을 설정하고 관리합니다.


SPA 프로젝트에서의 역할


웹 퍼블리셔는 CSS-in-JS, SASS, LESS 등을 사용해 리액트 컴포넌트에 디자인을 적용하고 코드의 재사용성을 높이고 유지보수를 용이하게 합니다. 다양한 디바이스에 맞춰 반응형 레이아웃을 구현하며 Flexbox와 Grid 레이아웃을 사용하여 복잡한 레이아웃을 쉽게 구현할 수 있습니다. ARIA 속성을 사용해 웹 접근성을 향상시키고, 주로 시각적 요소를 다루는 프레젠테이셔널 컴포넌트를 작성합니다.


과거에는 주로 정적 HTML과 CSS 작성, 브라우저 호환성 문제 해결, 그리고 기본적인 JavaScript 사용에 초점이 맞춰졌다면, 현재는 모듈화된 코드 작성, 최신 레이아웃 기법 활용, 고급 JavaScript와 프레임워크 사용, 반응형 디자인 표준화, 웹 접근성 준수, 그리고 고도화된 협업 도구 사용 등으로 그 역할이 확장되고 전문화되었습니다.


프론트엔드 개발자는 React 훅스(useState, useEffect 등)와 Redux 같은 상태 관리 도구를 사용해 애플리케이션 상태를 관리합니다. axios, fetch API, Apollo Client 등을 사용해 데이터 페칭을 처리하고, React Router를 사용해 애플리케이션의 라우팅을 설정합니다. Jest, React Testing Library 등을 사용해 컴포넌트와 애플리케이션의 테스트를 수행하고, 코드 스플리팅, 메모이제이션 등을 통해 애플리케이션의 성능을 최적화합니다.


과거에는 주로 jQuery를 통한 DOM 조작, 간단한 상태 관리, 수동 테스트 및 배포에 의존했지만, 현재는 최신 JavaScript 프레임워크와 고급 상태 관리 도구, 자동화된 테스트 및 CI/CD 파이프라인을 사용하여 더 효율적이고 안정적인 애플리케이션을 개발하고 있습니다.


이제 두 직종의 경계는 점점 흐려지고 있으며, 더 많은 협업과 전문성을 요구하게 되었습니다. 웹 퍼블리셔는 프론트엔드 개발자의 역할을 일부 흡수하여 더 나은 사용자 경험을 제공하는 데 집중하고, 프론트엔드 개발자는 보다 정교한 UI와 상태 관리에 초점을 맞추고 있습니다.


앞으로 기술의 진보와 함께 웹 퍼블리셔와 프론트엔드 개발자는 더욱 전문화되고 협력적인 방식으로 발전할 것입니다. 어쩌면 "퍼블리셔"라는 직종명도 "프론트엔드 디자이너" 등으로 바뀔수도 있지 않을까란 생각이 듭니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari