안녕하세요, 올리브입니다.
디자인 엔지니어에게 ‘로딩 스피너’란 무엇일까요? 그건 마치 공들여 지은 세이지 톤의 미니멀한 대저택 현관문에 “잠시만요, 청소 중입니다”라는 팻말을 걸어두는 것과 같습니다. 절대 용납할 수 없죠. 🙅♂️
제 블로그의 목표는 명확했습니다. “디자인은 우아하게, 속도는 무자비하게.” 그 결과, 현재 제 블로그는 Lighthouse 성능 점수 100점을 기록하며 ‘0.1초 컷’의 바이브를 뽐내고 있습니다.
어떻게 그게 가능했냐고요? 바로 ‘Headless(헤드리스) 워드프레스’ 덕분입니다.
1. 워드프레스, 넌 몸만 와. 머리는 내가 짤게! 🧠
보통 워드프레스는 ‘일체형 컴퓨터’ 같습니다. 글 쓰는 곳(백엔드)과 화면 보여주는 곳(프런트엔드)이 본드로 딱 붙어 있죠. 관리는 편하지만, 내가 원하는 세밀한 디자인과 미친듯한 속도를 구현하기엔 워드프레스가 입혀주는 ‘기본 옷(테마)’이 너무 무겁습니다. 껴입은 옷이 많으니 당연히 느릴 수밖에요. 🐢
그래서 저는 ‘헤드리스’ 방식을 택했습니다.
- 몸체(Backend): 글 관리 잘하는 워드프레스야, 넌 데이터만 잘 보관하고 있어.
- 머리(Frontend): 화면은 내가 Next.js로 픽셀 하나하나 집요하게 깎아서 초고속으로 보여줄게!
이게 바로 머리(Head)가 없는(less) 워드프레스, 즉 데이터와 화면을 분리하는 마법입니다. 🪄
2. 성능 점수에 집착하는 이유? 🧐
디자인 엔지니어에게 성능은 곧 디자인의 ‘완성도’입니다. 아무리 타이포그래피가 예술이고 세이지 그린 컬러가 감각적이어도, 페이지가 뜰 때까지 사용자가 손가락을 빨고 있다면 그건 실패한 디자인이니까요.
저는 0.1초라도 더 줄이기 위해 다음과 같은 결단을 내렸습니다.
- 무거운 플러그인 압수: 워드프레스의 느려터진 테마 엔진을 아예 꺼버렸습니다.
- Next.js의 마법: 페이지를 미리 다 구워두는(SSG) 기술을 써서, 사용자가 클릭하자마자 화면이 튀어나오게 만들었죠.
- 엣지 캐싱: 전 세계 어디서 접속해도 0.1초 만에 닿을 수 있게 Vercel의 힘을 빌렸습니다.
3. ‘바이브코딩’으로 효율까지 챙기기 💻
이 복잡한 과정을 혼자 다 하려면 머리가 하얘졌겠지만, 저는 AI와 합을 맞추는 ‘바이브코딩’을 적극 활용했습니다. 전체적인 테마는 제가 설계하고, 코드는 AI에게 맡겨 생산성을 펌핑시켰죠. (이렇게 말하지만 정말 a부터 z까지 하나하나 다 물어봤답니다. 물어보는 시간만 오백분)
💡 1편 요약: 왜 헤드리스인가?
- 속도: 워드프레스의 무거운 짐을 벗어던지고 광속을 얻기 위해.
- 자유도: 정해진 테마 안에서 노는 게 아니라, 내가 원하는 디자인을 코드로 직접 구현하기 위해.
- 전문성: 디자인 엔지니어로서 성능까지 완벽하게 컨트롤하고 싶어서!
다음 2편에서는 이 ‘머리’와 ‘몸통’이 어떻게 서로 대화하는지, 그 은밀하고도 기술적인 분리 원리를 아주 쉽게 풀어보겠습니다. 기대해 주세요! 🔗