Mark Stratmann
ABout Background

이 사이트 소개

왜 이 사이트를 만들었는지

이 사이트는 왜 존재하나요?

새로운 기술을 배울 때 오래된 문제 중 하나는, 인터넷이나 AI로부터 얻는 문서와 예제가 너무 사소해서 그 기술(혹은 내가 구현한 방식)이 실제의 복잡한 워크로드를 견딜 수 있는지 전혀 감이 오지 않는다는 점입니다. 대표적인 예가 수많은 할 일 목록(to-do list) 예제입니다.

저는 여러 기술적 가정에 기반한 SASS 프로젝트를 계획하고 있는데, 실제 프로젝트를 만들기 전에 그 가정들을 검증할 필요가 있습니다. 그리고 이런 개인 프로필 사이트를(완전한 CMS 백엔드로 구동되는) 만드는 것은, 제대로 된 프로덕션 빌드아웃을 할 만큼 충분히 복잡하면서도 구성하는 데 너무 오래 걸리지는 않을 정도로는 충분히 단순합니다. 추가로, 모든 것이 잘 되면 성능이 좋은 프로필 사이트를 얻게 되고, 더 기술적인 실험을 위한 좋은 테스트베드가 됩니다.

배포 대상으로서의 Cloudflare

Cloudflare Workers https://workers.cloudflare.com/ 는 얼핏 보기에는 복잡한 애플리케이션을 배포하기 위한 매우 저렴한 방법처럼 보입니다. 백엔드 개발은 단순하고 견고해 보이며, OpenNext https://opennext.js.org/ 패키지는 Next.js https://nextjs.org/ 로 프런트엔드를 효율적으로 개발하고 Cloudflare에 배포할 수 있는 방법을 제공하는 것으로 보입니다.

이 사이트가 사람 트래픽을 많이 끌어모을 것 같지는 않습니다. 하지만 가능한 한 많은 웹 검색 및 AI 크롤러 트래픽을 이곳으로 유도해 보려고 합니다. 그렇게 하면 Cloudflare 플랫폼에서 바쁜 사이트를 운영할 때 실제 비용이 어느 정도인지 파악할 수 있을 것입니다.

이 사이트를 필요 이상으로 복잡하게 만들기

콘텐츠 관리 백엔드(CMS)

솔직히 말해, 현재 상태의 이 사이트는 코딩 에이전트로 몇 시간 안에 대충 조립할 수도 있습니다. 하지만 진지한 시스템이라면 기본 콘텐츠를 바꾸기 위해 배포가 필요해서는 안 됩니다. 따라서 이 사이트는 Payload CMS (https://payloadcms.com/) 를 기반으로 한 완전한 CMS를 사용하며, 이는 별도의 Cloudflare Worker로 배포됩니다.

Payload 자체는 SQL 데이터베이스를 사용하고, 이는 다시 CloudFlare D1 SQLite 데이터베이스 인스턴스 https://developers.cloudflare.com/d1/ 로 배포되어야 하며, 개발 라이프사이클을 지원하기 위해 데이터베이스 마이그레이션으로 적절히 관리되어야 합니다.

자동 번역

이 사이트는 20개 언어를 지원합니다. 웹사이트 자체는 CMS 콘텐츠를 위한 단순한 스캐폴드이므로, i18n 쪽은 개발 과정에서 코딩 에이전트(Co-pilot 및 Claude Opus 4.5)로 처리합니다.

그러면 남는 것은, 현재 및 향후의 모든 CMS 콘텐츠가 영어 콘텐츠가 변경될 때마다 자동으로 번역되어야 한다는 점입니다.

큐 및 크론 기반 Worker

번역 요구사항은 다음을 수행하는, 꽤 복잡한 프로세스를 필요로 합니다:

  • Cron 타이머로 트리거된다.
  • 새 번역이 필요한 콘텐츠를 식별한다.
  • 번역을 안정적으로 실행한다.
  • 실패 시 안정적으로 복구한다.

따라서 또 다른 CloudFlare D1 인스턴스를 사용해 번역 작업을 추적하고, Cloudflare queues (https://developers.cloudflare.com/queues/) 를 크론 기반 생산자-소비자 패턴과 함께 사용하여 작업을 관리하고 확장합니다. 번역을 위해 OpenAI의 gpt-5.2 API를 호출하며, AI.SDK https://ai-sdk.dev/ 가 이를 모두 연결해 줍니다.

이 사이트에는 과한 설계일 수 있지만, 어떤 규모의 프로덕션 시스템이든 백그라운드 처리를 오케스트레이션하기 위한 견고한 패턴이 필요합니다.

이 사이트의 이전 버전들

저는 새로운 기술을 배우기 위한 도구로 이 사이트를 이미 두 번 만들어 본 적이 있습니다:

2013 - Ruby와 AWS 학습

  • Ruby on Rails v4.0.0.
  • Bootstrap 스타일링 v3.
  • UI를 위한 CoffeeScript.
  • Backbone Marionette VMC 프런트엔드 패턴.
  • AWS 호스트에 배포.

2017 - React 학습

  • UI를 위한 React v16.0.0.
  • 비동기 작업을 위한 Redux 및 Thunk.
  • 스타일링을 위한 Semantic UI.

다음은 무엇인가요

이 사이트는 SEO가 제대로 연동되어 있으며, 크롤러 트래픽을 유도하려면 정기적으로 새로운 콘텐츠를 게시하는 리듬이 필요합니다. 사용된 다양한 기술과 솔루션에 대해 더 자세한 글들을 올릴 예정입니다.