Werelight

사이트의 목적은 체육 종사자가 새로운 진로를 탐색할 수 있는 커뮤니티를 만드는 것이었습니다. 기존 카페가 가진 게시판과 콘텐츠 운영 기능은 유지해야 했지만, 사용자에게는 별도의 브랜드와 웹 경험이 필요했습니다.

새로운 CMS와 게시판 Backend를 처음부터 만드는 대신 WordPress를 데이터와 운영 도구로 사용하고, React가 실제 사용자 화면을 담당하도록 했습니다. 결과적으로 기존 운영자의 콘텐츠 관리 습관은 크게 바꾸지 않으면서 사용자 인터페이스만 독립적인 애플리케이션으로 가져갈 수 있었습니다.

WordPress 메뉴 항목에 category 정보를 연결하는 custom field를 추가했습니다. 운영자가 메뉴를 추가하면 프론트 Navigation과 해당 category의 게시글 목록도 함께 확장되도록 구성했습니다.

채용 게시판, YouTube 등 외부 영상 embed, 게시판별 추천 글, 일반 게시판에서 채용정보로 바로 이동하는 quick menu도 추가했습니다. 채용 게시판 상단에는 운영자가 지정한 추천 콘텐츠를 우선 노출하고 나머지는 최신순으로 배치했습니다.

운영자는 WordPress에서 콘텐츠와 메뉴를 관리하고, 사용자는 React 화면에서 게시판·추천 글·채용정보를 탐색하도록 구성했습니다.

CRA 기반 SPA는 React bundle이 실행되기 전에는 실제 콘텐츠가 렌더링되지 않습니다. 브라우저 사용자에게는 큰 문제가 아닐 수 있지만 검색엔진과 소셜 공유의 title, description, Open Graph metadata는 URL별 콘텐츠를 먼저 알아야 했습니다.

PHP 페이지가 WordPress API에서 현재 URL에 필요한 데이터를 조회해 HTML의 metadata와 OG tag를 채우도록 했습니다. 그 HTML 안에 React bundle을 삽입하고 본문 UI는 Client-side rendering으로 제공했습니다.

서버 응답에 포함되는 범위는 metadata와 OG tag였습니다. 본문은 React bundle 로딩 뒤에 나타나므로 초기 화면이 늦게 보이는 한계가 남았습니다.

URL별 title·description·Open Graph는 PHP가 생성하고, 게시판과 채용정보의 본문 UI는 React가 렌더링했습니다. 서버와 브라우저가 처리할 내용을 나누어 구현했습니다.

이 구성으로 공유에 필요한 metadata를 먼저 반환할 수 있었습니다. 본문 HTML을 서버에서 생성하는 기능은 구현 범위에 포함하지 않았습니다.