← 포트폴리오 목록

매거진 콘텐츠 관리 확장 플랫폼

매거진 MVP 이후 비개발자 운영자가 직접 콘텐츠를 통제할 수 있도록 기존 CMS를 확장하는 관리자 기능 데모를 구현합니다.

블록 기반 콘텐츠 제어 구조 설계텍스트/이미지/배너 블록을 JSON 트리로 관리하는 콘텐츠 모델 설계, 슬래시 메뉴 기반 블록 삽입 UI 구현
제휴 문의 상태 워크플로우 구축신규/검토중/완료 3단계 상태 전환과 변경 이력을 기록하는 워크플로우 테이블 설계
동적 SEO 관리자 도구 구현리다이렉트 규칙과 메타 데이터를 DB에서 관리하는 CRUD 화면 및 JSON-LD 미리보기 검증 도구 설계
서비스 타입Web
업종데이터 분석
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaRedisAWS S3
주요 기능
  • 콘텐츠 블록 에디터 & 배너 관리
  • 제휴 문의 관리 대시보드
  • SEO 리다이렉트 & 구조화 데이터 관리
  • 역할별 권한 & 변경 이력 감사로그
Overview

프로젝트 개요

범위: 개발, 디자인, 기획

매거진 MVP 이후 비개발자 운영자가 직접 콘텐츠를 통제할 수 있도록 기존 CMS를 확장하는 관리자 기능 데모를 구현합니다. 블록 기반 배너·텍스트 편집, 제휴 문의 관리 대시보드, SEO 리다이렉트·구조화 데이터 관리, 역할별 권한과 변경 이력 감사로그까지 통합한 확장 CMS를 Node.js 기반으로 설계합니다.

작업 범위

  • 콘텐츠 블록 에디터 & 배너 관리: 비개발자 운영자가 텍스트·이미지·배너 블록을 직접 추가·수정할 수 있는 블록 에디터를 제공합니다. 트리 구조 페이지 목록에서 원하는 화면을 선택해 인라인으로 편집합니다
  • 제휴 문의 관리 대시보드: 접수된 제휴·광고 문의를 상태별(신규/검토중/완료)로 분류하고 담당자 배정·메모를 남길 수 있는 관리 화면을 제공합니다
  • SEO 리다이렉트 & 구조화 데이터 관리: 301 리다이렉트 규칙과 페이지별 SEO 메타 정보를 관리자가 직접 등록·수정할 수 있는 화면을 제공합니다
  • 역할별 권한 & 변경 이력 감사로그: 편집자·운영자·관리자 등 역할별로 접근 가능한 메뉴와 편집 권한을 제한하고, 모든 콘텐츠 변경 이력을 감사로그로 조회할 수 있는 화면을 제공합니다

주요 업무

  • 콘텐츠 블록 에디터 & 배너 관리 화면: 슬래시 메뉴로 블록 타입을 선택하고 드래그 핸들로 순서를 재배열하는 블록 편집 구조를 구현합니다
  • 제휴 문의 관리 대시보드 화면: 문의 목록을 상태 필터·검색으로 조회하고, 상태 변경 시 이력을 기록하는 구조를 구현합니다
  • SEO 리다이렉트 & 구조화 데이터 관리 화면: 리다이렉트 규칙 목록을 테이블로 관리하고, 규칙 저장 시 중복·순환 참조를 검증하는 구조를 구현합니다
  • 역할별 권한 & 변경 이력 감사로그 화면: 역할 기반 접근 제어(RBAC)와 변경 이력 테이블을 연동해 누가 언제 무엇을 수정했는지 추적합니다
매거진 콘텐츠 관리 확장 플랫폼
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

비개발자 운영자가 오조작으로 배너·텍스트를 잘못 수정하지 않

블록 편집 UI의 되돌리기(undo) 구조 설계가 필요합니다

제휴 문의 담당자 배정과 상태 변경을 다수 운영자가 동시에 다뤄도 충돌하지 않는 동시성 제어 설계가 필요합니다

리다이렉트 규칙이 누적될수록 순환 참조·중복 경로가 발생하지 않

사전 검증 알고리즘을 정교화합니다

역할별 권한 경계를 세분화하면서도 감사로그 조회 성능이 저하되지 않

인덱싱 전략을 설계합니다

구현 내용

핵심 기능 상세

핵심 기능 1

콘텐츠 블록 에디터 & 배너 관리

비개발자 운영자가 텍스트·이미지·배너 블록을 직접 추가·수정할 수 있는 블록 에디터를 제공합니다. 트리 구조 페이지 목록에서 원하는 화면을 선택해 인라인으로 편집합니다.

  • 블록 단위 콘텐츠 모델(JSON 트리)을 설계해 텍스트/이미지/배너/구분선 블록을 동일 API로 관리
  • 드래그 핸들 기반 블록 순서 재배열 및 슬래시(/) 명령 메뉴 구현
  • 배너 이미지 업로드 시 AWS S3 저장 및 리사이징 파이프라인 연동

비개발자가 코드 수정 없이 배너·텍스트를 직접 바꿀 수 있도록 블록 기반 UI 제어 필드를 설계해, 기존 CMS 소스코드와 연동되는 신규 제어 구조를 구현합니다.

콘텐츠 블록 에디터 & 배너 관리
콘텐츠 블록 에디터 & 배너 관리 실제 화면
핵심 기능 2

제휴 문의 관리 대시보드

접수된 제휴·광고 문의를 상태별(신규/검토중/완료)로 분류하고 담당자 배정·메모를 남길 수 있는 관리 화면을 제공합니다. 문의 목록을 상태 필터·검색으로 조회하고, 상태 변경 시 이력을 기록하는 구조를 구현합니다.

  • 문의 상태(신규/검토중/완료) 전환 워크플로우 및 변경 이력 테이블 설계
  • 담당자 배정 및 내부 메모 기록 기능 구현
  • 상태·기간별 필터링이 가능한 문의 목록 API 및 페이지네이션 구현

문의 접수부터 처리 완료까지의 상태 이력을 감사로그로 남겨, 제휴 문의 처리 현황을 투명하게 추적할 수 있는 구조를 설계합니다.

제휴 문의 관리 대시보드
제휴 문의 관리 대시보드 실제 화면
핵심 기능 3

SEO 리다이렉트 & 구조화 데이터 관리

301 리다이렉트 규칙과 페이지별 SEO 메타 정보를 관리자가 직접 등록·수정할 수 있는 화면을 제공합니다. 리다이렉트 규칙 목록을 테이블로 관리하고, 규칙 저장 시 중복·순환 참조를 검증하는 구조를 구현합니다.

  • 구URL → 신규URL 리다이렉트 규칙 CRUD 및 순환 참조 검증 로직 구현
  • 페이지별 메타 타이틀·설명·OG 이미지를 편집하는 SEO 메타 관리 폼 설계
  • 등록된 구조화 데이터(JSON-LD) 미리보기 검증 도구 구현

리다이렉트 규칙과 메타 데이터를 코드 배포 없이 관리자 화면에서 직접 관리할 수 있도록, DB 기반 동적 SEO 설정 구조를 설계합니다.

SEO 리다이렉트 & 구조화 데이터 관리
SEO 리다이렉트 & 구조화 데이터 관리 실제 화면
핵심 기능 4

역할별 권한 & 변경 이력 감사로그

편집자·운영자·관리자 등 역할별로 접근 가능한 메뉴와 편집 권한을 제한하고, 모든 콘텐츠 변경 이력을 감사로그로 조회할 수 있는 화면을 제공합니다.

  • 역할 기반 접근 제어(RBAC) 미들웨어로 메뉴·API 권한을 3단계로 분리
  • 콘텐츠 변경 이력을 diff 형태로 저장하는 감사로그 테이블 설계
  • 감사로그 검색·필터(작성자/기간/변경 유형) 화면 구현

역할 계층과 감사로그를 결합해 비개발자 다수가 운영에 참여해도 변경 추적이 가능한 관리자 기능 체계를 구축합니다.

역할별 권한 & 변경 이력 감사로그
역할별 권한 & 변경 이력 감사로그 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

CMS 콘텐츠 모델 및 블록 스키마 설계 · 2026.09

블록 타입별 JSON 스키마 정의, 기존 CMS 소스코드 분석 및 신규 필드 매핑

STEP 2

블록 에디터 & 배너 관리 화면 개발 · 2026.09

슬래시 메뉴·드래그 재배열 블록 에디터 구현, S3 이미지 업로드 파이프라인 연동

STEP 3

제휴 문의 관리 및 SEO 관리자 화면 개발 · 2026.09

문의 상태 워크플로우, 리다이렉트·메타 데이터 관리 화면 다수 구현

STEP 4

RBAC 권한 체계 및 감사로그 구현 · 2026.09

역할 3단계 접근 제어 미들웨어, 변경 이력 diff 감사로그 테이블 설계

STEP 5

관리자 화면 통합 테스트 · 2026.09

권한별 시나리오 테스트, 감사로그 정합성 검증 케이스 작성

프로젝트 성과

주요 성과

블록 기반 콘텐츠 제어 구조 설계텍스트/이미지/배너 블록을 JSON 트리로 관리하는 콘텐츠 모델 설계, 슬래시 메뉴 기반 블록 삽입 UI 구현
제휴 문의 상태 워크플로우 구축신규/검토중/완료 3단계 상태 전환과 변경 이력을 기록하는 워크플로우 테이블 설계
동적 SEO 관리자 도구 구현리다이렉트 규칙과 메타 데이터를 DB에서 관리하는 CRUD 화면 및 JSON-LD 미리보기 검증 도구 설계
RBAC 및 변경 이력 감사로그 구축역할 3단계 접근 제어 미들웨어와 diff 기반 감사로그 테이블을 연동한 추적 구조 설계
Highlights

기술적 주안점

  • 비개발자가 코드 수정 없이 배너·텍스트를 직접 바꿀 수 있도록 블록 기반 UI 제어 필드를 설계해, 기존 CMS 소스코드와 연동되는 신규 제어 구조를 구현합니다
  • 문의 접수부터 처리 완료까지의 상태 이력을 감사로그로 남겨, 제휴 문의 처리 현황을 투명하게 추적할 수 있는 구조를 설계합니다
  • 리다이렉트 규칙과 메타 데이터를 코드 배포 없이 관리자 화면에서 직접 관리할 수 있도록, DB 기반 동적 SEO 설정 구조를 설계합니다

유사한 프로젝트를 기획하고 계신가요?

FIRSTPIP이 개발 범위와 로드맵을 함께 정리해드립니다

무료 상담 시작하기