[채용공고 톺아보기] #5 신입 웹 퍼블리셔 준비 전략
레디미의 채용공고 분석 콘텐츠
#5 새로운 기술을 적용하고
실험적인 디자인을 구현하는, 웹 퍼블리셔
새로운 기술을 적용하고 실험적인 디자인을 구현하는데 재미를 느끼시나요?
웹 퍼블리셔와 프론트엔드 개발을 고민하시나요?
웹 퍼블리셔는 프론트엔드 개발자와 무엇이 다른지 궁금하신가요?
자기소개서를 써야 하는데 나의 직무에 대해 잘 모르겠을 때,
어떤 경험을 쌓아야 하는지 궁금할 때,
레디미의 <채용공고 톺아보기>를 읽어보세요.
매주 금요일 연재되는 채용공고 분석 콘텐츠 <채용공고 톺아보기>
오늘은 웹 퍼블리셔에 관해 알아봐요!
웹 퍼블리셔는 어떤 직무인가요?
● 웹 퍼블리셔란?
"웹 퍼블리셔(Web Publisher)란, 디자인된 페이지를 웹 화면으로 구현하며,
HTML, CSS, JavaScript를 기본 소양으로 가지고 있어야 한다."
- 웹 퍼블리셔는 웹 디자이너, 웹 프로그래머, 웹 기획자 등과 웹 사이트의 제작 및 진행 방향 등에 대해 의논해요.
- 그리고 웹 디자이너나 웹 퍼블리셔가 HTML을 사용해 작업물을 코딩해요.
- 이 때 웹 표준, 웹 접근성, 크로스 브라우징, 시멘틱 마크업 원칙에 맞춰서 코딩을 진행해요.
1) 웹 표준 : 국제 표준화 단체인 W3C가 지정한 표준안에 따라 목적과 방법에 맞게 웹 페이지를 만드는 것
2) 웹 접근성 : 장애인 뿐만 아니라 모든 사람이 인터넷 공간에서 손쉽게 정보를 얻을 수 있도록 웹사이트를 제작하는 것
3) 크로스 브라우징 : 어떤 웹 브라우저를 써도 화면이 똑같이 나오고, 브라우저에 따라 입력과 사용에 문제가 생기지 않음
4) 시멘틱 마크업 : 어떤 사용자 환경에서도 브라우징에 제약이 없도록 하는 코딩
- 이후에는 작업 결과물을 웹 프로그래머, 웹 기획자 등에게 전달해요.
- 운영 중인 웹사이트를 점검하여 웹 표준, 웹 접근성 등에 부합하는지 검토하기도 해요.
● 웹 사이트 개발의 프로세스
- 웹 사이트 개발은 기획 - 디자인 - 웹 퍼블리싱 - 프론트엔드 개발 - 백엔드 개발의 과정을 바탕으로 이루어져요.
- 규모가 있고 체계적인 프로젝트의 경우 기획 - 디자인 - 웹 퍼블리싱 - 프론트 개발 - 서버 개발 - DBA - 시스템 엔지니어링 순으로 프로젝트가 진행되어요.
- 그것보다 규모가 작은 프로젝트의 경우에는 기획 - 디자인 - 웹 퍼블리싱 및 프론트 개발 - 서버개발 겸 DBA겸 시스템 엔지니어링으로 개발자가 여러 업무를 함께 진행하는 경우도 있다고 해요.
● 웹 퍼블리셔는 우리나라에만 존재하는 직종이라고요?
- 해외에는 웹 퍼블리셔라는 직업이 없다는 사실, 아시나요?
웹 퍼블리셔는 신현석이라는 사람이 만들어낸 직종으로 웹을 출판하는 사람이라는 의미에서 웹 퍼블리셔라는 명칭을 만들어냈다고 해요.
- 현재 업계에서는 HTML, CSS를 주로 다루고, 자바스크립트를 이용해 화면 동작 제어는 웹 퍼블리셔가, 데이터를 연결하고 유효성 검증을 하는 것은 프론트엔드 개발자가 하는 일이라고 역할을 구분하고 있어요.
프론트엔드 개발자와 웹 퍼블리셔의 차이점은?
● 프론트엔드와 퍼블리셔의 차이점은 무엇인가요?
- 웹 퍼블리셔는 웹의 가장 근본이자 기초인 HTML/CSS에 대한 전문가로,프론트엔드 개발이라는 직군이 생긴 것은 얼마 되지 않은 이야기라고 해요.
- 오래전부터 웹 퍼블리셔의 업무 범위에 대해 말이 많았고, 프론트엔드가 생긴 이후에도 웹 퍼블리셔와 프론트엔드의 경계를 뚜렷하게 규정짓는 곳은 그리 많지 않아요.
- 그럼에도 기준을 나눠보자면 웹 퍼블리셔는 HTML과 CSS를 담당하며 javascript(자바스크립트)를 이용해 화면 동작을 제어하고, 프론트엔드 개발자는 javascript 및 프레임워크(angular, vue.js)나 라이브러리(react.js)를 사용하여 데이터를 연결하고 유효성을 검증해요.
이를 좀 더 자세하게 설명하자면 다음과 같은 표로 나타낼 수 있어요.
● 프론트엔드와 퍼블리셔의 차이를 두는 이유가 뭔가요?
- 웹 퍼블리셔는 웹의 가장 근본이자 기초인 HTML/CSS에 대한 전문가로, 이 외에 Javascript와 jQuery 능력을 갖춘 사람인데요. 이것을 보고 적은 영역만 아는 사람이라고 생각할 수도 있지만, 실제 개발을 해보면 저 부분에서 오류가 많이 발생하고 시간을 많이 잡아먹는다고 해요.
- 그렇기 때문에 개발자들에게 시간을 부여하기 위해 웹 퍼블리싱의 분야를 떼어 포지션화 시킨 것이라고 합니다.
● 웹 퍼블리셔로 시작해서 프론트엔드 개발자가 될 수 있을까?
- 실제로 웹 퍼블리셔로 시작해서 프론트엔드 개발자가 되는 경우도 많다고 해요. 다음의 블로그 사례는 웹 퍼블리셔에서 프론트엔드 개발로 커리어를 이어나가신 분들의 이야기이니 궁금하신 분들은 해당 사이트에 방문해보시길 바라요.
https://seunghyun90.tistory.com/4
웹 퍼블리셔가 갖춰야 할 개발 지식
1) HTML (HyperText Markup Language)
HTML은 흔히 마크업이라고 많이 불려요. 웹 페이지를 구성하는 골격과 같으며, 종이에 있는 내용을 웹으로 보여주는 것과 같죠.
웹 퍼블리셔가 진입 장벽이 낮은 이유도 HTML에 있다고 하는데요. HTML은 배우기 쉬운 언어이면서 구현한 것들을 화면에 바로 보여주기 때문에 개발을 하며 무엇을 잘못했는지, 개선 사항을 바로 파악할 수 있어요.
단, 어떤 요소와 어떤 속성을 사용하느냐에 따라 구조, 골격이 잡히게 되는데 구조화가 잘 되어 있을수록 웹 접근성이나 SEO를 향상시킬 수 있어요.
웹 퍼블리셔의 마크업은 기획서와 디자인을 보고 문서의 구성 요소들이 어떤 의미를 가지고 어떻게 쓰이는지 해석하고 판단하여 그에 맞도록 문서를 구조화하는 것이라고 합니다.
2) CSS (Cascading Style Sheets)
CSS는 웹 페이지의 비주얼을 담당해요. 쉽게 설명하자면, HTML은 사람의 얼굴이고, CSS는 화장으로, 화장에 따라 다르게 보이듯, CSS를 어떻게 사용하느냐에 따라 웹 페이지의 퀄리티는 천차만별로 달라진다고 해요.
3) JavaScript (자바스크립트)
웹 퍼블리셔로 일한다면 떼려야 뗄 수 없는 언어는 바로 자바스크립트라고 하는데요. 자바스크립트는 '동적 표현'을 하기 위해 필요한 언어예요.
여러분은 모바일에서 메뉴를 보기 위해 햄버거 모양(三)의 아이콘을 눌러본 적이 있을 텐데요. 메뉴를 눌렀을 때 혹은 터치했을 때 메뉴가 나타날 수 있게 해주는 것이 자바스크립트의 역할이라고 합니다.
자바스크립트는 타 프로그래밍 언어에 비해 진입 장벽이 낮은 편이지만 깊이 들어갈수록 어려워요. 특히 이전과 달리 자바스크립트가 웹이라는 한계를 벗어나 하나의 프로그래밍 언어로 자리를 잡기 시작하고 있어 공부가 많이 필요한 언어라고 합니다.
4) jQuery (제이쿼리)
제이쿼리는 자바스크립트를 활용하기 어려운 사람들을 위해 나온 라이브러리라고 해요. 자바스크립트를 기반으로 이루어져 있으며, 길고 긴 자바스크립트 언어를 축약해 사용할 수 있도록 해두어서 굉장히 편리해요.
다만 많은 전문가들은 제이쿼리보다 자바스크립트를 먼저 선행할 것을 권한다고 해요. 시대의 흐름에 따라 제이쿼리 사용률은 급감하고 있고, 자바스크립트 기반으로 만들어진 Angular, React, Vue라는 프레임워크들이 웹의 생태계를 지배하고 있어요. 하지만 여전히 우리나라에서는 제이쿼리를 사용하는 기업도 많기 때문에 알아두는 것도 나쁘지 않다는 평도 존재합니다.
웹 퍼블리셔의 주요 업무는 무엇인가요?
웹 퍼블리셔는 기획서를 보고 구현 가능 여부를 판단하고,
디자이너의 디자인을 검토하면서 디자인을 '웹에 알맞게' 변경할 수 있도록 협의해요.
이 때 개발자와는 어떤 방식으로 코딩하면 데이터를 연결하기 더 수월한지 협의하면서
기획-디자인-개발 모든 포지션을 아우르는 중요한 포지션을 맡고 있어요.
또한 웹 퍼블리셔의 세부 업무를 정리하자면 다음과 같아요.
웹 퍼블리셔의 개발 환경은?
웹 퍼블리셔의 개발 환경은 크게 다음과 같이 나눌 수 있어요.
• Front: Javascript, Vuejs, Vuetify, jQuery, flutter 등
• Back: Ruby on rails, Docker, postgresql, AWS, nodejs 등
• Tool: Webstorm (Intellij), Mac, Jandi, Trello, Github, Slack 등
그리고 그 외의 추가적인 것은 다음과 같습니다.
■ 주요 개발 환경 및 사용 서비스
- HTML, CSS, Javascript, jQuery, php
- Jira 스크럼을 이용한 프로젝트 관리
- 적응형 - 크로스 브라우징
- Bitbucket을 이용한 버전관리
- Visual Studio Code
- SCSS(BEM)
- Adobe Creative Suite (Photoshop, Illustrator)
- Figma
- CMS (Wordpress/XE)
- Gitlab, Gitlab CI/CD
- GA, GTM
- IntelliJ 등 Jetbrain Software 일체
- ES6+
■ 협업
- Zeplin, Notion, Docswave
- Slack, G Suite(Google Workspace)
웹 퍼블리셔에게 필요한 역량은 무엇인가요?
레디미는 '신입' 채용공고에 포함된 자격 요건과 우대 사항을 분석하여 이러한 역량을 파악했습니다.
먼저 자격요건 사항을 정리했어요.
개발 환경 및 웹 디자인에 대한 이해
- HTML, CSS, Javascript, Jquery에 대한 이해 및 사용 경험
- 웹 표준, 웹 접근성 등 웹 디자인에 대한 이해
업무에 즉시 사용할 수 있는 수준의 개발 역량
- HTML, CSS , Javascript, jQuery, php 활용 능력
- 앱, 웹(모바일, 반응형 포함) 퍼블리싱 능력
• 프론트, 백앤드 기획 경험
• 백엔드 CMS 기획 및 운영 경험
• Jira / Confluence / Figma를 사용한 기획 및 프로덕트 관리 경험
• 스토리 보드 작성 경험
• 이커머스 혹은 SNS 서비스 기획 경험
커뮤니케이션 역량
- UI/UX 디자이너 및 개발자들과의 원활한 커뮤니케이션
- Zeplin, Sketch 툴을 활용한 협업 능력
- 개발, 디자인 등 타 직군과의 협업 및 능동적인 업무 진행
또 웹 퍼블리셔 직군의 경우 신입 채용 공고의 양이 부족해
추가적으로 1,2년차 주니어 공고도 분석을 실시했어요.
<1년차 주니어>
● 웹 퍼블리싱 실무 역량
- HTML5, HTML, CSS3, CSS, javascript, jquery, bootstrap 등 활용 능력
- 반응형 작업 능력
- 웹 접근성 작업 능력
- 웹 접근성, 웹 표준, 웹 최적화, 크로스브라우징 마크업
- Web, Mobile, 반응형, 모바일 웹 앱에 대한 충분한 이해와 경험
- 크로스브라우징에 대한 이해
- Document 객체에 대한 이해
- 웹 환경에 대한 이해
- 카페24 퍼블리싱 경험
- SI 프로젝트 경험
● 프론트엔드 개발 능력
- HTML/CSS를 이용한 프론트엔드 개발경험
● Agile 경험
<2년차 주니어>
● 숙련된 웹 퍼블리싱 역량
- HTML, HTML5, CSS / SASS(SCSS), CSS3, JavaScript, Jquery, bootstrap을 활용한 퍼블리싱 능력
- 모바일 웹, 반응형 웹에 대한 경험
- 웹 폰트 및 반응형 레이아웃, CSS 테마 작업에 대한 이해
- JSON에 대한 이해
- W3C 웹 표준 규격에 대한 이해
- 오픈소스 라이브러리 사용 능력
- 크로스 브라우징 작업 경험
- Document 객체에 대한 이해
- 브라우저 호환성, 웹 표준, 웹 접근성, 반응형 웹, 웹 성능 최적화에 대한 이해와 경험
- 모바일 사용자 환경에 대한 이해
- 웹표준 및 웹접근성을 고려한 개발 경험
- SASS등의 CSS전처리기 활용 능력
● 실무 경험
- UIUX, 프론트엔드 업무에 대한 이해
- git 사용 기초 및 팀 단위로 코드 관리를 해본 경험
- Cafe24 사용 경험
- FTP 및 Github 사용 경험
- Figma에 대한 이해
● 개발 능력
- Vue.js Framework 기반 개발 능력
- Backend REST API 통신 개발 능력
- PHP에 대한 이해
- REST API 및 ajax 사용에 대한 이해
- Vue, React 등 JS 프레임워크 환경 경험
● 기술 스택
- Vue.js
- HTML5, ES6/ES5, SCSS, node.js
- Axios/Moment
- git (bitbucket)
● 최신 기술에 대한 이해와 빠른 습득 능력
● 문제 해결 능력
- 단순 코드 작성이 아닌, 문제 해결능력
다음은 우대사항을 정리했어요
퍼블리싱 업무 관련 경험
- 웹 퍼블리싱(HTML5, CSS3, Javascript, Jquery) 경험
- vue 관련 협업 및 퍼블리싱 경험
- 웹 표준, 반응형, 크로스 브라우징 등에 대한 경험
- 웹 빌더 (고도몰, 카페24) 커스텀 경험
- 크로스 브라우징, 반응형 웹 디자인에 대한 실무 경험
- SPA(vue/react/angular) 프로그램 경험
- css 프레임워크 활용한 UI/UX 개발 경험
- PWA/Angular/react/vue 경험
- 웹 접근성 인증에 대한 경험
- 다양한 스크립트 작업 (ajax 사용, 배열 처리) 경험
업무에 대한 이해
- 웹 접근성에 대한 이해
- 웹 표준 및 호환성에 대한 이해
- 카페24 모듈에 대한 개념 이해
협업 능력
- 디자인/개발 파트와의 협업 경험
프론트엔드 개발 경험
- 웹 프로그래밍 능력 (php, java, 파이썬)
- React, VueJS 등 프론트엔드 프레임워크에 대한 경험
디자인 역량
- 디자인 툴(포토샵, 일러스트레이터 등) 기본 활용 능력
- UX/UI에 대한 이해
- Figma 혹은 XD 사용자
• 상용 모바일 앱, 웹 서비스 기획 또는 운영 경험
• 서비스 관리용 백오피스 기획 경험
1~2년차 주니어에게 추가적으로 요구되는 역량은 다음과 같아요.
퍼블리싱 업무 관련 경험
- 능숙한 웹퍼블리싱(HTML5, CSS3, Javascript) 능력
• 크로스브라우징, 반응형 웹디자인에 대한 실무 경험
• 웹표준 및 호환성에 대한 이해
• 모바일 웹 퍼블리싱 / JQuery 능력
• SPA(vue/react/angular) 프로그램 경험
- 다양하고 새로운 웹 컴포넌트를 도전적으로 적용해본 경험
- 코드 형상관리(Git) 경험
- 웹 표준, 웹 접근성 작업 경험
- React.js 활용 능력
- 반응형 웹 퍼블리싱 능력
• 반응형. 적응형 홈페이지 제작 경험
- 크로스 브라우징 퍼블리싱 작업 경험
- SCSS 스타일 작성 능력
- 모바일 웹 뷰, 반응형(Flex 등) 웹 사이트 제작 경험
- 정적 자원 (Image, CSS, Font 등) 최적화 경험
- javascript 프레임워크 (vue.js, nuxt.js 등) 등의 SPA 프로젝트 경험
- CMS (XE 또는 Wordpress) 시스템 구축, 개발, 또는 운영 경험
- SEO를 고려한 개발 경험
- 웹 빌더 (고도몰, 카페24) 커스텀 경험
- HTML, CSS, 스크립트(x-javascript, jQuery) 작업 후 브라우저에서 동작될 프로그래밍도 고려할 수 있는 역량
- 다양한 스크립트 작업 (ajax 사용, 배열 처리) 능력
- UI 애니메이션, 인터랙티브 웹페이지 구현을 해 본 경험
실무 경험
- 피그마, 제플린 사용 경험
- REST API, GitHub, CodeCommit 사용 경험
- 다양한 프론트엔드 개발환경 구축 경험
- Next js 등 SPA Framework를 이용하여 SSR 프로젝트를 진행한 경험
- ESNext에 대한 이해 및 개발 경험
- Typescript, Flow를 이용한 정적 타이핑 경험
- Webpack, Rollup 등 번들러에 대한 이해와 구축 경험
- Redux, MobX 등 상태관리 도구를 사용한 개발 경험
업무 관련 지식에 대한 이해
- 검색엔진 최적화(SEO)에 대한 이해
- 모션 및 효과 감각
- 웹 로그 분석(GA 등)을 통한 서비스 개선 경험
- 카페24 모듈에 대한 개념 이해
- RESTful API, HTTP/HTTPS 프로토콜에 대한 이해
- React, Angular, Vue 활용 능력
- ASP, PHP 등 백엔드 환경에 대한 이해
프론트엔드 개발에 대한 관심
- React, VueJS 등의 모던 프론트엔드 프레임워크를 활용해본 경험
- 디자인 시스템 UI 개발 경험
디자인 역량
- Zeplin, Figma 등의 디자인 협업툴 사용 경험자
- UX/UI에 대한 이해
- 디자이너와의 협업 경험
- 디자인 툴(포토샵, 일러스트레이터 등) 활용 능력
- 웹 표준 및 웹 접근성, 반응형 웹을 고려한 UI 개발 경험
- 감각적인 스크립트 구현 능력
협업 능력
- 기획/디자인/백엔드 등 다양한 직군과 함께 문제를 정의, 해결책을 찾아갈 수 있는 협업능력
- 자기 주도적이며 알고 있는 기술과 정보를 팀원들과 나누는 능력
- 새로운 기술에 대한 관심과 지속적인 성장을 추구하는 성향
관련 전공자
해당 직무 또는 웹 에이전시 근무 경험
웹 퍼블리셔의 신입, 경력 채용 비중은 어떤가요?
웹 퍼블리셔 직군 역시 주니어보다는 시니어 구직자를 선호해요.
좀 더 자세하게 설명드리자면,
신입 14건
1년차 27건
2년차 57건
3년차 98건
4년차 101건
5년차 115건
6년차 95건
7년차 92건
8년차 80건
9년차 75건
10년차 71건으로
가장 많은 채용은 5년차 이상의 경력직 채용이었으며, 이후에는 4년차, 3년차, 6년차, 7년차순이었습니다.
웹 퍼블리셔의 연봉은 어떤가요?
원티드에서 제공하는 자료에 따르면 신입 웹 퍼블리셔의 예상 연봉은 약 2,939만원이에요.
해당 데이터는 채용 정보에 포함된 직무별 요구 경력과 연봉을 바탕으로 추정한 예상 연봉 데이터라고 합니다.
연차가 쌓일수록 연봉은 올라가게 되는데,
1년차 웹 퍼블리셔의 예상 연봉은 3,012만원
2년차 웹 퍼블리셔의 예상 연봉은 3,144만원
3년차 웹 퍼블리셔의 예상 연봉은 3,395만원
4년차 웹 퍼블리셔의 예상 연봉은 3,810만원
5년차 웹 퍼블리셔의 예상 연봉은 4,146만원
6년차 웹 퍼블리셔의 예상 연봉은 4,306만원
7년차 웹 퍼블리셔의 예상 연봉은 4,612만원
8년차 웹 퍼블리셔의 예상 연봉은 4,802만원
9년차 웹 퍼블리셔의 예상 연봉은 5,255만원
10년차 웹 퍼블리셔의 예상 연봉은 6,234만원이라고 해요.
포트폴리오는 어떻게 만들어야 할까요?
1. 포트폴리오 레퍼런스 수집
디자인은 모방에서 시작된다고 하죠.
포트폴리오를 잘 만들기 위해서는
다른 사람들은 어떤 식으로 포트폴리오를 구성했는지
여러 사이트를 둘러보는 것이 좋아요.
2. 레퍼런스 분석
좋은 포트폴리오 예시를 찾아 분석해요.
포트폴리오에 담긴 콘텐츠들이 왜 그렇게 디자인 되었고,
어떤 기능이 있는지 꼼꼼히 파악해요.
그리고 내가 만든 콘텐츠는
어떤 의도를 가지고 만들어진 것인지
'이유'를 만들어내는 데 집중해요.
3. 관련 분야 전문 서적 읽기
웹 디자인이나 웹 퍼블리싱에 대한 실무 지식을 쌓기 위해
관련 분야에 대한 전문 서적을 많이 읽으며 면접에 대비해요.
4. 포트폴리오 만들기
포트폴리오에는 다음 두가지의 역량을 강조해요.
✔️ 기획서를 보고 어떻게 구현해야 할지 계획하는 능력
✔️ 계획한 요소를 실제로 구현할 수 있는 코딩 기술
웹 퍼블리셔가 되기 위해서는 무엇을 준비해야 할까요?
1. 기획, 디자인, 개발에 대한 폭넓은 지식을 쌓아요.
웹 퍼블리셔는 기획자 못지않게 전반적으로 폭넓은 지식을 갖추고 있어야 해요.
기획자의 의도를 알기 위해 기획에 대한 이해도가 필요하고,
디자이너와 소통하기 위해 디자인에 대한 기본적인 지식을 갖춰야 하며,
사이트에 필요한 기능이나 데이터를 추가하기 위해 개발적인 지식도 필요하다고 합니다.
그렇기 때문에 개인적인 공부를 계속해야 하며, 꾸준히 발전하고자 하는 마인드가 가장 중요하다고 해요.
2. 나의 강점을 살린 포트폴리오를 만들어요.
앞서 레퍼런스 분석 결과를 토대로
나의 주 무기를 담은 포트폴리오를 구성해요.
포트폴리오에는 주로 나에 대한 간단한 설명,
자격증 보유 상황, 개발 능력(HTML, CSS, Javascript, JQuery),
작업물에 대한 설명(작업 기간, 참여 비중 포함)을 포함해요.
3. 인턴쉽을 통해 직무 경험을 쌓아요.
이후에는 인턴쉽에 참여하며 실무 경험을 쌓아요.
웹 퍼블리셔, 프론트엔드 직무에 지원하는 것이 좋습니다.
오늘은 웹 퍼블리셔 직무의 공고를 분석해보았는데요.
앞으로 궁금한 직무가 있다면 언제든 댓글 달아주시길 바랍니다.
도움이 되셨다면 공감, 댓글 많이 부탁드려요 :)
IT 인재 인큐베이팅 서비스
[레디미 온보딩 바로가기]
*언더패스는 21년 9월 13일자 이후로 "레디미 온보딩"으로 리뉴얼 되었습니다.
참고사이트
