웹 퍼블리싱이란? 뜻, 디자인·개발과 차이와 품질 확인법

웹 퍼블리싱은 디자인 시안을 브라우저에서 실제로 열리고 동작하는 웹페이지로 만드는 작업입니다. 홈페이지 견적서를 받으면 디자인, 개발과 따로 「퍼블리싱」 항목이 적혀 있는데, 이 글은 견적을 처음 검토하는 마케팅·총무 담당자와 대표가 그 항목이 무엇을 하는 비용인지 이해할 수 있도록 정리했습니다. 디자인·개발과의 경계, 퍼블리싱 단계에서 정해지는 품질, 개발 지식 없이 결과물을 확인하는 방법까지 순서대로 다룹니다.

웹 퍼블리싱이란? 뜻과 하는 일

웹 퍼블리싱(Web Publishing)은 디자이너가 그린 화면을 HTML, CSS, 자바스크립트로 코딩해 브라우저가 읽을 수 있는 웹페이지로 바꾸는 작업입니다. 디자인 시안은 그림 파일이라 그 상태로는 클릭할 수도, 검색엔진이 글자를 읽을 수도 없습니다. 퍼블리싱을 거쳐야 글자는 글자로, 버튼은 누를 수 있는 링크로, 화면은 기기 폭에 맞춰 배치가 바뀌는 페이지가 됩니다.

홈페이지 제작 순서로 보면 기획(정보구조도·와이어프레임) → 디자인 → 퍼블리싱 → 개발의 세 번째 단계입니다. 메뉴 구조를 정하는 기획 단계는 정보구조도(IA) 만드는 법: 홈페이지 메뉴 구조 잡기 5단계에서 다룹니다. 퍼블리싱에는 세 가지 언어가 쓰이고, 역할이 분명히 나뉘어 있어서 구분해 두면 견적서나 작업 보고를 읽기가 쉬워집니다.

HTML 문법의 기준은 WHATWG가 관리하는 HTML 표준(HTML Living Standard)입니다. 이 표준은 판 번호를 매겨 끊어 내지 않고 계속 고쳐 쓰는 방식이라, 2026년 10월에도 갱신 기록이 올라와 있습니다. 퍼블리싱 품질을 말할 때 「웹표준」이라고 하면 대개 이 표준을 지켜 코딩했다는 뜻입니다.

디자인, 퍼블리싱, 개발은 어디서 나뉘나

디자인은 화면이 어떻게 보일지 정하고, 퍼블리싱은 그 화면을 브라우저에서 시안대로 보이고 동작하게 만들며, 개발은 데이터를 저장하고 꺼내는 기능을 만듭니다. 기준을 한 줄로 줄이면 「서버와 데이터베이스가 필요한가」입니다. 필요 없으면 대개 퍼블리싱, 필요하면 개발입니다.

같은 화면 안에서도 경계가 갈립니다

담당자가 헷갈리는 지점은 한 화면에 퍼블리싱과 개발이 섞여 있을 때입니다. 기업 홈페이지에서 자주 나오는 세 가지 화면으로 보면 이렇습니다.

• 문의 폼: 입력 칸 배치, 필수 항목 표시, 오류 문구 위치는 퍼블리싱입니다. 제출한 내용을 저장하고 담당자에게 알림 메일을 보내는 일은 개발입니다.
• 공지사항 목록: 목록 모양과 페이지 번호 디자인은 퍼블리싱입니다. 관리자가 쓴 글을 불러와 최신순으로 보여주는 일은 개발입니다.
• 메인 슬라이드: 넘어가는 효과와 속도는 퍼블리싱입니다. 관리자 화면에서 배너 이미지를 직접 바꾸게 하는 일은 개발입니다.

그래서 「메인 배너를 우리가 직접 바꾸고 싶다」는 요청은 퍼블리싱이 아니라 개발 범위입니다. 오픈 후 관리자에서 무엇을 직접 고칠 수 있는지는 견적 단계에서 따로 확인해야 합니다. 관리자 형태별 차이는 CMS란? 뜻과 종류, 홈페이지 관리자 페이지 고르는 기준에 정리했습니다.

견적서에 퍼블리싱 항목이 따로 있는 이유

퍼블리싱이 견적서에 따로 적히는 이유는 작업량이 디자인과 다른 기준으로 늘어나기 때문입니다. 디자인 비용은 주로 시안을 몇 장 그리느냐에 달려 있지만, 퍼블리싱 비용은 화면 양식 수에 더해 반응형 범위, 지원 브라우저, 웹접근성 수준, 움직임 효과의 양에 따라 달라집니다.

페이지 수와 화면 양식 수를 구분하세요

제품이 100개라도 제품 상세 화면의 양식이 하나라면 퍼블리싱은 양식 1개를 만들고 내용만 바꿔 끼웁니다. 반대로 페이지가 10개뿐이어도 화면마다 구성이 다르면 10개를 모두 따로 만들어야 합니다. 견적서의 「페이지 수」가 주소(URL) 개수인지 화면 양식 개수인지 확인해야 업체 간 견적을 같은 기준으로 비교할 수 있습니다.

제작 방식에 따라 항목 이름과 비중이 달라집니다

• 맞춤 제작: 시안을 처음부터 코딩하므로 퍼블리싱이 독립 항목으로 크게 잡힙니다.
• 워드프레스 테마·웹빌더: 이미 만들어진 템플릿 위에 내용을 얹는 방식이라 퍼블리싱 항목이 작거나 「테마 수정」 같은 이름으로 들어갑니다. 대신 템플릿 구조를 벗어나는 디자인은 구현이 어렵습니다.
• 퍼블리싱과 개발을 한 팀이 맡는 경우: 「퍼블리싱·프론트엔드」처럼 묶어 적기도 합니다. 항목이 합쳐져 있으면 아래 질문으로 범위를 확인하세요.

견적 단계에서 물어볼 5가지

1. 반응형(모바일·태블릿) 퍼블리싱이 포함되어 있는가
2. 지원 브라우저와 기기 범위가 문서로 적혀 있는가
3. 웹접근성은 어느 수준까지 지키는가(지침에 맞춘 자체 점검인지, 인증 심사까지인지)
4. 시안에 없는 화면(검색 결과, 404 오류, 개인정보처리방침)도 포함되는가
5. 퍼블리싱 완료 후 문구·이미지 교체는 몇 회까지 포함되는가

퍼블리싱이 전체 견적에서 차지하는 비중과, 빠져 있으면 위험한 항목은 홈페이지 제작 견적서 보는 법에서 항목별로 다룹니다.

퍼블리싱 단계에서 정해지는 5가지 품질

홈페이지가 휴대폰에서 깨지는지, 키보드만으로 쓸 수 있는지, 검색엔진이 내용을 제대로 읽는지는 대부분 퍼블리싱 단계에서 정해집니다. 디자인이 같아도 퍼블리싱 품질에 따라 아래 다섯 가지 결과가 달라집니다.

1. 반응형

반응형은 하나의 페이지가 화면 폭에 맞춰 배치를 바꾸는 방식입니다. 구글은 모바일 버전의 콘텐츠를 스마트폰용 크롤러로 수집해 색인과 순위에 쓴다고 밝히고 있고(모바일 중심 색인), 구현과 유지가 가장 쉬운 방식이라며 반응형 웹디자인을 권장합니다. 같은 문서에서 모바일 사이트에도 데스크톱과 같은 콘텐츠를 담으라고 안내합니다. 모바일 화면을 정리한다고 문단을 빼 버리면 구글이 그 내용을 보지 못할 수 있다는 뜻입니다. 원문은 구글 검색 센터의 모바일 중심 색인 안내에서 볼 수 있습니다.

퍼블리싱에서는 HTML 머리말에 <meta name="viewport" content="width=device-width"> 태그를 넣어 화면 폭을 기기 폭에 맞추는 것부터 시작합니다. 브레이크포인트를 정하고 콘텐츠 우선순위를 나누는 방법은 반응형 웹디자인 가이드를 참고하세요.

2. 웹표준 마크업

웹표준 마크업은 HTML 요소를 정해진 용도대로, 문법 오류 없이 쓰는 것입니다. 제목은 제목 태그로, 목록은 목록 태그로, 링크는 링크 태그로 표시해야 브라우저와 화면낭독기, 검색엔진이 각 요소의 역할을 알 수 있습니다. 한국형 웹 콘텐츠 접근성 지침에도 「마크업 오류 방지」 항목이 있어 요소의 열고 닫음, 중첩 관계, 속성 선언에 오류가 없어야 한다고 정하고 있습니다. 문법 오류는 W3C 마크업 검사 서비스에 페이지 주소를 넣으면 목록으로 확인할 수 있습니다.

3. 웹접근성

웹접근성은 장애인, 고령자를 포함한 누구나 홈페이지를 이용할 수 있게 하는 기준입니다. 장애인차별금지법 제21조와 같은 법 시행령 제14조는 접근성이 보장되는 웹사이트를 장애인에게 제공해야 할 정당한 편의로 정하고 있고, 국내 심사 기준은 국가표준인 한국형 웹 콘텐츠 접근성 지침 2.2(KWCAG 2.2)입니다. 검사항목 33개 가운데 상당수가 퍼블리싱에서 결정됩니다.

「텍스트 콘텐츠의 명도 대비」, 「색에 무관한 콘텐츠 인식」처럼 디자인 단계에서 정해지는 항목도 있어서 웹접근성은 디자인과 퍼블리싱이 함께 맞춰야 합니다. 품질인증은 디지털포용법 제21조에 근거하며 유효기간은 1년입니다. 법적 의무의 범위와 인증 절차, 자가 점검 방법은 웹접근성 인증 절차와 체크리스트에서 자세히 다룹니다.

4. 브라우저 호환

브라우저 호환(크로스브라우징)은 크롬, 엣지, 사파리, 삼성 인터넷처럼 방문자가 쓰는 여러 브라우저에서 같은 화면과 기능이 나오게 하는 작업입니다. 마이크로소프트 공식 안내에 따르면 인터넷 익스플로러 11 데스크톱 앱은 2022년 6월 15일 일부 윈도우 버전에서 지원이 끝났고, 일부 윈도우 10에서는 영구적으로 비활성화되었습니다. 지금 견적서에 IE 대응이 따로 적혀 있다면 실제로 필요한지 확인해 볼 만합니다.

아이폰은 따로 확인해야 합니다. 애플 앱 심사 지침 2.5.6은 웹을 탐색하는 앱이 WebKit 엔진을 쓰도록 정하고 있고, 다른 엔진은 EU와 일본에서 별도 권한을 받은 경우에만 쓸 수 있습니다. 국내 아이폰에서는 크롬 앱도 사파리와 같은 WebKit으로 화면을 그리기 때문에, PC 크롬에서 멀쩡한 화면이 아이폰에서는 다르게 보일 수 있습니다.

지원 범위는 실제 방문자를 기준으로 정하는 편이 합리적입니다. 이미 GA4를 쓰고 있다면 보고서의 사용자 > 기술 > 개요(기술 개요 보고서)에서 방문자가 쓰는 브라우저와 기기 비율을 확인할 수 있습니다.

5. 검색엔진이 읽는 구조

검색엔진은 화면을 눈으로 보는 것이 아니라 HTML을 읽습니다. 그래서 퍼블리싱 방식이 검색 수집에 바로 영향을 줍니다. 구글과 네이버 공식 문서에서 확인되는 기준은 다음과 같습니다.

• 링크는 <a href>로: 구글은 href 속성이 있는 <a> 요소만 링크로 수집할 수 있다고 밝힙니다. 네이버 서치어드바이저도 자바스크립트 함수로만 만든 링크는 검색로봇이 URL을 정확히 파악할 수 없다고 안내합니다.
• 본문은 HTML로: 네이버는 페이지 내용 전체가 자바스크립트로 불러와지는 구조인지 확인하라고 하며, 표준 HTML 마크업으로 콘텐츠를 제공하는 것을 권장합니다.
• 페이지마다 다른 제목: 네이버는 모든 페이지의 제목을 똑같이 쓰지 말고 콘텐츠 주제를 정확히 설명하는 문구를 쓰라고 안내합니다.
• 글자는 이미지가 아닌 텍스트로: 이미지 안에 들어간 글자는 HTML 본문이 아니어서, 화면낭독기와 검색엔진에 전하려면 대체 텍스트를 따로 써야 합니다.

제목 태그 순서에는 오해가 있습니다. 구글 SEO 기본 가이드는 제목 태그를 의미 순서대로 쓰면 화면낭독기 사용자에게 좋지만, 구글 검색 입장에서는 순서가 어긋나도 상관없다고 설명합니다. 제목 구조는 검색 순위 요령이 아니라 접근성과 문서 구조를 위해 바르게 쓰는 것입니다. 링크 기준 원문은 구글 검색 센터의 크롤링 가능한 링크 안내와 네이버 서치어드바이저 검색엔진 최적화 기초에 있습니다.

개발 지식 없이 퍼블리싱 품질 확인하는 법

퍼블리싱 결과물은 코드를 몰라도 브라우저 기본 기능만으로 상당 부분 확인할 수 있습니다. 시안 검수 단계에서 아래 순서대로 점검해 보세요.

1. 브라우저 창 폭 줄여 보기: PC에서 창 크기를 천천히 줄이면서 글자가 겹치거나, 가로 스크롤이 생기거나, 표가 화면 밖으로 넘치는 지점이 있는지 봅니다.
2. 실제 휴대폰 두 종류로 열기: 아이폰(사파리)과 안드로이드폰(크롬 또는 삼성 인터넷)에서 메뉴 열기, 문의 폼 입력, 전화번호 누르기를 직접 해 봅니다.
3. 키보드만으로 이동하기: 마우스를 놓고 Tab 키만 눌러 메뉴와 버튼을 끝까지 이동해 봅니다. 지금 어디에 초점이 있는지 테두리로 보이지 않으면 KWCAG의 「초점 이동과 표시」 항목에 걸립니다.
4. 글자를 마우스로 끌어 선택해 보기: 제목이나 본문이 선택되지 않는다면 이미지로 들어간 글자입니다.
5. 링크에 마우스 올려 보기: 크롬에서 진짜 링크는 창 왼쪽 아래에 이동할 주소가 표시됩니다. 누르면 이동은 하는데 주소가 표시되지 않는다면 <a href>가 아닌 방식으로 만든 링크일 수 있으니 업체에 확인하세요.
6. 페이지 소스 보기: Ctrl+U(맥은 Cmd+Option+U)로 소스를 열고 본문 문장을 Ctrl+F로 찾아봅니다. 화면에는 보이는데 소스에서 찾을 수 없다면 자바스크립트가 나중에 불러온 내용입니다. 같은 화면에서 <title> 안의 문구가 페이지마다 다른지도 확인합니다.
7. Lighthouse 실행하기: 크롬에서 F12로 개발자 도구를 열고 Lighthouse 탭에서 Analyze page load를 누르면 30~60초 뒤 성능, 접근성, SEO 등을 점검한 보고서가 나옵니다. 점수보다 문제로 표시된 항목 목록을 업체에 전달하는 용도로 쓰세요. 속도 쪽 지표를 읽는 법은 웹사이트 속도 측정 방법 가이드에 정리되어 있습니다.
8. 시안과 나란히 놓고 비교하기: 같은 화면 폭에서 요소 순서, 간격, 글자 크기, 줄바꿈 위치를 비교합니다. 운영체제마다 글꼴이 조금씩 다르게 표시되는 차이는 생길 수 있지만, 순서가 바뀌었거나 빠진 내용은 수정 대상입니다.

자주 묻는 질문

퍼블리셔와 프론트엔드 개발자는 다른가요?

겹치는 부분이 많습니다. 퍼블리셔는 시안을 HTML·CSS로 정확하게 구현하는 데 무게가 있고, 프론트엔드 개발자는 자바스크립트로 데이터를 받아 화면을 그리는 기능까지 맡는 경우가 많습니다. 업체마다 나누는 방식이 달라서, 담당자 입장에서는 직함보다 위 다섯 가지 품질을 누가 책임지는지를 확인하는 편이 정확합니다.

퍼블리싱 결과가 시안과 픽셀 단위로 똑같아야 하나요?

요소의 순서, 내용, 간격의 비율은 시안과 같아야 합니다. 다만 시안은 특정 화면 폭 하나를 기준으로 그린 그림이고 실제 페이지는 모든 폭에서 동작해야 하므로, 시안에 없는 폭에서는 퍼블리셔가 배치를 판단합니다.

워드프레스나 웹빌더로 만들어도 퍼블리싱 비용이 드나요?

테마나 템플릿을 거의 그대로 쓴다면 별도 퍼블리싱이 적거나 없습니다. 맞춤 디자인을 테마 위에 구현하려면 테마 수정 형태로 퍼블리싱 작업이 들어가고, 템플릿 구조와 다를수록 작업량이 늘어납니다.

웹접근성 인증까지 퍼블리싱에 포함되나요?

포함 여부는 업체마다 달라서 견적서에서 확인해야 합니다. 지침에 맞춰 코딩하는 것과 인증기관에 심사를 신청해 품질마크를 받는 것은 다른 일입니다. 인증은 심사 수수료가 따로 들고 유효기간이 1년이라, 마크를 유지하려면 갱신 심사를 받아야 합니다.

퍼블리싱이 끝나면 무엇을 받아 두어야 하나요?

운영 중인 사이트와 별개로 지원 브라우저·기기 범위와 검수 결과를 문서로 받아 두세요. 나중에 특정 화면이 깨지는 문제가 생겼을 때 납품 당시 범위 안이었는지 판단하는 근거가 됩니다. 소스 파일의 전달 여부와 소유권도 계약서에서 함께 확인하세요.

웹닷은 디자인 시안을 반응형으로 구현하면서 웹접근성 기본 항목, 검색로봇이 따라갈 수 있는 링크 구조, 페이지별 제목과 구조화 데이터를 빌드 단계에서 함께 처리합니다.

정리

웹 퍼블리싱은 디자인 시안을 브라우저에서 열리고 동작하는 페이지로 바꾸는 단계이고, 견적서에 따로 적히는 이유는 작업량이 시안 장수가 아니라 화면 양식, 반응형, 브라우저, 웹접근성 범위에 따라 달라지기 때문입니다. 담당자는 코드를 몰라도 창 폭 줄이기, 실제 휴대폰, 키보드 이동, 소스 보기만으로 결과물의 상당 부분을 확인할 수 있습니다.