웹디자인 시안부터 퍼블리싱까지, 작업 전 확인할 기준

웹디자인 시안이 완성되면 다음 단계는 화면을 HTML과 CSS로 구현하는 퍼블리싱 작업입니다. 디자인 화면에서는 자연스럽게 보이던 요소도 실제 브라우저에 옮기는 과정에서는 다시 확인해야 할 부분이 생깁니다.

제목이 두 줄로 바뀌었을 때 간격은 괜찮은지, 버튼 문구가 길어져도 형태가 유지되는지, 모바일에서는 이미지와 텍스트를 어떤 순서로 보여줄지처럼 시안 한 장만으로 결정하기 어려운 내용이 있기 때문입니다.

퍼블리싱을 시작하기 전에는 제작할 페이지 범위, 반복해서 사용하는 디자인 요소, 반응형 화면, 이미지와 폰트, 움직이는 요소와 링크 구조 정도를 먼저 살펴보면 작업 범위를 잡기 수월합니다.

디자인키트의 웹디자인 자료를 활용할 때도 현재 가지고 있는 파일 구성을 먼저 확인할 필요가 있습니다. 제품에 따라 PSD 디자인, Figma 자료, HTML 소스의 구성이 다를 수 있어 어떤 자료까지 준비되어 있는지에 따라 이후 작업도 달라집니다.

먼저 제작할 페이지부터 정리해보세요

메인 시안 한 장이 완성되어 있어도 실제 홈페이지에는 여러 페이지가 필요할 수 있습니다.

회사소개, 서비스 소개, 포트폴리오, 게시판처럼 서브페이지가 추가된다면 메인 화면만 보고 바로 퍼블리싱을 시작하기보다 어떤 페이지까지 제작해야 하는지 먼저 정리해두는 것이 좋습니다.

메인에서는 큰 배너와 대표 콘텐츠 중심으로 디자인되어 있지만 서브페이지에서는 제목 영역, 서브 메뉴, 본문 콘텐츠처럼 다른 구조가 필요할 수 있습니다.

페이지 범위가 정리되지 않은 상태에서 메인부터 구현하면 뒤늦게 서브페이지를 만들면서 공통 구조를 다시 수정하는 일이 생길 수 있습니다.

디자인키트의 HTML 소스에서도 메인페이지와 서브페이지 샘플을 기준으로 화면 구조를 확인할 수 있습니다. 메인에서는 상단 메뉴, 메인 배너, 콘텐츠, footer를 살펴볼 수 있고, 서브페이지에서는 서브 배너와 서브 메뉴, 페이지 콘텐츠가 이어지는 구성을 볼 수 있습니다.

여러 페이지에서 반복되는 디자인을 확인합니다

홈페이지를 만들다 보면 같은 요소가 여러 화면에 반복해서 등장합니다.

header와 footer처럼 거의 모든 페이지에 들어가는 영역도 있고, 버튼이나 카드, 제목처럼 여러 콘텐츠에서 같은 형태로 사용하는 요소도 있습니다.

같은 역할의 버튼이 페이지마다 크기나 모양이 달라지거나 제목과 본문의 간격이 조금씩 달라지면 전체 화면에서 통일감이 떨어질 수 있습니다.

서비스 카드가 메인과 서브페이지에 모두 들어간다면 이미지 비율, 제목 크기, 설명 영역, 버튼 위치를 어느 정도까지 같은 기준으로 사용할 수 있는지도 미리 정할 수 있습니다.

퍼블리싱할 때도 같은 디자인을 여러 번 새로 만들기보다 공통 스타일을 기준으로 필요한 화면에 적용하기 쉬워집니다.

실제 문구를 넣었을 때 화면도 확인해보세요

웹디자인 시안에는 화면에 잘 맞도록 정리된 샘플 문구가 들어가는 경우가 많습니다. 실제 회사 자료를 넣으면 제목과 설명 길이가 달라질 수 있습니다.

시안에서는 한 줄이었던 서비스명이 실제 자료에서는 두 줄이 되거나, 짧았던 소개 문장이 예상보다 길어질 수도 있습니다.

텍스트 길이가 달라지면 카드 높이와 버튼 위치, 섹션 간격에도 영향을 줍니다.

특히 같은 크기의 카드가 여러 개 나란히 배치된 화면에서는 문구 길이 차이가 바로 드러납니다. 샘플 문구를 기준으로만 화면을 맞추기보다 실제 사용할 콘텐츠를 넣었을 때도 배치가 자연스러운지 확인해보는 것이 좋습니다.

버튼도 마찬가지입니다.

문의하기처럼 짧은 문구와 상담 신청 바로가기처럼 긴 문구는 같은 너비 안에서도 보이는 모습이 다릅니다. 모바일에서는 사용할 수 있는 공간이 더 좁기 때문에 실제 문구를 넣은 상태에서 확인해야 합니다.

폰트와 이미지 원본도 미리 준비합니다

시안에서 사용한 폰트를 실제 웹에서도 사용할 수 있는지 확인해야 합니다.

글꼴이 달라지면 같은 크기의 글자라도 폭과 줄바꿈 위치가 바뀝니다. 제목이 예상보다 빨리 두 줄로 넘어가거나 메뉴 사이의 간격이 달라질 수도 있습니다.

이미지도 실제로 사용할 원본을 미리 확인해두는 것이 좋습니다.

시안에서는 같은 비율로 정돈된 이미지가 들어가 있지만 실제 사진은 가로형과 세로형이 섞여 있을 수 있습니다. 크기가 작은 이미지를 큰 배너에 사용하면 화질이 떨어질 수 있고, 비율이 다른 사진을 같은 영역에 넣으면 필요한 부분이 잘릴 수도 있습니다.

로고와 아이콘처럼 반복해서 사용하는 이미지도 함께 정리해두면 HTML 작업 중 필요한 파일을 찾기 쉽습니다.

모바일에서 달라질 부분도 함께 정리합니다

반응형 홈페이지에서는 화면 폭이 줄어들면서 콘텐츠 배치도 달라집니다.

PC에서 이미지와 설명을 좌우로 배치했다면 모바일에서는 위아래로 배치해야 할 수 있습니다. 여러 개의 카드가 한 줄에 보이던 영역도 모바일에서는 한 개씩 내려가거나 슬라이드 형태로 보여줄 수 있습니다.

PC 시안만 준비되어 있다면 퍼블리싱 전에 모바일 화면에서 바뀔 부분을 미리 정리해보세요.

큰 제목의 크기를 어느 정도 줄일지, 좌우 여백은 얼마로 둘지, 여러 개의 컬럼은 어느 시점에서 한 줄로 바꿀지 같은 기준을 잡을 수 있습니다.

디자인키트 자료도 제품에 따라 구성이 다릅니다. Figma 자료에서는 메인 화면의 와이어프레임을 확인할 수 있고, PSD에서는 메인 디자인을 살펴볼 수 있습니다. HTML 소스가 포함된 제품이라면 실제 마크업과 함께 메인페이지와 서브페이지 샘플의 구조를 확인할 수 있습니다.

반응형과 일반형의 모바일 구성도 제품마다 차이가 있을 수 있으므로 현재 작업 중인 소스를 기준으로 확인해야 합니다.

슬라이드나 애니메이션은 동작 방식까지 확인합니다

정적인 웹디자인 시안에서는 움직이는 요소가 실제로 어떻게 동작하는지 모두 표현하기 어렵습니다.

메인 배너가 자동으로 넘어가는지, 화살표를 눌러 이동하는지, 카드에 마우스를 올렸을 때 어떤 변화가 생기는지처럼 화면의 움직임은 퍼블리싱 과정에서 추가로 정해야 할 수 있습니다.

슬라이드가 들어가는 영역이라면 몇 개의 콘텐츠를 보여줄지, 자동 재생 여부, 페이지네이션이나 화살표 사용 여부 등을 확인해둘 수 있습니다.

hover 효과나 스크롤 애니메이션도 실제로 필요한 영역을 먼저 정해두면 작업 범위를 잡기 쉽습니다.

버튼과 메뉴의 이동 경로도 정해두세요

디자인 시안에서 버튼은 화면을 구성하는 요소로 보이지만 실제 홈페이지에서는 사용자가 다른 페이지로 이동하는 기능을 갖습니다.

그래서 퍼블리싱 전에 버튼이 어디로 연결될지 정리해두는 것이 좋습니다.

메인 배너의 자세히 보기 버튼이 어느 서비스 페이지로 이동하는지, 포트폴리오 카드를 누르면 상세페이지가 열리는지, 전화나 이메일 버튼은 어떻게 연결할지 확인할 수 있습니다.

메뉴도 마찬가지입니다.

시안에는 메뉴명이 들어 있어도 실제 페이지 파일명이나 URL 구조까지 정해져 있지 않을 수 있습니다. 서브 메뉴가 있다면 각 항목이 어느 페이지로 이동할지도 함께 확인해야 합니다.

이 부분을 미리 정리하면 HTML을 만들면서 임시 링크를 반복해서 바꾸는 일을 줄일 수 있습니다.

시안에 없는 화면도 생각해볼 필요가 있습니다

웹디자인 시안에는 대부분 콘텐츠가 정상적으로 들어 있는 화면이 표현됩니다. 실제 홈페이지에서는 내용이 없는 상태나 사용자의 행동에 따라 달라지는 화면도 생깁니다.

게시물이 아직 없을 수도 있고 검색 결과가 나오지 않을 수도 있습니다. 이미지가 등록되지 않은 콘텐츠도 생길 수 있습니다.

입력 폼이 있다면 입력 전 화면뿐 아니라 잘못 입력했을 때 표시할 내용도 필요할 수 있습니다. 메뉴와 버튼에는 hover나 active처럼 사용자의 동작에 따라 달라지는 상태가 있습니다.

특히 게시판이나 입력 폼처럼 상태가 자주 바뀌는 영역은 정상 화면 한 장만 보는 것보다 필요한 화면을 함께 생각해두는 것이 좋습니다.

디자인키트 자료를 활용한다면 파일 구성을 먼저 확인하세요

디자인키트에서 웹디자인 자료를 선택했다면 작업 전에 어떤 파일이 포함되어 있는지 먼저 확인해보세요.

제품에 따라 포함된 자료는 다를 수 있으며, PSD에서는 메인 디자인을, Figma에서는 메인 와이어프레임을 확인할 수 있습니다. HTML 소스가 포함된 제품에서는 HTML 마크업과 CSS, JavaScript 파일을 기준으로 실제 화면 구조를 살펴볼 수 있습니다.

HTML 소스에는 메인페이지와 서브페이지 샘플이 포함될 수 있어 메인 디자인 이후의 화면 구조를 확인할 때도 참고할 수 있습니다.

현재 가지고 있는 디자인과 코드가 어디까지 준비되어 있는지 먼저 확인하면 새로 작업해야 할 범위도 자연스럽게 정리됩니다.

웹디자인 시안을 새로 만들지, 기존 자료를 수정할지, HTML 소스까지 필요한지는 프로젝트마다 다릅니다. 필요한 작업 범위를 먼저 정한 뒤 그에 맞는 자료를 선택하는 것이 좋습니다.

퍼블리싱을 시작하기 전에 한 번 더 확인해보세요

별도의 복잡한 문서를 만들 필요는 없지만 작업에 들어가기 전에 몇 가지는 확인해두는 것이 좋습니다.

페이지가 많지 않다면 간단하게 정리해도 충분합니다. 작업 규모가 커질수록 화면별로 필요한 내용을 나누어두면 퍼블리싱 과정에서 확인하기 편합니다.

자주 묻는 질문

시안을 실제 홈페이지로 옮기기 전, 확인할 부분을 정리해두세요

웹디자인 시안에서 퍼블리싱으로 넘어가면 화면으로 보이던 디자인을 실제 브라우저에서 사용할 수 있는 형태로 만들어야 합니다.

페이지 범위와 반복 요소를 먼저 확인하고, 실제 콘텐츠와 모바일 화면, 링크와 움직임까지 정리해두면 구현 과정에서 새로 결정해야 할 부분이 줄어듭니다.

디자인키트의 PSD, Figma, HTML 소스를 활용할 때도 현재 가지고 있는 자료와 파일 구성을 먼저 확인해보세요. 어느 단계까지 준비되어 있는지 알면 필요한 작업도 구분하기 쉬워집니다.

디자인키트 HTML 소스 가격 개편

홈페이지 제작에 활용할 HTML 소스를 찾고 있다면 디자인키트의 HTML 소스도 함께 살펴볼 수 있습니다.

HTML 소스 가격은 165,000원에서 39,000원으로 개편되었습니다.

가격 개편 내용 자세히 보기 →

작성자: 디자인키트

작성일: 2026.10.08

최종 수정일: 2026.10.08