랜딩 블록 CMS 관리 콘솔
랜딩 페이지의 블록을 담당자가 직접 추가·삭제·순서 변경·ON/OFF 하고 텍스트·이미지·영상·버튼 링크를 고친 뒤 기기 폭별 미리보기를 거쳐 게시하는 CMS 콘솔 프로젝트입니다.
프로젝트 개요
랜딩 페이지의 블록을 담당자가 직접 추가·삭제·순서 변경·ON/OFF 하고 텍스트·이미지·영상·버튼 링크를 고친 뒤 기기 폭별 미리보기를 거쳐 게시하는 CMS 콘솔 프로젝트입니다. 포트폴리오 1과 같은 블록 데이터를 사용하며, 기존 자체 구축 서버에 연동하는 설정과 운영 가이드 화면까지 함께 구현합니다. Node.js와 Express 관리 API, PostgreSQL 초안·게시본 이력으로 구성합니다.
작업 범위
- 페이지 구성: 블록을 추가·삭제하고 순서를 바꾸며 영역별로 ON/OFF 하는 랜딩 구성 화면을 구현하고, 바꾼 내용이 오른쪽 요약과 임시 저장 건수에 바로 반영됩니다
- 블록 편집: 블록의 타이틀, 본문, 이미지·영상 소재, 버튼 문구와 링크를 입력 폼에서 고치면 오른쪽 미리보기에 곧바로 보이는 편집 화면을 구현합니다
- 미리보기·게시: 데스크톱·태블릿·모바일 폭으로 전환해 개편안을 미리 보고 초안을 저장한 뒤 게시 적용하는 화면을 구현합니다
- 서버 연동 설정: 기존 자체 구축 서버에 렌더 모듈과 관리 API를 연동하는 방식, 배포 단계, 유지보수 업체와의 협업 항목을 정리한 설정 화면을 구현합니다
주요 업무
- 페이지 구성 화면: 블록 배열의 순서와 enabled 값을 하나의 초안 상태로 관리하고 변경 즉시 저장 가능한 초안 JSON으로 직렬화합니다
- 블록 편집 화면: 입력 폼은 블록 스키마에서 자동 생성되고 링크·글자 수 검사는 제출 전에 수행합니다
- 미리보기·게시 화면: 미리보기는 포트폴리오 1과 같은 렌더러를 iframe 없이 폭이 제한된 컨테이너에서 실행하고 게시는 이력에 기록합니다
- 서버 연동 설정 화면: 서버 스택이 소스 분석 후 확정되므로 연동 방식 3종(내장 모듈·별도 API·정적 산출물)을 선택 가능한 구조로 설계합니다
프로젝트 핵심 과제
여러 담당자가 같은 블록을 동시에 고칠 때 초안이 덮어써지지 않
버전 번호 기반 낙관적 잠금 설계가 필요합니다
게시 시점에 기존 서버가 읽는 게시본 JSON을 원자적으로 교체해 중간 상태가 노출되지 않게 하는 방식을 설계할 필요가 있습니다
이미지·영상 소재 교체 시 사용 중인 블록을 추적하고 삭제를 막는 참조 관리 구조가 필요합니다
기존 자체 구축 서버의 스택과 유지보수 업체의 배포 절차가 확정되지 않아 소스 분석 후 연동 어댑터 지점을 정하고 배포 단계를 협의할 계획입니다
핵심 기능 상세
페이지 구성
블록을 추가·삭제하고 순서를 바꾸며 영역별로 ON/OFF 하는 랜딩 구성 화면을 구현하고, 바꾼 내용이 오른쪽 요약과 임시 저장 건수에 바로 반영됩니다.
- 블록 배열 순서를 위·아래 이동 버튼과 드래그 두 방식으로 바꾸는 상태 reducer 설계
- enabled 스위치를 낙관적 업데이트로 반영하고 실패 시 되돌리는 토스트 제공
- 삭제는 되돌리기 가능한 토스트로 처리하고 게시본에는 영향을 주지 않는 초안 분리 구조
개발자 개입 없이 블록을 조립하는 핵심 흐름을 초안·게시본 분리 구조로 구현합니다.
블록 편집
블록의 타이틀, 본문, 이미지·영상 소재, 버튼 문구와 링크를 입력 폼에서 고치면 오른쪽 미리보기에 곧바로 보이는 편집 화면을 구현합니다.
- JSON Schema에서 입력 필드를 생성하는 폼 렌더러 설계
- 링크 형식·글자 수 검사를 제출 시점에 실행하고 틀린 칸에 오류 문구 표시
- 편집 중 내용을 디바운스로 초안 저장해 이탈 시 유실 방지
스키마 하나로 입력 폼, 검증, 미리보기를 함께 만들어 새 블록 템플릿 추가 비용을 줄입니다.
미리보기·게시
데스크톱·태블릿·모바일 폭으로 전환해 개편안을 미리 보고 초안을 저장한 뒤 게시 적용하는 화면을 구현합니다.
- 폭 고정 컨테이너와 ResizeObserver로 3종 기기 미리보기 구현
- 초안과 게시본을 버전 행으로 분리하고 게시 시 현재 버전 포인터만 교체
- 게시 확인 대화상자에 변경 블록 수를 계산해 표시
게시 전 초안 미리보기와 게시본 포인터 교체 방식으로 실제 사이트 반영 전 안전하게 확인하게 합니다.
서버 연동 설정
기존 자체 구축 서버에 렌더 모듈과 관리 API를 연동하는 방식, 배포 단계, 유지보수 업체와의 협업 항목을 정리한 설정 화면을 구현합니다.
- 렌더러를 프레임워크 비의존 모듈로 분리해 기존 서버 템플릿에 삽입 가능하게 설계
- 관리 API를 REST로 분리해 기존 인증 체계와 연결하는 어댑터 지점 정의
- 배포 단계 체크리스트와 이력을 PostgreSQL 테이블로 기록
기존 소스와 충돌하지 않도록 렌더러와 관리 API를 독립 모듈로 나누는 통합 구조를 제안합니다.
프로젝트 진행 단계
초안·게시본 데이터 모델 설계 · 2026.11
블록, 페이지 버전, 게시 포인터, 이력 테이블 설계와 Prisma 마이그레이션 구성
관리 API와 권한 구현 · 2026.11
Express 기반 블록 CRUD·순서 변경·게시 API 구현, 편집자·관리자 두 역할 검사 적용
편집 폼과 미디어·게시 이력 · 2026.11
JSON Schema 기반 편집 폼·즉시 미리보기, S3 업로드와 사용 중 블록 추적, 게시 이력 조회와 이전 게시본 되돌리기 구현
기존 서버 연동과 운영 가이드 · 2026.11
렌더 모듈 연동 방식 3종 정리, 블록 교체 운영 가이드 문서 작성
개발 결과
기술적 주안점
- 개발자 개입 없이 블록을 조립하는 핵심 흐름을 초안·게시본 분리 구조로 구현합니다
- 스키마 하나로 입력 폼, 검증, 미리보기를 함께 만들어 새 블록 템플릿 추가 비용을 줄입니다
- 게시 전 초안 미리보기와 게시본 포인터 교체 방식으로 실제 사이트 반영 전 안전하게 확인하게 합니다
