brunch

매거진 나에게 맞는 IT 직업 찾기

라이킷 16 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by OurStellar Mar 14. 2023

11. 웹 퍼블리셔, 디자인에서 개발로

웹 퍼블리셔의 역할과 갖추어야 할 자격

웹 개발은 웹 화면 개발과 서버 프로그램 개발로 나누어진다. 웹 화면은 웹 퍼블리셔와 프로튼 개발자가 나누어 개발하고, 서버 프로그램은 서버 개발자가 한다. 시스템 개발에 있어 제일 먼저 시작하는 것이 화면이다. 화면이 정의되지 않으면 개발을 착수하기 어렵다.

IT직업 중 처음으로 화면 개발자인 웹 퍼블리셔에 대해 알아보자. 그리고 화면 개발을 웹 퍼블리셔와 프런트 개발자로 나누게 된 이유는 무엇일까?

웹 퍼블리셔

개발과정에서의 웹 퍼블리셔의 위치

웹 퍼블리셔는 UI/UX기획자가 기획한 화면 설계와 디자이너가 만든 디자인 이미지 파일로 웹 화면을 만드는 개발자다.

웹 퍼블리셔의 업무

웹 퍼블리셔는 한국에서만 있는 직업으로 디자인과 개발의 중간 과정의 역할을 한다. 엄밀히 말해 개발자라고 할 수 없다. 그렇다고 디자이너도 아니다. 그러나 웹 퍼블리셔는 프런트, 즉 화면 개발의 첫 단계이므로 현장에서는 개발자의 직무로 여긴다.

｜수행 업무｜

웹 퍼블리셔는 웹 화면을 만드는 개발자이다. 웹 화면은 html로 만드는 문서이다. html로 만든 웹 화면은 여러 개로 구분된 레이아웃에 각종 텍스트, 이미지, 동영상, 링크, 버튼, 체크 박스 등이 들어있다. 거기에 다양한 폰트와 배경 색상이 들어간다.

UI/UX 기획자가 만든 화면 기획서와 디자이너가 만든 디자인 파일을 가지고 웹 화면을 만든다. 웹 화면은 html로 작성하며, 복잡한 디자인을 위해 CSS 기술을 이용한다. 또 웹 화면의 동적 요소를 적용하기 위해 자바스크립트로 프로그래밍을 한다. 웹 퍼블리셔는 기획자와 디자이너가 만든 산출물로 사용자가 보는 실제 웹 시스템의 화면을 만들므로 개발의 첫 작업이라고 할 수 있다.

｜필요한 기술｜

HTML(Hyper Text Markup Language)

웹 퍼블리셔는 html문서를 만드는 것이 핵심 역할이다. 웹 표준 html에 대한 이해와 크로스 브라우징과 웹 접근성에 대한 정확한 이해가 있어야 한다.

CSS(Cascading Style Sheets)

html 내 <> tag로 디자이너가 요구하는 html 문서를 만들기는 쉽지 않다. 기획자 및 디자이너요구에 부응하는 웹 페이지 디자인을 구현하기 위해 디자인 기술인 CSS를 잘 이용할 수 있어야 한다.

자바스크립트(JavaScript)

정적인 웹 화면에 동적 표현을 위해 화면에 프로그래밍 요소가 필요하다. 마우스 커스가 갔을 때 펼쳐지는 메뉴, 모바일 우측 상단 三를 터치하면 메뉴가 펼쳐지는 것 같은 것은 프로그램이 필요하다. 화면에서 동적 표현을 하기 위해 자바스크립트로 프로그램해야 한다.

제이쿼리(JQuery)

자바스크립트를 쉽게 사용하도록 만든 라이브러리이다. 라이브러리는 기능을 모아놓은 것이라고 할 수 있다. 예를 들어 메뉴가 펼쳐지는 동작을 매번 코딩하는 것보다 메뉴 펼치지는 기능을 만들어 놓고 필요시마다 재 사용하는 것이 좋다. 이러한 자바스크립트에 필요한 기능을 하나로 모아 놓은 것이 제이쿼리라 보면 된다.

크로스 브라우징

웹 표준이 있어 html 작성은 표준에 따라야 한다. 그러나 html을 보여주는 웹 브라우즈가 표준을 지킨다 하더라도 나름 특성이 있다. 따라서 한 브라우즈에서 문제없던 페이지가 다른 브라우즈에서는 그림이 틀어지는 것 같이 제대로 안 보이는 경우가 있다. 이런 경우는 그 브라우즈에 맞은 추가 개발이 필요한다. 이렇게 브라우즈 특성을 타지 않도록 웹 페이지를 만드는 것을 크로스 브라우징이라고 한다. 특성을 타는 브라우즈에 맞게 별도 코딩이 필요하다. 웹 퍼블리셔는 이러한 작업을 할 수 있어야 한다.

반응형 웹 개발

반응형 웹이란 디바이스의 사이즈가 달라지더라도 별도로 개발하지 않아도 자동으로 디바이스 사이즈에 맞추어 화면이 조절되어 보이도록 하는 것을 말한다. 모바일 웹이 대세가 되면서 다양한 사이즈의 모바일 디바이스에 자동으로 조절되는 웹 개발이 되어야 한다. 이를 위한 별도 기술에 대한 이해가 필요하다.

웹 접근성(Web Accessibiliy)

웹은 누구든지 쉽게 동등하게 접근할 수 있어야 한다. 장애를 가진 사람도 비장애인과 같이 웹 사이트를 이용할 수 있도록 웹 사이트를 구성해야 하는 것을 웹 접근성이라 한다. 그러기 위해 웹 화면이 웹 접근성 규정에 따라 설계되어 개발되어야 한다. 중요한 웹 사이트(공공, 금융 등)는 웹 접근성 인증 기관으로 부터 인증을 받아야 한다. 웹 퍼블리셔는 웹 접근성에 대한 이해와 이에 따른 웹 개발을 할 수 있어야 한다.

웹 접근성 인증 마크

｜갖추면 좋을 것들｜

웹 사이트의 구축하기 위해 많은 직업군들의 참여가 필요하다. 직무라는 것이 있지만, 일이라는 것이 무 자르듯 완벽하게 나눌 수 없다. 웹 퍼블리셔도 마찬가지이다. 앞 공정의 일과 뒷 공정의 일을 잘 알고, 그 부분에 대한 추가적인 기술도 보유하고 있다면 훨씬 유능한 개발자로 평가될 것이다.

모바일 웹 프블리싱/웹/앱 개발에 대한 경험(모바일이 중요함)

UI/UX에 대한 기본 지식과 디자인에 대한 이해와 감각(원활한 소통)

(포토 샵 같은) 디자인 툴의 사용법(디자이너가 없는 소규모는 간단한 디자인은 직접)

자바스크립트를 더 깊이 안다면 프런트 개발자의 역할도 가능

빠르게 변하는 웹 표준에 대한 이해

트렌디하게 변하는 웹 사이트와 다양한 디바이스(PC, 패드, 스마트폰)에 대한 대한 지식

업무에서 개발로 넘어가는 단계이므로 열린 커뮤니케이션 능력(누구에게나 필요한 것!)