← 포트폴리오 목록

플랜테리어 운영 관리·보안 점검 콘솔

베타 오픈 이후 확장을 고려해 보안 점검 현황, 식물 에셋 관리, 렌더 큐 모니터링, 사용 분석을 한 화면 체계로 묶은 관리자 콘솔 구현한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종모니터링
기술 스택
Next.jsTypeScriptSupabasePostgreSQLNode.jsRedisBull QueueTailwind CSSRecharts
주요 기능
  • 보안 점검 현황
  • 식물 에셋 관리
  • 렌더 큐 모니터링
  • 사용 분석 리포트

프로젝트 개요

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

베타 오픈 이후 확장을 고려해 보안 점검 현황, 식물 에셋 관리, 렌더 큐 모니터링, 사용 분석을 한 화면 체계로 묶은 관리자 콘솔 구현한 프로젝트입니다. P1과 같은 Next.js와 Supabase 구조 위에 큐와 캐시 계층을 더해 확장 방향을 보여줍니다.

작업 범위

  • 보안 점검 현황: Supabase RLS 정책, 요청 제한, 업로드 검증 항목의 점검 상태를 우선순위 큐로 보여주는 화면입니다
  • 식물 에셋 관리: 식물 에셋 이미지와 메타데이터를 등록·수정·비공개 처리하는 관리 화면입니다
  • 렌더 큐 모니터링: 이미지 엔진으로 보내는 렌더 작업의 대기·진행·실패 상태를 타임라인으로 보여주는 화면입니다
  • 사용 분석 리포트: 업로드, 배치, 렌더, 저장 단계별 진행 현황을 퍼널과 추이 차트로 확인하는 분석 화면입니다

주요 업무

  • 보안 점검 현황 화면: 테이블별 RLS 정책 목록과 점검 항목을 모아 조치 필요 건을 위험도 순으로 정렬합니다
  • 식물 에셋 관리 화면: 에셋 업로드 시 형식·크기 검증과 썸네일 생성을 거쳐 카테고리와 태그를 관리합니다
  • 렌더 큐 모니터링 화면: Bull Queue 작업 상태를 집계해 지연 건과 실패 건을 우선 표시하고 재시도를 지원합니다
  • 사용 분석 리포트 화면: 단계별 이벤트를 집계 뷰로 모아 기간·기기 유형별로 비교합니다
플랜테리어 운영 관리·보안 점검 콘솔
요구사항 정의

프로젝트 핵심 과제

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

정책이 누락된 테이블을 자동으로 찾아내 점검 항목으로 올리는 메타데이터 조회 로직 설계

렌더 작업 재시도 시 같은 결과가 중복 저장되지 않

멱등 처리 설계 필요

대용량 에셋 이미지 업로드에서 형식 위장 파일을 걸러내는 서버 검증 설계

집계 뷰 갱신 주기와 화면 조회 시점의 불일치를 사용자에게 명확히 안내하는 표시 설계

구현 내용

핵심 기능 상세

핵심 기능 1

보안 점검 현황

Supabase RLS 정책, 요청 제한, 업로드 검증 항목의 점검 상태를 우선순위 큐로 보여주는 화면입니다. 테이블별 RLS 정책 목록과 점검 항목을 모아 조치 필요 건을 위험도 순으로 정렬합니다.

  • 테이블별 RLS 정책 메타데이터 조회와 점검 항목 매핑
  • 요청 제한 규칙을 Redis 카운터 기반 슬라이딩 윈도우로 구성
  • 업로드 검증 실패 이력을 로그 테이블에 적재해 목록화

보안 점검 항목을 위험도와 조치 상태로 모델링해 점검 결과와 조치 내역을 한 화면에서 추적하는 구조를 구현합니다.

보안 점검 현황
보안 점검 현황 실제 화면
핵심 기능 2

식물 에셋 관리

식물 에셋 이미지와 메타데이터를 등록·수정·비공개 처리하는 관리 화면입니다. 에셋 업로드 시 형식·크기 검증과 썸네일 생성을 거쳐 카테고리와 태그를 관리합니다.

  • Supabase Storage와 sharp 기반 썸네일 생성 처리
  • 카테고리·태그 다중 필터와 서버 사이드 페이지네이션
  • 에셋 노출 상태 전환과 변경 이력 기록

에셋 등록부터 노출 관리까지를 하나의 워크플로우로 묶고 서버에서 파일 검증을 일괄 처리하도록 설계합니다.

식물 에셋 관리
식물 에셋 관리 실제 화면
핵심 기능 3

렌더 큐 모니터링

이미지 엔진으로 보내는 렌더 작업의 대기·진행·실패 상태를 타임라인으로 보여주는 화면입니다. Bull Queue 작업 상태를 집계해 지연 건과 실패 건을 우선 표시하고 재시도를 지원합니다.

  • Bull Queue 작업 상태 이벤트를 Supabase 테이블에 동기화
  • 실패 작업 재시도와 최대 시도 횟수 정책 적용
  • 타임라인 보드에서 작업 단계별 소요 시간 표시

큐 상태와 화면 상태를 같은 모델로 맞춰 사용자 화면의 로딩 표시와 관리자 화면의 작업 현황이 일치하도록 구현합니다.

렌더 큐 모니터링
렌더 큐 모니터링 실제 화면
핵심 기능 4

사용 분석 리포트

업로드, 배치, 렌더, 저장 단계별 진행 현황을 퍼널과 추이 차트로 확인하는 분석 화면입니다. 단계별 이벤트를 집계 뷰로 모아 기간·기기 유형별로 비교합니다.

  • PostgreSQL Materialized View로 단계별 이벤트 집계
  • 기기 유형별 필터와 기간 비교 차트 구성
  • Recharts 기반 퍼널·추이 차트 컴포넌트화

아이패드와 데스크톱 접속을 구분해 단계별 이탈 지점을 비교하는 집계 구조를 설계합니다.

사용 분석 리포트
사용 분석 리포트 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

관리자 권한·점검 모델 설계 · 2026.10

관리자 역할과 RLS 점검 항목·조치 이력 테이블 설계

STEP 2

에셋 관리·파일 검증 구현 · 2026.10

에셋 업로드 검증, 썸네일 생성, 카테고리·태그 관리 화면 구현

STEP 3

렌더 큐 연동·관제 보드 구현 · 2026.10

Bull Queue 상태 동기화와 타임라인 보드, 재시도 정책 구현

STEP 4

집계 뷰·분석 리포트 구현 · 2026.10

Materialized View 집계와 퍼널·추이 차트 화면 구현

개발 결과

RLS 점검 항목 모델링테이블별 정책 유무와 위험도를 점검 항목으로 모델링하고 조치 이력을 추적하는 구조를 설계합니다
슬라이딩 윈도우 요청 제한 구성Redis 카운터 기반 요청 제한을 사용자·엔드포인트 단위로 적용하는 미들웨어를 구현합니다
렌더 큐 상태 동기화 구조 구축Bull Queue 이벤트를 테이블에 동기화해 관제 보드와 사용자 화면이 같은 상태를 보도록 구성합니다
단계별 퍼널 집계 설계Materialized View로 업로드·배치·렌더·저장 이벤트를 집계하고 기기 유형별 비교를 지원합니다

기술적 주안점

  • 보안 점검 항목을 위험도와 조치 상태로 모델링해 점검 결과와 조치 내역을 한 화면에서 추적하는 구조를 구현합니다
  • 에셋 등록부터 노출 관리까지를 하나의 워크플로우로 묶고 서버에서 파일 검증을 일괄 처리하도록 설계합니다
  • 큐 상태와 화면 상태를 같은 모델로 맞춰 사용자 화면의 로딩 표시와 관리자 화면의 작업 현황이 일치하도록 구현합니다

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

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의