<div id="readability-page-1" class="page"><div>
<article>
<header>


</header>

<p>정적 웹 페이지(혹은 정적 웹 사이트)란, 웹 서버에서 사용자에게 정적인 파일을 그대로 내려주는 웹 페이지를 의미합니다. 주로 HTML, CSS, JavaScript 파일을 그대로 서빙하는 경우에 해당하며, 주로 동적인 웹 페이지와 상대되는 개념으로 사용됩니다.</p>
<nav>
<ul>
<li><a href="#%EC%A0%95%EC%A0%81-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%99%80-%EB%8F%99%EC%A0%81-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80">정적 웹 페이지와 동적 웹 페이지</a></li>
<li><a href="#%EB%8F%99%EC%A0%81-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B0%80-%EB%8D%94-%EC%A2%8B%EC%9D%80-%EA%B1%B0-%EC%95%84%EB%8B%8C%EA%B0%80%EC%9A%94">동적 웹 페이지가 더 좋은 거 아닌가요?</a></li>
<li><a href="#%EC%A0%95%EC%A0%81-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%EC%9A%B4%EC%98%81%ED%95%98%EB%A0%A4%EB%A9%B4-%EC%84%9C%EB%B2%84%EA%B0%80-%ED%95%84%EC%9A%94-%EC%97%86%EB%82%98%EC%9A%94">정적 웹 페이지를 운영하려면 서버가 필요 없나요?</a></li>
<li><a href="#%EC%A0%95%EC%A0%81-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80-%ED%98%B8%EC%8A%A4%ED%8C%85-%EC%84%9C%EB%B9%84%EC%8A%A4">정적 웹 페이지 호스팅 서비스</a></li>
</ul>
</nav>
<h2 id="정적-웹-페이지와-동적-웹-페이지">정적 웹 페이지와 동적 웹 페이지</h2>
<p>서버 프로그래밍 경험이 있다면, 동적 웹과 정적 웹 페이지 파일의 차이를 쉽게 이해할 수 있을 겁니다. 먼저 동적 페이지부터 알아보겠습니다. 동적 웹 서버에서는 특정 경로나 입력값을 바탕으로 동적으로 웹페이지를 <strong>동적으로 생성해서 반환</strong>해줍니다.</p>
<p>예를 들어 어떤 웹사이트에서 LainyZine으로 로그인을 하면, 웹 사이트는 “Hello, LainyZine!”과 같이 사용자 정보를 바탕으로 동적으로 생성된 웹 페이지를 사용자에게 반환합니다. 주로 웹 서버에서는 미리 준비한 템플릿에 다양한 정보들을 조합해서 HTML을 생성해서 반환합니다.</p>
<p><strong>정적 웹사이트는 어려운 개념이 아니라 이러한 HTML, CSS, JavaScript 등 웹 브라우저에서 필요한 파일들을 미리 만들어놓았다고 생각하면 간단합니다</strong>. 즉, 동적으로 웹 페이지를 생성해주는 서버가 필요 없습니다. 단지 미리 준비된 파일들을 전달할 뿐입니다.</p>
<h2 id="동적-웹-페이지가-더-좋은-거-아닌가요">동적 웹 페이지가 더 좋은 거 아닌가요?</h2>
<p>얼핏 보면 동적 웹페이지가 훨씬 유연하고 좋은 방법으로 보입니다. 하지만 이는 상대적으로 이해해야합니다.</p>
<p>동적 웹 서버는 관리하기 어려울 뿐만 아니라, 성능을 위해서 복잡한 캐시 전략을 세워야하는 등 다양한 어려움이 있습니다. 반대로 정적 웹사이트는 일단 만들어놓기만 하면 운영도 거의 필요 없을 뿐만 아니라, 동적 웹사이트에 비해서 아주 빠르게 호스팅할 수 있습니다.</p>
<p>동적으로 웹페이지를 만드는 웹 서버와 정적 웹 사이트 중 어느 쪽이 더 좋다는 건 아닙니다. 각각의 특징을 이해하고 필요에 따라서 활용하면 됩니다. 특히 개발자들 사이에서는 정적 웹 사이트로 블로그를 만드는 경우가 많이 있습니다. <strong>업데이트가 많이 필요하지 않은 개인 블로그 같은 경우 정적 웹 사이트로 활용하기에 적절한 경우라고 할 수 있습니다.</strong> 이외에도 오픈소스 프로젝트 웹사이트나 동적인 처리가 거의 없는 웹사이트를 만드는 데도 유용합니다.</p>
<p>또한 프론트엔드 개발과 JavaScript의 활용도가 높아지면서 백엔드에서 동적인 처리를 하는 웹 서버가 없이도 동적인 웹 사이트를 만드는 게 충분히 가능합니다.</p>
<h2 id="정적-웹-페이지를-운영하려면-서버가-필요-없나요">정적 웹 페이지를 운영하려면 서버가 필요 없나요?</h2>
<p>정적 웹 페이지를 운영할 때도 서버가 필요합니다. 이를 이해하기 위해서는 <strong>서버</strong>의 개념에 대해서 먼저 생각해볼 필요가 있습니다. 서버는 온라인(혹은 인터넷) 상에서 사용자의 요청을 받아 응답을 반환하는 역할을 하는 응용 애플리케이션입니다. 일반적으로 서버 개발이나 백엔드 서버 개발이라고 할 때 서버는 동적인 응답을 생성하는 서버를 의미합니다. 하지만 정적 웹 페이지를 만들 때도, <strong>미리 업로드된 파일을 그대로 전달하기 위한 서버가 필요합니다</strong>.</p>
<p>대신 정적인 파일만 전달하는 서버를 운영할 때는, 백엔드 개발과 같은 서버 사이드에서 추가적인 프로그래밍 작업은 필요하지 않습니다. 또한 동적인 처리를 하지 않기 때문에 매우 높은 가용성을 가지는 장점이 있습니다. 웹 서버로 유명한 Nginx를 기본 설정으로만 셋업해도, 개인 웹사이트 운영하는 정도는 전혀 문제가 없습니다.</p>
<h2 id="정적-웹-페이지-호스팅-서비스">정적 웹 페이지 호스팅 서비스</h2>


<p>정적 웹 페이지 호스팅을 제공하는 대표적인 서비스로는 <a href="https://pages.github.com/">GitHubp Pages</a>가 있습니다. GitHub 계정만 있다면 Git 저장소를 바로 웹 호스팅하는 것이 가능합니다. 별도의 서버를 준비할 필요도 없으며, 공개 저장소의 경우 무료로 사용할 수 있기 때문에 많은 인기를 얻고 있습니다. GitHub Pages를 사용하는 방법은 다음 글에서 자세하게 알아봅니다.</p>
<ul>
<li><a href="https://www.lainyzine.com/ko/article/how-to-publish-static-website-with-github-pages/">GitHub Pages로 무료 웹호스팅하는 방법</a></li>
</ul>
<p>그 외에도 정적 웹 페이지를 호스팅할 수 있는 다양한 서비스가 있습니다. 더 다양한 기능을 제공하는 <a href="https://netlify.app/">Netlify</a>, <a href="https://vercel.com/">Vercel</a>, <a href="https://pages.cloudflare.com/">CloudFlare Pages</a> 서비스들, 스토리지 기반의 <a href="https://aws.amazon.com/ko/s3/">Amazon S3</a>와 <a href="https://aws.amazon.com/ko/cloudfront/">CloudFront</a>, <a href="https://cloud.google.com/storage">Google Cloud Storage</a>도 있습니다. 서비스 별로 기능과 비용의 차이가 있습니다만, 정적 파일을 호스팅할 수 있다는 점에서는 모두 같습니다. 또한 외부 서비스를 이용하지 않고 인터넷에 연결된 서버에서 Nginx와 같은 서버를 직접 운영하는 방법도 있습니다.</p>


</article>
</div></div>

LZ: 프로그래머 가이드

LainyZine

정적 웹 페이지란 웹 서버에서 정적인 파일을 그대로 전달하는 웹 페이지를 의미합니다. 간단한 웹 사이트의 호스팅 뿐만 아니라 프론트엔드 개발에서도 많이 사용됩니다.
전체 기사는 이 링크에서 읽을 수 있습니다.

정적 웹 페이지(Static Web Page)란?

댓글