크몽 지식창고

웹 퍼블리싱은 무엇일까?

2023-05-11

웹사이트 개발 프로젝트는 일반적으로 웹 기획, 웹 디자인, 웹 퍼블리싱, 프론트엔드 및 백엔드 개발의 프로세스로 진행됩니다. 많은 사람에게 친숙한 다른 직군과 달리, 많은 사람들에게 웹 퍼블리싱은 다소 생소한 분야로 받아들여지기도 합니다.

하지만 웹 개발에서 중요한 역할을 하는 웹 퍼블리싱의 의미와 특징, 개발과정에 대해 알면 효과적인 웹 사이트를 개발할 수 있습니다.

💡이 콘텐츠를 다 읽으면 알 수 있어요 (2분)

1. 웹 퍼블리싱이란?

2. 웹 디자이너 vs 웹 퍼블리셔 차이점

3. 웹 퍼블리싱 도구

4. 웹 퍼블리싱 외주 시 유의할 점

1. 웹 퍼블리싱이란?

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

즉, 웹 퍼블리싱이란 코딩을 통해 웹 페이지의 디자인을 실제적으로 구현하는 과정을 의미합니다.

2. 웹 디자이너와 웹 퍼블리셔의 차이점

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

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

이처럼, 웹 퍼블리셔 및 웹 퍼블리싱은 웹 사이트 개발 과정에서 있어서 완성도를 높이는 핵심적인 역할을 한다고 볼 수 있습니다.

웹 퍼블리싱 HTML, JavaScript, CSS 관련한 일러스트 이미지

3. 웹 퍼블리싱 도구

HTML: 웹 퍼블리셔가 HTML을 사용하는 방식은 기획서와 디자인을 보고, 구성 요소들의 의미와 사용방식을 해석 및 판단하여 그에 맞도록 문서를 구조화하는 것입니다. 즉 HTML을 통해 웹 페이지 구현을 위한 뼈대를 구축하는 일을 합니다.
CSS: 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트인 CSS를 사용하면 웹 페이지의 한 가지 요소만 변경해도 전체 관련 페이지의 내용을 한꺼번에 변경할 수 있습니다. 이를 통해 문서 전체의 일관성을 유지하고, 작업 시간을 단축하여 유지·보수 작업을 간편하게 할 수 있습니다.
JavaScript: 웹 퍼블리셔는 동적인 효과를 주기 위해(화면 요소 배치 및 디자인 측면) 자바스크립트를 활용할 수 있습니다. 대표적으로 웹사이트나 모바일 웹 메뉴에서 三 모양의 아이콘을 누르면 메뉴가 나타나는 기능이 있습니다.
jQuery: 제이쿼리는 HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크래스 플랫폼의 자바스크립트 라이브러리입니다. 긴 자바스크립트 언어를 축약해 사용할 수 있도록 한다는 장점이 있습니다.

4. 웹 퍼블리싱 외주 시 유의할 점

디자인 파일 제공: 디자인 파일을 외주 업체에게 명확하게 제공해야 합니다. PSD, Sketch, Figma와 같은 파일 형식을 활용하여 디자인 요소를 정확하게 전달하세요.
반응형 및 크로스 브라우징: 웹 퍼블리싱은 다양한 기기와 브라우저에서 웹페이지가 올바르게 표시되도록 해야 합니다. 따라서 반응형 디자인과 크로스 브라우징 테스트를 꼼꼼하게 수행하세요.
웹 표준 준수: 웹 퍼블리싱은 웹 표준을 준수해야 합니다. HTML, CSS, JavaScript 코드가 깔끔하고 표준에 맞게 작성되어야 웹페이지의 안정성과 호환성을 확보할 수 있습니다.
성능 최적화: 웹페이지의 로딩 속도는 사용자 경험에 직접적인 영향을 미치므로 이미지 최적화, 리소스 압축, 브라우저 캐싱 등 성능 최적화를 신경써서 수행하세요.
커뮤니케이션과 피드백: 업체와의 원활한 커뮤니케이션은 중요합니다. 프로젝트 진행 중 빈번한 피드백을 통해 작업의 진행 상황을 확인하고 필요한 수정사항을 빠르게 조율하세요.