홈페이지 제작 과정 A to Z

홈페이지 제작 과정 A to Z

1. 시작하며

어떤 일을 할 때 전체 프로세스를 알고 진행하는 것과 그렇지 않은 것의 차이는 상당히 크다고 생각합니다.
전체적인 프로세스를 아는 것은 다음 스텝에 대한 준비를 할 수 있다는 것을 의미하기 때문입니다!

이번 글에서는 홈페이지 제작이 어떻게 진행되는지 전체적인 과정을 소개하겠습니다.






2. 홈페이지 제작 과정 총정리




2.1 사전 상담 및 사전 설문지 작성

  • 사전 상담: 홈페이지 제작 업체를 선정하고 해당 업체와 사전 상담을 진행합니다.
  • 사전 설문지 작성: 업체에서 전달한 사전 설문지를 작성합니다.
    - 사전 설문지에는 선호하는 홈페이지 스타일 등 제작을 위한 기초 설문 내용이 포함되어 있습니다.






2.2 견적서, 일정표 확인 및 계약서 작성

  • 견적서 및 일정표 확인: 업체는 고객과의 사전 상담 및 사전 설문지 내용을 바탕으로 견적서와 제작 일정표를 전달합니다.
  • 계약 진행: 고객은 예산과 일정을 고려하여 계약을 진행합니다.






2.3 홈페이지 메뉴별 기획서 확인

  • 기획 논의: 업체와 고객이 홈페이지 기획에 대한 논의를 거쳐 홈페이지 기획서를 작성합니다.
  • 기획서 전달: 고객이 미리 작성한 홈페이지 기획서가 있다면 업체에 전달하는 방식이 있을 수 있으며,
    작성된 기획서가 없더라도 홈페이지 업체에서 먼저 기획에 대한 제안을 주는 방식이 있을 수 있습니다.






2.4 이미지 등 필요 자료 전달

  • 필요 자료 전달: 홈페이지에 들어가야 하는 이미지, SNS 링크 등 제작에 필요한 자료를 업체에 전달합니다.




2.5 홈페이지 디자인 시안 확인

  • 디자인 시안 제작 작업: 고객이 전달한 자료를 바탕으로 홈페이지 디자인 시안을 제작합니다.
  • 시안 확인: 고객이 전달한 자료를 바탕으로 홈페이지 디자인 시안을 제작합니다. 고객은 해당 시안을 확인하고 피드백 내용을 전달합니다.






2.6 홈페이지 제작(PC/모바일)

  • PC/모바일 버전 제작 작업: 업체는 디자인 시안을 바탕으로 홈페이지 제작 작업을 시작합니다.




2.7 피드백 및 홈페이지 수정

  • 피드백 확인: 홈페이지 제작이 완료되면 제작된 홈페이지를 확인한 후 피드백 내용을 업체에 전달합니다.
  • 수정 작업: 업체는 홈페이지를 수정하고 다시 피드백 받는 과정을 진행하게 됩니다.





2.8 홈페이지 최종 검토 및 관리 가이드 확인

  • 최종 검토: 고객은 수정사항이 모두 반영되었는지 홈페이지 최종 검토를 진행합니다.
  • 관리 가이드 전달: 검토가 완료되면 업체는 고객에게 홈페이지 설정 및 유지 관리를 위한 가이드를 전달합니다.






2.9 도메인 등록 등 홈페이지 각종 설정

  • 각종 설정 진행: 도메인, 검색엔진 등록 등 홈페이지 관련 각종 설정을 진행합니다. 설정을 진행할 때는 포탈 ID/PW나 결제 정보가 필요한 경우가 있기 때문에, 설정 가이드를 보고 고객이 직접 진행을 하거나, 진행이 어려운 경우 업체가 대신 설정을 진행하기도 합니다.





3. 마무리

정리하자면,

  1. 사전 상담 및 사전 설문지 작성
  2. 견적서, 일정표 확인 및 계약서 작성
  3. 홈페이지 메뉴별 기획서 확인
  4. 이미지 등 필요 자료 전달
  5. 홈페이지 디자인 시안 확인
  6. 홈페이지 제작(PC/모바일)
  7. 피드백 및 홈페이지 수정
  8. 홈페이지 최종 검토 및 관리 가이드 확인
  9. 도메인 등록 등 홈페이지 각종 설정

예상했던 것보다 거쳐야 하는 과정이 많아서 깜짝 놀라신 분도 있을 거라고 생각합니다!

다만, 위의 과정은 제작 업체마다 다를 수 있기 때문에 홈페이지 제작의 전체적인 큰 틀에서 이렇게 진행되는구나를 중점으로 확인해 주세요!

[함께 읽으면 좋은 글]

* 홈페이지 제작 용어 모음.zip

홈페이지 제작 용어 모음.zip | 아임웹 홈페이지 지식 저장소, 웹카이브
웹사이트 제작과 관련된 필수 용어를 한눈에 확인하세요. 홈페이지 구축 과정에서 자주 사용되는 용어를 쉽게 이해할 수 있습니다.

* 홈페이지 제작 전 준비하면 좋은 4가지

홈페이지 제작 전 준비하면 좋은 4가지 | 아임웹 홈페이지 지식 저장소, 웹카이브
홈페이지 제작을 더욱 수월하게! 홈페이지 제작 전 미리 준비하면 좋은 4가지 사항을 알아보고, 웹사이트의 완성도를 높여보세요.

* 홈페이지 메뉴 구성: 원페이지 vs. 다중페이지

홈페이지 메뉴 구성: 원페이지 vs. 다중페이지 | 아임웹 홈페이지 지식 저장소, 웹카이브
홈페이지를 원페이지로 만들지, 다중페이지로 구성할지 고민이신가요? 두 가지 방식의 특징과 장단점을 비교해보고 최적의 방식을 선택해 보세요.

게시글 더보기

아임웹 동영상 위젯 모서리 둥글게 (코드)

아임웹 동영상 위젯 모서리 둥글게 (코드)

1. 시작하며 아임웹으로 홈페이지를 만들다 보면 다양한 위젯을 배치하게 됩니다. 그중에서도 동영상 위젯은 시각적인 정보 전달에 효과적인 요소인데요, 이때 다른 요소들과 조화롭게 보이기 위해서는 디자인 디테일이 매우 중요합니다. 예를 들어 이미지나 버튼은 둥글게 처리했는데, 동영상만 각져 있다면 화면의 전체적인 느낌이 어색해질 수 있습니다. 그래서 이번 글에서는 아임웹 동영상 위젯의 모서리를

아임웹 텍스트가 떠오르는 애니메이션 (코드)

아임웹 텍스트가 떠오르는 애니메이션 (코드)

1. 시작하며 홈페이지를 방문한 첫 순간, 사용자의 이목을 사로잡는 요소 중 하나는 바로 텍스트 애니메이션입니다. 정적인 텍스트보다 살짝 움직이는 텍스트는 훨씬 더 주목받을 수 있으며, 브랜드나 메시지를 자연스럽게 강조하는 데 유용합니다. 이번 글에서는 아임웹을 통해 텍스트 한 줄씩 부드럽게 떠오르는 애니메이션 효과를 구현하는 방법을 안내드립니다. 2. 텍스트가 위로 떠오르는 부드러운

아임웹 라이브 뱃지 만들기 (코드)

아임웹 라이브 뱃지 만들기 (코드)

1. 홈페이지에 ‘LIVE’ 뱃지가 필요한 이유 홈페이지에서 후기나 리뷰를 실시간으로 보여줄 때, 시각적으로 주목받을 수 있는 방법은 매우 중요합니다. 단순한 텍스트보다 시각적으로 강조된 뱃지를 활용하면 사용자의 집중도를 높이고, 정보의 긴급성이나 신뢰도를 효과적으로 전달할 수 있습니다. 실시간 후기, 라이브 상담, 긴급 공지, 한정 이벤트와 같이 현재 진행 중인 정보를 보여줄 때

아임웹 입력폼 개인정보수집동의 숨기기

아임웹 입력폼 개인정보수집동의 숨기기 (코드)

1. 시작하며 아임웹에서 입력폼을 통해 고객의 개인정보를 수집하거나 제3자에게 제공하는 경우, 반드시 관련 동의 항목을 명시해야 합니다. 하지만 입력폼 하단에 긴 동의 문구가 노출되면 폼이 길어지고 가독성도 떨어지기 쉬운데요, 이번 글에서는 입력폼 디자인을 해치지 않으면서도 개인정보 동의를 받을 수 있는 방법을 소개해 드리겠습니다. 2. 아임웹 입력폼 동의 항목 기본 설정