IDEA NOTE 2026.07.23 기반 설계 → 현재 구현 현황 반영 업데이트

중소·중견기업을 위한 ESG 경영시스템 웹포탈 구조도

전담 인력조차 두기 어려운 중소·중견기업이 글로벌 이니셔티브와 국내 ESG 정책을 손쉽게 활용할 수 있도록, 1차 자가진단 → 2차 수준진단(ESG 정량데이터 252개 지표) → 3차 성과평가 → 4차 지속가능보고서 작성 → OPTION 지속가능보고서 검증으로 이어지는 5단계 진단 체계와 실제 구현된 웹 플랫폼 전체 구조를 시각화했습니다.

K-ESG 69문항 자가진단(1~4차) ESG 정량데이터 252개 지표(2차) 온실가스 Scope1·2 산정 OPTION 지속가능보고서 검증(AA1000) 관리자 4개 페이지 운영
1

아이디어 컨셉 원본 & 확장 방향

제공해주신 컨셉(문서 정형화 기반 Data Base 구축·활용)을 기준으로 설계를 시작했고, 실제 개발 과정에서 1차 자가진단 → 2차 수준진단 → 3차 성과평가 → 4차 지속가능보고서 작성 → OPTION 지속가능보고서 검증의 5단계 체계와 사용자/관리자 역할 분리, ESG 정량데이터 252개 지표, 온실가스 산정, 사례DB·등급비교·대시보드로 구체화되었습니다. 아래 구조도는 이 현재 구현 상태를 그대로 반영합니다.

사용자 제공 아이디어 노트 컨셉 이미지
원본 아이디어 노트 — 문서 정형화 기반 Data Base 구축·활용 (사용자 제공)

반영한 참고자료

  • ESG 규정례 — E·S·G 요소별 규정 템플릿 → 문서센터 원천
  • ESG 사례집 — 업종별 우수사례 → 진단가이드/우수사례 DB
  • 경영개선 가이드 — 수준진단 체크리스트·온실가스 산정·정량데이터 관리 템플릿
  • 지속가능경영보고서 매뉴얼 — 보고서 작성원칙/프로세스 → 리포트 자동생성 로직
2

전체 시스템 구조도 (Architecture)

사용자 – 웹포탈(Web Layer) – 처리엔진(Logic Layer) – 데이터베이스(Data Layer) – 외부 연계(External)의 5단 구조입니다.

flowchart TB classDef user fill:#1c3a5e,color:#fff,stroke:#0f2440,stroke-width:1px,font-weight:bold; classDef web fill:#1f5c4d,color:#fff,stroke:#123b30,stroke-width:1px; classDef admin fill:#7c3aed,color:#fff,stroke:#4c1d95,stroke-width:1px; classDef engine fill:#2f7d68,color:#fff,stroke:#123b30,stroke-width:1px; classDef db fill:#eef6f2,color:#123b30,stroke:#1f5c4d,stroke-width:1.2px; classDef ext fill:#f4ecd8,color:#7a5a12,stroke:#c8912a,stroke-width:1.2px; subgraph USER[" 👤 사용자 (login.html / admin-login.html) "] U1[중소·중견기업
ESG 담당자
company.html 로그인] U2[컨설턴트 / 관리자
admin-login.html 로그인] end subgraph WEB[" 🌐 ESG 웹포탈 - 사용자 화면 (Web Layer) "] W1[회원가입·기업정보
signup.html · company.html] W2["ESG 진단 5단계
diagnosis.html
1차 자가진단 · 2차 수준진단(정량지표 252개)
3차 성과평가 · 4차 지속가능보고서 작성"] W3[온실가스 배출량 산정
ghg.html · Scope1·2] W4[지속가능보고서 사례 DB
cases.html] W5[ESG 등급 대조
grades.html] W6["대시보드 · OPTION 검증요청
dashboard.html
(점수추이 막대그래프 · 배출량 추이)"] end subgraph ADMIN[" 🛠️ 관리자 화면 (admin-*.html) "] A1[관리자 대시보드
admin-dashboard.html
전사 현황 + OPTION 검증 승인/반려] A2[진단 내역 관리
admin-diagnosis.html] A3[계정 관리
admin-accounts.html
비밀번호 재발급] A4[중요성평가 주제 관리
admin-topics.html
material_topics CRUD] end subgraph ENGINE[" ⚙️ 처리 로직 (js/*.js, 클라이언트 사이드) "] E1[진단 스코어링 로직
diagnosis.js: calcScores] E2[취약항목 개선방안 매칭
krx_esg_cases 자동 매핑] E3[온실가스 배출량 계산
ghg-factors.js 배출계수] E4[차수별 역할·안내 정의
diagnosis-stages.js] end subgraph DB[" 🗄 RESTful Table API - 실제 데이터 테이블 "] D1[(companies
기업정보·로그인)] D2[(esg_diagnosis 23필드
1~4차 응답·정량데이터·점수·보고서)] D3[(ghg_records
Scope1·2 배출량)] D4[(krx_esg_cases
우수사례·개선방안)] D5[(material_topics
중요성평가 주제)] D6[(report_verifications
OPTION 검증요청)] D7[(krx_esg_grades
공식 ESG등급 참조)] D8[(admin_users ·
password_reset_log)] end U1 --> W1 --> W2 W1 --> D1 W2 --> E1 --> D2 D2 --> E2 --> W2 E4 -.차수별 역할 안내.-> W2 U1 --> W3 --> E3 --> D3 --> W6 U1 --> W4 --> D4 U1 --> W5 D2 -.자가진단 점수 참조.-> W5 D7 -.공식등급 참조.-> W5 U1 --> W6 W6 --> D6 D2 --> W6 D3 --> W6 U2 --> A1 --> D6 U2 --> A2 --> D2 U2 --> A3 --> D1 U2 --> A3 --> D8 U2 --> A4 --> D5 D5 -.중요성평가 주제 제공.-> W2 D4 -.우수사례 제공.-> W2 class U1,U2 user; class W1,W2,W3,W4,W5,W6 web; class A1,A2,A3,A4 admin; class E1,E2,E3,E4 engine; class D1,D2,D3,D4,D5,D6,D7,D8 db;
사용자
사용자 웹포탈(화면)
관리자 화면
RESTful 테이블(DB)

본 구조도는 실제 배포된 페이지 파일명과 .tables/schema.json에 정의된 RESTful Table API 테이블(companies, esg_diagnosis, ghg_records, krx_esg_cases, material_topics, report_verifications, krx_esg_grades, admin_users, password_reset_log)을 기준으로 작성되었습니다.

지금 바로 이용 가능한 서비스

회원가입부터 5단계 ESG 진단(1~4차+OPTION 검증)·온실가스 산정·사례 DB·등급 대조·대시보드, 그리고 4개 관리자 페이지까지 실제로 구현되어 RESTful Table API로 데이터가 저장·조회됩니다.

① 회원가입

업종·규모·담당자 정보를 입력해 기업정보(companies)로 등록하고 로그인 계정을 생성합니다.

signup.html

② 로그인 / 마이페이지

기업 계정 로그인(localStorage 세션) 후 company.html에서 기업정보를 조회·수정합니다.

login.html · company.html

③ ESG 진단 (1~4차)

1차 자가진단(69문항 객관식) · 2차 수준진단(주관식+증빙+정량지표 252개) · 3차 성과평가(변경사항) · 4차 지속가능보고서 작성(중요성평가+GRI매핑). 기존 저장 데이터를 자동으로 불러와 "생성" 또는 "수정" 저장이 가능합니다.

diagnosis.html

④ 온실가스 배출량 산정

연료(Scope1)·전력(Scope2) 사용량 입력으로 배출량이 자동 계산되며 배출계수를 직접 수정할 수 있습니다.

ghg.html

⑤ 지속가능보고서 사례 DB

평가지표별 우수사례·개선방안 사례를 출처·페이지번호와 함께 관리하고 자가진단 결과에 자동 매핑합니다.

cases.html

⑥ ESG 등급 대조

K-ESG 자가진단 결과와 KRX ESG포털 등 공식 ESG등급(krx_esg_grades)을 비교하여 진단의 신뢰도를 점검합니다.

grades.html

⑦ 대시보드 · OPTION 검증요청

기업별 진단 이력·ESG 종합점수 추이(막대그래프)·배출량 추이를 차트로 확인하고, 4차 보고서에 대한 AA1000 기반 OPTION(지속가능보고서 검증)을 요청합니다.

dashboard.html

⑧ 관리자 로그인 / 대시보드

관리자 계정으로 전사 진단·배출량 현황을 조회하고 OPTION 검증요청을 승인/반려합니다.

admin-login.html · admin-dashboard.html

⑨ 진단 내역 관리(관리자)

전체 기업의 esg_diagnosis 레코드를 조회하고 연도/차수/메모를 수정합니다.

admin-diagnosis.html

⑩ 중요성평가 주제 관리(관리자)

material_topics CRUD로 4차 지속가능보고서 작성 시 사용자에게 제공되는 중요성평가 후보 주제를 관리합니다.

admin-topics.html

⑪ 계정 관리(관리자)

기업/관리자 계정의 비밀번호를 임시 재발급하고 처리 이력(password_reset_log)을 관리합니다.

admin-accounts.html
모든 데이터는 RESTful Table API(companies, esg_diagnosis, ghg_records, krx_esg_cases, krx_esg_grades, material_topics, report_verifications, admin_users, password_reset_log 테이블)를 통해 실시간으로 저장·조회됩니다. 자가진단/온실가스 산정을 이용하려면 먼저 회원가입을 해주세요.
3

ESG 진단 사용자 플로우 (1~4차 + OPTION)

js/diagnosis-stages.js에 정의된 실제 5단계 진단 흐름으로, 차수마다 작성수준과 사용자/관리자 역할이 단계적으로 확장됩니다. 동일 차수·연도를 재진입하면 기존 저장 데이터를 자동으로 불러와 생성/수정 버튼으로 이어집니다.

flowchart LR classDef step fill:#1c3a5e,color:#fff,stroke:#0f2440,stroke-width:1px; classDef guide fill:#1f5c4d,color:#fff,stroke:#123b30,stroke-width:1px; classDef db fill:#eef6f2,color:#123b30,stroke:#1f5c4d,stroke-width:1.2px; classDef result fill:#c8912a,color:#fff,stroke:#7a5a12,stroke-width:1px; classDef opt fill:#dc2626,color:#fff,stroke:#7f1d1d,stroke-width:1px; Z["0. 회원가입 · 로그인
signup.html · login.html"]:::step --> A A["1차 자가진단
69문항 객관식 응답
(현재 운영현황·보유자료 기반)"]:::step --> B B["2차 수준진단
객관식+주관식+증빙업로드
ESG 정량데이터 252개 지표 입력
(유관부서 협조·검토 기반)"]:::step --> C C["3차 성과평가
2차 대비 변경사항 등록
KPI 계획·정량적 성과 기반"]:::step --> D D["4차 지속가능보고서 작성
중요성평가로 주제 선정 → GRI매핑·우수사례 참고
정량·정성 성과 주관식 작성 → 보고서 다운로드"]:::result --> E E["OPTION 지속가능보고서 검증
AA1000 핵심원칙 준수 확인
TYPE1/2 · MODERATE/HIGH 증빙
관리자 심사 요청(dashboard.html)"]:::opt GA["관리자: 설문지 가이드 제공"]:::guide -.-> A GB["관리자: ESG 정량데이터
템플릿 배포"]:::guide -.-> B GC["관리자: 중요성평가툴·GRI랭킹목록·배포"]:::guide -.-> D GD["관리자: 다운로드/검증 승인 결정"]:::guide -.-> E DA[("esg_diagnosis
1~4차 응답·정량데이터
점수·등급 저장")]:::db -.-> A DA -.-> B DA -.-> C DA -.-> D DB1[("material_topics
중요성평가 주제")]:::db -.-> D DB2[("krx_esg_cases
GRI랭킹 우수사례")]:::db -.-> D DC[("report_verifications
OPTION 검증요청 이력")]:::db -.-> E
4

사이트맵 · 메뉴 구조 (IA)

실제 배포된 페이지 파일과 상단 네비게이션 메뉴를 기준으로, 사용자 영역과 관리자 영역을 구분한 사이트맵입니다.

flowchart TB classDef home fill:#1c3a5e,color:#fff,stroke:#0f2440,stroke-width:1px,font-weight:bold; classDef menu fill:#1f5c4d,color:#fff,stroke:#123b30,stroke-width:1px; classDef sub fill:#eef6f2,color:#123b30,stroke:#1f5c4d,stroke-width:1px; classDef adminmenu fill:#7c3aed,color:#fff,stroke:#4c1d95,stroke-width:1px; classDef adminsub fill:#f3e8ff,color:#4c1d95,stroke:#7c3aed,stroke-width:1px; HOME(["🏠 HOME
index.html"]):::home HOME --> M0["회원가입/로그인"]:::menu HOME --> M1["ESG 진단"]:::menu HOME --> M3["온실가스 계산기"]:::menu HOME --> M4["사례 DB"]:::menu HOME --> M5["등급 비교"]:::menu HOME --> M6["대시보드"]:::menu HOME --> M7["관리자"]:::adminmenu M0 --> M0a["signup.html
회원가입"]:::sub M0 --> M0b["login.html
기업 로그인"]:::sub M0 --> M0c["company.html
마이페이지(기업정보 수정)"]:::sub M1 --> M1a["diagnosis.html
1차 자가진단(69문항 객관식)"]:::sub M1 --> M1b["diagnosis.html
2차 수준진단(주관식+증빙+정량지표252)"]:::sub M1 --> M1c["diagnosis.html
3차 성과평가(변경사항 등록)"]:::sub M1 --> M1d["diagnosis.html
4차 지속가능보고서 작성"]:::sub M1 --> M1e["결과 생성/수정 저장
+ 레이더차트·등급·취약항목"]:::sub M3 --> M3a["ghg.html
Scope1(연료) 입력"]:::sub M3 --> M3b["ghg.html
Scope2(전력) 입력"]:::sub M3 --> M3c["배출계수 수정 · 연도별 배출량"]:::sub M4 --> M4a["cases.html
우수사례/개선방안 등록·검색"]:::sub M4 --> M4b["지속가능보고서 원문 캐시 연계"]:::sub M5 --> M5a["grades.html
공식 ESG등급 등록·비교"]:::sub M6 --> M6a["dashboard.html
진단이력·점수추이(막대)·배출량추이"]:::sub M6 --> M6b["dashboard.html
OPTION 지속가능보고서 검증요청"]:::sub M7 --> M7a["admin-login.html
관리자 로그인"]:::adminsub M7 --> M7b["admin-dashboard.html
전사 현황 + OPTION 검증 승인/반려"]:::adminsub M7 --> M7c["admin-diagnosis.html
진단 내역 관리"]:::adminsub M7 --> M7d["admin-topics.html
중요성평가 주제(material_topics) 관리"]:::adminsub M7 --> M7e["admin-accounts.html
계정·비밀번호 재발급 관리"]:::adminsub
5

데이터베이스 구성 (RESTful Table API 실제 테이블)

.tables/schema.json에 정의되어 실제 서비스에 사용 중인 10개 테이블(9개 데이터 영역)입니다. 모든 테이블은 id, created_at, updated_at 등 시스템 필드를 공통으로 가지며, 브라우저에서 tables/{table} REST 엔드포인트로 조회·저장됩니다.

companies 13필드

기업정보·업종·규모·담당자, 로그인ID/비밀번호(회원가입·마이페이지)

esg_diagnosis 23필드

1~4차 진단 응답(객관식/주관식/증빙), 정량데이터 252지표(quant_data_json), 변경사항, 보고서 내용, 점수·등급, 취약항목, 다운로드 권한

ghg_records 10필드

Scope1(연료)·Scope2(전력) 사용량 입력값과 배출량 산출결과

krx_esg_cases 15필드

K-ESG 문항코드별 우수사례·개선방안 사례, 출처·페이지번호

material_topics 7필드

4차 지속가능보고서 작성용 중요성평가 후보 주제, GRI코드 매핑(관리자 관리)

report_verifications 12필드

OPTION 지속가능보고서 검증요청(AA1000 준수, TYPE/수준, 증빙), 관리자 승인/반려 상태

krx_esg_grades 19필드

KRX ESG포털 등 공식 ESG등급(종합/E/S/G), 등급변동, 출처(등급 대조 화면)

sustainability_reports 10필드

k-esg.org 지속가능경영보고서 원문 목록 캐시(사례 등록 시 출처 자동완성)

admin_users · password_reset_log 4+9필드

관리자 계정 정보 및 비밀번호 재발급 처리 이력(관리자 계정관리 화면)

6

GOAL — 이 구조가 달성하려는 목표

Ⅰ

Data 분석·활용 기반 확보

1~4차 진단·정량데이터 252지표·온실가스 데이터를 정형화하여 업종별/규모별 ESG 수준 분석 및 통계 기반을 마련합니다.

Ⅱ

개선방안 마련을 위한 정량데이터로 활용

축적된 진단·온실가스 데이터를 개선방안 마련 및 로드맵 수립의 근거 데이터로 제공합니다.

Ⅲ

ESG평가기관 대응 가이드·근거 제공

글로벌 이니셔티브·국내 정책 기준에 맞춘 문서와 데이터를 평가 대응 근거자료로 제공합니다.