개선 방안 AS-IS, TO-BE 대비 시각화

Author: jieun9508-cyber

backend/core/views/job_planner/job_planner_view.py

@@ -2826,7 +2826,6 @@ def _merge_results(self, results, api_key):
         return merged
 
 
-@method_decorator(csrf_exempt, name='dispatch')
 @method_decorator(csrf_exempt, name='dispatch')
 class JobPlannerReviewPortfolioView(APIView):
     """채용공고 기준 포트폴리오 개선점 분석 API (파싱된 데이터 기반)"""
@@ -2854,7 +2853,7 @@ def post(self, request):
             portfolio_content = json.dumps(portfolio_parsed, ensure_ascii=False, indent=2)
 
             response = client.chat.completions.create(
-                model="gpt-4o-mini",
+                model="gpt-4o",
                 messages=[
                     {
                         "role": "system",
@@ -2867,14 +2866,52 @@ def post(self, request):
    - 팀 프로젝트: 본인 담당 범위, 기술 선택 이유, 협업 방식이 명확한지 확인.
    - 개인/학습 프로젝트: 만든 동기, 겪은 문제와 해결 과정, 배운 점이 있는지 확인.
 3. 매칭되지 않는 요구사항은 포트폴리오의 유사 경험에서 연결고리를 찾아 대체 어필 방법을 제안합니다.
-4. 모든 조언에는 반드시 "현재 서술(AS-IS)"과 "개선 서술(TO-BE)"을 대비하여 제시합니다.
+4. 모든 조언에는 반드시 "현재 서술(as_is)"과 "개선 서술(to_be)"을 대비하여 제시합니다.
 5. 포트폴리오에서 추출된 프로젝트, 기술스택, 성과 등을 꼼꼼히 분석합니다.
 
 [필수 규칙]
 - "프로젝트 설명을 보강하세요", "기술 스택을 강조하세요" 같은 추상적 조언 금지
 - 반드시 포트폴리오의 특정 프로젝트명 또는 경력사항을 지목하여 조언할 것
 - 반드시 공고의 어떤 요구사항에 대응하는 조언인지 명시할 것
-- 정량적 성과가 없는 프로젝트는 해당 프로젝트에서 측정 가능한 수치가 무엇인지 구체적으로 제안할 것"""
+- 정량적 성과가 없는 프로젝트는 해당 프로젝트에서 측정 가능한 수치가 무엇인지 구체적으로 제안할 것
+- to_be는 포트폴리오에 바로 붙여넣을 수 있는 수준의 완성된 문장을 작성할 것
+- to_be에 공고에서 사용된 키워드를 자연스럽게 포함할 것
+
+[Few-shot 예시 — improvements 작성법]
+
+❌ 나쁜 예시 (추상적):
+{
+  "target": "실시간 감성 분석 대시보드",
+  "issue": "프론트엔드 성능 최적화 경험이 부족합니다.",
+  "as_is": "React를 사용하여 대시보드를 개발했습니다.",
+  "to_be": "성능 최적화 사례를 추가하세요."
+}
+
+✅ 좋은 예시 (구체적):
+{
+  "target": "실시간 감성 분석 대시보드",
+  "issue": "공고에서 요구하는 '대규모 트래픽 처리 경험'에 대한 서술이 없습니다. 현재는 단순 기능 나열에 그치고 있어 성능 관점의 기술적 깊이가 드러나지 않습니다.",
+  "as_is": "React와 Chart.js를 활용하여 실시간 감성 분석 결과를 시각화하는 대시보드를 개발했습니다.",
+  "to_be": "React.memo와 useMemo를 적용하여 실시간 데이터 스트림(초당 50건) 환경에서 불필요한 리렌더링을 70% 줄이고, React-Query의 staleTime 설정으로 API 호출 빈도를 분당 60회에서 12회로 최적화했습니다. Chart.js canvas 렌더링 시 requestAnimationFrame 기반 배치 업데이트를 도입하여 프레임 드롭 없이 실시간 차트를 구현했습니다."
+}
+
+❌ 나쁜 예시 (추상적):
+{
+  "target": "AI Knowledge Bot",
+  "issue": "팀 리드 경험이 부족합니다.",
+  "as_is": "팀 프로젝트로 진행했습니다.",
+  "to_be": "팀에서의 역할을 구체적으로 서술하세요."
+}
+
+✅ 좋은 예시 (구체적):
+{
+  "target": "AI Knowledge Bot",
+  "issue": "공고에서 요구하는 '팀 리더십 및 협업 경험'에 대해, 현재 서술에는 본인의 역할과 기여도가 드러나지 않습니다.",
+  "as_is": "4인 팀 프로젝트로 FastAPI 기반 AI 챗봇을 개발했습니다.",
+  "to_be": "4인 팀에서 백엔드 리드를 맡아 API 설계와 코드 리뷰를 주도했습니다. 주 2회 기술 미팅을 통해 LangChain RAG 파이프라인의 아키텍처 결정을 이끌었고, GitHub PR 리뷰 프로세스를 도입하여 배포 후 버그를 팀 평균 대비 40% 감소시켰습니다. Notion으로 API 명세서를 문서화하여 프론트엔드 팀과의 통합 일정을 1주 단축했습니다."
+}
+
+위 예시처럼 as_is에는 포트폴리오의 실제 서술(또는 서술이 없으면 '해당 내용 없음')을, to_be에는 공고 키워드를 반영한 구체적 개선 문장을 작성하세요."""
                     },
                     {
                         "role": "user",
@@ -2895,12 +2932,6 @@ def post(self, request):
 === 포트폴리오 분석 내용 ===
 {portfolio_content}
 
-=== 분석 기준 ===
-1. 포트폴리오의 프로젝트, 기술스택, 성과 등 구체적 내용을 기반으로 분석
-2. 공고의 각 요구사항(업무, 필수요건, 우대사항)을 포트폴리오 내용과 구체적으로 대조
-3. 포트폴리오에서 이 공고에 어필할 수 있는 포인트와 부족한 포인트 발굴
-4. 포트폴리오에 어떤 내용을 어떻게 수정/보완해야 하는지 실행 가능한 가이드 제공
-
 JSON으로 반환하세요:
 {{
   "strengths": [
@@ -2909,8 +2940,9 @@ def post(self, request):
   "improvements": [
     {{
       "target": "개선 대상 (포트폴리오의 특정 프로젝트명 또는 섹션)",
-      "issue": "이 공고 기준으로 부족한 점",
-      "suggestion": "포트폴리오에 어떻게 보완하여 작성할지 구체적 방법 (예: 어떤 내용을 추가하고, 어떤 키워드를 포함하고, 어떤 구조로 정리할지)"
+      "issue": "이 공고 기준으로 부족한 점 (공고의 어떤 요구사항에 대응하는지 명시)",
+      "as_is": "포트폴리오의 현재 서술 (실제 내용을 인용하거나 요약. 서술이 없으면 '해당 내용 없음')",
+      "to_be": "개선된 서술 예시 (포트폴리오에 바로 붙여넣을 수 있는 완성된 문장. 공고 키워드 반영, 정량적 수치 포함)"
     }}
   ],
   "missing": [

frontend/src/features/job_planner/components/JobPlannerModal.vue

@@ -921,7 +921,19 @@
                     >
                       <div class="imp-target">🎯 {{ imp.target }}</div>
                       <div class="imp-issue">⚠️ {{ imp.issue }}</div>
-                      <div class="imp-suggestion">💡 {{ imp.suggestion }}</div>
+                      <!-- AS-IS / TO-BE 대비 -->
+                      <div v-if="imp.as_is || imp.to_be" class="imp-comparison">
+                        <div class="imp-as-is" v-if="imp.as_is">
+                          <div class="comp-label">📄 현재 서술</div>
+                          <div class="comp-content">{{ imp.as_is }}</div>
+                        </div>
+                        <div class="imp-to-be" v-if="imp.to_be">
+                          <div class="comp-label">✨ 개선 서술</div>
+                          <div class="comp-content">{{ imp.to_be }}</div>
+                        </div>
+                      </div>
+                      <!-- 레거시: suggestion만 있는 경우 -->
+                      <div v-else-if="imp.suggestion" class="imp-suggestion">💡 {{ imp.suggestion }}</div>
                     </div>
                   </div>
                   <div class="review-section" v-if="portfolioReview.missing?.length">
@@ -4610,6 +4622,51 @@ export default {
   color: #60a5fa;
 }
 
+/* AS-IS / TO-BE 대비 영역 */
+.imp-comparison {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.imp-as-is,
+.imp-to-be {
+  border-radius: 6px;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.65;
+}
+
+.imp-as-is {
+  background: rgba(239, 68, 68, 0.06);
+  border-left: 3px solid rgba(239, 68, 68, 0.4);
+}
+
+.imp-to-be {
+  background: rgba(34, 197, 94, 0.06);
+  border-left: 3px solid rgba(34, 197, 94, 0.4);
+}
+
+.comp-label {
+  font-size: 11px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  letter-spacing: 0.02em;
+}
+
+.imp-as-is .comp-label {
+  color: #f87171;
+}
+
+.imp-to-be .comp-label {
+  color: #4ade80;
+}
+
+.comp-content {
+  color: #cbd5e1;
+}
+
 /* AI 지원 도구 섹션 */
 .action-tools-section {
   margin-top: 32px;