[잡담]웹퍼블리셔(Web Publisher)와 프론트엔드 개발자(Front-End Developer)의 역할 - 과거와 현재

이야기를 하기에 앞서 과거를 거슬러 올라갈 필요가 있다.

여기서 과거란 웹퍼블리셔라는 말(직종)이 생기기 전후를 말한다.

 

과거에 비해 현재는 분명하게 IT직군에 웹퍼블리셔라는 직종이 뚜렷해졌지만, 아직도 Front-end 개발자와 헷갈려하시는 분들이 있어 정의가 필요할듯하다. 어떤 분야에서 어떤 일을 하던 본인이 해야 할 일은 알고 있어야 할 것이 아니던가.

 

웹디자이너를 시작으로 현재까지 웹퍼블리셔로 일하면서 그동안의 경험담을 적어보고자한다. (과거 개인적인 이야기가 있어서 꼰대 느낌이 날 수도 있으니 감안하고 읽어주길 바란다. 할 얘기가 많아서 내용이 상당할 것이다.)

웹디자이너의 역할

그렇다.

웹퍼블리셔가 생기기 전에는 웹디자이너가 웹퍼블리셔의 역할을 했었다.

그때 당시 모뎀에서 인터넷으로 넘어가는 세대이기에 웹디자이너의 보수가 굉장했다.

 

이유는 단 하나.

하는 사람이 많지 않아서 희소성이 있었고 지금처럼 인터넷이 발달하지 않아서 정보도 많지 않고 공부할 수 있는 환경이 아니었다. 그래서 어려웠다. 포토샵이 Mac버전만 있었고, 나중에 windows용 버전이 나왔는데 실행로딩만 5분은 족히 걸렸다. (컴퓨터 그래픽 자격증 1회 시험 도중에도..)

그때 당시 1.2기가 퀀텀하드가 장착된 중고 맥을 프린터까지 해서 350만 원 했던 기억이 난다. (스포츠 수습기자 월급이 100만 원이 안 됐던 시절이다)

 

여하튼 웹디자이너의 꿈(보수가 쌔다고 하니)을 안고, 디자인과를 진학하게 됐고, 학원을 다니면서 웹디자인을 공부하기 시작했다. (나름 그림에 흥미도 있었..)

 

1회 컴퓨터 그래픽 자격증을 따고 군대 입대를 하게 되었다.

 

제대 후 지하철에서 아무나 붙잡고 직업이 뭐냐고 물어보면 '웹디자이너'가 절반이상은 됐을 만큼 붐이 일어나기 시작했고. 그때는 홈페이지 공장이라는 말이 생길 정도로 웹에이전시가 많이 생기기 시작했을 때이다.

그림에 전혀 흥미가 없고 상관없는 통계학과 나온 형이 웹디자인을 하고 있었으니 말이다.

이때 눈치를 챗어야했다. 우리나라 사람은 뭐 하나 가 생기면 무서울 정도로 광끼 있게 몰린다는 것을...

 

각설하고..

이해를 돕고자 과거의 '네이버' 메인을 살펴보자.

https://webmini.tistory.com/815

[사이트]네이버 변천사(1998년~2014년)

보시는 바와 같이 98년도 네이버 메인에서는 디자인이라고는 거의 찾아볼 수가 없다.

물론 인터넷이 느려서 디자인 요소를 많이 넣을 수도 없었지만, 웹디자인 할 수 있는 환경이 열악했고, 웹디자이너가 없다 보니 개발자가 코딩까지 같이 했었다.

그 후 웹디자이너가 생기면서 개발자들이 하는 코딩을 웹디자이너가 디자인에 맞게 코딩을 하게 된 것이다.

그래서 웹퍼블리셔라는 말이 나오기 전에는 코더의 인식이 강했던 건 사실이다. (인정하기 싫어도 그땐 그랬다)

 

참고로 웹퍼블리셔라는 직종이 생기기 전에는 table 레이아웃이 대부분이었을 것이다. (네이버도 예외는 아니었다)

웹디자이너가 생긴 지 얼마 되지 않아 CSS도 사용하지 않을 때고, 사용해도 글자 색상정도였다. 물론 브라우저에서 지원하지 않은 속성들도 대부분이었다. (javascript도 표준을 따지기 시작할 때였으니 말이다)

 

https://webmini.tistory.com/1083

[Javascript] ECMAScript 버전별 출시 연도와 추가된 주요 기능들

인터넷 광랜이 전국적으로 설치되고, 인터넷 속도가 빨라지면서 PC방이 생기고 스타크래프트가 광풍을 일으켰다.

사이트에 웹디자인도 화려해지고, 지금은 사용하지 않는 그 무거운 플래시를 웹에서 현란하게 보일 시기이기도 하다.

이때 웹디자이너는 웹디자인, 플래시, 코딩, 명함제작 등등 다양하게 일을 했었다.

 

웹디자이너가 대부분 코딩을 하다 보니, html 전문지식 없이 table로 레이아웃을 잡게 되고 아무런 의미 없는 코딩을 했었다. 그래서 국내 사이트는 table 코딩이 대부분이었었다. 나 역시도 예외는 아니었다.

어떻게 해야 table로 레이아웃을 잘 잡을까?라는 쓸데없는 걱정을 했던 기억도 난다.

어쩌면 지원하는 CSS 속성이 많지도 않았고, 네이스케이프, 익스, 사파리등 여러 브라우저에서 다 달리 보였기 때문에 table로 레이아웃을 잡진 않았을까?라는 생각도 잠시해 본다. 표준이 없다 보니 그럴 수밖에 없었다.

 

어느 순간부터 table 레이아웃 코딩이 "무겁고 잘못된 코딩이다"라는 인식이 생기면서 시멘틱 웹(의미 있는 마크업)으로 서서히 바뀌기 시작한다.

웹퍼블리셔의 탄생

웹퍼블리셔라는 단어는 보통 우리나라에서만 쓴다.

얼마 전 신한은행(SBJ DNX) 일본 은행어플 프로젝트를 하면서 일본 담당자들 6명을 모아놓고 각파트(기획, 디자인, 퍼블, 개발) 별로 설명을 한 적이 있었는데, 웹퍼블리셔 역할은 잘 몰랐고, UI개발자라고 하면 알아들었다.

직업은 시대에 따라 새로 생기기도 하고, 사라지기도 한다. (부모님 세대, 아니 그전에 시대를 생각해도 이해가 빠를 것이다)

이때(2007년 정도)가 웹퍼블리셔가 우리나라에서 불리게 될 시점이고, 하나의 글 때문에 널리 퍼지기 시작하면서 웹퍼블리셔의 위치를 잡아가기 시작한다.

 

https://hyeonseok.com/blog/396

웹퍼블리셔라는 말을 만든 이유 - 신현석(Hyeonseok Shin)

웹퍼블리셔로 일하면서 위에 글을 한 번씩은 읽어봤을 거란 생각을 해본다.

이때 웹퍼블리셔라는 단어가 익숙하지도 않고, 자리 잡는 시기여서 어떤 역할을 하는지 부가설명이 필요하기도 했다.

새로 임원이 바뀌기라도 하면, 이해시키는데 얼마나 많은 술자리를 가졌는지 모른다..

 

전문성

div 레이아웃 코딩으로 바뀔 시점이 코더 느낌에서 좀 더 세분화되고 전문화된 웹퍼블리셔로 바뀌는 계기가 된다.

웹디자이너의 역할이 웹퍼블리셔의 등장으로 세분화되면서 두 직종이 서서히 분리되기 시작한다.

 

당시에는 포털에서 Daum이 웹표준 코딩을 했었고 선두주자였다, 네이버도 아직이었다. (그 외 사이트들은 말할 것도 없었다)

물론 웹퍼블리셔를 뽑는 곳도 거의 없었으며, 웹디자인보다 코딩이 재밌다고 느낀 나는 코더 뽑는 곳을 알아보던 중에 좋은 기회로 Daum취업센터(Daum 사내벤처에서 따로 나와 회사를 설립한 곳)를 다니게 되었다.

그래서 웹퍼블리셔로 이직하게 되었고, 이때부터 나의 웹퍼블리셔 인생이 시작되었다.

 

웹퍼블리셔를 처음시작하면서 이해 안 가는 부분이 많았지만, 사수는 없었고 Daum 소스가 나의 사수가 돼버린.. 그때는 젊었으니까 배우는 게 마냥 즐거웠다.

 

웹접근성

2008년 4월 11월 장차법(장애인차별금지 및 권리구제 등에 관한 법률 )이 시행되면서 웹퍼블리셔의 역할이 추가된다.

 

웹접근성은 웹표준에 맞는 시멘틱웹(의미 있는 마크업)과도 연결되기 때문에 웹퍼블리셔가 그 일을 담당했었다.

모든 생활영역에서 장애인 차별 없이 모두가 평등해야 한다는 취지이다.

인터넷(사이트)을 이용하는 사람도 차별되어서는 안 된다는 것이다.

 

참고링크

https://webmini.tistory.com/1187

[웹접근성]웹접근성(a11y) 이란?

SEO

SEO = '검색엔진 최적화'

요약하면 SEO(검색엔진 최적화)에 맞게 마크업을 하면 검색사이트에 노출이 잘되고, 그로 인해 광고비를 줄일 수 있으며 방문율도 좋은 '바이럴 마케팅'에도 신경을 써야만 했다.

 

참고링크

https://webmini.tistory.com/974

[블로그 운영팁]SEO 최적화 하기

아이폰이 세상에 드러나다

잡스형님이 또 한 건 하셨다.

아이팟이 개발되면서 CD에서 MP3로 음악계에 혁명을 일으켰는데, '스마트폰'이란 게 세상에 나옴으로 해서 세상에 많은 변화를 불러일으킨다.

 

iphone 3GS

 

아이폰 3G는 1세대 아이폰의 후속 모델이다.

2008년 6월 9일 WWDC 2008에서 스티브 잡스가 공개했으며, 대한민국에는 2009년 11월 28일에 아이폰 3GS와 함께 출시되었다.

 

아이폰의 탄생으로 인해 새로 생긴 직업군이 많아지기 시작했고, 웹퍼블리셔를 뽑는 회사가 더 많아지게 된다.

그전에는 PC사이트를 웹표준에 맞게 작업하고, 크로스브라우징과 웹접근성을 준수해야 하는 정도였다면 스마트폰이 생김으로 해서 모바일 페이지까지 고려해야 하는 역할이 추가가 되었다. (대표적으로 카카오와 배달의민족, 야놀자등 여러 플랫폼이 나오기 시작한다)

과거를 돌이켜보면 이때당시 웹퍼블리셔가 하는 일이 많았던 거 같다.

웹퍼블리싱, 웹접근성, SEO, 모바일페이지, 반응형 등

현재도 위에 업무는 계속하고 있지만, 새로 고려해야 할게 많은 처음 시기에는 익숙하지 않아 작업량이 많게 느껴지긴 했었다.

 

그리고 웹퍼블리셔의 역할과 자리매김을 위해 '웹표준의 날'을 만들어서 오프라인 행사도 했었고, 당시에 내가 운영하는 사이트도 잠깐 소개된 적도 있었다. 지금에 웹퍼블리셔가 있기까지 많은 분들이 노력한 건 사실이다.

이때 javascript 를 웹퍼블리셔가 해야 하는지, 아닌지에 대한 논의는 항상 있었고, 해야한다는 의견은 많았지만 회사마다 업무 시스템 차이는 있어서 개발자가 script를 사용못하게 하는 곳도 있었고, 웹퍼블리셔가 해야하는 곳도 있었다.

개인적으론 front 쪽은 해야 한다고 생각하고 있었는데, jQuery의 등장으로 좀 더 쉽게 다가갈 수 있는 시기가 온다.

현재는 Front javascript는 웹퍼블리셔의 담당업무로 자리매김되었다. (학원에서 웹퍼블리셔 과정에 javascript도 포함되는 걸로 알고 있다)

javascript를 웹퍼블리셔가 하게 되면서 지금의 Front-end 개발자와 중복되는 역할이 생기게 된다.

Front-end 개발자

나라마다 차이는 있지만, 웹퍼블리셔가 다른 국가에서는 Front-end 개발자이기도 하고 UI개발자라고도 불린다.

하지만, 우리나라 기준으로 봤을 때 분명한 역할 차이는 있고, 구분되어야 한다고 본다.

 

웹 2.0과 AJAX (2000년대 중반) 전까지는 웹퍼블리셔와 Front-end 개발자 역할은 거의 동일했다.

하지만 2010년 프레임워크와 라이브러리의 등장으로 인해, 그 역할이 분명해지기 시작한다.

프론트엔드 프레임워크와 라이브러리의 등장 (2010년대)

• jQuery (2006년): jQuery는 복잡한 JavaScript 작업을 단순화하고, 브라우저 간 호환성을 해결해 주는 라이브러리.
• AngularJS (2010년): 구글이 발표한 AngularJS는 MVC(Model-View-Controller) 아키텍처를 기반으로 한 프론트엔드 프레임워크로, 웹 애플리케이션 개발을 구조화하고 단순화.
• React (2013년): 페이스북이 발표한 React는 컴포넌트 기반의 UI 라이브러리로, 가상 DOM을 활용하여 성능을 최적화하고 개발자 경험을 향상.
• Vue.js (2014년): Vue.js는 간결하고 유연한 프레임워크.

현대 프론트엔드 개발 (2020년대)

• 프레임워크의 발전: Angular, React, Vue.js와 같은 프레임워크들이 지속적으로 발전하고 있으며, 최신 버전들은 더욱 강력한 기능과 성능을 제공.
• 빌드 도구와 패키지 매니저: Webpack, Babel, npm, Yarn 등의 도구들이 프론트엔드 개발의 필수 요소가 되었으며, 개발 및 배포 프로세스를 단순화.
• TypeScript: 마이크로소프트가 개발한 TypeScript는 정적 타입을 제공하여 대규모 애플리케이션 개발에서 JavaScript의 한계를 보완.

웹퍼블리셔와 Front-end개발자 역할 차이

웹퍼블리셔(Web Publisher)와 프론트엔드 개발자(Front-End Developer)는 웹사이트와 웹 애플리케이션 개발에서 중요한 역할을 하지만, 그들의 주된 업무와 기술 스택이 다르다.

웹퍼블리셔 (Web Publisher)

주요 역할:

• HTML, CSS, JavaScript 등을 사용하여 웹사이트를 제작하고 수정.
• 디자이너가 제공한 시안(디자인)을 웹 페이지로 구현.
• 웹사이트의 콘텐츠를 관리하고 업데이트.
• 웹 표준을 준수하고, 브라우저 호환성을 보장.
• 주로 정적인 웹 페이지 작업에 초점.

필요 기술:

• HTML, CSS (주로 스타일링 작업)
• 기본적인 JavaScript
• 웹 접근성 및 웹 표준 지식
• 포토샵, 일러스트레이터 등 그래픽 툴 활용 능력

프론트엔드 개발자 (Front-End Developer)

주요 역할:

• 사용자 인터페이스(UI)와 사용자 경험(UX)을 고려하여 웹 애플리케이션 개발.
• 동적이고 상호작용하는 웹 페이지 개발.
• API와 연동하여 데이터를 주고받는 기능 구현.
• 복잡한 JavaScript 및 프레임워크(예: React, Vue, Angular) 사용.
• 빌드 도구(예: Webpack, Babel) 및 버전 관리 시스템(Git) 활용.

필요 기술:

• HTML, CSS, 고급 JavaScript
• 프론트엔드 프레임워크 및 라이브러리 (React, Vue, Angular 등)
• RESTful API 및 AJAX
• 웹 성능 최적화
• 테스팅 도구 (Jest, Mocha 등)
• 빌드 및 배포 도구

요약

• 웹퍼블리셔는 주로 정적 웹사이트의 콘텐츠를 관리하고 디자인을 HTML과 CSS로 구현하는 데 집중하며, 그래픽 디자인 툴과 기본적인 JavaScript 지식을 활용함. 추가로 웹접근성 준수.
• 프론트엔드 개발자는 동적 웹 애플리케이션을 개발하고 사용자와 상호작용하는 부분을 구현하며, 고급 JavaScript, 다양한 프레임워크, API 통합 및 웹 성능 최적화에 대한 깊은 이해가 필요.

이 둘의 역할은 종종 겹치기도 하지만, 웹퍼블리셔는 디자인과 콘텐츠 중심, 프론트엔드 개발자는 동적 기능과 상호작용 중심으로 이해하면 된다.

실무 영역

회사와 프로젝트 규모와 프레임워크에 따라 구성원이 조금씩 차이는 있다.

1. 기획, 웹디자인, 웹퍼블리셔, 개발(Back-end)

2. 기획, 웹디자인, 웹퍼블리셔, Front-end개발자(공통), 응용개발자(Back-end)

보통 위에 구성원으로 되어있지만, 마케터가 기획까지 하는 곳도 있는데 이경우는 전문기획자가 아니다 보니 개념차이는 분명히 있다.

 

각 역할의 주요 업무를 간단히 정리하면 다음과 같다.

• 기획: 프로젝트의 목표와 요구사항을 정의하고, 전체적인 전략과 계획을 수립.
• 웹디자인: 사용자 인터페이스(UI)와 사용자 경험(UX)을 고려한 웹사이트의 시각적 디자인을 만듦.
• 웹퍼블리셔: HTML, CSS 등을 사용하여 웹디자이너가 만든 디자인을 실제 웹 페이지로 구현.
• Front-end 개발자: 동적 기능과 상호작용을 구현하며, 주로 JavaScript와 프레임워크(React, Vue, Angular 등)를 사용.
• 응용개발자 (Back-end 개발자): 서버 측 로직, 데이터베이스 관리, API 개발 등을 담당.
• 공통개발자: 프론트엔드와 백엔드 모두를 아우르는 작업을 수행할 수 있는 풀스택 개발자 역할.

웹스퀘어(WebSquare) 프레임워크도 vue.js와 동일하게 공통개발자가 존재한다.

결론

앞서 이야기했듯이 시대에 따라 직업은 다양하게 변화한다.

사라지는 직업도 있고, 새로운 직업이 생기기도 한다.

그리고 시대 변화에 따라 세분화되기도 한다.

중요한 건 그 역할이 필요하기 때문에 새로운 직종이 생기게 되는 것일 테고, 필요 없으면 사라지기도 하는 것이다.

본인이 어떤 일을 하던 그 일을 하고 있다면 그 역할이 필요하기 때문이라고 받아들이면 된다.

그리고 본인이 하는 일에 자부심을 갖길 바란다.