안녕하세요, 눈에 보이지 않는 서버의 뼈대부터 화면에 뿌려지는 0.1px의 시각적 안정감까지 모든 것을 통제해야 직성이 풀리는 집착가, 디자인 엔지니어 올리브입니다. 🌿
무거운 워드프레스의 몸통을 잘라내고(Headless), ACF로 데이터의 뼈대를 정교하게 깎고, Next.js로 화면을 그리기까지. 길고 길었던 10부작의 마지막 에피소드입니다. 남들이 들으면 “그냥 유료 테마 하나 사서 깔면 하루 만에 끝날 걸 왜 사서 고생해?”라고 할지도 모릅니다.
하지만 오늘은 그 타협하지 않은 깐깐함이 어떤 결과물로 돌아왔는지, 그리고 왜 우리가 이 복잡한 아키텍처를 사랑할 수밖에 없는지 이야기하며 여정의 막을 내리려 합니다.
1. 픽셀부터 데이터베이스까지, 완벽한 ‘통제권(Control)’ 🎮
제가 이 험난한 Headless 아키텍처를 선택한 가장 큰 이유를 꼽자면 바로 ‘완벽한 통제권’입니다. 일반 워드프레스 테마를 쓰면 편하겠지만, 제가 원하지 않는 이상한 CSS 클래스와 무거운 자바스크립트가 화면을 더럽히는 꼴을 봐야 하죠.
하지만 지금은 다릅니다.
- 데이터의 통제: ACF를 통해 제가 직접 설계한 폼과 규격에만 글을 씁니다.
- 렌더링의 통제: Next.js를 통해 어떤 데이터를 언제 화면에 띄울지 1ms 단위로 지휘합니다.
- 디자인의 통제: 쓸데없는 코드 한 줄 없이, 오직 제가 짠 100% 순수한 마크업과 스타일만 화면에 출력됩니다.
이 완벽한 통제권은 디자인 엔지니어에게는 마치 지휘봉과 같습니다. 머릿속에 그린 100%의 설계도를 화면에 100% 그대로 구현해 내는 짜릿함이죠.
2. 체감 속도와 시각적 안정성(Layout Shift 방어) 🧱
배포 후 제가 가장 만족했던 부분은 제 손끝에서 직접 느껴지는 ‘단단한 체감 속도’였습니다.
링크를 클릭했을 때 화면이 하얗게 멈추는 시간 없이 곧바로 세이지 그린 톤의 UI가 뜨는 것. 프론트엔드로 전달된 데이터와 폰트가 렌더링될 때 0.1px도 덜컹거리지 않고 처음부터 제자리에 단단하게 박혀 있는 것. 접속하자마자 “아, 이 사이트 진짜 쾌적하고 탄탄하다”라고 느끼게 만드는 그 감각적 퍼포먼스가 제가 의도한 0.1초 컷의 진짜 의미입니다.
3. 두 세계의 완벽한 조화, oliveves.blog 🌉
이 블로그는 디자이너로서의 저와 엔지니어로서의 제가 만나 치열하게 토론하고 타협을 이뤄낸 결과물입니다.
화면을 아름답게 그리는 데서 멈추지 않고, 그 아름다움이 사용자에게 도달하는 ‘과정의 우아함’까지 설계하는 것. 그것이 제가 정의하는 디자인 엔지니어링입니다. 코드는 눈에 보이지 않지만, 그 코드가 만들어낸 0.1초의 쾌적함과 흔들림 없는 레이아웃은 사용자의 무의식 속에 ‘신뢰’라는 이름으로 남게 될 테니까요.
4. 마치며: 이제 뼈대에 살을 붙일 시간 ✍️
시스템 구축은 끝났습니다. 완벽하게 정돈된 데이터 창고와, 빛의 속도로 렌더링되는 프론트엔드 무대가 준비되었죠.
이제 저는 서버 세팅이나 불필요한 오류를 잡느라 밤을 새우는 대신, 이 아름다운 캔버스 위에 저만의 이야기와 포트폴리오를 채워 넣는 데 집중하려 합니다. 지금까지 ‘워드프레스 0.1초 컷’ 시리즈를 함께 달려와 주셔서 감사합니다. 앞으로 oliveves.blog에 쌓일 디자인과 코드 이야기들도 기대해 주세요! 🚀
올리브의 한 줄 요약: “가장 완벽하게 설계된 시스템은 비로소 자신의 존재를 지우고, 오직 ‘콘텐츠’만을 빛나게 합니다.” 🌿