SYSTEM BLUEPRINT

ESG 진단 웹앱
화면 흐름과 운영 설계

기업 담당자가 가입해 진단을 마치는 흐름과, 발주사가 서비스를 운영·인계받는 흐름을 화면으로 정리했습니다.

스토리보드란?

스토리보드는 서비스의 화면을 실제 모습에 가깝게 미리 그려 보는 문서입니다. 사용자 유형별로 화면을 담고, 가입부터 결과 확인까지의 순서대로 배치했습니다.

  1. 기업 담당자가 가입해 진단하고 결과 리포트를 받는 흐름
  2. 발주사가 권한·배포를 확인하고 서비스를 넘겨받는 흐름

마지막까지 보시면 지금 만들다 만 웹앱이 어떤 서비스로 마무리되는지 그려지실 것입니다.

P.01
기업 담당자 시나리오

가입부터 재진단 비교까지

사회적기업·공공기관 담당자가 직접 가입해 진단을 마치고, 다음 회차에 변화를 확인하는 흐름입니다.

1. 가입 신청

기관 정보 입력
인증 메일 요청

2. 이메일 인증

받은 링크 클릭
계정 활성화

3. 진단 입력

영역별 문항 응답
자동 임시 저장

4. 결과 리포트

점수·등급 확인
인쇄·PDF 저장

5. 재진단 비교

다음 회차 진단
지난 결과와 비교

P.02
기업 담당자 | 화면 01

회원가입 · 이메일 인증

esg-check.kr/signup
사회적가치 진단
이미 계정이 있으신가요?
기업 회원가입

진단을 시작하려면 먼저 가입해 주세요

가입 신청 후 담당자 메일로 인증 링크를 보내드립니다. 인증을 마쳐야 진단 화면이 열립니다.

가입 정보 입력

기관명
사단법인 마을살림
사업자등록번호
214-82-01937
담당자 이메일
min***@maeulsalim.or.kr
이 주소로 인증 메일이 갑니다
비밀번호
••••••••••
영문·숫자·기호 조합 10자 이상
비밀번호 확인이 일치하지 않습니다

인증 메일 처리 현황

min***@maeulsalim.or.kr
오늘 오후 2:31 발송
인증 대기
park***@hanbit.coop
어제 오전 10:14 인증 완료
가입 완료
lee***@sori.or.kr
링크 유효시간 24시간 지남
링크 만료
choi***@nadl.kr
세션이 만료되어 다시 로그인 필요
세션 만료
메일이 오지 않을 때

만료된 링크는 이 화면에서 바로 재발송합니다. 발송 기록 3건까지 남아 원인을 확인할 수 있습니다.

[화면 개요 및 목적]

기관 담당자가 직접 가입하는 첫 화면입니다. 지금은 인증 메일 링크가 로컬 주소를 가리켜 흐름이 끊겨 있는데, 이 화면은 실제 주소로 인증이 돌아오는 상태를 보여줍니다. 제안서의 "로그인 — 인증 메일까지 정상화"를 화면으로 증명합니다.

[핵심 기능 로직]

오른쪽 현황 패널이 인증 대기 · 가입 완료 · 링크 만료 · 세션 만료 네 가지 상태를 한 화면에서 구분합니다. 만료된 링크는 이 자리에서 바로 재발송하고, 비밀번호 불일치 같은 입력 오류는 제출 전에 잡습니다. 이 흐름은 데모 1단계에서 직접 눌러 보실 수 있습니다.

  • 가입 이탈 방지
    Supabase Auth · 이메일 인증 링크
  • 오류 원인 확인
    발송 기록과 만료 상태 표시
P.03
기업 담당자 | 화면 02

진단 항목 입력

esg-check.kr/diagnosis/2026-1h
사회적가치 진단
김민
환경 (E) · 12문항

진단 항목 입력

E-01
최근 1년간 사업장 전력 사용량을 기록하고 있습니까?
연 1회 이상 기록 · 담당 부서 지정
작성 완료
E-02
폐기물 분리배출 기준을 문서로 두고 운영합니까?
내부 지침 있음
작성 완료
E-03
온실가스 배출량을 산정한 적이 있습니까?
산정 범위 선택 중
작성 중
E-04
연간 사용 전력량(kWh)을 입력해 주세요.
입력값 “일이삼” — 숫자만 넣어 주세요
입력 오류
E-05
친환경 인증을 받은 제품·서비스가 있습니까?
인증서 번호 확인 후 입력
미작성
E-06
사업장에서 쓰는 종이 사용량을 줄이는 계획이 있습니까?
아직 응답하지 않음
미작성
E-07
납품·배송 과정에서 나오는 포장재를 줄이려 시도한 적이 있습니까?
증빙 자료 준비 필요
미작성
E-08
에너지 절감 설비를 도입했거나 도입할 계획이 있습니까?
담당자 확인 중
미작성
고쳐야 할 입력 1건
숫자 칸에 글자가 들어갔습니다
마지막 저장 오후 2:47
창을 닫아도 이어서 작성됩니다
제출 기한 9월 30일 (수)
기한 뒤에도 이어서 작성 가능

[화면 개요 및 목적]

완성되어 있는 진단 화면입니다. 새로 만들지 않고 그대로 쓰되, 입력값 검증과 임시 저장이 실제로 동작하도록 연결합니다. 영역별 문항 수와 작성 상태를 함께 보여 담당자가 어디까지 했는지 바로 압니다.

[핵심 기능 로직]

문항마다 작성 완료 · 작성 중 · 입력 오류 · 미작성 상태를 표시하고, 숫자를 넣어야 할 칸에 글자가 들어가면 제출 전에 막습니다. 입력값은 30초마다 자동 저장되어 창을 닫아도 이어서 작성할 수 있습니다.

  • 작성 중 이탈 방지
    입력값 자동 임시 저장
  • 잘못된 값 차단
    항목별 입력 형식 검증
P.04
기업 담당자 | 화면 03

결과 리포트 · PDF 저장 · 이력 비교

esg-check.kr/report/2026-1h
사회적가치 진단
종합 점수
78.4
100점 만점 · B+ 등급
사단법인 마을살림 · 2026년 상반기

ESG·사회적가치 진단 결과 리포트

지난 진단 대비 +6.2점발급일 2026년 9월 10일 (목)진단 완료

영역별 점수와 지난 진단 비교

환경 (E)71.0 (지난 66.5)
사회 (S)84.2 (지난 80.1)
지배구조 (G)76.8 (지난 74.3)
사회적가치81.5 (지난 69.8)
가장 많이 오른 항목

이해관계자 의견 수렴 절차 +11.7

보완이 필요한 항목

온실가스 배출량 산정 -2.4

보고서에 바로 첨부

인쇄 화면 그대로 A4 3쪽 PDF

내 진단 이력

최근 4건 · 회차를 고르면 비교 대상이 바뀝니다
2026년 상반기
78.4
진단 완료
2025년 하반기
72.2
진단 완료
2025년 상반기
68.9
진단 완료
2026년 하반기
—
작성 예정

[화면 개요 및 목적]

진단을 마치면 바로 열리는 결과 화면입니다. 종합 점수와 영역별 점수를 지난 진단과 나란히 놓아, 담당자가 "무엇이 좋아졌고 무엇이 남았는지"를 설명 없이 읽을 수 있게 합니다. 보고서에 그대로 붙일 수 있도록 인쇄와 PDF 저장을 같은 자리에 둡니다.

[핵심 기능 로직]

하단 이력 카드가 계정별로 쌓인 진단 회차를 보여주고, 회차를 고르면 점수 변화가 다시 계산됩니다. 리포트는 별도 서버 없이 브라우저 인쇄 규칙으로 PDF가 만들어져 운영 비용이 늘지 않습니다. 데모 3·4단계에서 이 화면을 직접 확인하실 수 있습니다.

  • 변화가 보이는 리포트
    계정별 진단 이력 저장·비교
  • 추가 비용 없는 출력
    브라우저 인쇄 규칙 기반 PDF
P.05
발주사 운영자 시나리오

인수 진단부터 인계까지

개발자가 없는 조직이 서비스를 넘겨받아 혼자 운영할 수 있게 되기까지의 흐름입니다.

1. 인수 진단

현재 상태 점검
위험 항목 정리

2. 권한 설정

계정별 데이터 분리
접근 규칙 적용

3. 배포

실제 주소 공개
환경변수 분리

4. 전 구간 검수

가입부터 리포트까지
동작 확인

5. 인계

소스·스키마·매뉴얼
소유권 이전

P.06
발주사 운영자 | 화면 01

계정별 데이터 권한

esg-check.kr/admin/permissions
진단 서비스 운영
발주사 관리자
가입 기관
27개
누적 진단
113건
권한 정책
4개 적용
차단된 접근 시도
2건
평균 재진단 주기
5.8개월
Supabase · 접근 권한 (RLS)

계정마다 자기 데이터만 열립니다

가입 기관과 진단 이력

각 계정은 본인 데이터만 조회됩니다
기관 / 담당자진단 건수최근 진단접근 상태
사단법인 마을살림
min***@maeulsalim.or.kr
4건2026.09.10.정상
한빛협동조합
park***@hanbit.coop
3건2026.08.28.정상
소리마을 사회적기업
lee***@sori.or.kr
1건2026.07.14.인증 대기
나들이 협동조합
choi***@nadl.kr
0건기록 없음가입 심사
(알 수 없는 계정)
unknown***@—
—2026.09.09.접근 차단
진단 결과 읽기적용됨

작성한 본인 계정만

진단 결과 쓰기적용됨

로그인 계정 본인만

이력 비교 조회적용됨

같은 기관 계정만

전체 통계 조회적용됨

운영자 계정만

2건의 잘못된 접근이 데이터베이스 단계에서 막혔습니다. 화면이 아니라 저장소가 막습니다.

[화면 개요 및 목적]

공공기관과 사회적기업이 같은 서비스를 쓰기 때문에, 남의 진단 결과가 보이면 그 자체가 사고입니다. 이 화면은 계정마다 자기 데이터만 열린다는 것을 운영자가 눈으로 확인하는 자리입니다. 제안서의 "권한은 안쪽에서"를 증명합니다.

[핵심 기능 로직]

권한은 화면에서 감추는 방식이 아니라 데이터베이스에 규칙(RLS)으로 걸립니다. 그래서 주소를 직접 바꿔 들어가도 남의 데이터가 나오지 않고, 막힌 접근 시도는 기록으로 남습니다. 읽기·쓰기·이력 비교·전체 통계 네 가지 규칙이 각각 어디까지 허용하는지 표시됩니다.

  • 남의 데이터 차단
    PostgreSQL 행 단위 접근 규칙(RLS)
  • 사고 흔적 확인
    차단된 접근 시도 기록
P.07
발주사 운영자 | 화면 02

배포 상태 · 환경변수 관리

esg-check.kr/admin/deploy
진단 서비스 운영
발주사 계정
Netlify · 배포와 환경변수

지금 열려 있는 주소와 배포 기록

배포 기록

운영 (main)
esg-check.kr · 2026.09.10. 오후 3:12
배포 완료
검수 (preview)
deploy-preview-14.esg-check.kr · 2026.09.10. 오전 11:47
검수 중
운영 (main)
esg-check.kr · 2026.09.08. 오후 6:05
배포 완료
운영 (main)
esg-check.kr · 2026.09.06. 오후 2:20
빌드 실패
마지막 빌드 시간
1분 47초
누적 배포
14회
계정 소유
발주사 명의

환경변수 (키 가림)

SUPABASE_URL
https://xxxx****.supabase.co
적용됨
SUPABASE_ANON_KEY
eyJhbGciOi****
적용됨
SUPABASE_SERVICE_KEY
sb_secret_****
서버 전용
SMTP_SENDER
no-reply@esg-***.kr
적용됨
(구) 코드에 박혀 있던 키
eyJhbGciOi****
회수·재발급

배포된 화면 어디에도 키가 남지 않도록 저장소 기록까지 훑어 회수했습니다. 노출된 키 1건은 재발급했습니다.

배포 후 점검
통과가입·인증 메일
통과진단 입력·저장
통과리포트·PDF
통과이력 비교
확인 중모바일 화면

[화면 개요 및 목적]

지금 어떤 주소가 열려 있고 마지막 배포가 언제였는지, 그리고 접속 열쇠가 어디에 있는지를 한 화면에서 봅니다. 계정은 발주사 명의를 그대로 유지하므로 이 화면의 모든 값이 발주사 자산입니다.

[핵심 기능 로직]

운영·검수 두 갈래로 배포해 검수용 주소에서 먼저 확인한 뒤 운영에 반영합니다. 열쇠는 코드가 아니라 환경변수에 두고 화면에는 가려서 표시하며, 예전에 코드에 박혀 있던 열쇠는 회수·재발급합니다. 아래 점검표가 배포 후 전 구간 동작 확인 결과입니다.

  • 언제든 되돌리기
    Netlify 배포 기록과 검수용 주소
  • 열쇠 노출 차단
    환경변수 분리와 노출 키 재발급
P.08
발주사 운영자 | 화면 03

인수 진단 리포트 · 인계 자료

esg-check.kr/admin/handover
진단 서비스 운영
착수 진단과 마무리 인계

넘겨 드리는 것과, 아직 정하지 않은 범위

결과물과 계정 소유권은 모두 발주사에 귀속됩니다. 작업 중 접근하는 자료는 비밀유지 조건으로 다룹니다.

인계 준비율
60%

인계 자료

인수 진단 리포트
현재 상태·위험 항목·조치 내역
PDF 14쪽착수 3일차 제출
전체 소스코드
발주사 소유 저장소로 이관
커밋 82건이관 완료
데이터베이스 스키마
테이블·권한 정책 문서 포함
테이블 9개작성 중
배포·운영 매뉴얼
화면 캡처 기준 비개발자용
캡처 31장작성 중
전 구간 점검표
가입부터 리포트 출력까지 기록
점검 24항목검수 예정
Supabase·Netlify 인계
계정 권한 이전과 접근 회수
계정 2곳검수 예정

비밀유지 계약(NDA) 체결 후 착수하며, 접근 계정은 작업자 2명으로 제한하고 종료 시 회수합니다. 특허 출원 준비 자료는 따로 보관하고 사본을 남기지 않습니다.

아직 정하지 않은 범위

1단계 · 필수 범위권장

연동·배포·안정화·인계. 보고서 제출 일정에 맞춰 먼저 끝냅니다.

3,200,000원 (VAT 별도)
2단계 · 확장 범위오픈 이후

도메인 연결, 디자인 재세팅, 관리자 화면 신설. 지금 붙이면 목표 시점이 밀립니다.

별도 견적 · 협의
지금 확인이 필요한 것
저장소·계정 접근 권한확인 필요
인증 메일 발송 주소확인 필요
파일럿 참여 기관 6곳공유받음
인수인계 일정
검수 주간운영 매뉴얼 전달
60분온라인 인계 세션
완료 시계정 소유권 이전
종료 당일작업자 접근 회수

[화면 개요 및 목적]

넘겨 드리는 것을 한 자리에 모은 화면입니다. 인수 진단 리포트, 소스코드, 데이터베이스 스키마, 비개발자용 운영 매뉴얼, 전 구간 점검표. 결과물과 계정 소유권은 모두 발주사에 귀속됩니다.

[핵심 기능 로직]

오른쪽은 공고에서 아직 정하지 않으셨다고 하신 확장 범위에 대한 의견입니다. 목표 시점이 고정되어 있으므로 필수 범위를 1단계로 먼저 끝내고, 도메인 연결·디자인 재세팅은 2단계로 분리하기를 권합니다. 지금 확인이 필요한 항목도 함께 적었습니다.

  • 혼자 운영 가능
    화면 기준 배포·운영 매뉴얼
  • 자료 보호
    NDA 체결·접근 계정 최소화·종료 시 회수
P.09
시나리오

P.10
| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    P.11
    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      P.12
      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]

        P.13