퍼블리싱 뜻, 웹 퍼블리싱이 제작에서 맡는 일
견적서 · 일정표의 퍼블리싱은 디자인 시안을 브라우저가 읽는 코드로 옮기는 단계입니다. 네 단계 구분 표, 반응형 · 접근성 · 브라우저 확인에서 정할 것, 넘겨받을 파일 다섯 가지와 확인 순서를 정리했습니다.
퍼블리싱 뜻을 한 줄로 줄이면, 홈페이지 제작에서 디자인 시안(그림 파일)을 브라우저가 읽는 HTML · CSS 코드로 옮겨 실제로 열리고 눌리는 화면으로 만드는 일입니다. 이 일을 맡는 사람을 웹 퍼블리셔라고 부릅니다. 게임을 배급 · 운영하는 게임 퍼블리싱이나 책을 펴내는 출판과는 다른 말이고, 이 글은 웹 퍼블리싱만 다룹니다. 반응형 · 접근성 · 브라우저 확인의 기준은 요청할 때 정해 두고, 퍼블리싱 구간에서 코드로 옮겨 확인합니다.
퍼블리싱 뜻, 웹 제작에서는 무엇을 하나요
세 가지 재료로 화면을 짭니다.
- HTML — 화면의 뼈대와 뜻입니다. 이것은 제목, 이것은 문단, 이것은 버튼이라고 표시합니다.
- CSS — 모양입니다. 색 · 글꼴 · 여백 · 배치와 화면 폭에 따라 바뀌는 규칙을 적습니다.
- 자바스크립트 — 움직임입니다. 메뉴 열고 닫기 · 넘김 배너 · 탭 전환처럼 화면 안의 동작을 붙입니다.
시안의 「문의하기」 버튼 하나를 예로 들면, HTML에서 누를 수 있는 버튼이 되고 CSS에서 시안과 같은 색 · 크기 · 둥근 모서리를 얻은 뒤 누르면 문의 화면으로 갑니다. 업계에서는 이 작업을 코딩 · 마크업이라고도 부릅니다.
기준은 웹 표준입니다 — 표준 단체가 공개해 둔 HTML · CSS 규칙으로, HTML은 WHATWG가, CSS는 W3C가 관리합니다. 표준대로 짜면 브라우저마다 다르게 보이는 곳이 줄어듭니다.
기획 · 디자인 · 퍼블리싱 · 개발은 어떻게 나뉘나요
앞 단계의 결과물이 다음 단계의 재료가 됩니다. 퍼블리싱이 받는 것은 확정된 시안이고, 넘기는 것은 화면 파일입니다.
| 단계 | 하는 일 | 넘기는 결과물 |
|---|---|---|
| 기획 | 요구 정리 · 화면 목록 · 화면 설계 — 누가 · 무엇을 · 어떤 순서로 쓰나(UX) | 화면 목록 · 화면 설계서 |
| 디자인 | 화면 요소(UI)의 모양 — 색 · 글꼴 · 배치 · 버튼 | 화면별 시안 · 공통 요소 시안 |
| 퍼블리싱 | 시안을 HTML · CSS · 자바스크립트로 | 화면 파일 · 퍼블리싱 목록표 · 공통 요소 화면 |
| 개발 | 화면 뒤의 기능 — 자료 불러오기 · 게시판 저장 · 문의 발송 · 로그인 · 결제 · 관리자 화면 | 기능이 붙은 사이트 |
일정표의 단계 이름으로 보면 퍼블리싱과 개발은 대체로 「화면 만들기」 한 단계 안에 함께 들어 있습니다 — 단계마다 걸리는 날은 홈페이지 제작 기간, 단계마다 며칠 걸리나에 있습니다. 작은 사이트는 한 사람이 퍼블리싱과 개발을 함께 맡기도 하고, 사이트 빌더로 만들면 코드를 짜는 일이 도구 안 편집으로 바뀝니다.
퍼블리싱 범위는 무엇으로 정하나요
네 가지 기준을 요청서에 적어 두면 퍼블리셔가 그대로 코드로 옮기고, 의뢰한 쪽은 같은 목록으로 확인합니다.
| 정할 것 | 요청서에 적는 예 | 확인하는 법 |
|---|---|---|
| 반응형 | 화면 폭 구간 3개 · 메뉴 접는 방식 | 창 폭을 줄여 가며 구간마다 배치 보기 |
| 웹 접근성 | 이미지 대체 텍스트 · 제목 순서 · 키보드 이동 · 명도 대비 · 입력칸 레이블 | 마우스 없이 탭 키로 끝까지 이동 · 대비 측정 도구 |
| 브라우저 확인 | 크롬 · 사파리 · 엣지 · 삼성 인터넷 최신판과 휴대폰 2종(예시) | 목록의 브라우저마다 전 화면 열기 |
| 공통 요소 | 버튼 · 입력칸 · 표 모양을 한 번만 정의 | 공통 요소 화면에서 한눈에 보기 |
반응형의 화면 폭 구간과 메뉴 접는 방식은 반응형 홈페이지란, 화면 폭별로 무엇을 정하고 만드나에 정리돼 있습니다. 접근성 기준은 국내 표준인 「한국형 웹 콘텐츠 접근성 지침 2.2」(KWCAG 2.2, KS X OT0003)와 국제 기준인 W3C의 WCAG 2.2가 있습니다. 정하기 어려우면 국내 표준을 적고, 해외 방문자가 많은 사이트는 WCAG 2.2 AA 등급(A · AA · AAA 세 등급의 가운데)을 함께 적습니다. 브라우저 확인은 크로스 브라우징이라고도 부르며, 목록이 없으면 끝나지 않으므로 브라우저와 기기를 줄 수로 정합니다.
넘겨받을 결과물은 무엇이고 어떻게 확인하나요
퍼블리싱이 끝나면 다섯 가지를 받습니다. 다섯 가지를 함께 넘기면 개발을 다른 곳에서 이어 해도 화면을 새로 그리지 않고 이 파일 위에 기능을 붙입니다. 개발 방식에 따라 파일을 옮겨 담는 일이 생기므로, 넘기기 전에 개발 쪽에 받을 파일 형식을 물어 둡니다.
- 화면 파일 — HTML · CSS · 자바스크립트 원본 전체
- 이미지 · 아이콘 · 글꼴 파일 — 글꼴은 웹 사용 허락 문서와 함께
- 퍼블리싱 목록표 — 화면 번호 · 화면 이름 · 파일 이름 · 주소 · 상태 · 마지막 수정일
- 공통 요소 화면 — 공통 요소 시안을 코드로 짜 버튼 · 입력칸 · 표 · 제목 크기를 한 화면에 모은 것
- 확인 기록 — 브라우저 · 기기별로 본 날짜와 남은 문제
퍼블리싱 목록표는 이런 모양입니다. 세 줄은 예시로 가정한 값입니다.
| 번호 | 화면 이름 | 파일 이름 | 주소 | 상태 | 마지막 수정일 |
|---|---|---|---|---|---|
| 01 | 첫 화면 | index.html | / | 확인 끝 | 9월 20일 |
| 02 | 회사 소개 | about.html | /about | 수정 중 | 9월 22일 |
| 03 | 문의 | contact.html | /contact | 시안 기다림 | — |
상태 칸이 모두 「확인 끝」이 되는 날이 퍼블리싱이 끝나는 날입니다. 확인은 다섯 단계로 합니다.
- 목록표의 화면 수와 실제 파일 수를 맞춰 봅니다.
- 컴퓨터와 휴대폰에서 목록 순서대로 전 화면을 엽니다.
- 시안과 나란히 놓고 여백 · 글자 크기 · 줄바꿈 차이를 적습니다.
- 마우스를 놓고 탭 키로만 끝까지 이동해 봅니다. 대체 텍스트는 화면에 보이지 않으므로 이미지마다 넣은 문구를 목록(파일 이름 · 대체 텍스트)으로 받아 확인합니다.
- 찾은 차이는 화면 주소 · 위치 · 기기를 적어 한 표로 모아 보냅니다.
5번의 표는 홈페이지 수정 요청 모아 적는 법의 여섯 칸을 그대로 씁니다.
자주 묻는 질문
퍼블리셔와 프런트엔드 개발자는 무엇이 다른가요?
퍼블리셔는 시안을 표준에 맞는 화면 코드로 옮기는 데 무게를 두고, 프런트엔드 개발자는 그 화면에서 자료를 불러오고 상태를 바꾸는 프로그램까지 맡습니다. 경계는 만드는 곳과 프로젝트마다 다릅니다. 견적서에 두 줄이 따로 있으면 각각 어디까지인지 한 줄씩 적어 달라고 요청합니다.
사이트 빌더로 만들면 퍼블리싱이 필요 없나요?
도구가 화면 코드를 만들어 주므로 코드를 짜는 일은 도구 안 편집으로 바뀝니다. 반응형 · 접근성 · 브라우저 확인은 그대로 남아, 요청서에 정하는 네 가지 기준을 빌더로 만든 화면에도 똑같이 씁니다.
퍼블리싱은 얼마나 걸리나요?
새로 짜야 하는 고유 화면 수에 따라 늘어납니다. 제작 기간 글의 기준으로 고유 화면 8~12개인 회사 소개 홈페이지는 「화면 만들기」에 10~15일을 잡고, 그 안에 퍼블리싱과 개발이 함께 들어 있습니다. 시안이 확정되기 전에 시작하면 바뀐 시안만큼 다시 짜므로 시작일은 시안 확정일 뒤로 잡습니다.
퍼블리싱까지만 받고 개발은 다른 곳에 맡겨도 되나요?
됩니다. 화면 파일 · 이미지와 글꼴 · 퍼블리싱 목록표 · 공통 요소 화면 · 확인 기록 다섯 가지를 함께 넘기면 개발 쪽이 이 파일 위에 기능을 붙입니다. 계약서의 납품 항목에 다섯 가지와 원본 파일 인도를 적어 둡니다.
오늘 할 일
받은 견적서나 일정표에서 퍼블리싱 줄을 찾아 옆에 세 칸을 적으십시오 — 몇 화면인지, 확인할 브라우저와 기기, 넘겨받을 파일. 비어 있는 칸은 한 번에 물어 답을 받습니다. 견적서가 아직 없으면 같은 세 줄을 요청서에 먼저 적어 보냅니다.
