정적 vs 동적 웹사이트: 포괄적인 비교 – techsyncer

많은 사람들이 웹사이트를 생각할 때, 정적 웹사이트와 동적 웹사이트의 개념은 들어오지 않습니다. 결국, 웹사이트는 그냥 나타나는 것이 맞지 않나요? 기술적으로는 그렇지만, 뒷단에서는 많은 일이 벌어집니다.

웹사이트를 만들거나 이전할 계획이 있는 사람에게는 이 두 가지 유형의 웹사이트를 알아야 합니다. 선택한 유형에 따라 개발자가 사이트를 관리하고 업데이트하는 방식 및 운영 및 유지보수 비용이 달라집니다.

이 기사에서는 정적 웹사이트와 동적 웹사이트의 차이점에 대해 알아보게 될 것입니다. 개발자가 정적 및 동적 사이트를 어떻게 만드는지, 브라우저가 어떻게 렌더링하는지 및 기타 유용한 비교를 볼 수 있을 것입니다.

정적 웹사이트와 동적 웹사이트란 무엇인가요?

이름에서 알 수 있듯이, 정적 웹사이트의 요소들은 고정되어 있거나 하드코딩되어 있습니다. 정적 웹사이트의 콘텐츠는 사용하는 브라우저에 상관없이 항상 동일합니다.

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

대부분의 정적 웹사이트는 정보성을 띠고 있습니다. 예를 들어 개인 블로그는 독자들에게 정보를 표시하기 위한 것입니다. 개인 블로그에서는 사용자가 일반적으로 사이트의 콘텐츠를 찾아보기만 합니다.

반대로, 동적 웹 사이트는 클라이언트 측 코드를 초월합니다. 궁극적으로 동적 웹 사이트는 정적 웹 사이트와 마찬가지로 HTML과 CSS에 기반을 둡니다. 그러나 동적 웹 사이트가 기능적으로 작동하려면 PHP, ASP.net, 또는 JavaScript와 같은 서버 측 언어가 필요합니다. 이러한 언어들은 동적으로 HTML 코드를 생성하기 위해 사용됩니다.

동적 웹 사이트는 CRUD라는 용어를 사용합니다. 이는 생성(Create), 읽기(Read), 갱신(Update), 삭제(Delete)를 나타냅니다. CRUD는 데이터베이스에 대해 수행되는 작업을 나타냅니다. 동적 웹 사이트가 데이터베이스를 사용한다고 추측한 것이 맞다면, 정확히 맞춘 것입니다!

웹 사이트 렌더링의 차이

웹 서버는 정적 및 동적 웹 사이트를 어떻게 사용자의 브라우저로 전달하는 걸까요?

정적 웹 사이트는 웹 서버에서 코드를 정확히 전달합니다.

정적 웹 사이트는 선택적으로 CSS와 JS 파일이 포함된 하드 코딩된 HTML 문서를 포함합니다. 웹 서버에 업로드하는 코드가 사용자가 웹 사이트를 브라우징하는 동안 제공되는 정확한 코드입니다.

예를 들어, 아래는 Visual Studio Code에서 작성된 샘플 정적 웹사이트 프로젝트입니다. 이 정적 웹사이트의 홈페이지에는 헤더와 버튼만 표시됩니다.

이 간단한 웹페이지에서 버튼을 클릭하면 단어가 나타납니다.

Static Website Project in Visual Studio Code

아래는 정적 웹사이트의 홈페이지인 index.html 파일의 코드입니다.

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

다음은 style.css 파일의 코드입니다. 이 CSS 파일은 브라우저에서 홈페이지 요소가 어떻게 나타나는지를 정의합니다.

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

마지막으로, button.js 파일의 코드입니다. 이 파일에는 독자가 버튼을 클릭할 때 브라우저에서 동작할 JavaScript 코드가 포함되어 있습니다.

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

정적 웹사이트가 준비되었다고 가정하면, 아래 데모는 실제로 나타나는 화면입니다. 그리고 페이지 소스 코드를 열면, 페이지의 코드가 index.html 파일의 소스 코드와 정확히 일치하는 것을 확인할 수 있습니다.

참고: 이 정적 웹사이트 예제는 Visual Studio Code의 HTTP Server / HTML Preview 확장을 사용하여 테스트되었습니다.

위의 데모에서 볼 수 있듯이 사용자가 버튼을 클릭하여 페이지와 상호 작용하더라도 기본 코드는 변경되지 않습니다. 이것이 정적 웹 사이트의 동작 방식입니다. 브라우저가 모든 것을 처리합니다.

동적 웹 사이트는 먼저 데이터베이스를 읽습니다.

정적 웹 사이트와 달리 동적 웹 사이트는 서버 측 처리를 사용하여 코드를 생성합니다. 이는 페이지의 기본 코드가 디자인에 따라 언제든지 변경될 수 있다는 것을 의미합니다.

예를 들어 아래에는 하나의 JavaScript 파일만 포함된 Node.js 동적 웹 사이트 프로젝트가 있습니다.

Dynamic Website Project in Visual Studio Code

dynamicsite.js의 코드는 페이지가 로드될 때마다 현재 컴퓨터 시간을 표시하는 서버 측 스크립트입니다.

 // dynamicsite.js 
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

아래의 데모에서는 동적 웹 사이트가 어떻게 표시되는지 보여줍니다. 페이지가 새로 고쳐질 때마다 기반이 되는 HTML 코드가 변경됩니다.

참고: 이 동적 웹 사이트 예제는 Node.js를 사용하여 테스트되었습니다.

이것이 동적 웹 사이트가 내부에서 어떻게 작동하는지에 대한 기본적인 예입니다.

정적 대 동적 웹 사이트: 콘텐츠는 어떻게 관리되나요?

이제 정적 및 동적 웹 사이트가 렌더링되고 제공되는 방식을 알게 되었습니다. 그렇다면 콘텐츠를 추가, 업데이트 또는 삭제하는 방법은 어떨까요? 예를 들어 정적 개인 블로그 웹 사이트에 새로운 게시물을 추가하는 방법은 무엇인가요? 동적 전자 상거래 사이트에서 목록에 새로운 제품을 추가하는 방법은 무엇인가요?

웹 사이트의 유형에 따라 웹 사이트 콘텐츠를 관리하는 방법이 결정됩니다. 아래는 콘텐츠 관리에 대한 일반적인 옵션입니다.

정적 페이지의 하드 코딩

웹 사이트나 콘텐츠를 업데이트해야 할 때마다 코드를 변경해야 합니다. 기본적이고 아마도 가장 오래된 방법은 하드 코딩입니다. 이 방법은 텍스트 편집기를 사용하여 사이트의 소스 코드를 편집하는 것을 포함합니다.

이 방법은 모든 웹 사이트의 각 부분을 수동으로 코드로 작성해야 하므로 가장 번거롭고 시간이 많이 소요되는 방법일 수 있습니다. 그러나 이로 인해 정적 웹 사이트는 모든 페이지를 다르게 설계할 수 있는 유연성을 갖게 됩니다.

일부 디자인과 기능이 간단한 웹 사이트는 콘텐츠를 Markdown으로 작성한 다음, 이러한 Markdown 문서를 HTML로 변환하여 웹 페이지를 생성할 수 있습니다. 이렇게 생성된 웹 페이지는 웹 서버에 업로드할 수 있습니다.

예를 들어, 아래의 정적 웹 사이트는 index.html, page1.html 및 page2.html 세 개의 페이지로 구성되어 있습니다. 이 파일들은 한 개의 정적 웹 사이트의 일부이지만, 서로 다른 디자인 또는 테마를 가지도록 작성되었습니다.

Example of a static website with different page themes

정적 웹 사이트 생성기

수동으로 코드를 작성하는 대신, 정적 웹 사이트 생성기는 처음부터 전체 정적 웹 사이트를 생성하거나 보일러플레이트 템플릿을 사용하여 생성할 수 있는 기능을 제공합니다. 새로운 게시물이나 페이지는 일반적으로 Markdown으로 작성되며, 웹 사이트 빌드 프로세스 중에 HTML 파일이 생성됩니다.

그 결과로 생성된 파일은 웹 서버에 업로드되어 웹 사이트가 구동될 수 있습니다. 일부 정적 웹 사이트 생성기에서는 HTML과 JSON과 같은 다른 형식으로 콘텐츠를 작성하는 것도 가능합니다.

다음은 탐색할 수 있는 일부 인기있는 정적 웹 사이트 생성기 목록입니다.

다음은 Jekyll을 사용하여 한 줄의 코드를 작성하지 않고 생성된 예제 웹 사이트입니다.

콘텐츠 관리 시스템(CMS)

이제까지 WordPress에 대해 들어 보았을 것입니다. Drupal, Joomla, 그리고 Netlify에 대해서는 어떠신가요? 이들은 가장 인기있는 콘텐츠 관리 시스템(CMS)의 이름입니다.

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

동적 웹 사이트는 일반적으로 CMS에 연결됩니다. 실제로 웹 호스팅 패키지를 구매하면 이미 마우스를 몇 번 클릭만으로 배포할 수 있는 웹 사이트 빌더와 CMS가 포함되어 있습니다. CMS가 동적 웹 사이트가 인기있는 선택의 이유일 것입니다.

정적 웹사이트는 CMS를 사용할 수도 있습니다. 예를 들어, Netlify는 Jekyll, Hugo, NextJS와 같은 정적 사이트 생성기와 통합 지원을 제공합니다. 이러한 플랫폼과 CMS 통합을 설정하는 것은 일반적으로 동적 웹사이트와 비교할 때 더 많은 작업이 필요합니다.

정적 웹사이트와 동적 웹사이트를 언제 사용해야 할까요?

당신이 고대의 질문인 “어떤 것이 더 나은가요?”에 대한 답을 궁금해 한다면, 계속 기다려야 합니다. 명확한 승자가 있을 가능성은 거의 없습니다. 동적 웹사이트와 정적 웹사이트 중 어느 것이 더 나은지는 요구 사항에 따라 주관적입니다.

웹사이트 유형을 선택할 때 고려해야 할 사항이 많이 있습니다. 아래는 고려해야 할 일부 요소입니다.

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

결론

이미 웹사이트를 소유하고 있다면, 이미 정적 웹사이트인지 동적 웹사이트인지 알고 있을 것입니다. 그렇지 않다면, 이 글에서 두 유형을 구분하는 방법을 배웠을 것입니다.

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

새로운 웹사이트를 구축하려는 경우, 선택은 주로 그 목적에 따라 달라질 것입니다. 예를 들어, 전자 상거래나 채용 웹사이트는 동적으로 구성하는 것이 더 나을 수 있습니다. 반면 블로그나 포트폴리오 웹사이트는 정적 웹사이트로도 충분할 것입니다.

정적 웹사이트는 모든 것이 시작되었고 아마도 영원히 사라지지 않을 것입니다. 특히 정적 사이트 생성기가 더 인기를 얻고 있는 지금은 더욱 그렇습니다. 동적 웹사이트는 계속해서 발전함에 따라 더욱 좋아질 것입니다.

추가 자료

정적 웹사이트와 동적 웹사이트에 대해 더 알고 싶다면 ATA의 다른 게시물을 꼭 확인해보세요.

Azure에 Cloudflare로 지원되는 정적 웹 사이트를 호스팅하는 방법