[차세대 웹 프로젝트 프레임워크 - 개발 목표]

‍하이드라프트는 오래전부터 ‘Visual Edit CMS(User View Content Management System)’를 추구해왔습니다. 대우재단이 의뢰한 ‘학술사업 웹’ 역시 단순한 웹사이트 구축이 아닌 콘텐츠의 효율적 관리를 위한 강력한 CMS가 요구되는 프로젝트였습니다. 요구 사항 분석 결과, 본 프로젝트에 가장 적절한 CMS의 형태는 Tranditional CMS와 Headless CMS의 장점을 결합한 Hybrid CMS라고 판단되었고, 이 Hybrid CMS를 위한 차세대 ‘웹 프로젝트 프레임워크’ 구축을 위해 아래의 목표를 수립했습니다. 그리고 이 차세대 ‘웹 프로젝트 프레임워크’ 구축 과정에서 발생한 몇 가지 기술적 이슈를 소개하고자 합니다.

1. 컴포넌트 기반 프론트-엔드 프레임워크를 사용할 것.
2. 렌더링 UX와 SEO를 위해 SSR(Server Side Rendering)을 지원할 것.
3. 수평적 스케일링을 위해 데이터베이스와 스토리지 서비스를 분리할 것.
4. 다국어 지원이 가능하고 사용자 관점의 UX가 우수할 것.
5. Traditional과 Headless의 장점을 결합한 Hybrid CMS로 설계할 것.

1) 컴포넌트 기반의 프론트엔드 프레임워크 ‘Svelte’ 채택: ‘Svelte’는 대표적인 프론트엔드 웹 프레임워크인 ‘React’나 ‘Vue.js’와 달리 ‘Virtual DOM’을 사용하지 않고 빌드타임에 즉시 컴파일(Vanilla JavaScript Bundle 활용)하여 처리 속도가 빠르고 별도의 라이브러리 배포가 필요 없다는 장점이 있습니다. 또한 ‘Next.js’처럼 글로벌 호스팅 기업인 ‘Vercel’의 스폰서쉽을 통해 장기적 성장 가능성이 있다는 점도 매력적으로 다가왔습니다. 

2) SSR 관점의 고민: ‘Svelte’ 환경은 SSR을 지원하기 위해 풀스택 웹 어플리케이션 개발 도구인 ‘SvelteKit’이 제공되지만, CMS 개발 초기 당시에서 ‘SvelteKit’은 베타 버전이었고, ‘SvelteKit’의 완성도는 훌륭했지만, 파일 기반 라우팅 시스템은 다국어 지원 및 Hybrid CMS 구성 관점에서는 부적합했습니다. ‘SvelteKit’ 없이 SSR을 지원하기 위해서는 JavaScript를 해석할 수 있어야 했습니다. Node.js를 사용한 경우, 자바스크립트 해석에는 문제가 없었지만 Node.js의 성능은 저희에게 만족스럽지 못했습니다. 결국 Go언어로 백엔드를 만들고 ‘V8 엔진’을 조합하여 SSR을 지원하기로 했습니다. 이 시도는 빌드 환경부터 직접 만들어야 할 정도로 많은 시행착오를 겪었지만, 결과는 대만족이었습니다. 우리가 원하는 모든 것을 커스터마이징할 수 있었으며 빠른 개발 속도와 성능은 물론이고 서비스 안정성도 훌륭했습니다.

3) GraphQL API 채택: 새롭게 구성된 프론트엔드와 백엔드의 통신을 위한 API는 GraphQL을 채택했습니다. 대표적인 GraphQL 라이브러리인 Apollo Client (apollographql.com)의 훌륭한 캐싱 능력 덕분에 재접속 페이지에 대한 요청이 생략되면서 서버 부담을 최소화할 수 있었습니다. GraphQL 서버는 graphql-go (github.com/graphql-go/graphql) 라이브러리를 사용하여 빠른 응답 속도와 안정적인 서비스를 제공할 수 있었기 때문에 Go언어로 백엔드를 구축한 이점을 활용할 수 있었습니다.

4) Hybrid CMS: 앞서 언급한 ‘Visual Edit CMS’ 구축을 위해서는 Hybrid CMS 구조가 필요했습니다. 이 접근 방식은 Tranditional CMS의 편리함과 Headless CMS의 유연성을 결합해 콘텐츠 관리의 편리함과 유연한 프론트엔드 개발을 동시에 제공하며 현대적인 웹사이트와 애플리케이션 개발에 필요한 기능을 모두 제공합니다. 이를 통해 콘텐츠 관리와 프론트엔드 개발의 효율성을 극대화할 수 있었습니다.

‍

[고객사의 운영비, 어떻게 절감할 수 있을까?]

1) 고객사의 운영 비용 부담: 과거 대부분 프로젝트의 클라우드 인프라 환경은 ‘AWS’의 서비스를 주로 사용했는데, 이 서비스는 낮은 트래픽의 도메인임에도 최소 월 30~50만 원 정도의 비용이 발생했습니다. 비영리 단체인 ‘대우재단’에게는 다소 부담되는 지출 항목이기도 했습니다. 때문에 운영비 절감 역시 본 프로젝트의 큰 목표였습니다. 물론, 비용절감 차원에서는 합리적인 서비스도 있지만, 그동안의 경험으로 봤을때 적절한 대안이 아니라고 판단했습니다.

2) 인프라 환경 분산: 고객사의 고정 운영비 문제를 해결하기 위해서 DB는 <Supabase PostgreSQL>, CSS, JS파일 등 스테틱한 에셋을 위한 CDN은 <AWS CloudFront>, 이미지, 영상 등 동적 데이터들의 전송은 <Cloudflare R2>로 분리 구축하고 각각의 프리티어를 사용했습니다. 한 가지 단점은 Cloudflare R2의 업로드 속도가 비교적 느린데, 이 부분은 비용 절감을 위해서 고객사 측에서 감내하기로 했습니다. 또한 상기 환경을 수평적으로 오토스케일링하고 최적화하기 위해서 AWS의 'Serverless Computing Service인 Lambda'를 사용했습니다. 

3) 비용 절감을 위한 Serverless Computing: 특이점은 Serverless를 위한 ‘AWS Lambda’ 역시 비용 절감 측면의 선택이라는 것입니다. 본 프로젝트는 높은 트래픽을 소화해야 하는 성격의 웹사이트가 아니며 오히려 매우 적은 트래픽을 지니는 웹사이트입니다. ‘AWS Lambda’는 코드(함수)가 실행될 때만 요금이 부과되므로 해당 웹사이트는 프리티어의 허용량 내에서 운영이 가능하다는 판단이 있었습니다. 결론적으로 상기 인프라 구축 덕분에 ‘대우재단 학술사업 웹사이트’ 운영에는 별도의 비용이 발생되지 않고 있습니다. - 기술 감수, 디어스텝 최승혁