홈페이지 제작 순서


홈페이지를 개인적으로 만들거나 의뢰를 하여 제작하려고 해도 먼저 어떠한 순서로 만들어지는지 대략적으로 알아야 하는 부분들을 설명하고자 합니다.

종이 20장 정도를 준비하고, 연필을 10자루 이쁘게 깍아서 옆에 두세요

  • 내가 만들려고 하는 홈페이지 종류를 적고 상기한다.(회사홍보,쇼핑몰,커뮤니티,정보제공) 이처럼 어떠한 유형에 포함하는지 정확한 구분을 하여야 합니다.
  • 만약 회사홍보용 홈페이지를 만든다고 가정하에 기록을 합니다.

누구에게 보여줄 홈페이지인가 ?

  • 직원인가, 외부고객, 불특정다수 이렇게 소구층을 정확하게 파악하고 접근성을 높이는 내용을 구성합니다.

홈페이지에서 무엇을 보여줄것인가 ?

  • 회사소개
  • 대표이사인사말
  • 회사연혁
  • 찾아오시는길
  • 제품소개
  • 기술인증
  • 주문하기
  • 문의하기
  • 공지사항
  • 질문과답변

우리회사는 국민에게 봉사를 하는가 ???

  • 이때부터 친화적인 메뉴가 나옵니다.
  • 고객감동
  • 가족>회사 (직원전용 커뮤니티 메뉴)
  • 실천기업

약간은 딱딱한 메뉴를 벗어나 휴먼적인 메뉴를 사용하는것도 좋습니다.

예를들어 상단 메뉴

  • 회사소개     제품소개     기술인증    문의하기    커뮤니티
  • 회사소개    제품소개     기술인증     고객감동    가족>회사

이렇게 메뉴가 있다면 어떤쪽이 친근감이 있는지 구분이 됩니다.

이처럼 모든 구성요소를 두서없이 종이에 낙서하듯이 적어 둡니다.

여기저기 늘려있는 구성요소를 각각의 구분을 두고 서로 정리합니다.

  • 회사소개
    • 회사소개
    • 대표이사인사말
    • 회사연혁
    • 찾아오시는길
  • 제품소개
    • 연구제품
    • 판매제품
    • 개발제품
  • 기술인증
    • 국내인증
    • 해외인증
    • KS인증
  • 고객감동
    • 문의하기
    • 질문과답변
    • FAQ
    • 개선해주세요
  • 가족>회사
    • 나도한마디
    • 건의하기
    • 이런아이디어

이처럼 각각의 요소를 관련된 하부 메뉴로 구분하여 정리하면 1차적인 구성이 완료된 것입니다.

페이지를 구분하는 방법은 보통 3가 형태가 있습니다.

  • 일반적인 페이지(HP)
  • 프로그램 페이지(PP)
  • 게시판(BP)

이렇게 구분하여 한눈에 파악이 되도록 구성합니다.

 1차 메뉴 2차 메뉴  구분 내용
 회사소개
 회사소개  HP 회사에 대한 전반적인 내용 소개
 대표이사인사말  HP 사진, 인사말, 자필서명 기록

이처럼 액셀 파일로 메뉴를 구분하여 기록합니다.

홈페이지 제작 컨셉 및 요구사항

  • 기업에 신뢰가 가도록 사실적이고, 현실적인 이미지 사용, 그래픽적인 가상 이미지 사용금지
  • 파란색 계열 또는 하늘을 배경으로 하는 이미지 사용
  • 제품은 최상의 품질로 보여지도록 개별 촬영하여 등록
  • 메인화면은 가족단위 또는 공원에 뛰어다니는 아이들을 배경으로 고객과 함께 한다는 이미지 부여
  • 제품소개에서 제품을 구매하여 주문이 가능하도록 구성
  • 결제는 온라인 입금으로 처리하며, 주문 내역을 담당자가 확인한 후 주문자와 통화 확인
  • 회원별 제품구매에 따른 포인트 적립
  • 팝업창은 관리자페이지에서 관리가 가능하도록
  • 메인화면에 협력업체 배너 등록 및 관리
  • 제품 주문서 관리 및 이메일 통보, SMS 발송, 월별 주문내역 매출 통계, 회사별 통계
  • 홈페이지 접속 통계 관리, 년,월,일,시간, 접속페이지 기록 관리

이 처럼 디자인전에 충분한 컨셉을 설정하고, 그것에 맞는 디자인소스를 구하거나, 디자인을 의뢰하면 마음에 드는 시안을 얻을수 있습니다.

또한 정확한 요구사항을 정리하고 업무적인 내용은 처리순서를 정확하게 기재를 하여야 정확한 견적과 정확한 개발이 이루어 집니다.

단순하게 주문서 관리 라고만 하면 일반적인 개발은 고객이 주문을 하고, 주문서를 목록형태로 보여지도록 하는것이 일반적입니다.

홈페이지를 직접 제작할때는 보통 템플릿 소스를 구입해서 하는 경우가 많이 있습니다.

보통 2만원 에서 20만원 정도의 템플릿 소스를 구입해서 홈페이지에 대한 전반적인 디자인을 적용합니다.

국내 디자인 템플릿 판매 회사는 2곳 정도가 있습니다.

이곳에서 원하는 형태의 홈페이지 템플릿을 구입해서 제작하면 직접 디자인을 하는것 보다 우수한 홈페이지를 만들 수 있습니다.

회사를 상징하는 도메인 신청

  • 도메인은 우리회사를 상징하고 있어야 한다.
  • 긴단어를 배열하여 정확한 의미를 전달하는 도메인등록
  • 짧고 간단한 단어 첫글자를 이용한 도메인등록
  • 한글도메인등록
  • 3가 형태의 도메인을 등록하여 짧고 간단한 도메인으로 모두 포워딩한다.
  • www.woori-information-communication.com (www.wic.com 으로 포워딩)
  • www.wic.com
  • 우리정보통신 한글도메인등록 (www.wic.com 으로 포워딩)

도메인 등록이 완료되면 실제 홈페이지 제작을 하거나 의뢰를 한다.

직접 제작시

  • 포토샵을 이용하여 각각의 구성요소를 배치한다.
  • 잘 되어 있는 홈페이지의 각각 요소를 복사하여 배치하고 레이아웃을 잡는다.
  • 전체적인 컨셉을 상기하여 배경,색상등을 변경한다.
  • 포토샵으로 저장시 필히 PSD 파일로 하고, 수정이 가능하도록 레이어를 살려두어야 한다.
  • 원본을 복사하여 복사본을 만들어 레이어를 모두 합친다.
  • 각각의 요소를 배경,버튼,테두리등을 구분하여 하나씩 개별 파일로 저장한다.(GIF, JPG)
  • 드림위버를 이용하여 레이아웃을 만들고 각각의 요소를 배치한다.
  • 반복적으로 사용되는 부분은 별도로 제작하여 프로그램에서 자동으로 나오도록 설정한다.
  • 내컴퓨터에 apache, php, mysql 을 설치하고 직접 테스트 해 본다.
  • 간편하게 설치하는 APMSetup 을 이용한다.

웹호스팅을 신청하고 내컴퓨터에서 만들어진 파일을 모두 업로드 한다.

이것으로 간단한 홈페이지 제작 순서를 마칩니다.