정적 웹 페이지
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
정적 웹 페이지는 서버에서 미리 생성된 HTML 파일을 전송하는 웹 페이지로, 동적 웹 페이지에 비해 보안, 성능, 비용 절감, 안정성 및 확장성 측면에서 장점을 가진다. 하지만 사용자 상호 작용과 개인화된 콘텐츠 제공 등 동적 기능을 구현하기 어렵고, 콘텐츠 업데이트 시 HTML 파일을 직접 수정하거나 정적 사이트 생성기를 다시 실행해야 하는 단점이 있다. 정적 사이트 생성기는 마크다운이나 AsciiDoc과 같은 형식으로 제공된 콘텐츠를 사용하여 HTML 템플릿을 채워 정적 웹 사이트를 컴파일하는 애플리케이션으로, 지킬, 휴고, Next.js, 11ty 등이 있다.
정적 웹 페이지는 웹 초기부터 존재해 온 가장 기본적인 형태의 웹 페이지이다. 초기의 웹 페이지는 HTML로 작성되어 파일 시스템에 파일 형태로 저장되었으며, HTTP를 통해 웹 서버에서 제공되었다.[13] 그러나 ".html"로 끝나는 URL이라고 해서 모두 정적 웹 페이지인 것은 아니다. 넓은 의미에서는 데이터베이스에 저장된 웹 페이지도 변경 없이 저장된 그대로 제공된다면 정적 웹 페이지에 포함될 수 있다.
정적 웹 페이지는 HTML 문서로 파일 시스템에 파일 형태로 저장되며, HTTP를 통해 웹 서버에서 이용할 수 있게 된다.[13] .html로 끝나는 URL이라고 해서 모두 정적 웹 페이지는 아니지만, 대체로 정적 웹 페이지는 파일 시스템에 저장된 HTML 문서이다.[4] 넓게 보면 데이터베이스에 저장된 웹 페이지나 템플릿을 통해 제공되는 페이지도 변경 없이 저장된 그대로 제공된다면 정적 웹 페이지로 볼 수 있다.
2. 역사
이러한 방식은 단순하고 안정적이었지만, 내용 수정이 어렵고 대규모 웹 사이트 관리에는 비효율적이라는 단점이 있었다. 2000년대 후반부터는 지킬과 같은 정적 사이트 생성기가 등장하면서 정적 웹 페이지 제작 방식에 변화가 생겼다.
2. 1. 초기 웹
HTML로 작성된 정적 웹 페이지는[13] 파일 시스템에 파일 형태로 저장되며, HTTP를 통해 웹 서버에서 제공된다.[4] 그러나 ".html"로 끝나는 URL이라고 해서 모두 정적 웹 페이지인 것은 아니다. 넓은 의미에서는 데이터베이스에 저장된 웹 페이지도 변경 없이 저장된 그대로 제공된다면 정적 웹 페이지에 포함될 수 있다.
정적 웹 페이지는 내용이 거의 변하지 않거나, 업데이트가 거의 필요 없는 경우에 적합하다. 그러나 최근에는 정적 사이트 생성기와 같은 자동화 도구의 발전으로 이러한 상황이 변화하고 있다. 많은 수의 정적 페이지를 파일로 관리하는 것은 자동화 도구 없이는 비현실적이기 때문이다. 정적 페이지를 관리하는 다른 방법으로는 GatsbyJS와 같은 온라인 컴파일 소스 코드 플레이그라운드를 이용하거나, 깃허브를 사용하여 워드프레스 사이트를 정적 웹 페이지로 변환하는 방법 등이 있다.[14][5] 개인화 또는 상호작용 기능은 클라이언트 측에서 실행되어야 하므로 제한적이다.[15][6]
2. 2. 정적 사이트 생성기의 등장
2000년대 후반부터 루비 기반의 지킬(깃허브 페이지 지원)을 시작으로 다양한 정적 사이트 생성기가 등장하면서 정적 웹 페이지 제작 방식에 변화가 생겼다.[14] 정적 사이트 생성기를 이용하면 마크다운 등 간편한 형식으로 콘텐츠를 작성하고, 이를 HTML로 자동 변환하여 정적 웹 페이지를 쉽게 생성하고 관리할 수 있다.
3. 장점
정적 웹 페이지는 내용이 자주 바뀌지 않는 경우에 적합하지만, 최근에는 정적 사이트 생성기의 발전으로 이러한 경향이 바뀌고 있다. 많은 수의 정적 페이지를 관리하는 것은 자동화 도구 없이는 어렵다. GatsbyJS 같은 온라인 실행 환경이나 깃허브를 이용하여 워드프레스 사이트를 정적 웹 페이지로 가져오는 방법도 있다.[14] 개인화나 상호작용은 클라이언트 측에서 실행되어야 하므로 제한적이다.[15]
정적 웹 사이트는 동적 웹 사이트에 비해 보안, 성능, 비용 절감, 안정성 및 확장성 측면에서 장점을 가진다.
3. 1. 보안
정적 웹 페이지는 서버 측 코드가 실행되지 않으므로 웹 셸 공격 등 서버 측 공격에 대한 취약점이 적어 동적 웹사이트에 비해 높은 보안성을 제공한다.[7] 이는 특히 민감한 정보를 다루거나 보안이 중요한 웹사이트에서 큰 장점으로 작용한다. 보안 구성을 쉽게 설정할 수 있다는 점도 장점이다.
3. 2. 성능
정적 웹 페이지는 서버에서 별도의 처리 과정 없이 미리 생성된 HTML 파일을 전송하므로, 동적 웹 페이지에 비해 최종 사용자에게 성능이 향상된다.[8] 이는 빠른 로딩 속도로 이어져 사용자 경험(UX)을 향상시키고, 검색 엔진 최적화(SEO)에도 유리하게 작용한다. 또한, 데이터베이스 또는 다른 애플리케이션 서버와 같은 시스템에 대한 종속성이 적거나 없다.[9]
3. 3. 비용 절감
데이터베이스나 애플리케이션 서버와 같은 시스템에 대한 종속성이 적거나 없어 호스팅 비용이 저렴하며,[9] 클라우드 스토리지를 활용하면 비용을 더욱 절감할 수 있다.[10]
3. 4. 안정성 및 확장성
정적 웹 페이지는 서버 부하가 적어 안정적이며, 동적 웹사이트에 비해 향상된 보안을 제공한다.[7] 데이터베이스 관리 시스템이나 애플리케이션 서버 등의 시스템에 대한 종속성이 적거나 없어[9] 트래픽 증가에 따른 확장도 용이하다. 또한, 클라우드 스토리지를 활용하여 호스팅 비용을 절감할 수 있다.[10] 보안 구성을 쉽게 설정할 수 있어 더 안전하다는 장점도 있다.
4. 단점
정적 웹 페이지는 몇 가지 단점을 가지고 있는데, 이는 주로 동적 기능 구현의 제약과 관련된다.
정적 웹 페이지는 .html로 끝나는 URL이라고 해서 반드시 정적 파일이라고 할 수는 없지만, 대부분 파일 시스템에 파일로 저장된 HTML 문서이다.[4] 광의의 해석으로는 데이터베이스에 저장된 웹 페이지나, 템플릿으로 포맷되어 애플리케이션 서버에서 제공되는 페이지도 정적 웹 페이지에 포함될 수 있다. 단, 해당 페이지가 변경되지 않고 본질적으로 저장된 데이터 그대로 제공되는 경우에 한한다.
정적 웹 페이지는 콘텐츠가 변경되지 않거나 변경되더라도 드문 경우에 적합하지만, 최신 웹 템플릿 시스템은 이러한 상황을 변화시키고 있다. 다수의 정적 페이지를 정적 사이트 생성기와 같은 자동화 도구 없이 관리하는 것은 현실적이지 않다.
4. 1. 동적 기능 구현의 어려움
정적 웹 페이지에서 사용자 상호 작용, 개인화된 콘텐츠 제공과 같은 동적 기능은 클라이언트 측(예: JavaScript)에서 구현해야 하므로, 구현이 복잡하거나 불가능할 수 있다.[15] 댓글, 사용자 로그인, 검색 등의 기능은 Disqus, Firebase 등 외부 서비스를 연동하여 구현해야 하는 경우가 많다.[6]4. 2. 콘텐츠 업데이트의 번거로움
정적 웹 페이지는 콘텐츠를 수정하거나 새로운 콘텐츠를 추가할 때마다 HTML 파일을 직접 수정하거나 정적 사이트 생성기를 다시 실행해야 한다. 따라서 콘텐츠 업데이트가 빈번한 경우에는 불편할 수 있다.[14]5. 정적 사이트 생성기
정적 사이트 생성기(Static Site Generator, SSG)는 마크다운 등의 형식으로 작성된 콘텐츠와 템플릿을 결합하여 정적 웹 페이지를 자동으로 생성해주는 도구이다. 수많은 정적 페이지들을 파일로 관리하는 일은 정적 사이트 생성기와 같은 자동화된 도구 없이는 비현실적이다.[14] 모든 개인화 또는 상호작용은 제한적이지만 클라이언트 측에서 실행되어야 한다.[15] 정적 페이지를 관리하는 또다른 방법에는 온라인 컴파일 소스 코드 플레이그라운드를 포함하는 것이며, 이를테면 GatsbyJS, 깃허브를 사용하여 워드프레스 사이트를 정적인 웹 페이지로 이관할 수 있다.[14]
지킬(깃허브 페이지 지원), 휴고, Next.js, Astro.build, Pelican, Franklin등은 대표적인 정적 사이트 생성기들이다.
5. 1. 주요 정적 사이트 생성기
정적 사이트 생성기는 마크다운이나 AsciiDoc과 같은 형식으로 작성된 콘텐츠를 사용하여 미리 정의된 HTML 템플릿을 채워 정적 웹 사이트를 만드는 애플리케이션이다.다양한 프로그래밍 언어를 기반으로 하는 여러 정적 사이트 생성기가 존재한다. 다음은 그 예시이다.
5. 1. 1. [[지킬 (소프트웨어)|지킬]] (Jekyll)
루비 프로그래밍 언어 기반의 정적 사이트 생성기로, 깃허브 페이지에서 기본으로 지원한다.[14]5. 1. 2. [[휴고 (소프트웨어)|휴고]] (Hugo)
Go 프로그래밍 언어로 만들어진 정적 사이트 생성기이다. 빠른 빌드 속도가 장점이다.[14]5. 1. 3. [[Next.js]]
Next.js는 자바스크립트 기반의 리액트 프레임워크를 사용하는 정적 사이트 생성기이며, 서버 사이드 렌더링(SSR)도 지원한다.5. 1. 4. Gatsby
자바스크립트 기반이며, Next.js, Astro.build와 함께 정적 사이트 생성기의 예시로 언급된다.[14]5. 1. 5. 11ty (Eleventy)
11ty(일레븐티)는 자바스크립트 기반의 정적 사이트 생성기로, 단순함과 유연성을 강조한다.6. 한국에서의 활용
한국에서 정적 웹 페이지는 초기에 단순한 정보를 보여주는 웹사이트에 주로 쓰였다. 그러나 최근에는 기술이 발전하면서 활용 범위가 점차 넓어지고 있다.
6. 1. 개인 및 기업
정적 웹 페이지는 HTML 문서이며[13] 파일 시스템의 파일로 저장되어 HTTP를 통해 웹 서버에서 이용할 수 있다. 모든 개인화나 상호작용은 제한적이지만 클라이언트 측에서 실행된다.[15]웹 템플릿 시스템에 기술된 "정적 사이트 생성기"와 같은 자동화된 도구 없이는 수많은 정적 페이지를 파일로 관리하는 것은 비현실적이다. 정적 페이지 관리의 다른 방법으로는 온라인 컴파일 소스 코드 플레이그라운드가 있으며, GatsbyJS, 깃허브를 사용하여 워드프레스 사이트를 정적 웹 페이지로 이관할 수 있다.[14]
참조
[1]
웹사이트
The Difference Between Dynamic & Static Web Pages
https://smallbusines[...]
2018-08-10
[2]
웹사이트
Definition of: dynamic Web page
https://www.pcmag.co[...]
2019-03-20
[3]
웹사이트
Site statique ou dynamique
http://www.morphemze[...]
2019-07-27
[4]
뉴스
What is a Static Web Page? - Definition from Techopedia
https://www.techoped[...]
2018-11-04
[5]
웹사이트
The End of an Era: Migrating from WordPress to Gatsby
https://www.taniaras[...]
2019-03-14
[6]
웹사이트
An Introduction to Static Site Generators
https://davidwalsh.n[...]
2015-05-20
[7]
웹사이트
Why use a static site generator? - Jekyll Tips
http://jekyll.tips/j[...]
2017-02-06
[8]
뉴스
Why Static Website Generators Are The Next Big Thing – Smashing Magazine
https://www.smashing[...]
2017-02-17
[9]
웹사이트
An Introduction to Static Site Generators
https://davidwalsh.n[...]
2015-05-20
[10]
웹사이트
Static vs Dynamic Websites: Pros and Cons
https://wsvincent.co[...]
2018-10-09
[11]
웹인용
The Difference Between Dynamic & Static Web Pages
https://smallbusines[...]
2018-08-10
[12]
웹인용
Definition of: dynamic Web page
https://www.pcmag.co[...]
2019-03-20
[13]
뉴스
What is a Static Web Page? - Definition from Techopedia
https://www.techoped[...]
2018-11-04
[14]
웹인용
The End of an Era: Migrating from WordPress to Gatsby
https://www.taniaras[...]
2019-03-14
[15]
웹인용
An Introduction to Static Site Generators
https://davidwalsh.n[...]
2015-05-20
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com