이 글은 IDG의 아티클을 전재하여 제공합니다.
[원문보기]: https://www.itworld.co.kr/insider/
잼스택(Jamstack)은 점점 인기가 높아지고 있는 웹 개발 방식으로, 웹 개발 및 웹 페이지의 다운로드 속도를 높이기 위해 주로 사용된다. 데브옵스와 CI/CD에서 파생된 잼스택은 인터랙티브 웹 페이지 구축의 오랜 전통을 뒤집었다는 점에서 주목받고 있다. 그중 핵심은 로드 타임 코드 실행을 웹 서버가 아닌 브라우저 내 자바스크립트나 API로 접근할 수 있는 외부 서비스에서 진행하는 부분이다. 이는 매우 개발자 친화적인 방식으로, 궁극적으로 렌더링 속도를 높이고 여러 플랫폼에 맞춤화할 수 있는 정적 웹사이트를 구축할 때 사용된다.
ⓒ Getty Images Bank
잼스택과 LAMP 스택의 차이
잼스택은 자바스크립트, API, 마크업(Markup)이라는 세 가지 축을 기반으로 하는 웹 애플리케이션 아키텍처다. JAM이라는 단어도 이 세 기술의 앞 자에서 따왔다. 잼스택을 추구하는 웹 페이지는 표준 마크업 언어로 구성돼서, 애플리케이션 서버 또는 노드JS와 같은 서버 사이드 기술에 의존하지 않고 어디서나 빌드하고 테스트할 수 있다. 이때 인터랙티브 기능은 표준 브라우저에서 실행되는 자바스크립트 코드로 제공된다. 이 코드는 HTTPS를 통해 재사용할 수 있는 API를 호출하며, 해당 호출은 다시 웹페이지에 넣을 수 없는 외부 데이터 및 다른 기능에 액세스하기 위해 사용된다.
잼스택이 왜 혁신적인지 알아보려면 일단 LAMP(Linux Apache MySQL PHP) 스택부터 살펴봐야 한다. LAMP 스택은 지난 15년간 웹 개발자가 선택하는 대표적인 개발 방식이었다. LAMP는 리눅스(웹 서버를 구동하는 OS), 아파치(리눅스 시스템에서 실행되는 서버 소프트웨어), MySQL(웹 애플리케이션 데이터가 저장되는 데이터베이스), PHP/펄/파이썬(서버 사이드 작성 언어)의 각 첫 글자를 따와 만든 단어다. LAMP 기반 웹사이트를 방문하면 웹 서버는 서버 사이드 코드를 실행하며, 이 코드는 필요할 때마다 MySQL 데이터베이스에서 데이터를 가져와 웹 페이지를 즉석에서 생성한다.
LAMP 아키텍처는 동적이고 인터랙티브한 웹사이트를 생성할 수 있지만, 강력한 웹 서버가 뒷받침돼야 한다. 사이트로 유입되는 트래픽이 늘어난다면 서버 측에는 더 높은 컴퓨팅 성능이 필요하다. 하지만 아무리 고성능 서버가 있더라도 동적 웹 페이지를 빌드하고 로드하는 데는 시간이 오래 걸릴 수 있다. 요즘처럼 스마트폰으로 웹을 서핑하고 빠른 것을 선호하는 세상에서 로딩 속도가 느리다는 것은 치명적인 골칫거리가 될 수 있다. 잼스택은 이런 상황에서 전통적인 웹사이트 작동 모델에서 탈피해보고자 2010년 급부상했다.
정적 웹사이트의 구조
웹 개발 초보자에게 웹의 동작 방식을 설명하려 할 때 다음과 같은 표현을 쓰곤 한다.
“웹 서버 파일 시스템 어딘가에 HTML 파일이 있고, 그 파일은 http 주소로 접근할 수 있다. 웹 브라우저는 그 HTML 파일을 다운로드한 다음 해석해서 웹 페이지를 생성한다.”
정확히 말하면 이 설명은 정적 웹사이트를 묘사한 것이다. 웹 브라우저가 HTML 파일을 찾는 시점에 HTML 파일이 이미 존재한다고 가정하기 때문이다. 하지만 지난 10년 동안 우리가 경험한 웹 사이트는 주로 동적 웹사이트일 가능성이 높다. 이 동적 사이트는 정적 사이트와 달리 웹 요청이 온 순간 HTML 파일을 생성하며, 그 과정에서 양식 또는 URL을 통해 웹 서버로 전달되는 매개 변수를 활용한다.
웹이 처음 등장했을 때 웹사이트는 대부분 정적인 형태였고, 웹 개발자 대다수가 HTML 코드를 직접 작성했다. 이후 웹 페이지가 점차 복잡해지면서 드림위버 같은 툴이 등장했으며 이를 통해 정적 HTML 페이지를 프로그램을 이용해 생성하기 시작했다. 정적 웹사이트 운동이 일어난 후에는 개츠비(Gatsby), 휴고(Hugo), 제킬(Jeckyll) 같은 이른바 정적 사이트 생성기가 많아지고 인기를 얻게 됐다.
드림위버와 같은 WYSIWYG 툴과 달리, 정적 사이트 생성기는 명령어줄 기반이며 CI/CD 프로세스와 잘 통합되도록 설계됐다. 즉 HTML 파일은 주로 마크다운 형식으로 작성된 콘텐츠를 기반으로 정적 사이트 생성기로 생성되고, 깃허브와 같은 버전 관리 시스템에 자동으로 업로드된다. 또한 이런 파일은 프로덕션용으로 인식되며, 라이브 웹사이트를 위한 정적 페이지는 자동으로 업데이트된다.
여기서 말하는 정적 페이지는 인터랙티브 요소가 없는 단순한 웹 1.0 페이지가 아니다. 다시 말해 브라우저에서 실행되는 고급 자바스크립트를 포함하고 데이터베이스, 서버 사이드 기능 또는 서버리스 함수에 대한 API 호출을 수행할 수 있는 페이지다. 단, 이런 과정이 웹 서버에서 일어나지 않으므로 정적 사이트에는 데이터베이스까지 갖춘 초고성능 웹 호스트가 없어도 된다. 많은 정적 사이트는 콘텐츠 전송 네트워크, 즉 CDN에 배포되며, 콘텐츠는 사용자가 어디에 있든 빠르게 콘텐츠를 전송하기 위해 전 세계 여러 서버에 분산돼 저장된다.
넷틀리파이
잼스택 생태계에서 넷틀리파이(Netlify)는 큰 역할을 담당하고 있다. 넷틀리파이는 클라우드 컴퓨팅 및 웹 호스팅 업체로, 잼스택 기반 사이트를 구축하고자 하는 고객에게 서비스를 제공하고 있다. 넷틀리파이의 공동 창업자 중 한 명인 마티아스 빌만이 잼스택이라는 용어를 처음 사용하기 시작했다.
스닙카트(Snipcart)의 마케팅 책임자인 매튜 디온은 블로그에서 이 새로운 정적 사이트 기술의 초창기 모습을 설명한 적 있는데, “넷틀리파이 창업자들이 ‘정적 웹’이 가진 부정적인 어감을 피하기 위해 ‘잼스택’이라는 용어를 고안했다”고 표현했다. 넷틀리파이는 잼스택 용어를 대중화는 데 큰 기여를 했지만, 그렇다고 잼스택 용어에 상표나 지적재산권을 가지고 있지는 않다.
넷틀리파이는 특히 캐시 무효화(cache invalidation) 관련 기술을 내세우며 성장하고 있다. 데이터베이스 기반의 동적 웹사이트는 서버 리소스를 많이 소비하긴 하지만 모든 방문자에게 웹사이트의 최신 버전을 확실히 제공할 수 있다. 하지만 잼스택 웹사이트는 CDN을 통해 분산된 여러 서버에 호스팅되는 경우가 많아 업데이트가 쉽지 않다. 각 CDN 서버가 캐시된 사이트 버전이 더 이상 유효하지 않다는 것을 인식하는 데 짧게는 몇 분부터 길게는 몇 시간까지 걸릴 수도 있기 때문이다. 넷틀리파이의 이 문제를 해결하기 위해 CDN에서 HTML 파일에 대한 즉석 캐시 무효화 기능을 제공한다.
넷틀리파이는 이런 기술 기반으로 PaaS를 지원하고 있으며, 나이키나 펠로톤과 같은 대기업을 대상으로 콘텐츠 플랫폼을 제공하기도 한다.
개츠비
넷틀리파이 외에도 잼스택 호스팅이나 배포 솔루션을 제공하는 기업은 많다. AWS, 구글, 마이크로소프트 같은 대형 클라우드 서비스 업체도 잼스택을 구축할 수 있도록 지원하고 있다. 그 외에 개츠비(Gatsby) 같은 정적 사이트 생성 전문 업체도 잼스택 시장에 뛰어들고 있다.
개츠비는 ‘개츠비 사이트 생성기’를 통해 성공한 업체다. 개츠비 사이트 생성기는 오픈소스 기술이며, 넷틀리파이를 포함한 타 업체도 개츠비 기술을 제공하고 한다.
헤드리스 CMS
웹사이트를 운영하려면 웹사이트를 구축하고 호스팅하는 것 말고도 많은 일을 해야 한다. 특히 새 콘텐츠를 만들어 사이트에 추가해야 한다. 이 작업을 하는 사람은 보통 프로그래머가 아니어서 콘텐츠 관리 시스템(CMS)과 같은 사용자 친화적인 툴이 필요하다. 워드프레스 같은 전통적인 CMS는 백엔드 사용자를 위한 인터페이스를 제공한다. 이를 통해 웹사이트 콘텐츠를 입력하고 콘텐츠가 저장되는 데이터베이스를 관리하고 브라우저 요청에 따라 콘텐츠를 제공하는 동적인 웹페이지를 구축할 수 있다.
반면 잼스택 사이트의 CMS는 다른 방식으로 동작하는데, 이를 ‘헤드리스(headless)’라고 표현한다. 헤드리스 CMS는 콘텐츠 입력 및 관리를 위한 UI와 이를 저장하기 위한 데이터베이스 또는 다른 수단을 제공하지만, 브라우저가 파싱할 HTML 코드를 자체적으로 생성하지는 않는다. 웹사이트의 정적 HTML 페이지는 자바스크립트를 사용해서 CMS의 API를 호출하고, CMS는 자바스크립트가 웹페이지로 변환할 수 있는 형식으로 콘텐츠를 반환한다.
이 시스템은 콘텐츠를 프레젠테이션 계층에서 철저히 분리할 수 있다. 많은 프로그래머가 늘 바라던 이상적인 구조다. 이런 구조에선 CMS에 접근 가능한 API가 있으므로 여러 웹 페이지에서 손쉽게 콘텐츠에 접근할 수 있다. 예를 들어 모바일, 데스크톱, 스마트워치 등 기기마다 각각 다른 웹사이트 버전을 제작하는 경우, 모든 버전이 CMS에 저장된 동일한 콘텐츠에 접근할 수 있다.
넷틀리파이는 이미 넷틀리파이 CMS라는 상품으로 이 기능을 제공하고 있으나 다른 곳에서도 비슷한 서비스를 볼 수 있다. 개발자 네보사 라다코비치의 블로그 포스트에서 헤드리스 CMS 솔루션을 제공하는 업체 정보를 볼 수 있는데, 처음 보는 업체부터 잘 알려진 업체까지 다양하다. 사실 앞서 워드프레스를 전통적인 CMS라고 예로 들었지만, 워드프레스에서도 이제 헤드리스 CMS을 이용해 잼스택 사이트를 구축할 수 있다.
잼스택을 사용하는 이유
지금까지 잼스택의 여러 이점을 살펴보았다. 전체 그림을 파악했으니 다시 한번 정리해 보자.
• 속도 : 잼스택 사이트는 더 빠르게 로드된다. 빠른 속도는 편리한 것 이상의 장점을 준다. 가령 구글은 속도가 느린 사이트의 검색 순위를 낮춰 불이익을 준다. 많은 고객은 이미 빠른 응답에 익숙하며 속도가 느리다면 거래를 중도에 포기하곤 한다.
• 개발자 경험 : 개발자는 개발 프랙티스와 생산성에 혁신을 불러온 데브옵스 기법을 사용해 정적 사이트를 구축할 수 있다. 잼스택은 영역을 명확하게 구분하는 사이트 스택을 만들어 개발자가 자신의 전문 영역에만 집중할 수 있게 해준다. 디자이너나 프론트엔드 개발자는 서버 사이드 언어에 통달할 필요 없이 사이트를 구축할 수 있으며, 백엔드 개발자는 API에 집중할 수 있다. 콘텐츠에 대한 부분은 CMS 영역에서만 관리하면 된다.
• 유연성 : 정적 사이트는 전통적인 웹 서버, CDN, 정적 사이트 전문 서비스를 이용해 호스팅할 수 있다. 3가지의 기술 중 여러 가지를 동시에 사용할 수도 있다. 또한 헤드리스 CMS는 API를 통해 프론트엔드와 상호 작용하므로 동일한 콘텐츠를 공유하는 여러 플랫폼용 사이트를 손쉽게 구축할 수 있다.
잼스택에 대한 관심은 뜨겁지만, 아직 전체 웹사이트 중에서 잼스택으로 구축된 웹사이트 비율은 매우 적다. 웹 알마낙(Web Almanac)은 2021년 기준 전체 웹사이트에서 정적 사이트 생성기로 구축된 (잼스택 방식을 담은) 사이트는 약 1%에 불과하다고 추정했다. 그러나 잼스택은 빠르게 성장 중이며 지난 3년 동안 시장 점유율은 매년 2배 이상 늘었다. 특히 잼스택에 관심을 두는 개발자 중 3분의 1이 경력 2년 미만의 주니어 개발자라는 점에서 잼스택의 인기가 더 늘 것이라고 예측할 수 있다.
잼스택과 맞지 않는 경우
다양한 장점에도 불구하고 잼스택이 모든 곳에 적합한 것은 아니다. 개발자 친화적이라는 잼스택의 장점은 개발자에 대한 의존도를 지나치게 높여 단점이 되기도 한다. 잼스택을 잘 다룰 줄 아는 전담 개발팀이 있거나 앞으로 그런 팀을 꾸릴 계획이 있는 기업이라면 문제가 되지 않을 것이다.
하지만 소규모 기업이라면 얘기가 달라진다. 보통 작은 기업에서는 개발자의 도움을 자주 받지 않아도 되는 상용 또는 오픈소스 소프트웨어를 이용하며, 비전문가가 웹사이트를 운영하는 경우가 많다. 전자상거래 분야가 특히 그렇다. 전자상거래 업체는 전통적인 웹 호스팅 솔루션을 주로 이용하고 이를 위한 전용 플러그인과 라이브러리를 사용한다. 이와 관련된 잼스택 기술은 많지 않은 편이고 성숙도도 낮다. 따라서 전자상거래 분야에서는 잼스택이 적절하지 않을 수 있다.
잼스택 튜토리얼
더 심층적인 내용을 원한다면 다음과 같은 잼스택 튜토리얼을 활용해보자.
• 개츠비 및 기타 잼스택 플랫폼에 사용되는 그래프QL API 시스템을 만들고 있는 하수라(Hasura)는 아키텍처와 관련해 고려할 점과 잼스택 사이트에 적용되는 여러 선택 사항을 단계별로 안내하는 튜토리얼을 제공한다.
• 웹 호스팅 기업 디지털 오션(Digital Ocean)은 앵귤러(Angular)와 스컬리(Scully)를 사용한 잼스택 포트폴리오 구축에 관한 튜토리얼을 제공한다.
• 넷틀리파이는 기본 사항부터 고급 주제에 이르기까지 잼스택 사이트 구축에 관한 내용을 영상 튜토리얼로 제공한다.
▶ 해당 콘텐츠는 저작권법에 의하여 보호받는 저작물로 기고자에게 저작권이 있습니다.
▶ 해당 콘텐츠는 사전 동의 없이 2차 가공 및 영리적인 이용을 금하고 있습니다.
Network World