← 포트폴리오 목록

다중기관 ESG 비교·분석 플랫폼

MVP 진단 플랫폼을 넘어 다중기관 데이터를 동시에 다루는 관리자 환경으로 확장하여, 기관별 필터·비교 갤러리와 업종별 집계 분석 대시보드를 제공합니다.

기관별 테넌시 구조 및 관리자 RLS 설계다중기관 데이터를 조직 단위로 분리하는 테넌시 스키마와 관리자 전용 RLS 정책 12종 설계
업종별 집계 분석 파이프라인 구현PostgreSQL Materialized View로 업종별·기간별 ESG 평균 점수를 집계, 증분 갱신 구조 설계
Redis 캐싱 계층 도입빈번 조회되는 기관 비교 쿼리 결과를 Redis에 캐싱해 반복 조회 부하를 낮추는 구조 설계
서비스 타입Web
업종데이터 분석
기술 스택
HTML5JavaScript (Vanilla)Node.js (Supabase Edge Functions)Chart.jsSupabase (PostgreSQL + Auth + RLS)NetlifyjsPDFRedisAWS S3
주요 기능
  • 다중기관 ESG 현황 보드
  • 기관별 필터·비교 갤러리
  • 관리자 권한·다중 계정 관리
  • 종합 분석 리포트·정책 대시보드
Overview

프로젝트 개요

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

MVP 진단 플랫폼을 넘어 다중기관 데이터를 동시에 다루는 관리자 환경으로 확장하여, 기관별 필터·비교 갤러리와 업종별 집계 분석 대시보드를 제공합니다. Redis 캐싱과 AWS S3 리포트 아카이빙으로 대규모 운영을 대비하는 인프라 확장 구현한 프로젝트입니다.

작업 범위

  • 다중기관 ESG 현황 보드: 전체 등록 기관의 진단 현황을 비대칭 타일 그리드로 한눈에 보여주는 관리자 개요 화면
  • 기관별 필터·비교 갤러리: 산업군, 기업 유형, 점수 구간으로 기관을 필터링하고 갤러리 형태로 탐색하는 화면
  • 관리자 권한·다중 계정 관리: 관리자가 기관별 계정을 초대·승인하고 권한을 관리하는 화면
  • 종합 분석 리포트·정책 대시보드: 업종별·기간별 ESG 평균 점수를 집계해 정책 수립에 참고할 수 있는 종합 분석 대시보드

주요 업무

  • 다중기관 ESG 현황 보드 화면: 기관 수, 평균 점수 추이, 상·하위 기관, 최근 알림을 크기가 다른 타일로 배치해 구현할 예정
  • 기관별 필터·비교 갤러리 화면: 필터 조건 조합 쿼리를 Supabase에 연동하고, 카드 클릭 시 퀵뷰 drawer로 비교 정보를 표시할 예정
  • 관리자 권한·다중 계정 관리 화면: P1의 Supabase Auth·RLS 구조를 관리자 롤 기반으로 확장해 다중 테넌시 권한 체계를 구현할 예정
  • 종합 분석 리포트·정책 대시보드 화면: Materialized View 기반 집계와 Redis 캐싱으로 조회 성능을 확보하고, 통합 리포트를 PDF로 아카이빙하는 구조로 구현할 예정
다중기관 ESG 비교·분석 플랫폼
요구사항 정의

프로젝트 핵심 과제

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

기관마다 산업군·규모가 달라 공정한 비교 기준을 정의하는 정규화 로직 설계

다중기관 데이터를 다루는 관리자 계정과 개별 기관 계정의 권한 경계를 명확히 나누는 RBAC 설계

업종별 집계 쿼리가 늘어날수록 조회 성능이 저하될 수

캐싱·인덱싱 전략 필요

여러 기관의 이력 데이터를 하나의 리포트로 아카이빙할 때 버전 충돌 없이 관리하는 구조

구현 내용

핵심 기능 상세

핵심 기능 1

다중기관 ESG 현황 보드

전체 등록 기관의 진단 현황을 비대칭 타일 그리드로 한눈에 보여주는 관리자 개요 화면. 기관 수, 평균 점수 추이, 상·하위 기관, 최근 알림을 크기가 다른 타일로 배치해 구현할 예정.

  • CSS Grid 기반 비대칭 bento 타일 레이아웃 구현
  • 업종별 평균 점수 추이를 큰 피처 타일에 라인차트로 렌더링
  • 상·하위 기관 랭킹 타일과 최근 진단 알림 타일 구성

기관 단위로 집계된 지표를 크기가 다른 타일로 배치해 한눈에 파악 가능한 개요 구조를 설계합니다.

다중기관 ESG 현황 보드
다중기관 ESG 현황 보드 실제 화면
핵심 기능 2

기관별 필터·비교 갤러리

산업군, 기업 유형, 점수 구간으로 기관을 필터링하고 갤러리 형태로 탐색하는 화면. 필터 조건 조합 쿼리를 Supabase에 연동하고, 카드 클릭 시 퀵뷰 drawer로 비교 정보를 표시할 예정.

  • 산업군·기업유형·점수구간 다중 필터 칩 UI 구현
  • 필터 조건을 URL 쿼리와 동기화해 결과 공유 가능하도록 설계
  • 카드 클릭 시 슬라이드 drawer로 기관 비교 퀵뷰 렌더링

다중 필터 조건을 조합 가능한 쿼리로 Supabase에 연동하는 탐색 구조를 구현합니다.

기관별 필터·비교 갤러리
기관별 필터·비교 갤러리 실제 화면
핵심 기능 3

관리자 권한·다중 계정 관리

관리자가 기관별 계정을 초대·승인하고 권한을 관리하는 화면. P1의 Supabase Auth·RLS 구조를 관리자 롤 기반으로 확장해 다중 테넌시 권한 체계를 구현할 예정.

  • 관리자·기관담당자 2단계 롤 기반 RLS 정책 확장 설계
  • 계정 초대·승인 플로우와 상태별(대기/승인/거절) 배지 UI 구현
  • 권한별 메뉴 노출 제어 로직 설계

P1의 RLS 구조를 관리자 롤 기반 다중 테넌시 권한 체계로 확장하는 구조를 설계합니다.

관리자 권한·다중 계정 관리
관리자 권한·다중 계정 관리 실제 화면
핵심 기능 4

종합 분석 리포트·정책 대시보드

업종별·기간별 ESG 평균 점수를 집계해 정책 수립에 참고할 수 있는 종합 분석 대시보드.

  • PostgreSQL Materialized View로 업종별·기간별 평균 점수 집계
  • Redis 캐싱 계층으로 반복 조회되는 집계 쿼리 응답 구조 설계
  • 통합 분석 리포트를 PDF로 생성해 AWS S3에 아카이빙하는 구조 설계

Materialized View 집계와 Redis 캐싱을 결합해 다중기관 분석 조회 구조를 안정화하는 설계를 구현합니다.

종합 분석 리포트·정책 대시보드
종합 분석 리포트·정책 대시보드 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

다중기관 데이터 모델 확장 및 관리자 RLS 설계 · 2026.09

기관 단위 테넌시 구조로 Supabase 스키마 확장, 관리자 롤 기반 RLS 정책 재설계

STEP 2

기관 비교 갤러리·필터 UI 개발 · 2026.09

산업군·점수 구간 필터 칩, 기관 bento 타일 갤러리, 퀵뷰 비교 drawer 구현

STEP 3

종합 분석 대시보드 및 캐싱 계층 구축 · 2026.09

업종별 평균·추이 집계 Materialized View, Redis 캐싱 계층 적용, 통합 PDF 리포트 생성

STEP 4

관리자 다중 계정 관리 및 배포 확장 · 2026.09

관리자 초대·승인 플로우 구현, AWS S3 리포트 아카이빙, Netlify 배포 파이프라인 확장

프로젝트 성과

주요 성과

기관별 테넌시 구조 및 관리자 RLS 설계다중기관 데이터를 조직 단위로 분리하는 테넌시 스키마와 관리자 전용 RLS 정책 12종 설계
업종별 집계 분석 파이프라인 구현PostgreSQL Materialized View로 업종별·기간별 ESG 평균 점수를 집계, 증분 갱신 구조 설계
Redis 캐싱 계층 도입빈번 조회되는 기관 비교 쿼리 결과를 Redis에 캐싱해 반복 조회 부하를 낮추는 구조 설계
통합 PDF 리포트 아카이빙 구현다중기관 종합 리포트를 PDF로 생성해 AWS S3에 아카이빙, 버전별 이력 관리 구조 설계
Highlights

기술적 주안점

  • 기관 단위로 집계된 지표를 크기가 다른 타일로 배치해 한눈에 파악 가능한 개요 구조를 설계합니다
  • 다중 필터 조건을 조합 가능한 쿼리로 Supabase에 연동하는 탐색 구조를 구현합니다
  • P1의 RLS 구조를 관리자 롤 기반 다중 테넌시 권한 체계로 확장하는 구조를 설계합니다

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

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

무료 상담 시작하기