Created
April 10, 2026 02:34
-
-
Save juyoung-rpls/653f7222e3455767f2abd34a16fc629f to your computer and use it in GitHub Desktop.
라포랩스 AI 활용 수준 셀프 진단 결과 (2026.04.09, 45명)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>라포랩스 AI 활용 수준 셀프 진단 결과</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f7; color: #1d1d1f; } | |
| .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 48px 40px; } | |
| .header h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; } | |
| .header p { font-size: 16px; opacity: 0.85; } | |
| .summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 32px 40px; margin-top: -32px; } | |
| .card { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } | |
| .card.summary { text-align: center; } | |
| .card.summary .number { font-size: 48px; font-weight: 800; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } | |
| .card.summary .label { font-size: 14px; color: #86868b; margin-top: 4px; } | |
| .card h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: #1d1d1f; } | |
| .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 40px 32px; } | |
| .grid.three { grid-template-columns: repeat(3, 1fr); } | |
| .full-width { grid-column: 1 / -1; } | |
| .chart-container { position: relative; height: 300px; } | |
| .chart-container.tall { height: 380px; } | |
| .bar-item { display: flex; align-items: center; margin-bottom: 10px; } | |
| .bar-label { width: 200px; font-size: 13px; color: #555; flex-shrink: 0; } | |
| .bar-track { flex: 1; height: 28px; background: #f0f0f5; border-radius: 6px; overflow: hidden; position: relative; } | |
| .bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 600; color: white; min-width: 36px; transition: width 0.6s ease; } | |
| .bar-fill.purple { background: linear-gradient(90deg, #667eea, #764ba2); } | |
| .bar-fill.blue { background: linear-gradient(90deg, #4facfe, #00f2fe); } | |
| .bar-fill.green { background: linear-gradient(90deg, #43e97b, #38f9d7); } | |
| .bar-fill.orange { background: linear-gradient(90deg, #fa709a, #fee140); } | |
| .bar-fill.red { background: linear-gradient(90deg, #f857a6, #ff5858); } | |
| .bar-fill.teal { background: linear-gradient(90deg, #11998e, #38ef7d); } | |
| .section-title { font-size: 24px; font-weight: 700; padding: 32px 40px 16px; color: #1d1d1f; } | |
| .heatmap-table { width: 100%; border-collapse: separate; border-spacing: 3px; } | |
| .heatmap-table th { font-size: 12px; color: #86868b; padding: 8px 4px; text-align: center; font-weight: 500; } | |
| .heatmap-table td { text-align: center; padding: 10px 4px; border-radius: 8px; font-size: 13px; font-weight: 600; } | |
| .heatmap-table td.row-label { text-align: left; font-weight: 500; color: #555; min-width: 140px; } | |
| .heat-5 { background: #667eea; color: white; } | |
| .heat-4 { background: #8b9cf7; color: white; } | |
| .heat-3 { background: #c4cdf9; color: #444; } | |
| .heat-2 { background: #e8ebfd; color: #666; } | |
| .heat-1 { background: #f5f5f7; color: #999; } | |
| .heat-neg { background: #ff7675; color: white; } | |
| .quote-list { list-style: none; } | |
| .quote-list li { padding: 14px 16px; margin-bottom: 8px; background: #f5f5f7; border-radius: 10px; font-size: 13px; line-height: 1.6; color: #333; border-left: 3px solid #667eea; } | |
| .quote-list li .author { font-size: 11px; color: #86868b; margin-top: 4px; } | |
| /* Role comparison table */ | |
| .role-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 13px; } | |
| .role-table th { padding: 10px 6px; text-align: center; font-weight: 500; color: #86868b; font-size: 11px; } | |
| .role-table th:first-child { text-align: left; } | |
| .role-table td { padding: 10px 6px; text-align: center; border-radius: 6px; font-weight: 600; } | |
| .role-table td:first-child { text-align: left; color: #555; font-weight: 500; } | |
| .role-table .role-head { background: #667eea; color: white; font-weight: 600; font-size: 12px; } | |
| .score-high { background: #667eea; color: white; } | |
| .score-mid { background: #a29bfe; color: white; } | |
| .score-low { background: #dfe6e9; color: #555; } | |
| .score-neg { background: #ffeaa7; color: #856404; } | |
| .metric-badge { display: inline-block; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; margin: 1px; } | |
| @media (max-width: 900px) { | |
| .summary-cards, .grid { grid-template-columns: 1fr; } | |
| .grid.three { grid-template-columns: 1fr; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>라포랩스 AI 활용 수준 셀프 진단 결과</h1> | |
| <p>2026년 4월 9일 | 응답자 45명 | 전체 개발자 대상</p> | |
| </div> | |
| <div class="summary-cards"> | |
| <div class="card summary"> | |
| <div class="number">45</div> | |
| <div class="label">총 응답자</div> | |
| </div> | |
| <div class="card summary"> | |
| <div class="number">100%</div> | |
| <div class="label">주 5일 이상 AI 사용</div> | |
| </div> | |
| <div class="card summary"> | |
| <div class="number">89%</div> | |
| <div class="label">AI 코드 비율 70%+</div> | |
| </div> | |
| <div class="card summary"> | |
| <div class="number">89%</div> | |
| <div class="label">생산성 30% 이상 향상</div> | |
| </div> | |
| </div> | |
| <div class="section-title">AI Maturity Level 분포</div> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>Maturity Level 분포 (전체)</h3> | |
| <div class="chart-container"> | |
| <canvas id="maturityChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3>직군별 Maturity Level</h3> | |
| <div class="chart-container"> | |
| <canvas id="maturityByRoleChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ======= 직군별 비교 섹션 (NEW) ======= --> | |
| <div class="section-title">직군별 비교 분석</div> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>직군별 체감 변화 레이더</h3> | |
| <div class="chart-container tall"> | |
| <canvas id="radarChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3>직군별 평균 Maturity Level</h3> | |
| <div class="chart-container" style="height:200px"> | |
| <canvas id="avgMaturityChart"></canvas> | |
| </div> | |
| <div style="margin-top:16px"> | |
| <h3 style="margin-bottom:12px">직군별 생산성 30%+ 향상 비율</h3> | |
| <div class="bar-item"><div class="bar-label">Data Engineer (5명)</div><div class="bar-track"><div class="bar-fill purple" style="width:100%">100%</div></div></div> | |
| <div class="bar-item"><div class="bar-label">DevOps (3명)</div><div class="bar-track"><div class="bar-fill purple" style="width:100%">100%</div></div></div> | |
| <div class="bar-item"><div class="bar-label">ML/MLops (3명)</div><div class="bar-track"><div class="bar-fill purple" style="width:100%">100%</div></div></div> | |
| <div class="bar-item"><div class="bar-label">기타 (3명)</div><div class="bar-track"><div class="bar-fill purple" style="width:100%">100%</div></div></div> | |
| <div class="bar-item"><div class="bar-label">Backend (18명)</div><div class="bar-track"><div class="bar-fill blue" style="width:89%">89%</div></div></div> | |
| <div class="bar-item"><div class="bar-label">Frontend (13명)</div><div class="bar-track"><div class="bar-fill orange" style="width:77%">77%</div></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid"> | |
| <div class="card full-width"> | |
| <h3>직군별 항목별 체감 변화 상세 (평균 점수: 크게개선=2, 다소개선=1, 변화없음=0, 다소악화=-1)</h3> | |
| <table class="role-table"> | |
| <tr> | |
| <th></th> | |
| <th class="role-head" style="background:#667eea">Frontend<br><span style="font-weight:400;font-size:10px">13명</span></th> | |
| <th class="role-head" style="background:#764ba2">Backend<br><span style="font-weight:400;font-size:10px">18명</span></th> | |
| <th class="role-head" style="background:#4facfe">Data Eng<br><span style="font-weight:400;font-size:10px">5명</span></th> | |
| <th class="role-head" style="background:#43e97b;color:#333">DevOps<br><span style="font-weight:400;font-size:10px">3명</span></th> | |
| <th class="role-head" style="background:#fa709a">ML/MLops<br><span style="font-weight:400;font-size:10px">3명</span></th> | |
| <th class="role-head" style="background:#6c5ce7">기타<br><span style="font-weight:400;font-size:10px">3명</span></th> | |
| </tr> | |
| <tr> | |
| <td>코드 작성 속도</td> | |
| <td class="score-high">2.00</td> | |
| <td class="score-mid">1.78</td> | |
| <td class="score-mid">1.80</td> | |
| <td class="score-high">2.00</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-high">2.00</td> | |
| </tr> | |
| <tr> | |
| <td>PR 처리 속도</td> | |
| <td class="score-low">1.08</td> | |
| <td class="score-mid">1.17</td> | |
| <td class="score-mid">1.60</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-high">2.00</td> | |
| </tr> | |
| <tr> | |
| <td>코드 품질</td> | |
| <td class="score-neg">0.08</td> | |
| <td class="score-low">0.71</td> | |
| <td class="score-low">1.00</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-low">1.00</td> | |
| </tr> | |
| <tr> | |
| <td>디버깅/트러블슈팅</td> | |
| <td class="score-mid">1.69</td> | |
| <td class="score-mid">1.78</td> | |
| <td class="score-high">2.00</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-mid">1.33</td> | |
| </tr> | |
| <tr> | |
| <td>새 기술/언어 학습</td> | |
| <td class="score-mid">1.62</td> | |
| <td class="score-mid">1.39</td> | |
| <td class="score-low">1.20</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-mid">1.33</td> | |
| <td class="score-low">1.00</td> | |
| </tr> | |
| <tr> | |
| <td>반복 작업 부담</td> | |
| <td class="score-high">2.00</td> | |
| <td class="score-mid">1.83</td> | |
| <td class="score-mid">1.80</td> | |
| <td class="score-mid">1.33</td> | |
| <td class="score-mid">1.67</td> | |
| <td class="score-mid">1.67</td> | |
| </tr> | |
| </table> | |
| <div style="margin-top:16px; font-size:12px; color:#86868b; line-height:1.8"> | |
| <strong>주요 발견:</strong><br> | |
| ⚠️ <strong>코드 품질</strong>은 유일하게 직군 간 편차가 큰 항목 — Frontend 평균 0.08 (거의 변화 없음~다소 악화), DevOps/ML은 1.67 (대부분 개선)<br> | |
| ✅ <strong>코드 작성 속도</strong>와 <strong>반복 작업 부담</strong>은 전 직군 공통으로 가장 높은 개선 체감<br> | |
| 📊 <strong>PR 처리 속도</strong>는 Frontend가 가장 낮은 개선 체감 (1.08) — 변화 없음 응답 3명 포함 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ======= 직군별 비교 끝 ======= --> | |
| <div class="section-title">도구 사용 현황</div> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>AI 코딩 도구 사용률</h3> | |
| <div class="bar-item"><div class="bar-label">Claude Code</div><div class="bar-track"><div class="bar-fill purple" style="width:100%">45 (100%)</div></div></div> | |
| <div class="bar-item"><div class="bar-label">ChatGPT/Claude (브라우저)</div><div class="bar-track"><div class="bar-fill blue" style="width:49%">22 (49%)</div></div></div> | |
| <div class="bar-item"><div class="bar-label">Codex</div><div class="bar-track"><div class="bar-fill green" style="width:33%">15 (33%)</div></div></div> | |
| <div class="bar-item"><div class="bar-label">Cursor</div><div class="bar-track"><div class="bar-fill orange" style="width:20%">9 (20%)</div></div></div> | |
| <div class="bar-item"><div class="bar-label">GitHub Copilot</div><div class="bar-track"><div class="bar-fill red" style="width:7%">3</div></div></div> | |
| <div class="bar-item"><div class="bar-label">자체 개발 도구 / 기타</div><div class="bar-track"><div class="bar-fill teal" style="width:9%">4</div></div></div> | |
| </div> | |
| <div class="card"> | |
| <h3>AI 코드 생성 비율</h3> | |
| <div class="chart-container"> | |
| <canvas id="codeRatioChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-title">체감 효과 (전체)</div> | |
| <div class="grid"> | |
| <div class="card full-width"> | |
| <h3>AI 도입 후 항목별 변화 (히트맵)</h3> | |
| <table class="heatmap-table"> | |
| <tr> | |
| <th></th> | |
| <th>크게 개선</th> | |
| <th>다소 개선</th> | |
| <th>변화 없음</th> | |
| <th>다소 악화</th> | |
| <th>해당 없음</th> | |
| </tr> | |
| <tr> | |
| <td class="row-label">코드 작성 속도</td> | |
| <td class="heat-5">39 (87%)</td> | |
| <td class="heat-3">6 (13%)</td> | |
| <td class="heat-1">0</td> | |
| <td class="heat-1">0</td> | |
| <td class="heat-1">0</td> | |
| </tr> | |
| <tr> | |
| <td class="row-label">반복 작업 부담</td> | |
| <td class="heat-5">37 (82%)</td> | |
| <td class="heat-3">8 (18%)</td> | |
| <td class="heat-1">0</td> | |
| <td class="heat-1">0</td> | |
| <td class="heat-1">0</td> | |
| </tr> | |
| <tr> | |
| <td class="row-label">디버깅/트러블슈팅</td> | |
| <td class="heat-5">33 (73%)</td> | |
| <td class="heat-3">12 (27%)</td> | |
| <td class="heat-1">0</td> | |
| <td class="heat-1">0</td> | |
| <td class="heat-1">0</td> | |
| </tr> | |
| <tr> | |
| <td class="row-label">새 기술/언어 학습</td> | |
| <td class="heat-4">24 (53%)</td> | |
| <td class="heat-3">15 (33%)</td> | |
| <td class="heat-2">5 (11%)</td> | |
| <td class="heat-1">0</td> | |
| <td class="heat-1">1 (2%)</td> | |
| </tr> | |
| <tr> | |
| <td class="row-label">PR 처리 속도</td> | |
| <td class="heat-4">21 (47%)</td> | |
| <td class="heat-3">17 (38%)</td> | |
| <td class="heat-2">7 (16%)</td> | |
| <td class="heat-1">0</td> | |
| <td class="heat-1">0</td> | |
| </tr> | |
| <tr> | |
| <td class="row-label">코드 품질</td> | |
| <td class="heat-3">11 (24%)</td> | |
| <td class="heat-4">17 (38%)</td> | |
| <td class="heat-2">9 (20%)</td> | |
| <td class="heat-neg">7 (16%)</td> | |
| <td class="heat-1">1 (2%)</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="section-title">워크플로우 & 학습</div> | |
| <div class="grid three"> | |
| <div class="card"> | |
| <h3>컨텍스트 관리 방식</h3> | |
| <div class="chart-container"> | |
| <canvas id="contextChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3>팁/노하우 관리 방식</h3> | |
| <div class="chart-container"> | |
| <canvas id="tipsChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3>동료 참고 수준</h3> | |
| <div class="chart-container"> | |
| <canvas id="peerChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-title">장벽 & 필요 지원</div> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>AI 활용의 가장 큰 장벽 (복수응답)</h3> | |
| <div class="bar-item"><div class="bar-label">AI 출력 품질/정확도 불안정</div><div class="bar-track"><div class="bar-fill purple" style="width:70%">21</div></div></div> | |
| <div class="bar-item"><div class="bar-label">레거시 코드 복잡성</div><div class="bar-track"><div class="bar-fill blue" style="width:37%">11</div></div></div> | |
| <div class="bar-item"><div class="bar-label">학습 시간 부족</div><div class="bar-track"><div class="bar-fill green" style="width:37%">11</div></div></div> | |
| <div class="bar-item"><div class="bar-label">도구/방법 정보 부족</div><div class="bar-track"><div class="bar-fill orange" style="width:37%">11</div></div></div> | |
| <div class="bar-item"><div class="bar-label">특별한 장벽 없음</div><div class="bar-track"><div class="bar-fill teal" style="width:27%">8</div></div></div> | |
| <div class="bar-item"><div class="bar-label">프롬프트 작성 어려움</div><div class="bar-track"><div class="bar-fill red" style="width:23%">7</div></div></div> | |
| <div class="bar-item"><div class="bar-label">보안/프라이버시 우려</div><div class="bar-track"><div class="bar-fill purple" style="width:20%">6</div></div></div> | |
| <div class="bar-item"><div class="bar-label">가이드라인 부재</div><div class="bar-track"><div class="bar-fill blue" style="width:10%">3</div></div></div> | |
| </div> | |
| <div class="card"> | |
| <h3>희망 지원 사항 (복수응답)</h3> | |
| <div class="bar-item"><div class="bar-label">실험/도입 시간 확보</div><div class="bar-track"><div class="bar-fill purple" style="width:70%">21</div></div></div> | |
| <div class="bar-item"><div class="bar-label">Best practice 공유 세션</div><div class="bar-track"><div class="bar-fill blue" style="width:67%">20</div></div></div> | |
| <div class="bar-item"><div class="bar-label">현재 지원에 만족</div><div class="bar-track"><div class="bar-fill teal" style="width:43%">13</div></div></div> | |
| <div class="bar-item"><div class="bar-label">사내 교육/워크숍</div><div class="bar-track"><div class="bar-fill green" style="width:40%">12</div></div></div> | |
| <div class="bar-item"><div class="bar-label">가이드라인/정책 수립</div><div class="bar-track"><div class="bar-fill orange" style="width:27%">8</div></div></div> | |
| <div class="bar-item"><div class="bar-label">AI 설정 파일 정비</div><div class="bar-track"><div class="bar-fill red" style="width:23%">7</div></div></div> | |
| <div class="bar-item"><div class="bar-label">더 좋은 라이선스 지원</div><div class="bar-track"><div class="bar-fill purple" style="width:20%">6</div></div></div> | |
| <div class="bar-item"><div class="bar-label">AI 전담 지원 인력</div><div class="bar-track"><div class="bar-fill blue" style="width:7%">2</div></div></div> | |
| </div> | |
| </div> | |
| <div class="section-title">향후 방향</div> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>향후 6개월 목표</h3> | |
| <div class="chart-container"> | |
| <canvas id="futureChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <h3>코드 품질 검증 방식</h3> | |
| <div class="chart-container"> | |
| <canvas id="qualityChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section-title">주요 인사이트 (자유 의견)</div> | |
| <div class="grid"> | |
| <div class="card"> | |
| <h3>성공 사례</h3> | |
| <ul class="quote-list"> | |
| <li>"동시에 5가지의 일을 코드 수정 → 테스트 → 문서화 → 배포까지 할 수 있었다."<div class="author">이찬희 (서버플랫폼팀, Backend L4)</div></li> | |
| <li>"20개가 넘는 repo를 skill로 한번에 처리. SRE 업무에서 claude가 MCP를 통해 메트릭/로그에서 비이상 패턴을 자동 감지."<div class="author">하성준 (서버플랫폼팀, Backend L4)</div></li> | |
| <li>"실시간 파이프라인 구축 기간 2~3달 → 1달로 단축. 광고 통계 파이프라인 빠르게 지원."<div class="author">이병우 (Data Engineering, L5)</div></li> | |
| <li>"1년 전 해결 못한 기술부채를 AI가 방법을 찾고 해결함."<div class="author">박승일 (FE플랫폼팀, Frontend L5)</div></li> | |
| <li>"삽을 뜨는 장벽이 크게 낮아짐. 라쿠를 활용해 PR 초안을 먼저 만들어두고, FE 범위를 넘어 백엔드 로그 조회·데이터 분석까지 확장."<div class="author">조승희 (Growth Squad, Frontend L4)</div></li> | |
| <li>"Grafana 대시보드 JSON 기반 제작, 서브에이전트 분리로 장애 분석, 도메인 drill-down 학습."<div class="author">심규민 (커머스플랫폼팀, Backend L4)</div></li> | |
| <li>"논문의 모델을 구현하는 것에 시간을 투자할 필요가 전혀 없어졌습니다!"<div class="author">윤석범 (Intelligence Squad, ML L2)</div></li> | |
| <li>"대규모 코드 리팩토링 / API v1→v2 마이그레이션에서 정합성 검증 테스트, 스크립트, e2e 테스트, 문서·다이어그램 작성까지."<div class="author">박서준 (인텔리전스 스쿼드, Backend L5)</div></li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3>실패/불편 경험 & 교훈</h3> | |
| <ul class="quote-list"> | |
| <li>"코드를 개선한다면서 불필요한 개선을 진행. 본인이 짠 코드가 아니라서 로직 설명을 못할 수 있음."<div class="author">이현승 (MLOps, L3)</div></li> | |
| <li>"환각 증상으로 작업이 잘못됐다는 걸 중간에 느껴서 다시 작업. 이후 계획→코드→검증(n회) 프로세스 도입."<div class="author">이병우 (Data Engineering, L5)</div></li> | |
| <li>"라쿠 자동 배치로 dataform 액션을 3번 실행 → 비용+데이터 오염. 하네스 엔지니어링이 정말 필요."<div class="author">김범환 (Data Engineering, L4)</div></li> | |
| <li>"병렬 작업 시 컨텍스트 스위칭 비용과 인지부하 증가 → 오히려 내 머리의 효율이 떨어지는 병목."<div class="author">조승희 (Growth Squad, Frontend L4)</div></li> | |
| <li>"Opus 100만 토큰 컨텍스트에서 토큰 사용량이 지수적 증가. 효과적 운용 방식 찾기 어려움."<div class="author">심규민 (커머스플랫폼팀, Backend L4)</div></li> | |
| <li>"에이전트 하네스를 더할 때 어떤 것이 정말 도움 됐는지 판단하기 어려움. 측정/수치화 방법이 필요."<div class="author">이상민 (디스커버리 플랫폼, Backend L4)</div></li> | |
| <li>"세부 계획 문서가 분리되어 있으면, 각 마이크로서비스 간 작업의 맥락을 이해 못한 채 코드를 작성."<div class="author">박서준 (인텔리전스 스쿼드, Backend L5)</div></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="section-title">추가 의견</div> | |
| <div class="grid"> | |
| <div class="card full-width"> | |
| <ul class="quote-list"> | |
| <li>"AI가 쓴 코드를 왜 그렇게 썼는지, 나중에 복습하는 게 중요한 것 같습니다."<div class="author">이현승 (MLOps, L3)</div></li> | |
| <li>"AI를 사용하면 생산성이 좋아지는 건 맞지만, 부족한 부분들을 챕터나 조직 차원에서 계속 검증하고 가시화하는 노력을 하면 좋겠다."<div class="author">이찬희 (서버플랫폼팀, Backend L4)</div></li> | |
| <li>"서버플랫폼팀이 context engineering의 하방을 잘 관리해줘야 한다는 책임감을 느끼고 있어요."<div class="author">장강산 (서버플랫폼팀, Backend L3)</div></li> | |
| <li>"사내에 잘 쓰고 계신 분들 너무 많고, 좋은 사례들 적극적으로 공유해주셔서 열심히 눈팅하면서 뽑아다 쓰고 있습니다."<div class="author">한겨레 (카탈로그, L4)</div></li> | |
| <li>"직접적인 AI 도구 외에, 툴 지원이 자유롭게 테스트해보았으면 합니다. (예: conductor, superset 등)"<div class="author">김정호 (커머스플랫폼팀, Backend L3)</div></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div style="padding: 40px; text-align: center; color: #86868b; font-size: 13px;"> | |
| 라포랩스 AI 활용 수준 셀프 진단 | 2026.04.09 | 45명 응답 | |
| </div> | |
| <script> | |
| Chart.defaults.font.family = "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"; | |
| Chart.defaults.plugins.legend.labels.usePointStyle = true; | |
| const N = 45; | |
| // Maturity Level 분포 | |
| new Chart(document.getElementById('maturityChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['L2: Interactive (4)', 'L3: Task Agent (14)', 'L4: Autonomous (18)', 'L5: Multi-Agent (9)'], | |
| datasets: [{ | |
| data: [4, 14, 18, 9], | |
| backgroundColor: ['#ffeaa7', '#74b9ff', '#a29bfe', '#6c5ce7'], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| plugins: { | |
| legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 } } }, | |
| tooltip: { callbacks: { label: ctx => ctx.raw + '명 (' + Math.round(ctx.raw/N*100) + '%)' } } | |
| } | |
| } | |
| }); | |
| // 직군별 Maturity Level | |
| new Chart(document.getElementById('maturityByRoleChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: ['Frontend(13)', 'Backend(18)', 'Data(5)', 'DevOps(3)', '기타/ML(6)'], | |
| datasets: [ | |
| { label: 'L2', data: [0, 1, 2, 0, 1], backgroundColor: '#ffeaa7' }, | |
| { label: 'L3', data: [5, 5, 0, 2, 2], backgroundColor: '#74b9ff' }, | |
| { label: 'L4', data: [6, 8, 2, 0, 2], backgroundColor: '#a29bfe' }, | |
| { label: 'L5', data: [2, 4, 1, 1, 1], backgroundColor: '#6c5ce7' } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| scales: { x: { stacked: true, grid: { display: false } }, y: { stacked: true, grid: { color: '#f0f0f5' } } }, | |
| plugins: { legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 } } } } | |
| } | |
| }); | |
| // 직군별 체감 변화 레이더 차트 | |
| new Chart(document.getElementById('radarChart'), { | |
| type: 'radar', | |
| data: { | |
| labels: ['코드 작성 속도', 'PR 처리 속도', '코드 품질', '디버깅/트러블슈팅', '새 기술 학습', '반복 작업 감소'], | |
| datasets: [ | |
| { label: 'Frontend', data: [2.00, 1.08, 0.08, 1.69, 1.62, 2.00], borderColor: '#667eea', backgroundColor: 'rgba(102,126,234,0.1)', borderWidth: 2, pointRadius: 4 }, | |
| { label: 'Backend', data: [1.78, 1.17, 0.71, 1.78, 1.39, 1.83], borderColor: '#764ba2', backgroundColor: 'rgba(118,75,162,0.1)', borderWidth: 2, pointRadius: 4 }, | |
| { label: 'Data Eng', data: [1.80, 1.60, 1.00, 2.00, 1.20, 1.80], borderColor: '#4facfe', backgroundColor: 'rgba(79,172,254,0.1)', borderWidth: 2, pointRadius: 4 }, | |
| { label: 'DevOps', data: [2.00, 1.67, 1.67, 1.67, 1.67, 1.33], borderColor: '#43e97b', backgroundColor: 'rgba(67,233,123,0.1)', borderWidth: 2, pointRadius: 4 }, | |
| { label: 'ML/MLops', data: [1.67, 1.67, 1.67, 1.67, 1.33, 1.67], borderColor: '#fa709a', backgroundColor: 'rgba(250,112,154,0.1)', borderWidth: 2, pointRadius: 4 } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, maintainAspectRatio: false, | |
| scales: { | |
| r: { | |
| beginAtZero: true, max: 2, min: -0.5, | |
| ticks: { stepSize: 0.5, font: { size: 10 }, backdropColor: 'transparent' }, | |
| pointLabels: { font: { size: 11 } }, | |
| grid: { color: '#e8ebfd' } | |
| } | |
| }, | |
| plugins: { | |
| legend: { position: 'bottom', labels: { padding: 12, font: { size: 11 } } }, | |
| tooltip: { | |
| callbacks: { | |
| label: ctx => { | |
| const v = ctx.raw; | |
| const desc = v >= 1.5 ? '크게 개선' : v >= 0.5 ? '다소 개선' : v >= -0.5 ? '변화 없음~' : '악화'; | |
| return ctx.dataset.label + ': ' + v.toFixed(2) + ' (' + desc + ')'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // 직군별 평균 Maturity Level | |
| new Chart(document.getElementById('avgMaturityChart'), { | |
| type: 'bar', | |
| data: { | |
| labels: ['기타', 'Backend', 'Frontend', 'DevOps', 'Data Eng', 'ML/MLops'], | |
| datasets: [{ | |
| data: [4.33, 3.83, 3.77, 3.67, 3.40, 2.67], | |
| backgroundColor: ['#6c5ce7', '#764ba2', '#667eea', '#43e97b', '#4facfe', '#fa709a'], | |
| borderRadius: 6 | |
| }] | |
| }, | |
| options: { | |
| indexAxis: 'y', responsive: true, maintainAspectRatio: false, | |
| scales: { | |
| x: { min: 2, max: 5, grid: { color: '#f0f0f5' }, ticks: { callback: v => 'L'+v } }, | |
| y: { grid: { display: false } } | |
| }, | |
| plugins: { legend: { display: false } } | |
| } | |
| }); | |
| // AI 코드 비율 | |
| new Chart(document.getElementById('codeRatioChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['70% 이상 (40)', '50~70% (3)', '10~30% (1)', '잘 모르겠음 (1)'], | |
| datasets: [{ data: [40, 3, 1, 1], backgroundColor: ['#6c5ce7', '#a29bfe', '#dfe6e9', '#f5f5f7'], borderWidth: 0 }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 } } } } } | |
| }); | |
| // 컨텍스트 관리 | |
| new Chart(document.getElementById('contextChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['CLAUDE.md 등 적극 관리 (34)', '프롬프트에 직접 설명 (10)', '제공 안 함 (1)'], | |
| datasets: [{ data: [34, 10, 1], backgroundColor: ['#6c5ce7', '#a29bfe', '#dfe6e9'], borderWidth: 0 }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 12, font: { size: 11 } } } } } | |
| }); | |
| // 팁 관리 | |
| new Chart(document.getElementById('tipsChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['체계적 정리 (9)', 'Slack 비정기 공유 (19)', '개인 메모 (14)', '관리 안 함 (3)'], | |
| datasets: [{ data: [9, 19, 14, 3], backgroundColor: ['#6c5ce7', '#a29bfe', '#74b9ff', '#dfe6e9'], borderWidth: 0 }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 12, font: { size: 11 } } } } } | |
| }); | |
| // 동료 참고 | |
| new Chart(document.getElementById('peerChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['적극적으로 탐색 (18)', 'Slack 공유 시 참고 (26)', '관심만 (1)'], | |
| datasets: [{ data: [18, 26, 1], backgroundColor: ['#6c5ce7', '#a29bfe', '#dfe6e9'], borderWidth: 0 }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 12, font: { size: 11 } } } } } | |
| }); | |
| // 향후 목표 | |
| new Chart(document.getElementById('futureChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['한 단계 올리고 싶음 (28)', '새 활용 영역 확장 (15)', '현재 유지 (1)', '잘 모르겠음 (1)'], | |
| datasets: [{ data: [28, 15, 1, 1], backgroundColor: ['#6c5ce7', '#a29bfe', '#dfe6e9', '#f5f5f7'], borderWidth: 0 }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 16, font: { size: 12 } } } } } | |
| }); | |
| // 품질 검증 | |
| new Chart(document.getElementById('qualityChart'), { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['대체로 확인, 간단한 건 수락 (32)', '항상 꼼꼼히 리뷰 (9)', '대부분 그대로 사용 (3)', '별도 구분 안 함 (1)'], | |
| datasets: [{ data: [32, 9, 3, 1], backgroundColor: ['#a29bfe', '#6c5ce7', '#ffeaa7', '#dfe6e9'], borderWidth: 0 }] | |
| }, | |
| options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { padding: 12, font: { size: 11 } } } } } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment