← 포트폴리오 목록
웹툰·출판 콘텐츠 CMS 관리자
비개발자 운영자가 작품(WORKS)과 소식(NEWS)을 직접 등록·관리할 수 있는 CMS 관리자 구현한 프로젝트입니다.
블록 직렬화 편집기 아키텍처 구축5종 블록 타입을 JSON 스키마로 직렬화하고 dnd-kit 기반 순서 편집을 구현해 코드 없이 자유 배치 지원
조건부 CTA 스키마 설계링크버튼 노출·문구·URL·새 창 여부를 배열 스키마로 정의해 콘텐츠별 최대 2개 CTA를 동적으로 구성
이미지 파생 리사이징 파이프라인 구현Sharp 기반 파생 이미지 3종 자동 생성과 Bull Queue 비동기 처리로 대용량 업로드 대응 구조 설계
Overview
프로젝트 개요
비개발자 운영자가 작품(WORKS)과 소식(NEWS)을 직접 등록·관리할 수 있는 CMS 관리자 구현한 프로젝트입니다. 트리 구조의 콘텐츠 탐색, 자유형 블록 편집기, 노출·정렬·조건부 링크버튼 설정, 이미지 자동 리사이징까지 MVP 이후 운영 단계에서 필요한 관리 기능을 통합 설계합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
자유형 블록 편집기에서 텍스트와 이미지를 임의 순서로 배치할 때 렌더링 순서와 저장 스키마의 정합성 리스크
정규화된 블록 배열과 버전 검증으로 대응합니다
상단 고정과 순서 변경이 동시에 발생할 때 정렬 값 충돌 리스크
정수 순서 대신 lexorank 방식의 문자열 정렬 키로 대응합니다
대용량 이미지를 다수 업로드할 때 리사이징 처리 지연으로 관리자 화면이 지연될 리스크
Bull Queue 비동기 처리와 진행 상태 폴링으로 대응합니다
핵심 기능 1
통합 콘텐츠 대시보드
작품(WORKS)과 소식(NEWS)을 한 화면에서 관리하는 CMS 대시보드로, 상태별 콘텐츠 현황과 최근 등록 항목을 한눈에 확인할 수 있습니다
핵심 기능 2
자유형 블록 편집기
텍스트와 이미지를 블록 단위로 자유롭게 배치하는 편집기로, 다수 이미지 업로드·이미지별 캡션·전체폭/2단 배치 전환을 지원합니다. 블록 직렬화 스키마 + dnd-kit 순서 편집
핵심 기능 3
노출 설정 관리
콘텐츠별 카테고리, 노출 위치, 상단 고정, 순서 변경, 최대 2개 조건부 링크버튼(문구·URL·새 창 여부)을 설정하는 속성 패널입니다. 우측 인스펙터 폼 + 트랜잭션 기반 정렬 재계산
핵심 기능 4
미디어 라이브러리
업로드 이미지를 규격별(웹툰 키비주얼 480×623, 표지/썸네일 145×200)로 자동 리사이징하고 용량을 최적화하는 미디어 라이브러리입니다. Sharp 리사이징 파이프라인 + Bull Queue 비동기 업로드
구현 과정
프로젝트 진행 단계
STEP 1
콘텐츠 스키마 및 CPT 구조 설계
작품/뉴스 통합 Content 테이블 설계, 카테고리·노출위치·상단고정 등 12개 속성 필드 정의
STEP 2
자유형 블록 편집기 개발
블록 타입 5종 직렬화 스키마와 dnd-kit 기반 순서 편집 기능 구현
STEP 3
속성 인스펙터 & 노출 제어 API 개발
카테고리·정렬·조건부 링크버튼 설정 API 18~22개 엔드포인트 구현, 트랜잭션 기반 정렬 재계산 적용
STEP 4
미디어 파이프라인 & 통합 테스트
Sharp 리사이징 파이프라인과 Bull Queue 비동기 업로드 구현, 관리자 시나리오 통합 테스트 수행
프로젝트 성과
블록 직렬화 편집기 아키텍처 구축5종 블록 타입을 JSON 스키마로 직렬화하고 dnd-kit 기반 순서 편집을 구현해 코드 없이 자유 배치 지원
조건부 CTA 스키마 설계링크버튼 노출·문구·URL·새 창 여부를 배열 스키마로 정의해 콘텐츠별 최대 2개 CTA를 동적으로 구성
이미지 파생 리사이징 파이프라인 구현Sharp 기반 파생 이미지 3종 자동 생성과 Bull Queue 비동기 처리로 대용량 업로드 대응 구조 설계
Review
기술적 주안점
- 비개발자 운영자가 첫 화면에서 무엇을 등록·수정해야 하는지 바로 파악할 수 있도록 상태 기반 콘텐츠 요약 구조를 설계합니다
- 코드 지식이 없는 운영자도 텍스트·이미지 블록을 조합해 상세 화면 레이아웃을 자유롭게 구성할 수 있는 구조를 설계합니다
- 노출·정렬·CTA 설정을 하나의 속성 패널에서 즉시 반영되는 폼으로 묶어, 콘텐츠 등록과 노출 제어를 분리 관리할 수 있는 구조를 설계합니다
