안녕하세요, 디자인과 성능의 완벽한 레이아웃을 설계하는 집착가, 디자인 엔지니어 올리브입니다. 🌿
성능 점수 100점이라는 목표는 단순히 코드를 잘 짜는 것만으로 달성되지 않습니다. 오히려 무엇을 ‘하지 않을지’ 결정하는 데서 판가름 나죠. 특히 워드프레스는 기본적으로 꽤 넉넉한(?) 몸집을 가지고 있습니다. 하지만 저는 이 친구를 그대로 쓰지 않고, 오직 ‘데이터 엔진’으로만 활용하기 위해 혹독한 다이어트를 감행했습니다.
오늘은 0.1초의 응답 속도를 위해 제가 선택한 ‘비우기’의 기술을 공유합니다.
1. 테마라는 거추장스러운 옷을 벗어던지기 🙅♂️
보통의 워드프레스 유저는 예쁜 유료 테마나 엘리멘터(Elementor) 같은 페이지 빌더를 고민합니다. 하지만 디자인 엔지니어에게 그런 ‘완제품’은 오히려 독입니다. 화면은 이미 Next.js에서 제가 직접 설계한 디자인 시스템대로 렌더링되고 있으니까요.
그래서 저는 워드프레스의 모든 시각적 기능을 정지시켰습니다.
- 결단: 무거운 테마 엔진을 거치지 않도록 가장 가벼운 기본 테마만 남기고, 모든 레이아웃 관련 기능을 무시했습니다.
- 효과: 서버가 화면을 그리느라 힘을 빼는 대신, 오직 API 요청에만 모든 에너지를 쏟을 수 있는 ‘슬림한 상태’가 되었습니다.
2. 소수정예: 디자인 엔지니어가 선택한 필수 플러그인 3대장 🛠️
“플러그인을 많이 깔면 느려진다”는 상식이죠. 저는 무작정 기능을 추가하는 대신, 제 블로그의 뼈대를 지탱할 전략적 핵심 도구들만 엄선했습니다. 이 친구들이 없었다면 0.1초 컷은 불가능했을 거예요.
- WPGraphQL: 워드프레스의 데이터를 Next.js로 쏴주는 핵심 통로입니다. 필요한 데이터만 골라 받을 수 있어 성능 최적화의 일등 공신이죠.
- Advanced Custom Fields (ACF): 워드프레스의 기본 구조를 넘어, 제가 설계한 커스텀 데이터(포트폴리오 스택, 프로젝트 상세 등)를 담는 정교한 그릇이 됩니다.
- Rank Math SEO: 헤드리스 환경에서도 구글 로봇과의 우정은 중요합니다. 메타 데이터를 관리하기 위한 가장 가볍고 강력한 비서입니다.
3. 성능 집착가의 ‘더하기’가 아닌 ‘빼기’의 미학 📏
플러그인 리스트가 깔끔할수록 제 마음도 편안해집니다. 저는 이미지 최적화나 캐싱 같은 기능조차 워드프레스 내부 플러그인에 맡기지 않았습니다. 그런 건 Vercel의 Edge 네트워크나 Cloudways의 서버 설정에서 처리하는 게 훨씬 빠르거든요.
워드프레스 내부 연산을 최소화할수록 API 응답 속도는 비약적으로 상승합니다. 이것이 바로 디자인 엔지니어가 성능을 설계하는 방식이죠. 😎
4. 마치며: 가벼워진 몸으로 날아오를 시간 🚀
이제 제 워드프레스는 불필요한 기능은 덜어내고, 오직 데이터를 위해 존재하는 완벽한 데이터 저장소가 되었습니다. 겉모습은 아주 단순해 보이지만, 내부적으로는 0.1초의 응답 속도를 위해 철저히 계산된 구조죠.
💡 4편 요약: 엔지니어링 기반의 비우기
- 테마/빌더 배제: 프론트엔드와 백엔드의 역할을 엄격히 분리하여 부하 감소.
- 전략적 플러그인: WPGraphQL, ACF, Rank Math로 구성된 최소 정예 멤버 운용.
- 최적화 주체 이동: 워드프레스 내부 연산을 최소화하고 서버/배포 단에서 성능 해결.
자, 이제 가벼워진 데이터들을 Next.js로 우아하게 전달할 차례입니다. 다음 5편에서는 이 데이터들의 스마트한 통역사, WPGraphQL 설정법에 대해 깊이 있게 다뤄보겠습니다! 🍣
올리브의 한 줄 요약: “최고의 성능은 무엇을 더할지가 아니라, 무엇을 더 뺄 수 있을지를 고민할 때 완성됩니다.” 🌿