서울국제
작가축제

사용자에게는 작가, 프로그램과 행사 콘텐츠를 보여주는 축제 웹사이트였지만, 운영자 관점에서는 행사 기간 동안 계속 콘텐츠를 수정하고 노출 순서를 바꾸어야 하는 시스템이었습니다. WordPress를 데이터 원천이자 REST API 계층으로 사용하고, 사용자 화면과 관리자 화면은 하나의 Next.js 애플리케이션 안에서 구성했습니다.

Next.js 앱에 페이지·배너·메뉴 컴포넌트와 API hook을 구성하고, WordPress에는 headless theme를 사용했습니다. WordPress는 콘텐츠 저장과 API를, Next.js는 사용자·관리자 화면을 담당하도록 분리했습니다.

CMS 제약을 큰 개편 없이 우회

일부 콘텐츠는 WordPress 본문 에디터가 아니라 metadata 필드에 저장됐습니다. 하지만 문장 일부에 italic, bold, 줄바꿈 같은 표현이 필요했습니다. 별도의 대형 Rich Text Editor를 도입하기보다 운영자가 입력할 수 있는 작은 토큰 문법을 만들고, 프론트에서 문자열을 파싱해 표현으로 바꿨습니다.

기존 WordPress 데이터 구조를 유지하면서 필요한 서식만 추가했습니다. 운영자가 metadata 필드에 입력한 토큰을 프론트에서 해석해 기울임·굵게·줄바꿈을 표현했습니다.

WordPress 기본 관리자 화면을 깊게 커스터마이징하면 기존 CMS 내부 구조와 싸워야 했습니다. 대신 같은 Next.js 프로젝트에 전용 admin route를 만들고, 사용자 페이지의 레이아웃과 맥락을 그대로 가져오되 실제 콘텐츠가 바뀌는 부분을 input과 편집 UI로 교체했습니다.

운영자는 추상적인 필드 이름만 보고 수정하는 대신 실제 사용자가 보는 화면과 유사한 맥락 안에서 배너와 메뉴를 관리할 수 있었습니다. 배너 노출 순서를 Drag & Drop으로 변경하고, 메뉴 항목 추가·삭제·순서·링크·노출 여부를 조정할 수 있게 했습니다.

반복되는 WordPress API를 작은 프레임워크로

Custom REST endpoint를 만들 때 반복되는 요청·응답 처리와 생성 인자를 class로 모듈화하고 기본값을 제공했습니다. 다른 WordPress 프로젝트에서도 파일 단위로 복사해 재사용했습니다.

행사 안에는 외부 게임 개발자가 만든 타자게임도 포함됐습니다. 디자이너가 게임 화면을 기획했고, 저는 게임에 필요한 데이터가 무엇인지 외부 개발자와 맞춘 뒤 WordPress Custom REST API에서 필요한 형태로 제공했습니다.

외부 개발자가 전달한 게임 번들을 ZIP으로 받아 서버에서 수동 교체했습니다. 게임 데이터는 API로 연동했지만, 번들 전달과 배포는 수작업으로 남았습니다.

클라우드 이전은 전문 대행사가 담당했습니다. 저는 백업 전달, 이전 환경의 애플리케이션 프로세스 재기동과 정상화를 맡았습니다. 이전 후에는 사설망의 outbound 제약으로 API 호출이 실패했습니다.

기존 Next.js SSR은 WordPress API의 외부망 주소를 호출했습니다. 이전된 서버에서는 외부 outbound가 차단돼 같은 API에 접근할 수 없었습니다.

사용자 브라우저에서는 외부 WordPress API에 접근할 수 있었습니다. 해당 부분을 CSR로 전환해 요청을 브라우저에서 보내도록 변경하고 서비스를 정상화했습니다.

이 대응은 애플리케이션의 API 요청 위치를 바꾼 조치였습니다. 사설망의 통신 정책과 인프라 이전은 대행사의 담당 범위였습니다.

클라우드 전환 대행사와 이전 이후의 정상 동작 기준을 맞추기 위해 사용자 기능별 수동 E2E 검증 항목을 작성했습니다.

사용자 기능별 기대 동작을 문서로 정리해 외부 업체와 공유할 수 있는 검증 기준을 마련했습니다. 이전 후 애플리케이션 확인에는 이 수동 검증 항목을 사용했습니다.