웹사이트·홈페이지 만들기 7단계 순서와 준비물

웹사이트는 어떤 순서로 만드나요?

웹사이트는 목적,
원고와 사진,
제작 방식,
화면 확인,
공개,
검색 등록,
수정의 일곱 단계 순서로 만듭니다.
웹사이트는 같은 주소 아래 여러 쪽을 묶어 보여 주는 인터넷 공간이어서,
전체 순서를 먼저 잡아 두면 빠뜨리는 일이 줄어듭니다.

1. 1단계 목적 정하기방문자가 사이트에서 해야 할 행동 한 가지가 문장으로 적혔다면 끝난 것입니다.
2. 2단계 원고와 사진 준비메뉴마다 들어갈 글과 사진이 파일로 한곳에 모였다면 끝난 것입니다.
3. 3단계 제작 방식 고르기직접 만들지 맡길지 정했고 공개 뒤 고칠 사람이 정해졌다면 끝난 것입니다.
4. 4단계 PC·모바일 확인휴대폰과 PC에서 끝까지 눌러 보았고 고칠 곳 목록이 비었다면 끝난 것입니다.
5. 5단계 도메인 연결과 공개회사 주소를 넣었을 때 사이트가 열리고 https 보안 표시가 나온다면 끝난 것입니다.
6. 6단계 검색 등록검색 서비스에 사이트를 등록하고 사이트맵까지 제출했다면 끝난 것입니다.
7. 7단계 공개 후 수정수정 담당자와 문의 메일을 확인하는 주기가 정해졌다면 끝난 것입니다.

걸리는 기간은 조건에 따라 크게 달라서 일수는 적지 않았습니다.
원고와 사진을 모으는 2단계가 가장 늦어지기 쉬우니 일정은 이 단계부터 넉넉히 잡으세요.

일상에서는 홈페이지와 웹사이트를 같은 뜻으로 쓰므로,
어느 이름으로 찾았든 위 순서는 같습니다.
엄밀히 나누면 홈페이지는 사이트의 첫 화면을 가리키는 말입니다.
제작 방식에 따라 3단계의 선택지와 5단계의 연결 방법이 달라지는 점만 아래에서 따로 짚습니다.

가장 먼저 무엇을 정해야 하나요?

가장 먼저 사이트의 목적 한 가지와,
방문자가 마지막에 해야 할 행동 한 가지를 정해야 합니다.
목적은 회사 소개,
문의 받기,
채용,
판매 가운데 지금 가장 급한 것을 고릅니다.
목적에 따라 필요한 메뉴와 기능이 달라지기 때문입니다.

방문자는 거래처,
새 고객,
구직자로 나눠 볼 수 있습니다.
누구를 먼저 맞이할지 정하고,
마지막 행동은 전화하기나 메일 보내기처럼 단순하게 잡으세요.

• 이 사이트로 가장 먼저 이루고 싶은 일이 한 문장으로 적혀 있는가
• 가장 먼저 맞이할 방문자가 한 부류로 정해졌는가
• 방문자가 마지막에 할 행동이 전화,
  메일,
  오시는 길 중 하나로 정해졌는가
• 그 행동을 하는 단추나 연락처가 첫 화면에서 바로 보이는가

목적이 둘 이상이라면 한 화면에 모두 넣지 말고 쪽을 나눕니다.
소개와 채용이 모두 필요하면 첫 화면은 소개에 맞추고 채용은 별도의 쪽으로 둡니다.

회사가 하는 일을 한두 문장으로 먼저 말해 보세요.
우리에게 당연한 업계 용어는 방문자에게 낯설 수 있어서,
거래처나 가족에게 그 문장을 들려주고 무슨 일을 하는 곳이냐고 되묻는 것만으로 고칠 곳이 보입니다.
이 문장이 정리되어야 이후의 메뉴 이름과 원고가 흔들리지 않습니다.

메뉴와 원고,
사진은 어떻게 준비하나요?

메뉴는 소개·하는 일·오시는 길·문의 네 가지로 시작하고,
각 쪽에 들어갈 원고와 사진을 먼저 모아 둡니다.
비어 있는 메뉴는 두지 말고 자료가 생길 때 하나씩 늘립니다.

원고는 한꺼번에 완성하려 하지 말고 쪽마다 소제목 세 개 안팎으로 나누어 씁니다.
작은 화면에서도 읽기 쉽고 나중에 고칠 곳을 찾기도 쉽습니다.

쓰는 순서는 방문자가 가장 먼저 묻는 것부터입니다.
무슨 일을 하는 곳인지,
어디에 있는지,
어떻게 연락하는지를 먼저 쓰고 연혁이나 인사말은 뒤로 미뤄도 됩니다.
회사 정보는 사업자등록증과 맞춰 한 번에 모아 두세요.
상호,
대표자,
주소,
전화,
사업자등록번호,
영업시간이 쪽마다 다르게 적히면 방문자가 믿기 어렵습니다.

• 사진은 직접 찍었거나 사용 허락을 받은 것만 모으고,
  출처와 허락 여부를 적어 둡니다.
  저작권법을 어기는 이미지는 공개한 뒤 문제가 됩니다.
• 사람이 나오는 사진은 본인의 동의를 받아 두고,
  어려우면 사람이 드러나지 않는 사진으로 바꿉니다.
• 로고는 배경이 투명한 파일이나 벡터 원본을 구해 두면 크기를 바꿔도 깨지지 않습니다.
• 이름이나 연락처를 문의 양식으로 받는다면 개인정보 보호법에 따라 처리방침을 공개해야 하는지 확인합니다.

준비물 가운데 가장 자주 비는 것은 소개 문장과 사진입니다.
회사가 어떤 일을 잘하는지는 담당자만 알기 때문이니,
준비 목록의 맨 위에 이 두 가지를 올려 두세요.

직접 만들까요,
도구를 쓸까요,
맡길까요?

직접 만들지,
도구를 쓸지,
맡길지는 쓸 수 있는 시간과 공개 뒤 고치는 빈도로 정하면 됩니다.
직접 만들면 시간이 들고,
맡기면 시간은 줄지만 범위와 수정 조건을 계약으로 정해야 합니다.

가입형은 서비스에 가입하면 바로 시작할 수 있지만 그 서비스가 정한 틀 안에서만 움직입니다.
설치형은 내가 마련한 서버에 프로그램을 설치하는 방식이라 자유롭지만 도메인과 호스팅 준비,
업데이트,
백업을 내가 맡습니다.
워드프레스가 설치형의 대표적인 예입니다.

AI로 초안을 만들면 구성안과 문장을 빨리 얻을 수 있습니다.
다만 회사 이름,
주소,
연락처,
하는 일 같은 사실은 AI가 모르거나 틀리게 적을 수 있으니 올리기 전에 사람이 하나씩 대조해야 합니다.

• 회사 이름,
  주소,
  전화,
  사업자등록번호,
  영업시간을 사업자등록증과 대조했는가
• 서비스 설명에 우리가 하지 않는 일이나 확인되지 않은 실적이 들어 있지 않은가
• 사진과 문장의 출처,
  사용 허락을 확인했는가
• 휴대폰과 PC에서 끝까지 눌러 보았는가

선택 기준은 쓸 수 있는 시간,
공개 뒤 고치는 빈도,
필요한 기능의 복잡도,
관리를 맡을 사람의 유무 네 가지면 충분합니다.
업체를 평가하는 질문과 계약서 확인 항목은 제작업체 선택 안내에서,
금액 구조는 비용 안내에서 이어서 확인하세요.

공개 전에 PC와 모바일에서 무엇을 확인하나요?

공개 전에는 휴대폰과 PC 두 화면에서 글 잘림,
가로 스크롤,
연락처 단추 동작,
링크 오류를 확인합니다.

• 글자가 잘리거나 겹치는 곳이 없는지 봅니다.
• 화면이 좌우로 밀리는 가로 스크롤이 없는지 봅니다.
• 전화 단추를 누르면 전화 앱이 열리는지 봅니다.
• 오시는 길의 지도가 휴대폰에서도 보이는지 봅니다.
• 사진이 늦게 뜨거나 비율이 깨지지 않는지 봅니다.
• 링크를 눌러 없는 쪽으로 가는 곳이 없는지 봅니다.
• 처음 보는 사람에게 휴대폰으로 보여 주고,
  무슨 일을 하는 곳인지 말해 보게 합니다.

마지막 항목은 만든 사람이 아닌 사람에게 맡기는 편이 좋습니다.
만든 사람은 어디를 눌러야 하는지 이미 알고 있어서 방문자가 헤매는 곳을 놓치기 쉽습니다.

이 글이 실린 공개 사이트도 모든 쪽의 머리말에 화면 너비를 알리는 설정을 넣어 둡니다.
폭별 점검 방법은 반응형 확인 기준 안내에서 따로 다룹니다.

도메인은 어떻게 연결하고 공개하나요?

도메인은 등록한 뒤 DNS에 홈페이지가 있는 서버 주소를 적어 연결하며,
연결이 확인되면 공개됩니다.
도메인은 주소의 이름이고,
호스팅은 홈페이지 파일을 올려 두는 서버이며,
DNS는 둘을 이어 주는 목록입니다.

1. 도메인 확인이미 등록한 도메인이 있는지,
   갱신일과 관리자가 누구인지 확인합니다.
2. 호스팅 준비파일이 올라갈 서버가 준비되었는지,
   도메인을 연결할 수 있는지 확인합니다.
3. DNS 입력도메인 관리 화면에 서버가 알려 준 값을 A 또는 CNAME 기록으로 입력합니다.
4. 접속 확인시간이 지난 뒤 주소창에 회사 주소를 넣어 홈페이지가 열리는지 봅니다.
5. https 확인주소 앞이 https로 열리고 보안 경고가 나오지 않는지 확인합니다.

도메인과 호스팅을 고를 때는 첫 결제 금액보다 아래 다섯 가지를 먼저 봅니다.
한 번 정하면 옮기기 번거로워서 처음에 따져 두는 편이 덜 힘듭니다.

• 갱신할 때의 요금이 처음 결제한 금액과 얼마나 다른지 적혀 있는가
• 등록자 명의가 회사나 대표 본인으로 되어 있고,
  관리자 계정을 회사가 가지고 있는가
• 갱신 안내가 담당자의 메일로 오는가
• 백업과 한국어 고객 지원이 있는가
• 회사 메일을 쓰고 있다면 메일 설정을 건드리지 않고 홈페이지 값만 바꿀 수 있는가

도메인 명의는 나중에 제작자나 업체를 바꿀 때 문제가 되기 쉬우니 구입할 때부터 회사 이름으로 등록해 두세요.

회사 도메인으로 메일을 이미 쓰고 있다면 웹사이트 연결과 메일 설정이 서로 다른 일이라는 점을 기억하세요.
새 홈페이지를 연결해도 메일 쪽 DNS 기록(MX·SPF 등)은 지우지 않고 그대로 둡니다.
적용한 뒤에는 사이트 접속과 메일 주고받기를 모두 확인합니다.

화면은 등록기관마다 모양이 다르므로 이 글은 일반 원리로 읽고 실제 입력은 등록기관의 안내를 따르세요.
옛 주소에서 새 주소로 옮기는 처리는 리뉴얼 안내에서 다룹니다.

검색에 나오게 하려면 무엇을 하나요?

검색에 나오게 하려면 사이트를 검색 서비스에 등록하고 사이트맵을 제출한 뒤 수집되기를 기다려야 합니다.
공개했다고 해서 바로 검색에 나오지는 않습니다.

쪽마다 그 쪽이 무엇을 다루는지 알려 주는 제목과 소개 문장을 따로 씁니다.
네이버 서치어드바이저와 구글 서치 콘솔에서 사이트 소유를 확인하고 사이트맵을 제출하는 것이 기본 절차입니다.
화면과 절차는 공개 시점의 안내를 따르세요.

이 글이 실린 공개 사이트는 sitemap.xml,
robots.txt,
llms.txt,
rss.xml을 두고 쪽마다 대표 주소와 언어 표시를 냅니다.
검색 서비스가 읽을 길을 열어 둘 뿐 순위를 약속하는 것은 아닙니다.

네이버 블로그를 이미 쓰고 있어도 홈페이지는 따로 필요할 수 있습니다.
블로그는 글을 꾸준히 올려 검색에 닿는 데 맞고,
홈페이지는 회사 소개와 서비스,
연락처를 한곳에 모아 두는 데 맞아 역할이 다릅니다.
블로그 글 끝에 홈페이지 주소를 안내하고 홈페이지에서 블로그로 이어 주면 서로 보완합니다.

• 공개 뒤 내용을 고칠 담당자를 정해 둡니다.
• 문의가 정한 메일로 도착하는지 주기를 정해 확인합니다.
• 도메인과 호스팅의 갱신일을 달력에 적어 두고,
  고치기 전에는 백업부터 받아 둡니다.
• 영업시간이나 연락처,
  오시는 길이 바뀌면 바로 고칩니다.
• 등록한 사이트맵이 제대로 수집되는지 가끔 들여다봅니다.
• 개인정보와 사업자 정보 표시는 디자인 안내에서 확인합니다.

기다리는 동안에는 대표 주소와 내부 링크,
사이트맵이 같은 공개 쪽을 가리키는지 점검하는 데 집중하세요.

인사책에서 만들면 이 순서가 어떻게 달라지나요?

인사책 홈페이지 제작은 회사가 입력 화면에서 소개와 참고 홈페이지를 알려 주면 운영사가 시안을 만드는 순서입니다.
위 일곱 단계 가운데 목적 정하기와 원고·사진 준비는 여전히 회사의 몫이고,
입력 화면이 그 준비물을 칸마다 묻습니다.

도메인 연결과 공개,
검색 등록을 누가 맡는지는 이 글에서 정해 말하지 않습니다.
이 상품은 일곱 단계 가운데 일부를 대신할 뿐 모든 단계를 약속하지 않으니 주문 뒤 안내를 확인하세요.
아래 표는 이 글의 사실 요약입니다.

직접 해 보면 — 입력 칸을 준비물 점검표로 쓰기

결제를 마치면 나오는 내용 입력 화면은 위에서 아래로 준비물을 한 칸씩 묻습니다.
칸마다 손에 들고 있어야 할 것이 분명하니 주문 전에 점검표처럼 써 보세요.

1. 회사 정보 여섯 칸이름,
   대표,
   주소,
   전화,
   사업자번호는 이미 들어와 있으니 사업자등록증과 맞춰 보고,
   비어 있는 영업시간은 직접 적습니다.
2. 한 줄 소개80자까지 쓰는 칸입니다.
   준비해 둔 하는 일 문장 가운데 가장 짧은 것을 옮겨 적으면 됩니다.
3. 하는 일주력 서비스나 취급 품목을 칩으로 하나씩 넣는 칸이며,
   최대 8개까지 넣고 칩마다 30자까지 씁니다.
4. 문의 받을 메일과 제작 담당자문의 받을 메일을 고르고,
   시안과 수정 연락을 받을 담당자의 이름과 휴대폰,
   연락받기 편한 때를 정합니다.
   담당자는 다른 직원으로 바꿀 수 있습니다.
5. 참고할 홈페이지마음에 드는 사이트의 주소를 최소 1개에서 3개까지 넣는 칸입니다.
   한 개도 없으면 내용을 보낼 수 없으니 주문 전에 하나 골라 메모해 두세요.
6. 로고와 사진선택 칸이며 사진은 3장까지 올립니다.
   사용 허락이 있는 파일인지 먼저 확인합니다.
7. 디자인과 분위기기본형은 준비된 디자인 중에서 고르고,
   고급형과 프리미엄형은 원하는 분위기를 글로 적습니다.
8. 나중에 쓸게요정하기 어려운 칸은 「나중에 쓸게요」로 넘어가 두고,
   정리한 뒤 다시 들어와 이어서 채웁니다.

이 화면은 일곱 단계 중 2단계의 점검표로 알맞습니다.
내용을 보내면 진행 중인 주문 표의 상태가 「입력 기다림」에서 「시안 준비 중」으로 바뀌고,
운영사가 시안을 보내면 「시안 보냄」으로 바뀝니다.
예약·결제·회원 기능이 필요하면 맞춤형 상담으로 범위를 정합니다.
단계별 구성과 주문 방법은 홈페이지 제작 안내에서 봅니다.

• 홈페이지 제작 안내
• 홈페이지 제작 비용은 어디에 드나요
• 홈페이지 제작업체를 선택하기 전 확인할 것
• 반응형 홈페이지의 화면별 확인 기준