안녕하세요, 픽셀을 깎는 데는 밤을 새우지만 서버 세팅에 1분 이상 쓰는 건 용납하지 못하는 집착가, 디자인 엔지니어 올리브입니다. 🌿

백엔드 다이어트부터 ACF 데이터 규격화, 그리고 SEO 브릿지까지. 우리는 보이지 않는 곳에서 완벽한 시스템을 구축했습니다. 이제 남은 건 이 아름다운 코드를 전 세계 사람들이 볼 수 있게 무대에 올리는 일이죠.

하지만 제가 직접 AWS를 열고, 리눅스 서버를 세팅하고, Nginx를 만질까요? 아닙니다. 디자인 엔지니어의 시간은 컴포넌트의 디테일을 다듬는 데 쓰기에도 부족합니다. 그래서 저는 Next.js와 가장 완벽한 궁합을 자랑하는 Vercel이라는 로켓에 제 블로그를 태웠습니다.

1. “서버 세팅? 저는 깃허브에 푸시만 합니다” 📦

기존의 워드프레스 배포는 꽤 번거롭습니다. 호스팅 서버를 사고, FTP로 파일을 올리고, DB를 연결해야 하죠. 하지만 Vercel 환경에서는 이 모든 ‘노가다’가 사라집니다.

제 로컬 컴퓨터에서 0.1px의 간격 조정을 마치고 깃허브(GitHub)에 코드를 push하는 순간, Vercel이 알아서 코드를 가져가 빌드하고 배포까지 끝내버립니다. 터미널 창에 초록색 Ready 글자가 뜰 때까지 제가 한 일이라곤 엔터키를 한 번 누른 것뿐이죠. 인프라 관리에 에너지를 뺏기지 않고 오직 프론트엔드 코드에만 집중할 수 있는 환경, 이것이 제가 Vercel을 선택한 첫 번째 이유입니다.

2. SSG: 이미 구워진 빵을 내어주는 속도 ⚡

제 블로그가 0.1초 컷의 속도를 자랑하는 진짜 비결은 코딩 실력이 아니라 렌더링 방식에 있습니다. 바로 정적 사이트 생성(SSG, Static Site Generation) 덕분이죠.

  • 기존 방식(SSR): 손님이 올 때마다 주방(서버)에서 워드프레스 DB를 뒤져 HTML을 새로 요리합니다. 당연히 시간이 걸리죠.
  • SSG 방식: Vercel이 배포될 때, 미리 워드프레스의 모든 데이터를 끌어와서 수십 개의 페이지(HTML)를 다 만들어버립니다. 손님이 오면? 이미 완벽하게 플레이팅된 페이지를 0.1초 만에 내어주기만 하면 됩니다.

데이터베이스를 거치지 않고 순수 HTML과 CSS만 렌더링되니, 아무리 트래픽이 몰려도 사이트가 느려질 틈이 없습니다.

3. ISR: 멈춰있지만 살아 숨 쉬는 우아함 🔄

여기서 딜레마가 하나 생깁니다. “SSG로 미리 다 구워버리면, 워드프레스에서 오타를 수정하거나 새 글을 올릴 때는 어떡하나요? 사이트를 통째로 다시 빌드해야 하나요?”

바로 이 지점에서 Next.js의 꽃, ISR(Incremental Static Regeneration) 기술이 등장합니다. 저는 코드에 “이 페이지는 60초마다 한 번씩 백엔드(워드프레스)를 찔러보고, 새 데이터가 있으면 뒤에서 몰래 페이지를 새로 구워놔!”라고 지시했습니다.

덕분에 사용자는 항상 캐싱된 0.1초짜리 빠른 페이지를 보면서도, 제가 워드프레스에서 수정한 내용은 길어도 1분 안에 스르륵 반영되는 기적을 경험하게 됩니다. 속도와 데이터의 최신성, 두 마리 토끼를 완벽하게 잡은 셈이죠. 😎

4. 마치며: 배포는 끝이 아니라 증명의 시작입니다 📈

Vercel의 엣지 네트워크(Edge Network)를 타고 배포된 제 블로그는, 서울에서 접속하든 뉴욕에서 접속하든 가장 가까운 서버망을 통해 0.1초 만에 열립니다.

우리가 지금까지 깎아온 완벽한 데이터 구조와 최적화된 코드가 드디어 빛을 발하는 순간이죠. 배포가 완료된 URL을 브라우저에 띄웠을 때 덜컹거림 없이 단번에 나타나는 세이지 그린 톤의 화면을 보며, 저는 비로소 마음의 평화를 얻었습니다. 🧘‍♂️

💡 9편 요약: 왜 Vercel과 SSG/ISR인가?

  • 개발자 경험(DX): 깃허브 푸시 한 번으로 끝나는 무중단 자동 배포.
  • 압도적 퍼포먼스: 빌드 시점에 HTML을 완성해 두는 SSG로 로딩 딜레이 제로화.
  • 스마트한 동기화: ISR을 통해 정적 사이트의 속도를 유지하면서 워드프레스의 수정 사항을 자동 반영.

이제 정말 마지막 한 편만을 남겨두고 있습니다! 대망의 10편에서는 기나긴 디자인 엔지니어링 여정을 돌아보는 최종 회고록으로 10부작의 마침표를 찍어보겠습니다. 🏁

올리브의 한 줄 요약: “가장 훌륭한 서버 세팅은 서버의 존재 자체를 잊게 만드는 것입니다.” 🌿