정적 웹으로 서비스 구현하기

정적 웹 트렌드

정적 웹이란, 사용자 접속에 따라 백엔드 코드에서 HTML코드를 렌더링하여 보여주는 방식이 아닌, 서버에서 일정 주기나 이벤트를 바탕으로 HTML 페이지를 일괄적으로 생성하고, 사용자는 미리 생성된 HTML 페이지를 그대로 받아와서 사용하는 방식을 말합니다.

정적 웹 기술은 꽤 오래된 기술이지만, Github Pages에 의해 최근들어 블로그 등에서 상당히 높은 인기를 끌고 있습니다. 정적 웹을 잘 활용한다면, 방문자가 늘어나도 운영 비용은 크게 증가하지 않죠. 특히Github Pages는 운영 비용을 하나도 받지 않아 무료로 사이트를 운영할 수 있으며, 플랫폼에 종속되지 않고 코드 수정이 가능하다는 장점 때문에 개발자들을 중심으로 점점 많이들 블로그 운영에 사용하고 있습니다.

Github Pages란 Github에서 오픈소스나 개인 홈페이지를 무료로 호스팅해주는 서비스입니다. Github repository에 있는 코드를 바탕으로 스토리지 서버로 호스팅되며, Jekyll이라는 Static website generator를 지원합니다.

이처럼 정적 웹의 가장 큰 장점은 비용입니다. 특히나 클라우드 환경이 보급되고 있는 지금, 컴퓨팅 자원을 최소화 하고 스토리지 자원 만으로 웹사이트를 운영한다는 점은 비용과 속도를 모두 잡을 수 있죠.

또한 AngularJS, ReactJS 등의 프레임워크에 힘입어 백엔드 중심에서 프론트엔드 중심적 개발이 트렌드가 되며 웹 개발에서 일종의 패러다임의 전환이 발생하였는데, 정적 웹은 이런 트렌드와도 상당히 궁합이 잘 맞는다고 할 수 있습니다. CDN과도 당연히 궁합이 잘 맞구요.

정적 웹으로 서비스를 구현하기

정적 웹이 블로그나 간단한 웹앱에서는 잘 맞을지 몰라도, 일정 규모 이상의 서비스에서는 제대로 활용하기가 어렵습니다. 가장 중요한 문제는 “성능” 인데, 매번 모든 페이지를 생성하는 방식을 사용하면 개발을 빨리할 수 있지만, 퍼블리시 속도가 엄청 느려지게 될 것입니다. 반면 생성 속도를 빠르게 하기 위해서는, 신경써서 개발해야 할 요소들이 늘어납니다.

또 사용자와 상호작용하는 기능이 있을 경우, 사용자가 만든 데이터를 실시간으로 반영시키려면 AJAX 기술이 필수적으로 사용되어야 할 것입니다. 하지만 과도한 AJAX는 코드를 더 복잡하게 만들 뿐더러, 정적 웹의 장점인 비용의 절감 효과를 의미없게 만들어 버릴 수 있습니다.

일반적인 상황에서는 정적 웹 기술로 운영비용을 줄이려다 오히려 더 많은 비용을 들이게 될 수 있습니다. 하지만 특정한 상황에서는 정적 웹을 사용해 볼 만한 때도 있을 것입니다.

메멘토와 정적 웹

저희의 서비스 컨셉은 “사람들이 관심있어하는 인물에 대해 웹상에 흩어져 있는 정보를 모아 매거진을 만들어 보여주는 서비스” 입니다.

사용자에게 매거진을 보여주어야 하는데, 사용자가 접속 할 때마다 정보를 수집·분석하여 매거진을 만들어 화면상에 뿌려줄 수는 없을 것입니다. 수집·분석이 1초 이내에 될 가능성은 없으니까요.

매거진을 만드는 프로세스와 사용자 접속 프로세스는 비 동기적으로 진행되어야 합니다. 즉, 일정 주기마다 인물에 대한 정보를 수집, 분석 및 가공하는 프로세스가 진행되며, 사용자는 출판된 매거진만 볼 수 있습니다. 오프라인 신문/잡지와 약간 유사한 점이 있죠.

일정 주기마다 매거진을 배포한다는 이 독특한 특징은 정적 웹과 잘 맞아떨어집니다. 의미적으로도 잡지를 만들어 배포한다는 느낌이 정적 웹사이트를 생성한다는 느낌과 비슷하기도 하구요.

이러한 특이한(?) 상황에서, 저희는 메멘토 웹서비스에 정적 웹 기술을 사용해 보기로 결정했습니다.

정적 웹에서 만족해야 하는 조건

정적 웹 기술을 서비스에 적용하기 위해서 꼭 지켜져야 된다고 생각하는 항목을 적어봤습니다.

1. 생성 및 배포 속도가 빨라야한다
2. 중간에 문제가 발생했을 때, 퍼블리시 작업 전체에 영향을 주면 안된다.
3. 유지보수가 용이해야한다.
4. 프로세스가 명료해야한다.

위 조건이 만족되지 않으면 정적 웹으로 열심히 만든 서비스를 파기하고, 다시 다이나믹 웹으로 서비스를 만들어야 할 지도 모릅니다.

저희는 위 조건을 만족시키고 더 나은 코드를 작성하기 위해, 코어 부분과 서비스 코드를 분리하여 작성하기로 결정했고, 모던 웹을 위한 정적 웹 프레임워크를 별도로 개발하기로 결정했습니다.

문제를 해결해보자

아래는 정적 웹 생성을 프레임워크(코어)부분과 서비스 코드 부분으로 나누고 각각 위의 문제를 어떻게 해결할 수 있을지 고민해 본 내용입니다.

1. 생성 및 배포 속도가 빨라야한다

생성 및 배포 속도는 2가지 요소에 영향을 받습니다. 첫째는 생성해야 할 페이지의 갯수이고, 둘째는 생성 및 배포 동작의 프로그램 동작 시간 자체입니다.

첫번째 요소의 시간을 줄이기 위해서는 변경되지 않은 파일을 또다시 생성하지 않도록 처리해주어야 합니다. 프레임워크에서는 스태틱 파일 (CSS, JS, 이미지 등)의 변경/추가 시간을 관리하여 이를 최소화해 줄 수 있고, 프로세스 과정이 필요한 이외의 페이지는 서비스 코드에서 해결해야 합니다.

두번째 요소, 즉 프로그램 동작 시간 자체를 줄이기 위해서 우리가 언어나 데이터베이스, 템플릿 엔진 등의 성능을 개선하기에는 무리가 있습니다. 그 대신 우리가 해줄 수 있는 최선의 방법은 병렬처리입니다. 프레임워크에서 페이지를 생성할 때, 멀티 프로세스나 스레드를 사용하여 동시에 페이지를 생성하게 하면 상당한 성능 향상을 이끌어 낼 수 있습니다. 다만 효율적인 병렬적인 처리를 위해 최대한 State-less한 프로그램을 설계해야 합니다.

2. 중간에 문제가 발생했을 때, 퍼블리시 작업 전체에 영향을 주면 안된다

일단 다이나믹 웹에서는 어떤 페이지 하나가 문제가 있다고 해서 전체 서비스가 마비되지는 않습니다. 하지만 정적 웹 퍼블리시 과정에서 문제가 발생하여 생성 및 배포가 중단 될 경우, 전체 서비스에 영향을 끼칠 수 있습니다. 이런 문제를 위해 예외 처리에 상당한 신경을 써주어야 합니다.

우선 프레임워크에서는 페이지별로 생성작업을 진행하며, 오류가 발생할 경우 해당 페이지는 건너뛰는 방법을 통해 사이트 생성 전체가 마비되는 상황을 막아야 합니다. 서비스 코드에서는 페이지별 세부적인 예외 처리를 통해 완성도를 높혀 나가야 할 것입니다.

3. 유지보수가 용이해야한다

정적 웹은 유지보수에도 문제가 많습니다. 일반적인 경우에는 1번 사항에서 논의했던 것처럼, 최소한의 페이지만 생성해야 하도록 할 것입니다. 하지만 유지보수에 작업 도중 코드나 템플릿이 변경되면 그 템플릿을 사용하는 모든 페이지가 수정되어야 하죠.

프레임워크에서는 데이터 변경/추가에 따른 페이지 퍼블리시와 유지보수에 따른 페이지 퍼블리시 기능을 나누어서 제공해야 할 것입니다. 서비스 코드에서는 템플릿 내에 인라인 스크립트를 넣는 것을 자제하고, CSS/JS/이미지 파일은 외부에 빼두는 것이 유지보수에 따른 페이지 생성 상황을 줄일 수 있을 것입니다.

기능 추가 및 변경을 위해 새로 코드를 작성해야 할 상황은 필수적일텐데, 배포 시간도 문제지만 개발 시간도 문제가 될 수 있습니다. 대표적으로 Jekyll같은 경우, 파일이 변경되면 전체 사이트를 리로드해서 다시 로컬 웹서버를 여는 방식(jekyll serve)을 지원합니다. 파일의 갯수가 적으면 상관없지만, 파일이 많아지면 변경된 템플릿을 확인하기 위해 기다리는 시간이 상당히 증가하게 됩니다. 이런 문제는 프레임워크단에서 개발 속도를 증가시키기 위해 적합한 프로세스를 채택하여 해결하여야 합니다.

4. 프로세스가 명료해야한다

다이나믹 웹은 이미 MVC 패턴이 사실상 표준(defacto standard)으로 자리 잡았습니다. 정적 웹의 프로세스는 사용자 접속과는 관계가 없으며 “데이터 인출 - 렌더링 - 배포”의 프로세스가 존재한다고 할 수 있습니다. 각각의 과정은 명확하게 처리되어야 하며, 확장 및 변경이 쉬워야 합니다.

프레임워크에서는 서비스 특성에 맞는 다양한 외부 서비스 및 프로토콜과 연결 할 수 있어야 합니다. MySQL, REST, NOSQL 등 다양한 소스에서 데이터 인출이 가능해야 할 것이고, 배포시 FTP, REST 및 SDK를 통한 스토리지 서비스, CDN 등 다양한 목적지로의 배포가 가능해야 할 것입니다.

아직 정적 웹 개발에 대한 디자인 패턴은 확립 되지 않았습니다. 논리적으로 프로세스가 명료하며 유지보수 및 개발이 용이한 디자인 패턴을 생각해보고, 적합한 패턴을 만들어 적용하여야 합니다.

정리

정적 웹에 대해 연구 및 개발하며, 다이나믹 웹에서는 고려할 필요가 없었던 꽤 많은 문제를 발견할 수 있었습니다.

서비스를 효율적으로 운영하고, 다른 개발자들도 필요한 상황에 정적 웹 기술을 적극적으로 이용했으면 좋겠다는 생각에 만든 정적 웹 프레임워크를 오픈소스로 운영하고 있으며, 세계 최초의 금속활자인 ‘직지심체요절’의 앞자를 따 Jikji(직지)라고 이름지었습니다.

이후에는 이 라이브러리와 관련해서도 포스트를 작성해 보려 합니다 :0