"IT인들, 국가대표 출신 도움 받아 마라톤 풀코스 도전"

웹 퍼블리싱? 웹 퍼블리셔는 무슨 일을 하나요?

프리랜서의 모든 것

지식창고, 20 Oct 2022

웹-퍼블리셔-웹-퍼블리싱-뜻

IT 분야에는 여러 직군이 있습니다. 웹사이트 개발 프로젝트는 일반적으로 웹 기획, 웹 디자인, 웹 퍼블리싱, 프런트엔드 및 백엔드 개발의 프로세스로 진행됩니다. 그런데 많은 사람에게 친숙한 다른 직군과 달리, 웹 퍼블리셔란 도대체 무엇인지 헷갈려하는 분들이 여럿 계십니다. 본 포스팅에서는 우리나라에만 존재하는 직업인 ‘웹 퍼블리셔’에 대해 알아보겠습니다!



웹 퍼블리셔란? 퍼블리싱 뜻

<웹 사이트 개발 프로세스>

 기획 →  디자인 → 퍼블리싱 → 프런트엔드 개발 → 백엔드 개발


웹 사이트 제작 시 디자이너의 웹 디자인을 웹 표준성과 접근성에 부합하도록 재정리하여 최종 디자인을 토대로 HTML, CSS, Javascript로 코딩하는 작업을 ‘웹 퍼블리싱’이라고 합니다. 그리고 이를 담당하는 사람을 ‘웹 퍼블리셔’라고 합니다. 웹 퍼블리셔가 하는 일을 요약하자면, 코딩을 통해 웹 페이지의 디자인을 실제 구현하는 것입니다.





| 웹 퍼블리셔에게 필요한 스킬


01. HTML


HTML은 쉽게 말해, 종이의 텍스트를 웹 화면에 구현하기 위해 사용하는 기본 웹 언어의 한 종류로, 특히 하이퍼텍스트를 작성하기 위해 개발되었습니다. 문서의 글자 크기, 글자 색, 글자 모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지 작성에 쓰이는데요. 


HTML은 개발자도 사용하지만, 웹 퍼블리셔가 HTML을 사용하는 방식은 기획서와 디자인을 보고, 구성 요소들의 의미와 사용 방식을 해석 및 판단하여 그에 맞도록 문서를 구조화하는 것입니다. 즉, HTML을 통해 웹 페이지 구현을 위한 뼈대를 구축하는 일을 한다고 할 수 있습니다.



02. CSS


비주얼 요소와 관련이 있는 CSS는 간단히 말해, ‘스타일 시트’라고도 하는데요. HTML을 이용해 웹 페이지를 제작할 경우, 전반적인 틀에서 글꼴 등의 모든 세부 사항을 일일이 지정해주어야 하므로 다양하게 설계하려고 하거나, 변경이 자주 필요할 때 많은 제약이 따릅니다. 


하지만 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트인 CSS를 사용하면 웹 페이지의 한 가지 요소만 변경해도 전체 관련 페이지의 내용이 한꺼번에 변경됩니다. 따라서 문서 전체의 일관성을 유지할 수 있고, 작업 시간도 단축되며, 유지·보수 작업이 간편하다는 장점이 있습니다.



03. JavaScript (자바스크립트)


자바스크립트는 웹 페이지에서 사용자로부터 특정 이벤트나 입력값을 받아 동적인 처리를 하기 위한 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어로, 주로 사용자 경험 향상을 위해 사용됩니다. 이해를 돕기 위해, 자바스크립트로 구현한 기능의 몇 가지 예시를 살펴보면 다음과 같습니다.


  • HTML 문서의 특정 이미지 위에 마우스를 갖다 대면 이미지 크기가 커지거나 텍스트의 색이 바뀌는 기능

  • 웹사이트나 모바일 웹 메뉴에서 三 모양의 아이콘을 누르면 메뉴가 나타나는 기능

  • 검색창에 ‘이’를 입력했을 때, 현재 기준 사용자 검색량이 많은 순서대로 ‘이’로 시작하는 검색어 목록을 보여주는 기능


참고로 자바스크립트는 웹 퍼블리셔와 프런트엔드 개발자 모두가 사용하지만, 사용 방식은 다릅니다. 웹 퍼블리셔는 동적인 효과를 주기 위해 사용(화면 요소 배치 및 디자인 측면)하는 반면, 프런트엔드 개발자는 백엔드 서버와의 데이터 통신을 주목적으로 사용합니다.



04. jQuery (제이쿼리)


jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다. 긴 자바스크립트 언어를 축약해 사용할 수 있도록 해 누구나 쉽고 간편하게 사용할 수 있다는 장점이 있습니다.


최근 웹 개발 트렌드가 변화함에 따라 제이쿼리 사용률은 떨어지고, 자바스크립트 기반의 다른 프레임워크들이 웹 생태계를 주도하고 있어 필수 스킬이라고 할 수는 없습니다. 하지만 우리나라에서는 여전히 제이쿼리를 사용하고 있는 기업도 많다고 하니 참고해 두면 좋을 듯합니다.





| 웹 디자이너 vs. 웹 퍼블리셔 vs. 프런트 엔드 개발자 차이점


웹 디자이너의 역할이 ‘디자인’에 중점을 두고 있다면, 이를 웹 공간에 구현하고 관리하는 역할을 담당하는 사람이 바로 웹 퍼블리셔입니다. 하지만 단순히 디자인을 바로 코딩하는 것은 아닌데요.


웹 퍼블리셔는 디자인을 웹 페이지에 구현하기 위한 최적의 방식을 생각하고, 이를 위해 수정이 필요하다면 디자이너와 이견을 조율합니다. 그리고 수정을 거친 최종 디자인 시안을 토대로 HTML, CSS, Javascript를 사용해 코딩한 후, 이 작업물을 웹 개발자 및 웹 기획자 등에게 전달합니다.


반면, 프런트 엔드 개발자는 HTML, CSS, JavaScript를 활용하여 웹 페이지의 구조와 디자인을 구현하는 것뿐만 아니라, API를 통해 서버(백엔드)와 데이터를 주고받는 방식까지 설계합니다.


즉, 공통점은 웹 퍼블리셔와 프런트 엔드 개발자 모두 HTML, CSS, JavaScript를 사용하여 사용자에게 보이는 화면을 구현한다는 것, 차이점은 웹 퍼블리셔가 디자인 및 시각적 요소를 잘 구현하는 것에 초점을 맞춘다프런트 엔드 개발자는 백엔드와 연결하고 데이터 통신을 어떻게 할 것인지 유효성 검증 측면에서도 고민한다는 것입니다. 


서버의 데이터를 사용자에게 보여주고, 사용자가 입력한 데이터를 서버에 전달해주는 부분까지 신경 써야 하는 것이 프런트엔드 개발자의 역할입니다.





합격을 부르는 웹 퍼블리셔 포트폴리오 만들기


과제 전형을 진행하는 직군과 달리, 웹 퍼블리셔는 포트폴리오가 중요한데요. 자신의 능력을 최대로 보여줄 수 있는 포트폴리오를 만들고 싶다면 특별히 신경 써야 할 몇 가지 포인트가 있습니다. 다음을 참고하여 ‘합격을 부르는 웹 퍼블리셔 포트폴리오'를 준비하세요!




| 포트폴리오에 포함해야 할 항목


웹 퍼블리셔 포트폴리오에 포함해야 할 항목은 일반적으로 다음과 같습니다.


  • 프로필 ㅡ 나의 이력을 간단히 소개하고, 경력직이라면 클라이언트에게 어필할 수 있는 프로젝트 경험을 강조합니다.

  • 스킬 및 자격HTML, CSS, Javascript, 또는 jQuery 등 개발 스킬을 명시합니다. 업무에 도움이 되는 자격증을 보유했다면 이를 언급하는 것도 좋습니다.

  • 프로젝트 및 작업물 설명PC, 모바일, 반응형 등 카테고리를 분류하여 프로젝트를 설명하고 작업 결과물을 구체적으로 제시합니다. 참여한 프로젝트의 기업 이름과 작업 소요 기간, 참여 비중 등의 정보를 포함하도록 하세요. 웹 퍼블리셔 직군의 경우, ‘빠른 작업 속도’가 중요하므로 작업 소요 기간은 반드시 포함하는 것이 좋습니다.


  • 기업 고객 후기(선택사항) ㅡ 여러 지원자들 중에서 돋보이고 싶다면 자신의 역량을 강조할 수 있는 클라이언트 피드백을 추가합니다. 실제로 함께 일했던 다른 기업 담당자의 ‘긍정적인 리뷰’는 잠재 고객에게 큰 도움이 됩니다.




| 신입 웹 퍼블리셔를 위한 포트폴리오 작성 Tip


포트폴리오는 웹 퍼블리셔가 자신의 직무 능력을 구체적으로 입증하고 향후 프로젝트를 수주하는 것을 목적으로 합니다. 따라서 직무와 무관한 불필요한 정보는 배제하고, 누구나 알아보기 쉽게 핵심만 담아 작성합니다.


포트폴리오의 내용은 자신이 ‘웹 퍼블리셔로서의 역량과 자질을 충분 갖췄다’는 사실과 맥락을 같이 합니다. 즉, ‘디자인을 보고 웹페이지를 통해 어떻게 구현해야 하는지 계획하는 능력’과 ‘계획한 요소를 실제 구현할 수 있는 코딩 기술’을 동시에 보유했다는 것을 어필하는 데 초점을 맞추세요. 



이제 이랜서에 
포트폴리오를 등록하고

 퍼블리싱 프로젝트를 

추천 받으세요.



이랜서는 대한민국 최초, 최대의 IT 프리랜서 매칭 플랫폼입니다. 39만 명 이상의 프리랜서 전문가들이 현재 이랜서에서 활동 중이며, 이랜서를 통해 기업과 프리랜서성사된 총 프로젝트 수는 5만 1천여 건에 달합니다. 


웹-퍼블리셔-포트폴리오-현실-신입-웹-퍼블리셔-포트폴리오-웹-퍼블리셔-프론트-엔드-차이



수많은 프리랜서가 선택한 ‘이랜서’를 통해 퍼블리싱 프로젝트를 추천받으세요. 프로젝트 지원 이후의 모든 과정뿐만 아니라 계약 관련 사무업무까지 이랜서의 담당자가 함께 합니다.




프리랜서 웹 퍼블리셔들이 

이랜서를 선택하는 이유



하나. 대한민국 업계 최저 프리랜서 수수료율


일반적으로 프리랜서에게 중개수수료를 부과하는 타 플랫폼들과 달리, 이랜서는 프리랜서에게 수수료를 부과하지 않습니다. 일한 만큼 벌고, 버는 돈 모두 가져가세요. 이랜서는 프리랜서 전문가들이 성장할 수 있도록 지원합니다.



둘. 담당 매니저 시스템


이랜서는 ‘담당 매니저 시스템’을 통해 한 명의 매니저가 전담 케어 서비스를 지원합니다. 즉, 프리랜서의 니즈, 성향, 희망 조건 등을 고려해 최적의 프로젝트를 추천하고, 매칭부터 인터뷰, 계약 관련 사무 업무까지 프로세스의 모든 단계에서 세심하게 지원합니다. 프로젝트 진행 도중 변경 사항이 있거나, 다른 도움이 필요한 경우 기업과의 사이에서 중재자 역할까지 담당합니다.


이랜서를 통해 프로젝트를 수주한 경험이 있는 프리랜서들은 “타 플랫폼과 차별화되는 담당 매니저의 서포트 덕분에 업무에만 신경 쓰면 돼 좋다”고 입을 모읍니다. 실제 이용자 후기를 직접 확인하세요!



39만 명 이상, 대한민국 프리랜서들의 이유 있는 선택!

이랜서 담당 매니저 시스템” 이용자 리뷰



여러 사람이 컨택해오는 타사 사이트와는

달리, 이랜서는 한 명이 전담 케어

해주는 것이 강점입니다.


프리랜서 디자이너 A님


이랜서 매니저님들께서 프리랜서의 역량과

성향, 이력을 잘 분석하여 그 인력이

꼭 필요한 프로젝트에 잘 매칭해 주십니다.


프리랜서 웹 기획자 B님


이랜서는 나에게 뷔페이다. 

원하는 프로젝트를 골라서 갈 수 있는

다양한 선택지가 있기 때문이다. 

그리고 이랜서는 나에게 맞춤형 정장이다. 

나에게 맞춰 프로젝트를 선택해 주기 때문이다.


프리랜서 개발자 C님


담당 매니저가 있어서 계약부터 잔금 수급까지

잘 챙겨주셔서 신경 쓸 일 없이 업무에만

집중하면 돼서 좋습니다.


ㅡ 프리랜서 개발팀장 D님


프로젝트 전 염두에 두어야 하는

사항을 꼼꼼히 알려줍니다.


프리랜서 웹 디자이너 E님


업무를 지속적으로 제공해주어

별도의 구직활동이 불필요합니다.


프리랜서 디자이너 F님




웹 퍼블리싱 프로젝트를 찾는다면 지금 이랜서에 회원가입하고, 프로필과 포트폴리오를 등록하세요.



담당 매니저를 통해 양질의 프로젝트 추천받고, 가장 빠르게 원하는 프로젝트를 수주하세요.





최신 블로그