압도적 성과조직을 만드는 네 가지 Performance Secret
Impact Design Canvas는 조직의 성과관리를 위한 AI 교육 시스템입니다.
학생 — 6단계 캔버스 과정을 수행하며 성과 설계 역량을 학습합니다.
강사 — 수업 생성, 학생 제출물 조회, 벌크 리포트 다운로드 등 수업 전반을 관리합니다.
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ A │───>│ B │───>│ C │───>│ D │───>│ E │───>│ F │
│ Impact │ │Identity │ │Perform- │ │ Quick │ │ Build │ │ Impact │
│ Check │ │ Canvas │ │ance Flow│ │ Win │ │ Win │ │ Review │
└─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘
자가 진단 비전/미션 실행 흐름 빠른 실행 장기 실행 종합 검토
설정 설계 과제 과제
📊 성과관리 현황 진단 (16문항)
✔ Q1 ~ Q12 — 5점 리커트 척도 (4개 영역 × 3문항)
| 영역 | 세부 문항 |
|---|---|
| 방향성 | 방향성 · 필요성 · 수용성 |
| 지표화 | 지표화 · 연계성 · 합의 |
| 실행력 | 속도 · 장애물 · 작은승리 |
| 시스템 | 시스템 · 자산화 · 데이터 |
✔ Q13 ~ Q16 — 서술형
- 핵심 가치 · 핵심 KPI · 전략 과제 · 성과 장애물
✔ 기능 — 진행률 표시 · 임시 저장 · 제출 완료 (수정 불가)
조직의 전략적 정체성을 3가지 관점으로 설계합니다.
| Legacy (유산) | Threats (위협) | New Identity (새로운 정체성) |
|---|---|---|
| 축적된 핵심 자산 · 강점 | 외부 환경 변화 · 내부 위협 | Legacy + Threats 극복 기반의 새 정체성 선언 |
✨ Legacy + Threats → New Identity
- 로고 이미지 표시
- New Vision이 다음 단계 (Step C)로 자동 연동
비전을 측정 가능한 목표와 활동으로 분해합니다.
| 구성 | 설명 |
|---|---|
| 🎯 전략 목표 (3개) | 클릭-편집 카드, Step B의 New Vision 자동 표시 |
| 📊 전술 성과지표 | 전략목표별 3개 지표 + 목표값 |
| ⚙ 전략 활동지표 | 전략목표별 3개 활동 + 내재화 기준 |
단기 병목 제거를 위한 전술적 실행과제를 설계합니다.
성과 기간: 6개월 이내
┌──────────┬──────────┬────────────────┬──────────┬──────────┐
│Situation │ Input │ Activity │ Teamwork │ Output │
│ 위기의 │ 필요자원 │ 추진절차·내용 │ Lead / │ 매뉴얼· │
│ 신호 │ + 수량 │ + 소요기간 │ Support │체크리스트 │
│ │ │ Pain/Touch Pt │ │ │
├──────────┴──────────┴────────────────┴──────────┴──────────┤
│ 성과: 정성적 효과 3개 + 정량적 효과 3개 │
└───────────────────────────────────────────────────────────────┘
중장기 체질 변화를 위한 전략적 실행과제를 설계합니다.
성과 기간: 6 ~ 18개월
- Quick Win과 동일 구조, 용어 차이:
- 위기의 신호 → 변화의 신호 (Trigger)
- 추진 절차 → 전환 단계 / 전환 활동
- 산출물 예시: 기준 · 규칙 · 프로세스 · 시스템 · 플랫폼 · 역할 정의
동료 평가 + 최종 결과 (3개 탭)
| 탭 | 내용 |
|---|---|
| F-1 Quick Win 평가 | 💰 투자금 1억 배분 + 9개 항목 100점 채점 (문제정의 · 솔루션 · 실행력 · 파급효과) |
| F-2 Build Win 평가 | 💰 투자금 1억 배분 + 9개 항목 100점 채점 (문제정의 · 솔루션 · 확장성 · 파급효과) |
| F-3 최종 결과 | 우리 팀이 받은 점수 막대 차트 + 평가 의견 목록 |
📊 우측 패널: 투자 포트폴리오 도넛 차트 · 평가 현황 라인 차트
Impact Check(Q1~Q12) 점수 기반 4사분면 조직 프로파일 분류
성과창출력 ↑
│
Burnout Runner │ Impact Player
(지쳐가는 러너) │ (지속가능한 리더)
────────────────┼────────────────→ 미래경쟁력
Survival Walker│ Idle Dreamer
(생존형 보행자) │ (잠자는 몽상가)
│
- 성과창출력 = (성과목표 + 실행) / 2
- 미래경쟁력 = (정체성 + 시스템) / 2
- 유형: Basic / Start / Premium
- 그룹 형태: 팀 / 개인
- 팀 수 (3
6) · 팀원 수 (110) · 로고 이미지 - ➡ 강의실 코드 자동 생성 (학생이 이 코드로 가입)
- 진행중 / 설정중 / 종료된 강의실을 한 화면에서 관리
| 기능 | 설명 |
|---|---|
| 단계 접근 제어 | 체크박스로 A-1 ~ F-3 학생 접근 단계 설정 |
| 팀 현황 테이블 | 팀별 × 단계별 제출 현황, 셀 클릭으로 제출물 조회 |
| 팀 관리 | 팀 추가 · 삭제 · 복원, 팀원 CRUD, 대표작성자 지정 |
| 제출 기한 | 마감일시 설정 · 수정 |
| 미션 반려 (Rollback) | 제출된 미션(A~E, F-1, F-2)을 열람 모달에서 ↶ Rollback 클릭 → 데이터는 유지한 채 제출 상태만 해제하여 학생이 재수정 가능하도록 되돌림 |
| 보고서 출력 | 팀별 개별 PDF + 전체 일괄 ZIP 다운로드 |
자동 생성되는 A4 다중 페이지 리포트 (html2canvas + jsPDF)
| 페이지 | 내용 |
|---|---|
| 표지 | 로고 · 팀명 · 프로그램명 |
| 성과 프로파일 | 4사분면 분석 + 진단 텍스트 + 솔루션 제안 |
| 캔버스 결과 | Identity → Performance Flow → Quick Win → Build Win |
| 평가 결과 | 점수 차트 + 평가 의견 |
- GNB (상단 네비게이션): 강의실명 · 팀명 · 사용자명 표시 + 6단계 탭 (비활성 단계는 회색 처리)
- 저장/제출 패턴: 모든 캔버스에서 임시저장(수정 가능) / 제출완료(수정 불가) 분리, 강사 Rollback 시 다시 수정 가능 상태로 복귀
- 단계 접근 제어: 강사가 설정한 단계만 학생이 접근 가능
- 작성 Tips 모달: 각 캔버스마다 작성 가이드 제공
- 평가팀: 일반 팀과 별도로, IMPACT Review(F단계) 평가에만 참여하는 팀
| 분류 | 기술 |
|---|---|
| Frontend | React 19 (CRA) |
| 라우팅 | React Router 7 · 화면별 React.lazy + Suspense 코드 스플리팅 |
| 상태관리 | Context API (Auth · Dashboard · GameStep · IdentityCanvas) |
| 스타일링 | Pure CSS (컴포넌트별 고유 프리픽스 + CSS 변수) |
| 폰트 | Pretendard (CDN) |
| Charts | Chart.js + chartjs-plugin-datalabels |
| jsPDF + html2canvas | |
| 파일 처리 | JSZip + file-saver |
| 인증 | Token 기반 (Access / Refresh) · AuthGuard 라우트 보호 · ErrorBoundary |
src/
├── components/ # 재사용 컴포넌트
│ ├── common/ # GNB · TipsModal · AuthGuard · ErrorBoundary
│ ├── identity/ # Identity Canvas 관련 (5개 컴포넌트)
│ ├── report/ # PDF 리포트 페이지별 컴포넌트 (13개)
│ ├── teacher/ # 강사 레이아웃 + 모달 (modals/ 하위 분리)
│ └── review/ # EvalForm · RightPanel · ResultTab
├── screens/ # 화면 컴포넌트 (App.js에서 React.lazy로 지연 로드)
│ ├── *Screen.js # A~F 단계 학생 화면
│ ├── WinCanvasScreen # D/E 공용 Win Canvas 통합 화면
│ └── teacher/ # 강사 화면 (Dashboard · List · Detail · Detail2 · Save · StudentList · ReportScreen)
├── hooks/ # 커스텀 훅 (useFetchData · useTeachDetail2Modals · usePdfDownload)
├── constants/ # 공용 상수 (평가 문항, 차트 설정 등)
├── contexts/ # React Context (Auth · Dashboard · GameStep · IdentityCanvas)
├── services/ # API 서비스 모듈
│ ├── apiConfig # authFetch · apiCall 공통 래퍼 (401 → 전역 로그아웃)
│ ├── teach*Service # 강사용 (Class · Team · Submission 분리, Submission에 Rollback 포함)
│ ├── *CanvasService # 캔버스 서비스 (팩토리 패턴)
│ └── fundingService # 펀딩/평가 API
├── styles/ # 공통 CSS + CSS 변수 (variables.css)
├── utils/ # 유틸리티 (formatDate · logoUtil · reportUtils · reportPdfUtils)
└── resource/ # 이미지 리소스
- Node.js 18+
- npm 9+
- 백엔드 서버 (
localhost:8080)
git clone <repository-url>
cd id_front
npm installnpm start # 개발 서버 (localhost:3000)
npm run build # 프로덕션 빌드xcopy /E /Y build\* ..\id_backend\Impact_design\src\main\resources\static\단, 프로젝트 경로에 따라 명령어의 경로는 달라질수 있음
개발 모드에서
/api요청은 자동으로localhost:8080으로 프록시됩니다.
✔ Canvas 기반 성과 설계 학습
✔ 팀 협업 기반 동료 평가 시스템
✔ 4사분면 성과 프로파일 AI 분석
✔ PDF 자동 생성 + 벌크 ZIP 다운로드
Private