도메인과 호스팅 차이 쉽게 정리
도메인을 샀는데 이것만으로 사이트가 열리는지, 호스팅과 무엇이 다른지 헷갈리는 상황
- 문제 상황 확인
- 짧은 코드로 재현
- 브라우저에서 결과 점검
도메인과 호스팅 차이에서 먼저 볼 부분
도메인은 주소이고 호스팅은 사이트 파일이 놓이는 공간입니다. DNS는 주소가 어느 공간을 가리킬지 연결해줍니다.
도메인은 사람이 기억하기 쉬운 주소입니다. ag-fe.com처럼 입력하면 브라우저가 실제 서버 위치를 찾아가야 합니다.
호스팅은 사이트 파일을 제공하는 공간입니다. GitHub Pages, Cloudflare Pages, Netlify, Vercel 등이 정적 사이트 호스팅 역할을 할 수 있습니다.
DNS는 도메인과 호스팅을 이어주는 안내판입니다. A, CNAME, Worker 라우트 같은 설정이 여기에서 사용됩니다.
DNS 흐름 예시
ag-fe.com
-> DNS 레코드 확인
-> Cloudflare Worker 또는 Pages
-> HTML/CSS/JavaScript 응답이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.
도메인과 호스팅 차이 쉽게 정리 비교 기준
| 구분 | 역할 | 예시 |
| 도메인 | 주소 | ag-fe.com |
| 호스팅 | 파일 제공 공간 | Cloudflare Pages |
| DNS | 주소 연결 설정 | CNAME, A 레코드 |
잘못 작성했을 때 나타나는 흐름
웹 기초 글은 브라우저, 도메인, 서버, 배포 서비스가 각각 어떤 역할을 하는지 나누어 보는 것이 중요합니다.
주소가 열리지 않을 때는 코드보다 DNS, SSL, 리디렉션, 배포 상태를 먼저 확인해야 할 때가 많습니다.
정적 사이트 운영에서는 사용자가 보는 주소와 검색엔진이 보는 대표 주소를 하나로 맞추는 것이 신뢰도에 도움이 됩니다.
브라우저에서 직접 확인하는 순서
먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.
초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.
실습 후 점검할 항목
- 도메인만 사고 호스팅을 연결했는지 확인하기
- DNS 레코드가 어디를 가리키는지 확인하기
- www 주소도 연결할지 결정하기
- HTTPS 인증서가 정상인지 확인하기