안녕하세요, 0.1px의 정렬만큼이나 콘텐츠의 ‘논리적 흐름’에 집착하는 집착가, 디자인 엔지니어 올리브입니다. 🌿

화려한 컬러 피커도 좋지만, 디자인 엔지니어의 블로그라면 모름지기 시스템으로 승부해야 합니다. 특히 저처럼 10부작 시리즈를 연재할 때는, 사용자가 1편을 다 읽고 2편으로 자연스럽게 넘어갈 수 있도록 돕는 ‘내비게이션’이 필수죠.

오늘은 단순히 본문에 링크를 거는 노가다(?)가 아니라, 데이터로 글들을 묶어주는 연재 시스템 구축기를 공유합니다.

1. “연결은 수동이 아니라 자동이어야 합니다” (시리즈 데이터의 규격화) 📐

보통은 글 하단에 “다음 편 보기: [링크]”라고 직접 적습니다. 하지만 만약 시리즈 순서가 바뀌거나 제목이 수정된다면? 일일이 모든 글을 수정해야 하는 대참사가 벌어집니다. 디자인 엔지니어에게 이런 비효율은 있을 수 없는 일이죠. 🙅‍♂️

그래서 저는 ACF를 통해 모든 포스팅에 ‘연재 정보’라는 규격을 입혔습니다.

  • 시리즈 이름 (Series Name): 현재 글이 어떤 연재물에 속하는지 정의 (예: 워드프레스 0.1초 컷)
  • 연재 순서 (Part Number): 10부작 중 몇 번째 글인지 정의 (예: 7)

2. 데이터로 구현하는 ‘이전 편 / 다음 편’ 내비게이션 🏗️

이렇게 데이터를 구조화해두면, Next.js 프론트엔드에서는 마법 같은 일이 일어납니다.

굳이 제가 링크를 따오지 않아도, “지금 읽고 있는 글이 ‘워드프레스 0.1초 컷’ 시리즈의 ‘7편’이니까, 같은 시리즈의 ‘6편’과 ‘8편’을 찾아서 하단 내비게이션에 띄워줘!”라는 로직을 코드로 짤 수 있게 되는 것이죠.

데이터가 스스로 길을 찾는 것, 이것이 바로 제가 추구하는 엔지니어링의 우아함입니다. 😎

3. 관리의 품격: 빈칸만 채우면 완성되는 연재 ✍️

이제 저는 글을 올릴 때 레이아웃이나 링크 연결을 고민하지 않습니다. 워드프레스 관리자 화면에 제가 만들어둔 ‘시리즈 이름’과 ‘회차’ 칸에 숫자만 딱 적으면 끝이죠.

나머지 복잡한 연결은 제가 이미 완벽하게 짜놓은 Next.js 디자인 시스템이 알아서 처리합니다. 뼈대를 집요하게 설계해둔 덕분에 콘텐츠 생산 속도는 비약적으로 상승했습니다. 🚀

💡 7편 요약: 왜 시리즈 메타데이터인가?

  • 유지보수 제로: 링크를 직접 걸 필요 없이 데이터로 자동 연결.
  • 사용자 경험(UX): 독자가 흐름을 잃지 않고 시리즈를 정주행할 수 있도록 유도.
  • 확장성: 나중에 다른 연재 시리즈를 시작해도 동일한 시스템을 그대로 재사용 가능.

자, 이제 연재를 위한 뼈대까지 완벽하게 갖췄습니다. 다음 8편에서는 이 시리즈 데이터를 활용해 검색 로봇에게 “이 글들은 하나로 묶인 소중한 시리즈야!”라고 알려주는 SEO/ACF 브릿지 설정 이야기로 돌아오겠습니다! 🌉