홈페이지 제작 과정-기획의 중요성과 자료 준비하기

이번 포스팅은  소상공인 소규모사업자, 기업의 홈페이지 제작 담당자, 과제를 고민하는 대학생,  취업 포트폴리오 준비생 등  홈페이지 제작을 고민하는 분들이 기획과 자료 준비할 때 참고하면 도움 되는 정보입니다.

홈페이지 무료로 쉽게 제작할 수 있다는데.... 직접 만들어 볼까?디자인 회사 또는 웹에이전시에 홈페이지 의뢰하여 제작해볼까?

홈페이지아카데미 - 홈페이지 제작 과정

1. 홈페이지 제작 과정을  6단계로 설명합니다. 

홈페이지 제작 과정 / 6단계

1단계, 기획

홈페이지를 직접 제작하려 분들은 메인 화면 디자인부터 고민하시는 분이 많습니다. 그리고 업체에 의뢰하시려는 분들은 디자인 회사나 웹에이전시부터 검색하는 경우가 많습니다. 그러나 제일 먼저 하실 것은 홈페이지에 삽입될 내용 즉 콘텐츠(글, 그림, 영상 등)부터 구상하신 후 정리하시는 것이 중요합니다. 홈페이지 기획이란? 디자인 전에 홈페이지의 목적, 주요 타깃을 결정하고 정리된 콘텐츠 (Contents)를 기본으로 전체적인 디자인 콘셉트(Concept)를 잡는 단계입니다.

2단계, 디자인

디자인 단계는 홈페이지의 기획에서 정한 콘셉트에 맞게 다양한 시각적인 요소와 미디어를 활용하여 구체적인 시각화와 방문자의 사용성을 높일 수 있는 디자인 작업을 진행합니다. 전문 웹디자이너는 기획된 의도와 콘셉트에 디자인 감각을 더해  메인과 서브 시안을 제작하여 클라이언트(Client)와 소통과 검토 (Confirm) 과정을 거친 후 전체 웹페이지 디자인을 진행합니다.

3단계, 퍼블리싱

완성된 디자인을 HTML 문서로 만드는 과정을 코딩(Coding) 또는 퍼블리싱(Publishing)이라고 합니다. 예전에는  웹디자이너가 그래픽 디자인과 코딩 작업을 둘 다 해야했다면 요즘은 전문적인 한 분야로 코딩은 퍼블리싱이라는 한  분야로 자리 잡고 있습니다. 퍼블리싱 단계는 HTML, CSS. Javascript, Jquery를 통해 인터랙션(Interaction Design),  패럴랙스 스크롤링(Parallax Scrolling) 기능 등 움직임을 구현하고 웹 표준, 반응형 작업을 진행합니다.

4단계, 프로그램 개발

홈페이지에서 게시판, 회원가입과 관리, 고객 문의, 채팅, 결재 등은 개발 단계에서 전문 웹 프로그래밍을 통한 작업으로 진행됩니다. 흔히 접하는 게시판 형태도 단순한 기업에서 사용되는 것과 회원 전용 또는 직원 전용 게시판은 다르게 제작됩니다. 다양한 클라이언트의 요청에 따른 프로그래밍 작업은 서버와의 연동을 포함하면 전문적으로 세분화되고 복잡해질 수 있으며 웹사이트마다 특색 있게 제작할 수 있습니다.

5단계, 테스트/검수

최종적으로 홈페이지 기획 의도에 맞게 디자인과 프로그램 개발 작업을 테스트하고 발생하는 오류를 수정합니다. 모바일과 데스크톱 화면을 다양한 기기와 브라우저를 통해 오류가 없는지 확인합니다. 도메인(홈페이지의 주소)을 연결하고 인터넷 서버를 통해 사용자들이 접근할 때 불편함이 없는지 검수를 진행합니다.

6단계, 홍보 및 마케팅

홈페이지 제작 과정의 4~5단계에서 도메인을 통해 완성된 결과물을 확인하면 최종적인 완성이라고 생각하는 사람들이 많습니다. 홈페이지가 인쇄된 명함처럼 간단한 소개와 홍보용으로만 필요하다면 제작 까지만 완성하고 그대로 방치해도 됩니다. 그러나 완성된 홈페이지를 활용하여 내 사업의 홍보나 마케팅 또는 수익 창출 등 원하는 목표가 있을 수 있습니다. 이런 이유로 웹사이트를 제작했다면 방문자를 늘리기 위해 글을 업데이트하고 검색 최적화 작업, 그리고 다양한 SNS 연결을 통한 홍보를 꾸준히 진행하는 것이 중요합니다.

2. 홈페이지 제작에서 기획은 중요한 단계입니다. 

홈페이지 제작은 인테리어와 비유하여 설명할 수 있습니다. 개인적인 공간보다는 상점, 가게, 회사 등의 인테리어를 떠올리는 것이 좋습니다. 예를 들어 특화된 기술로 천연 효모를 이용하여 단팥빵을 파는 가게를 오픈한다면 어떤 인테리어를 하면 좋을까요?




인테리어 전문가는 아니지만 단팥빵이라는 옛날 추억을 살려 교복 차림이 생각하는 학교 빵집 같은 앤티크 한 인테리어? 아니면 천연 효모라는 특화된 기술을 강조하는 모던한 인테리어? 등 다양한 구상을 해볼 수 있습니다. 디자인 콘셉트를 결정하고 다음 단계는 구체적으로 색상 재료를 선택하고 대표적인 빵들은 어느 위치에 어떻게 진열할까부터 세부적인 구조까지 구체적인 기획을 진행하게 됩니다.


오프라인에서 '상점'은 온라인에서 '홈페이지'라고 할 수 있습니다. 특화된 기술로 천연 효모를 이용한 단팥빵을 주요 콘텐츠로 사진과 미디어 재료를 선별합니다. 그리고 홍보 타깃층을 정하고 방문자들이 홈페이지 안에서 얻을 수 있는 정보와 이벤트를 어떤 디자인과 프로그램으로 구현할지 결정합니다. 그리고 디자인 콘셉트는 오프라인과 동일하게 진행 여부 등 홈페이지 제작 단계 전체를 고려한 여러 사항을 결정하는 기획을 진행하게 됩니다.


같은 기획의 단계이지만 오프라인의 인테리어 기획은 결정되면 변경이 쉽지 않기 때문에 신중하게 됩니다. 그러나 홈페이지 제작은 변경이 쉽다고 생각하기 때문에 일단 만들어서 디자인을 수정하자는 생각을 하는 경우가 많습니다.


특히 직접 홈페이지를 만드는 경우에 전체적인 웹사이트 콘셉트의 결정이나 메뉴 구성 등의 기획 없이 진행하면 정해진 방향이 없기 때문에 수정을 계속하게 되고 작업 기일만 지연되어 최종 결과물을 만들지 못하고 포기하는 경우를 쉽게 볼 수 있습니다. 그래서 기획은 홈페이지 제작 과정의 처음과 끝을 연결하는 기본적인 설계로 매우 중요합니다.

3. 홈페이지 제작을 고민하고 있다면 먼저 해야 하는 것은 무엇일까요?

웹사이트를 직접 만들거나 업체에 의뢰하거나 제일 먼저 해야 하는 것은 홈페이지 제작 과정 첫 단계인 기획을 하는 것입니다. 홈페이지를 직접 제작하는 경우 전체 기획을 전담하게 됩니다. 업체에 의뢰하는 경우는 자료와 요청 사항을 정리하여 전달하고 다음 과정은 업체와 협의를 통해 진행하면 됩니다. 웹사이트를 기획하는 것은 온라인 공간, 즉 홈페이지에서 누구에게 어떤 것을 보여줄 것인지 결정하는 중요한 과정입니다.




디자인 업체에 의뢰한다면  전문가가 도와줄 수 있지만 전체적인 콘셉트와 각 페이지에 들어갈 내용 그리고 디자인 관련 요청은  최종 결정자인 의뢰자가 준비해야 합니다. 추후 홈페이지 작업을 완성하면 검수 과정에서 요청한 내용과 제공했던 자료를 기본으로 수정 등의 요청을 할 수 있기 때문입니다. 처음부터 원하는 것을 정확히 정리하는 단계가 필요하고 그것이 바로 기획 일부로 중요한 기본이 됩니다.

4. 홈페이지 기획 단계에서 준비 사항 체크 하세요.

홈페이지 기획을 직접 해야 한다고 하면 막연하고 어렵게 느껴질 수 있습니다. 그래서 좀 더 구체적으로 기획 단계에서 구상하고 준비해야 하는 것들을 정리했습니다.

1) 웹사이트의 목적과 타깃 설정

만들고자 하는 홈페이지의 목적은 무엇인가요? 예를 들면 단순한 홍보, 제품 판매 등을 통한 이윤 창출, 회원들 간의 소통을 위한 커뮤니티, 교육, 등등 목적을 분명히 하면 좀 더 구체적으로 기획을 진행할 수 있습니다. 그리고 내 사이트의 방문자는 주로 어떤 나이층과 성별일까요? 타깃(Target)층을 구체적으로 정한다면 디자인 콘셉트나 작업 방향을 정하는데 수월할 수 있습니다.

2) 참고사이트 선별

홈페이지의 목적과 타깃(Target)을 정했다면 비슷한 목적과 타깃층을 대상으로 검색합니다. 그리고 동종 업종을 검색하여  내 홈페이지의 전체적인 구성과 사용될 메뉴와 내용을 파악하는 것도 필요할 수 있습니다. 다양한 참고사이트를 통해 디자인 방향을 결정하고 세부 내용을 참고하여 사이트맵을 작성할 수도 있습니다. 홈페이지 제작을 업체에 의뢰할 때 참고사이트 선별하여 제공하면 좀 더 쉽에 요청을 전달할 수 있습니다.  예를 들면 이 참고사이트의 이런 기능과 디자인적인 요소를 구현해 달라고 요청하면 좀 더 정확하게 원하는 의도를 전달할 수 있습니다.

3) 사이트맵 작성

웹사이트를 구성하는 페이지 목록인 사이트맵(site map)은 웹페이지를 계층적으로 분류한 것입니다. 메뉴를 주메뉴(메인 메뉴/ 대분류 메뉴)와 서브메뉴로 분류하여 작성합니다. 사이트맵을 정리하면 홈페이지 전체 구조를 파악할 수 있습니다.

사이트맵(SITEMAP) 미리보기

4) 자료 준비 

사이트 맵을 통해 메뉴를 정리했다면 각 메뉴에 들어갈 내용인 텍스트, 이미지, 동영상 등 자료를 준비합니다. 내용을 문서로 정리하고 이미지 등의 미디어 자료들은 폴더를 만들어 저장합니다.

지금까지 홈페이지 제작 과정을  6단계와 기획의 중요성에 대해 설명했습니다. 

홈페이지 제작에 대해 고민하고 있다면 제일 먼저 해야 하는 것은 사이트 기획입니다. 사이트의 목적과 타깃 설정을 설정하고 참고 사이트를 선별합니다. 그리고 사이트맵을 작성하고 삽입 내용과 자료를 준비합니다. 웹사이트를 직접 만들고자한다면 기획 단계에서 준비한 자료를 그대로 활용하여 디자인 작업에만 집중하여 진행하면 됩니다. 그리고 웹사이트 제작을 업체에 의뢰하려는사람은 기획 단계에서 직접 준비한 사이트맵과 이미지 등의 자료와 요청 내용을 정확하게 전달하고 작업 과정을 지켜본 후 전달한 기획 내용과 비교하여 검수를 진행하면 됩니다.