본문 바로가기

블로그

LG CNS 기술블로그 DX Lounge에서 최신 IT 소식을 만나보세요!

IT Trend

오픈소스 블로그 기술의 새 바람! 정적 페이지란?

2020.08.18

블로그 하면 떠오르는 기술들이 있습니다. 티스토리, 네이버 블로그, 브런치처럼 콘텐츠만 추가해서 이용하는 블로그가 있는가 하면 워드프레스(WordPress), 윅스(Wix), 드루팔(Drupal)처럼 홈페이지를 직접 구축하면서 운영하는 CMS 기반 블로그도 있죠.

여기에 몇 년 사이에 꾸준히 성장하고 있는 기술이 있으니, 바로 정적(Static) 사이트 기반 블로그 기술입니다. 최신 웹 개발 흐름을 잘 반영하면서도 관련 오픈소스 기술들이 다양하게 등장하면서, 이 시장은 점점 커지는 추세인데요. 오늘은 정적 페이지 관련 오픈소스 기술들을 살펴보겠습니다.

정적 페이지 중심의 웹 개발구조, 잼(JAM)스택

과거 웹 기술을 논의할 때 개발자들은 ‘램(LAMP)스택’ 혹은 ‘민(MEAN)스택’ 같은 단어를 사용했습니다. 두 용어 모두 웹사이트를 구축할 때 함께 쓰는 기술들을 표현한 형태인데요. 램스택은 리눅스(Linux) 운영체제, 아파치(Apache)라는 웹 서버, 마이SQL(MySQL)이라는 데이터 베이스 관리 시스템, PHP/파이썬(Python) 같은 프로그래밍 언어의 앞자들을 딴 조합입니다.

민스택은 몽고DB(MongoDB), 익스프레스JS(ExpressJS), 엥귤라JS(AngularJS), 노드JS(NodeJS)라는 자바스크립트 프레임워크를 이용한 웹 구조를 뜻합니다. 램스택이 전통적으로 많이 쓰이는 웹 기술 구조였다면 민스택은 자바스크립트 생태계의 성장으로 유명해진 개발 환경 구성이라고 볼 수 있습니다(프론트엔드와 백엔드 하나의 언어로 운영할 수 있다는 장점으로 인기를 끌고 있다.) 그리고 그 이후에 나온 표현이 ‘잼(JAM)스택’이라는 구조입니다.

잼스택은 2018년 클라우드 기업인 넷틀리파이에서 제안한 표현입니다. 자바스크립트(JavaScript), APIs, 마크업(Markup)의 앞 글자를 딴 용어로서, 클라이언트 요청 처리는 자바스크립트로 관리하고, 데이터 베이스나 서버 관련 기능은 API를 처리하고, 정적 사이트 생성기(Static Site Generator) 등으로 마크업을 미리 만들어낸다는 개념을 담고 있습니다.

잼스택을 활용할 경우, 백엔드 기술은 API로 분리하게 되는데요. 이 과정에서 서버나 데이터베이스로 발생하는 보안 취약점을 줄일 수 있게 됩니다. 또한 CDN을 통해 웹 성능이나 속도를 높일 수 있으며, 사용자가 늘어날 때 웹사이트 규모를 쉽게 확장할 수 있는 장점이 있기도 하죠. 이런 특징 덕에 최근 잼스택에 대한 관심은 늘어나고 있습니다.

l 전통적인 웹 개발 구조 (위)와 잼스택 구조(아래) (출처: https://scotch.io/tutorials/secure-and-scalable-an-introduction-to-jamstack#toc-jamstack-is-fast-scalable-and-less-expensive / scotch.io 사이트는 개발자 지식 공유 및 교육 사이트)

물론 모든 웹사이트가 잼스택 구조에 맞는 것은 아닙니다. 다양한 기능과 요구 사항이 많은 사이트나 동적 페이지 중심이거나 혹은 백엔드 언어에 의존하는 애플리케이션은 잼스택을 도입하기 어렵습니다.

잼스택 생태계가 커지면서 함께 성장하는 기술이 있으니 바로 ‘정적 사이트 생성기(Static Site Generator, SSG)’입니다. 말 그대로 정적 페이지 기반 웹사이트를 만들어주는 도구로서 콘텐츠와 파일을 읽고 이를 html으로 적절히 변환해 주는 기술입니다. 정적 사이트 생성기는 특히 블로그 구축 기술로도 많이 사용되는데요. 그 이유를 알기 위해선 정적 페이지와 동적(Dynamic) 페이지를 먼저 이해해야 합니다.

정적 페이지의 경우, 클라이언트가 요청을 보낸 후 서버는 따로 추가 처리 과정을 겪지 않습니다. 그로 인해 사용자 모두 개발자가 입력한 그대로 같은 웹사이트 화면을 보게 됩니다. 동적 페이지와는 반대 개념입니다. 동적 페이지에선 클라이언트 요청 이후 서버에서 사용자 요청을 해석하고 이후 데이터를 가져오거나 특정 기능을 수행하는 과정을 거칩니다. 그래서 같은 웹사이트 주소여도 사용자마다 보이는 콘텐츠 내용이 다를 수 있습니다.

예를 들어, 정적 페이지는 주로 회사 소개 글이나, 블로그 글처럼 내용이 변하지 않는 웹 페이지를 들 수 있습니다. 동적 페이지는 소셜 네트워크 댓글 창이나 쇼핑 검색 결과처럼 사용자마다 다르게 보이는 웹사이트라고 표현할 수 있습니다. 이런 이유로 정적 콘텐츠 기반의 블로그가 정적 사이트 생성기를 통해 구축되는 경우가 많아지고 있는 것입니다.

정적 사이트 생성기(SSG)의 생태계

정적 사이트 생성기의 종류는 점점 많아지고 있으며, 상당수가 오픈소스 기술로 개발되고 있습니다. 잼스택 시장을 이끄는 넷틀리파이는 직접 오픈소스 기반 정적 사이트 생성기들의 목록과 그 인기도를 볼 수 있는 ‘스택틱젠’이란 사이트를 운영 중인데, 이곳에 올라온 기술로만 300개가 넘습니다. 아래는 그중 몇 가지 대표 기술입니다.

l 정적 사이트 생성기 기술들은 수백 개가 있으며 매해 인기 기술 순위는 조금씩 바뀌고 있다.

지킬(Jekyll)은 정적 사이트 생성기의 부흥을 이끈 대표 기술입니다. 특히 깃허브 이용자가 지킬을 많이 사용하곤 했는데요. 지킬을 처음 만든 사람이 깃허브 창업자인 톰 프레스턴-워너(Tom Preston-Werner)였기도 했고, 지킬을 깃허브 페이지(Github Pages)와 함께 이용하기 좋았기 때문입니다.

깃허브 페이지는 웹 호스팅 서비스입니다. 블로그 주소를 생성하고, 웹사이트 개발에 필요한 파일 저장 공간을 제공해 주는 기술입니다.(웹사이트 주소는 http://사용자명.github.io 형식으로 지정되는 형식) 무료이고, 깃허브 계정과 연동하기 좋아 깃허브 사용자들에게 특히 많이 퍼졌습니다.

현재 지킬 자체는 깃허브에서 직접 관리하기보단 커뮤니티 중심으로 운영되고 있습니다. 기업의 후원과 개인 개발자들의 자발적인 소스코드 기여로 기술이 꾸준히 개선되고 있는 셈입니다. 한국의 카카오나 스포티파이, 트위치, 루비온레일스, 비트코인, 미국 조달청 내 기술혁신 부서인 18F 등이 지킬을 이용해서 기술 블로그를 운영하는 걸 볼 수 있습니다.

톰 프레스턴-워너 깃허브 창업자는 루비 언어를 즐겨 사용하는 개발자로도 유명한데요. 그 때문인지 지킬 역시 루비 언어를 기반으로 개발됐습니다. 루비 언어 때문에 지킬의 속도가 느리다는 평가를 받기도 했지만 현재 버전 업그레이드를 통해 속도 문제에 대한 보완책을 마련하고 있다고 합니다. 지킬은 오픈소스 기반 템플릿 언어 ‘리퀴드’를 이용하고 있기도 합니다.

2010년대 초기만 해도 지킬은 정적 사이트 생성기 분야의 독보적인 기술이었지만 시간이 흐르면서 여러 보안점과 경쟁력을 갖춘 후발주자들도 많아지고 있습니다. 먼저 휴고(Hugo)입니다. 휴고는 구글의 차세대 프로그래밍 언어 ‘고(Go)’로 만든 정적 사이트 생성기입니다.

고 언어에 대한 인기가 높아지면서 휴고에 관심도 높아지고 있는 것입니다. 휴고는 2013년 고 언어 커뮤니티에서 활발히 활동하던 오픈소스 개발자 스티븐 프란시아(Steven Francia)가 개발했는데, 이 인물은 2016년부터는 아예 구글에서 고 언어에 대한 제품 개발을 이끌고 있습니다. 오픈소스 기술인 휴고는 지킬보다 빠른 배포 속도를 자랑하고, 여러 운영체제를 공식 지원한다는 장점으로 사랑을 받고 있습니다.

휴고가 고 언어의 흥행으로 성장했다면 개츠비(Gatsby)는 리액트(React) 발전으로 퍼지고 있는 기술입니다. 2015년 개발된 이 기술은 리액트 기반 웹사이트를 좀 더 쉽게 만들 수 있게 도와줍니다. 또한 데이터를 외부에서 가져오는 플러그인 기능 개발에 많이 투자하면서 경쟁력을 키우고 있는데요. 여기서 그래프QL(GraphQL)을 적극 활용하고 있기도 합니다.

개츠비는 2018년부터 법인을 세우고 오픈소스 커뮤니티를 넘어 레드햇 같은 오픈소스 기업을 추구하고 있기도 합니다. 2019년과 2020년 연달아 투자 유치에 성공했으며 총 4600만 달러(약 545억 원)의 투자금을 확보하기도 했죠. 또한 이미 여러 기업 고객들을 보유하고 있는데, 스포티파이 디자인팀, 에어비앤비 기술 블로그, IBM 디자인 등이 개츠비를 이용해 홈페이지를 구축했다는 걸 볼 수 있습니다.

깃북(GitBook) 역시 오픈소스 기술 기반의 정적 사이트 생성기입니다. 이 기술은 프랑스 출신 개발자들이 2014년 공개했습니다. 이름에서 유추할 수 있듯이 마치 책(book)을 집필하듯 장문의 문서를 웹에 올리기 좋게 기능을 제공하고 있습니다. 콘텐츠를 올리는 과정에서 깃(Git) 원리를 적용한 것도 특징입니다. 개발자가 주요 고객이며, 기술 번역 문서, API 문서, 사용자 매뉴얼, 개발 지식 등을 작성할 때 깃북이 주로 활용되고 있다고 합니다.

정적 사이트 생성기의 인기 덕인지 최근엔 CMS 기반 블로그를 정적 사이트 기반 사이트로 바꿔주는 기술도 나오고 있습니다. 특히 워드프레스 기반 블로그(CMS 기반 웹사이트 중 워드프레스가 차지하는 비중은 63.5%. 워드프레스 역시 오픈소스 기술로 개방돼 있다.)를 정적 사이트로 변환해 주는 기술들이 눈에 띄는데요.

대표적으로 쉬프터(Shifter)와 하디프레스(HardyPress)가 있으며, 오픈소스 기술로는 WP2스태틱(WP2Static)이 있습니다. 정적 사이트 기술 성장과 함께 앞으로 워드프레스만큼 강력한 오픈소스 블로그 기술이 나올지 지켜보아야 할 것 같습니다.

글 l 이지현 l 테크저널리스트 (j.lee.reporter@gmail.com)

[참고 문헌]

[참고 사이트 및 정보]

해당 콘텐츠는 저작권법에 의해 보호받는 저작물로 LG CNS 블로그에 저작권이 있습니다.
해당 콘텐츠는 사전 동의없이 2차 가공 및 영리적인 이용을 금하고 있습니다.

목록

관련 아티클

챗봇과 대화를 할 수 있어요