← 포트폴리오 목록
기업 브랜드 CMS 관리 플랫폼
MVP 이후 운영을 고려해 비개발자용 콘텐츠 관리, 문의 이력 관리, 브랜드 서브메뉴 확장, SNS 채널 게시 API 연동 관리까지 통합한 관리자 CMS를 설계합니다.
리스트-상세 패널 문의 관리 UI 설계master-detail 패턴으로 문의 목록과 상세/답변 이력을 동시에 탐색 가능한 화면을 구현합니다.
비개발자용 콘텐츠 에디터 통합비개발자가 텍스트·이미지를 직접 편집할 수 있는 리치 텍스트 에디터를 관리자 화면에 통합합니다.
SNS 채널 게시 연동 구조 설계공지사항 등록 시 SNS 채널 API로 게시 요청을 전달하는 연동 인터페이스와 발송 상태 추적 테이블을 설계합니다.
Overview
프로젝트 개요
MVP 이후 운영을 고려해 비개발자용 콘텐츠 관리, 문의 이력 관리, 브랜드 서브메뉴 확장, SNS 채널 게시 API 연동 관리까지 통합한 관리자 CMS를 설계합니다. 리스트-상세 패널 구조로 문의를 관리하고 Redis 캐시와 AWS S3 이미지 파이프라인을 추가해 확장성을 갖춥니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
SNS 채널별 API 인증 방식이 상이한 상황에서 공통 발송 인터페이스로 추상화하는 설계
비개발자가 오조작으로 콘텐츠를 손상시키지 않
임시저장/되돌리기 구조 설계 필요
문의 이력이 누적될수록 리스트-상세 조회 성능을 유지하기 위한 인덱싱 전략
브랜드 서브메뉴 변경이 실시간 반영되면서도 캐시 무효화가 누락되지 않
하는 구조 설계 필요
구현 내용
핵심 기능 상세
핵심 기능 1
관리자 대시보드
미처리 문의, 최근 공지, SNS 발송 상태를 한눈에 보여주는 관리자 개요 화면을 구현합니다. 리스트-상세 패널 구조의 진입점 역할을 하는 위젯 기반 개요 화면으로 설계합니다
핵심 기능 2
콘텐츠 관리
비개발자도 사용 가능한 UI로 텍스트/이미지를 직접 등록/수정하고 공지사항·이벤트 상태를 관리합니다. WYSIWYG 에디터와 임시저장 구조로 오조작을 방지하는 관리 화면을 구현합니다
핵심 기능 3
문의 이력 관리
접수된 문의 목록을 확인하고 처리상태를 관리하며 답변 기록을 남깁니다. 좌측 리스트와 우측 상세 패널을 동시에 탐색할 수 있는 master-detail 구조로 구현합니다
핵심 기능 4
브랜드 & SNS 연동 관리
관리자가 브랜드 추가 시 동적으로 하위 메뉴를 구성하고, 등록된 공지사항을 SNS 채널 게시 API 연동으로 관리합니다. 채널별 인증 방식 차이를 공통 인터페이스 뒤로 추상화하는 연동 구조로 설계합니다
구현 과정
프로젝트 진행 단계
STEP 1
관리자 CMS 정보구조 및 권한 설계
비개발자용 콘텐츠 관리, 문의 이력, 브랜드 메뉴 관리 화면 구조와 관리자 권한 체계를 설계합니다.
STEP 2
콘텐츠 관리 에디터 개발
리치 텍스트 기반 편집기와 공지사항 상태 관리 UI를 구현합니다.
STEP 3
문의 이력 관리 API 개발
Express + Prisma로 문의 리스트-상세 조회, 처리상태 변경, 답변 기록 API 14개를 구현합니다.
STEP 4
브랜드 메뉴 & SNS 연동 API 개발
동적 서브메뉴 구성 API와 SNS 채널 게시 연동 API, Redis 캐시 레이어를 구현합니다.
STEP 5
통합 테스트 및 성능 검증
관리자 워크플로우 전체 시나리오 테스트와 AWS S3 이미지 업로드 파이프라인을 검증합니다.
프로젝트 성과
주요 성과
리스트-상세 패널 문의 관리 UI 설계master-detail 패턴으로 문의 목록과 상세/답변 이력을 동시에 탐색 가능한 화면을 구현합니다.
비개발자용 콘텐츠 에디터 통합비개발자가 텍스트·이미지를 직접 편집할 수 있는 리치 텍스트 에디터를 관리자 화면에 통합합니다.
SNS 채널 게시 연동 구조 설계공지사항 등록 시 SNS 채널 API로 게시 요청을 전달하는 연동 인터페이스와 발송 상태 추적 테이블을 설계합니다.
Redis 기반 콘텐츠 캐시 레이어 구축자주 조회되는 뉴스/공지 목록에 Redis 캐시를 적용하여 관리자 대시보드 응답 구조를 설계합니다.
Highlights
기술적 주안점
- 리스트-상세 패널 구조의 진입점 역할을 하는 개요 화면을 설계해 다음 화면으로의 탐색 동선을 단순화합니다
- 비개발자도 코드 수정 없이 텍스트와 이미지를 직접 관리할 수 있는 에디터 환경을 구현합니다
- 문의가 누적되어도 조회 성능을 유지할 수 있도록 커서 기반 페이지네이션과 인덱스 전략을 함께 설계합니다
