안녕하세요, 디자인과 성능의 완벽한 레이아웃을 설계하는 디자인 엔지니어 올리브입니다. 🌿
1편에서 제가 왜 ‘머리를 뗐는지(Headless)’ 말씀드렸죠? 오늘은 그 떨어진 머리(Next.js)와 몸통(WordPress)이 어떻게 서로 텔레파시를 주고받으며 0.1초 만에 화면을 그려내는지, 그 분리 원리를 파헤쳐 보겠습니다.
1. “야, 너두 데이터만 줄 수 있어?” (API-First의 세계) 💬
보통의 워드프레스는 ‘잔소리꾼’입니다. 글 하나 보여달라고 하면 “자, 여기 글 제목이랑, 본문이랑, 내가 만든 디자인이랑, 무거운 자바스크립트랑… 다 가져가!”라며 뭉텅이로 던져주죠.
하지만 디자인 엔지니어인 저는 그 디자인이 마음에 안 듭니다. 저는 오직 ‘순수한 데이터’만 원하거든요.
- 워드프레스(Backend): “나 이제 디자인 안 해. 글(Data)만 보관하는 창고가 될게.”
- Next.js(Frontend): “오케이, 너는 데이터만 줘. 화면은 내가 기가 막히게 깎아서 보여줄게.”
이렇게 역할 분담을 하는 것을 API-First 방식이라고 합니다. 이제 둘은 복잡한 HTML이 아니라, 아주 가벼운 JSON이라는 공통 언어로만 대화합니다.
2. 도서관과 카페의 콜라보레이션 📚☕
이 구조를 조금 더 쉽게 비유해 볼까요?
- 워드프레스는 ‘도서관’입니다. 방대한 책(콘텐츠)들이 잘 정리되어 있죠. 하지만 도서관 인테리어는 좀 딱딱하고 로딩(?)도 느릴 수 있습니다.
- Next.js는 ‘세련된 카페’입니다. 손님이 오면 가장 예쁜 컵에 음료를 담아 0.1초 만에 내놓는 곳이죠.
제가 하는 일은 도서관(WP)에서 필요한 정보만 쏙쏙 뽑아와서, 카페(Next.js)에서 제 스타일대로 플레이팅해 손님에게 내놓는 것입니다. 손님은 도서관의 묵직한 공기를 견딜 필요 없이, 카페의 쾌적함만 누리면 되는 거죠! 😎
3. 왜 이렇게 하면 미친 듯이 빠를까요? (0.1초 컷의 비결) ⚡
단순히 분리만 한다고 빨라지는 건 아닙니다. 여기서 Next.js의 전매특허 기술이 들어갑니다.
- 미리 굽기(SSG): 사용자가 오기 전에 이미 페이지를 다 구워놓습니다. 빵집에서 주문 들어오면 굽는 게 아니라, 이미 갓 구운 빵을 진열해둔 셈이죠.
- 데이터만 슥~: 페이지 전체를 새로고침 하지 않고, 필요한 데이터만 조용히 갈아 끼웁니다.
- 성능 점수의 정점: 워드프레스의 무거운 테마 엔진을 거치지 않으니, Lighthouse 점수가 춤을 출 수밖에요! 💃
4. 디자인 엔지니어의 ‘바이브’ 한 스푼 🎨
“디자인 엔지니어가 왜 이런 구조까지 신경 써야 해?”라고 묻는다면 제 대답은 이렇습니다. 구조가 곧 디자인의 자유도니까요. 이 구조 덕분에 저는 워드프레스의 제약 없이 제가 원하는 미니멀한 레이아웃을 Next.js에서 마음껏 코딩할 수 있었습니다. AI와 함께하는 ‘바이브코딩’ 덕분에 이 복잡한 연결 로직도 아주 우아하게 해결했죠.
💡 2편 요약: 분리의 미학
- 워드프레스는 콘텐츠 저장소 역할만 수행 (관리의 편의성)
- Next.js는 화면 구현만 수행 (성능과 디자인의 자유도)
- 둘 사이는 API(JSON)라는 가벼운 언어로 대화!
자, 이제 머리와 몸통을 왜 나눴는지 이해되셨나요? 그럼 다음 3편에서는 이 똑똑한 몸통(워드프레스)을 어디에 모셔두어야 할지, Cloudways 서버 세팅기로 돌아오겠습니다. 🏠
올리브의 한 줄 요약: “따로 살아야 더 애틋하고 빠릅니다. 웹사이트도, 서버도요.” 🌿