정적 사이트와 동적 사이트 차이

정적 사이트와 동적 사이트 차이에서 먼저 볼 부분

정적 사이트는 미리 만들어진 파일을 그대로 보여주고, 동적 사이트는 요청에 따라 서버가 내용을 만들어 응답합니다.

정적 사이트는 HTML, CSS, JavaScript 파일을 서버에 올려두고 그대로 전달합니다. 블로그, 소개 페이지, 문서 사이트처럼 내용이 자주 변하지 않는 곳에 잘 맞습니다.

동적 사이트는 로그인 사용자, 검색 조건, 장바구니 상태처럼 매번 달라지는 정보를 서버가 처리합니다. 데이터베이스와 서버 로직이 함께 필요할 때가 많습니다.

처음 웹 배포를 배울 때는 정적 사이트부터 시작하는 것이 좋습니다. 구조가 단순하고 배포 실패 원인을 찾기 쉽기 때문입니다.

정적 페이지 예시

<!-- 정적 사이트는 이 HTML 파일이 그대로 전달됩니다. -->
<h1>AG FE Guide</h1>
<p>프론트엔드 입문 글을 모아둔 블로그입니다.</p>

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

정적 사이트와 동적 사이트 차이 비교 기준

잘못 작성했을 때 나타나는 흐름

웹 기초 글은 브라우저, 도메인, 서버, 배포 서비스가 각각 어떤 역할을 하는지 나누어 보는 것이 중요합니다.

주소가 열리지 않을 때는 코드보다 DNS, SSL, 리디렉션, 배포 상태를 먼저 확인해야 할 때가 많습니다.

정적 사이트 운영에서는 사용자가 보는 주소와 검색엔진이 보는 대표 주소를 하나로 맞추는 것이 신뢰도에 도움이 됩니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 로그인이나 개인화가 필요한지 확인하기
• 내용이 자주 바뀌는지 확인하기
• 처음 배포라면 정적 사이트부터 시도하기
• 도메인과 호스팅 연결 방식을 구분하기