참조 구현 데모 · 실제 서비스가 아닙니다 · 입력한 내용은 이 브라우저에만 저장되고 서버로 전송되지 않습니다
사회적가치·ESG 통합진단

연동 · 배포가 끝나면 화면은 이렇게 됩니다

회원가입부터 재진단 비교까지,
끝까지 도는 상태를 만들어 두었습니다

공고에 쓰신 마지막 문장 — “재진단 이력이 쌓이면 기업별 변화를 비교해 보여줄 수 있습니다” — 를 글로 설명하는 대신 동작하는 화면으로 만들었습니다. 회원가입 · 이메일 인증 · 계정별 저장 · 리포트가 전부 되어 있어야만 마지막 비교 화면이 나오기 때문에, 그 화면 하나가 곧 “연동이 끝났다”는 증거입니다.

손으로 확인하시려면 가입하고 직접 진단하기를 누르세요. 20문항을 직접 찍는 경로도 끝까지 동작합니다.

이 데모의 핵심 화면 — 재진단 델타 트랙

같은 기업이 8개월 뒤 다시 진단했을 때 무엇이 얼마나 달라졌는지를 문항 단위로 보여주는 화면입니다. 아래는 20문항 중 6개만 추린 미리보기이고, 그림이 아니라 실제로 움직이는 화면입니다.

전체 화면 보기
142.8기초271우수+28.2
E1에너지 사용량 파악+2
S1고용 안정성-1
S2취약계층 고용+2
G1의사결정 기구 운영+2
G4윤리·준법 기준+3
SV1사회적 미션의 명문화+2

실제 화면에는 20문항이 전부 나오고, 행을 누르면 두 회차의 응답 문구와 근거 메모가 그 자리에서 펼쳐집니다. 위 토글을 눌러 보세요 — 막대가 동시에 움직입니다.

회원가입 · 이메일 인증 · 계정별 저장 · 회차 이력이 전부 되어 있어야만 나오는 화면입니다. 하나라도 빠지면 빈 화면입니다 — 그래서 이 한 화면이 연동이 끝났다는 증거입니다.

화면 5개로 끝납니다

수검 기업이 실제로 지나가는 순서입니다.

  1. 1

    회원가입

    기관명·이메일·비밀번호. 검증은 서버가 합니다.

    /signup
  2. 2

    이메일 인증

    인증을 끝내기 전에는 진단 화면에 들어가지 못합니다.

    /verify
  3. 3

    진단 입력

    4영역 20문항을 4단계로. 입력 중 자동 임시저장.

    /app/assess
  4. 4

    결과 리포트

    총점·등급·영역 점수·개선 제안. 인쇄와 PDF 저장.

    /app
  5. 5

    재진단 비교

    회차가 쌓이면 무엇이 왜 올랐는지 문항 단위로 보입니다.

    /app/compare

공고의 [제안 포함 필수 사항]이 이 데모의 어디에 있는지

문서로 답하는 대신 눌러서 확인하실 수 있게 두었습니다.

공고가 요구한 것이 데모의 어디에서 확인하나
기술 스택과 선택 이유 (비개발자 눈높이)/architecture 「무엇으로 만들었나」
어떤 부분이 완료되면 성공적 마무리인가/architecture 「완료 정의 체크리스트」 — 항목마다 확인 화면 링크
확장 범위에 대한 의견/architecture 「지금 · 다음 · 나중」
소스·자료 보안 관리 (특허 출원 준비 중)/architecture 「보안과 NDA」 + 세션 위조 차단 실행 결과
Supabase·Netlify 연동·배포 경험/architecture 「스키마 · RLS · 배포 파이프라인」 SQL 전문

이 데모가 하지 않는 것

제안용 참조 구현이라 아래 세 가지는 일부러 비워 두었습니다. 본 개발에서 어떻게 채우는지는 기술 설명 페이지에 SQL과 배포 절차로 적어 두었습니다.