refactor: 3:7 비율 적용, 고정 브리핑 마크다운 포맷 및 가독성 최적화, 전송 버튼 다크 슬레이트 통일

app.py

@@ -160,18 +160,18 @@ def get_db_stats() -> Dict[str, Any]:
             if res_techs:
                 stats["technologies"] = res_techs["cnt"]
 
-            # 2. 기술 목록 & 설명 조회 (상위 25개)
+            # 2. 기술 목록 & 설명 조회 (상위 8개)
             res_tech_list = session.run(
                 "MATCH (t:AITechnology) "
-                "RETURN t.name as name, COALESCE(t.description, 'AI 혁신 기술 인프라') as desc LIMIT 25"
+                "RETURN t.name as name, COALESCE(t.description, 'AI 혁신 기술 인프라') as desc LIMIT 8"
             )
             stats["techs_list"] = [{"name": r["name"], "desc": r["desc"]} for r in res_tech_list]
 
-            # 3. 최근 기사 목록 조회 (최근 15개)
+            # 3. 최근 기사 목록 조회 (최근 4개)
             res_art_list = session.run(
                 "MATCH (a:Article) "
                 "RETURN a.title as title, a.published_date as date, a.url as url "
-                "ORDER BY a.published_date DESC LIMIT 15"
+                "ORDER BY a.published_date DESC LIMIT 4"
             )
             stats["recent_articles"] = [
                 {"title": r["title"], "date": r["date"], "url": r["url"]}
@@ -193,7 +193,7 @@ def build_stats_html(stats: Dict[str, Any]) -> str:
     if not keyword_html:
         keyword_html = '<div style="font-size:12px; color:#94a3b8;">등록된 키워드가 없습니다.</div>'
 
-    # 2. 최근 기사 리스트 HTML 생성 (최대 3개) - 전체 영역 클릭 시 이동하도록 a 태그로 래핑
+    # 2. 최근 기사 리스트 HTML 생성 (최대 4개) - 전체 영역 클릭 시 이동하도록 a 태그로 래핑
     news_list_html: str = ""
     for a in stats.get("recent_articles", []):
         title = a["title"]
@@ -218,28 +218,49 @@ def build_stats_html(stats: Dict[str, Any]) -> str:
         <!-- Ambient background elements for beautiful glass effects -->
         <div class="ambient-glow"></div>
         
-        <div style="font-size: 16px; font-weight: 850; color: #5b5b7f; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; letter-spacing: -0.02em;">
+        <div style="font-size: 16px; font-weight: 850; color: #334155; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; letter-spacing: -0.02em;">
             📊 <span>FinGraph AI Terminal</span>
         </div>
-        <p style="font-size: 11px; color: #47464e; margin-top: -2px; margin-bottom: 12px; font-weight: 500;">GraphRAG 실시간 분석 엔진</p>
+        <p style="font-size: 11px; color: #475569; margin-top: -2px; margin-bottom: 12px; font-weight: 600;">GraphRAG 실시간 분석 엔진 상태</p>
         
+        <!-- 실시간 엔진 텔레메트리 (4개 메트릭) -->
         <div class="stats-grid">
             <div class="stat-card">
-                <div class="stat-lbl">📰 학습 기사</div>
-                <div class="stat-val">{stats['articles']}건</div>
+                <div class="stat-lbl">💡 분석 모델</div>
+                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #334155;">GPT-4o</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-lbl">🧬 검색 모드</div>
+                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #334155;">Hybrid (Graph+Vector)</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-lbl">⚡ 응답 방식</div>
+                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #334155;">Streaming</div>
             </div>
             <div class="stat-card">
+                <div class="stat-lbl">🔐 DB 연결</div>
+                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #10b981;">AuraDB (Active)</div>
+            </div>
+        </div>
+
+        <!-- 수집된 데이터 규모 -->
+        <div class="stats-grid" style="margin-top: 10px; margin-bottom: 15px;">
+            <div class="stat-card" style="padding: 8px 10px;">
+                <div class="stat-lbl">📰 학습 기사</div>
+                <div class="stat-val" style="color: #334155;">{stats['articles']}건</div>
+            </div>
+            <div class="stat-card" style="padding: 8px 10px;">
                 <div class="stat-lbl">🧬 지식 노드</div>
-                <div class="stat-val">{node_count}개</div>
+                <div class="stat-val" style="color: #334155;">{node_count}개</div>
             </div>
         </div>
         
-        <div class="section-subtitle">💡 최신 뉴스 키워드</div>
+        <div class="section-subtitle" style="color: #334155;">💡 최신 뉴스 키워드</div>
         <div class="keyword-container">
             {keyword_html}
         </div>
         
-        <div class="section-subtitle">📰 최신 뉴스 피드</div>
+        <div class="section-subtitle" style="color: #334155;">📰 최신 뉴스 피드</div>
         <div class="news-feed-container">
             <div class="news-feed">
                 {news_list_html}
@@ -511,24 +532,24 @@ body {
     border-color: rgba(129, 140, 248, 0.6) !important;
 }
 
-/* 챗봇 버튼 퍼플 포인트 스타일 (흰색으로 안 보이던 현상 해결) */
+/* 챗봇 버튼 다크 슬레이트 스타일 (보라색 제거 및 세련된 네이비/슬레이트 통일) */
 button.primary, 
 .primary-btn, 
 button.lg.primary, 
 button.sm.primary,
 button.variant-primary {
-    background-color: #5b5b7f !important;
+    background-color: #334155 !important;
     color: white !important;
     font-weight: 800 !important;
     border: none !important;
-    box-shadow: 0 4px 6px rgba(91, 91, 127, 0.2) !important;
+    box-shadow: 0 4px 6px rgba(51, 65, 85, 0.15) !important;
     transition: all 0.2s ease-in-out !important;
 }
 button.primary:hover, 
 .primary-btn:hover, 
 button.variant-primary:hover {
-    background-color: #434466 !important;
-    box-shadow: 0 6px 12px rgba(91, 91, 127, 0.3) !important;
+    background-color: #1e293b !important;
+    box-shadow: 0 6px 12px rgba(51, 65, 85, 0.25) !important;
     transform: translateY(-1px) !important;
 }
 
@@ -691,14 +712,14 @@ with gr.Blocks(**blocks_kwargs) as demo:
     """)
     
     with gr.Row():
-        # 2. 왼쪽 컬럼: 사이드바 (대시보드 및 하단 메뉴) - 4:6 split을 위해 scale=4 설정
-        with gr.Column(scale=4, min_width=350):
+        # 2. 왼쪽 컬럼: 사이드바 (대시보드 및 하단 메뉴) - 3:7 split을 위해 scale=3 설정
+        with gr.Column(scale=3, min_width=320):
             stats_data = get_db_stats()
             stats_html = build_stats_html(stats_data)
             gr.HTML(stats_html)
             
-        # 3. 오른쪽 컬럼: 메인 챗봇 에어리어 - 4:6 split을 위해 scale=6 설정
-        with gr.Column(scale=6, min_width=500):
+        # 3. 오른쪽 컬럼: 메인 챗봇 에어리어 - 3:7 split을 위해 scale=7 설정
+        with gr.Column(scale=7, min_width=500):
             # 메인 타이틀 (챗봇 영역 상단 중앙)
             gr.HTML("""
             <div style="text-align: center; padding: 10px 0 20px 0;">

src/retrieval/finRetrieval.py

@@ -173,40 +173,45 @@ _prompt_template = CustomRagTemplate(
     template="""당신은 AI 및 핀테크 기술 트렌드 전문가이자, 취업 준비생의 역량 분석을 돕는 전략 컨설턴트입니다.
 반드시 아래 제공된 [컨텍스트(Neo4j 지식 그래프 검색 결과)]에 기반해서만 답변하고, 컨텍스트에 근거하지 않은 사실을 지어내거나 가상의 링크(example.com 등)를 절대 생성하지 마세요.
 
-답변은 대중이나 취업 준비생이 실질적으로 트렌드를 깊이 있게 파악하고 자소서/면접 등에 즉각 활용할 수 있도록, 아래의 [프리미엄 4단계 레이아웃] 구조를 엄격히 준수하여 매우 체계적이고 깔끔한 마크다운 양식으로 정성스럽게 브리핑해 주세요.
+답변은 대중이나 취업 준비생이 실질적으로 트렌드를 깊이 있게 파악하고 자소서/면접 등에 즉각 활용할 수 있도록, 아래의 [고정 브리핑 보고서 포맷]을 **토씨 하나 틀리지 않고 엄격히 준수**하여 매우 체계적이고 깔끔한 마크다운 양식으로 정성스럽게 브리핑해 주세요.
 
-★ [중요 - 가독성 극대화 규칙]: 
-결과가 빽빽하게 붙어 보이지 않도록, 각 대주제(###) 사이에는 무조건 빈 줄을 2줄 이상 추가하고, 개별 글머리 기호(- 및 **) 항목 사이사이에도 반드시 1줄 이상의 빈 줄(개행)을 두어 텍스트가 시각적으로 시원시원하고 쾌적하게 읽히도록 정리해서 작성해 주세요.
+★ [중요 - 가독성 및 개행 규칙]:
+각 주요 섹션(###) 사이에는 무조건 빈 줄을 2줄 이상 추가하고, 모든 개별 목록 기호(- 및 **) 항목 사이사이에도 반드시 1줄 이상의 빈 줄(개행)을 삽입하여 시각적 가독성을 극대화해 주세요.
 
 ---
 
-### 📊 [핵심 요약 및 트렌드 인사이트]
+# 📋 [FinGraph AI 분석 브리핑]
 
-- **한 줄 요약**: 해당 트렌드의 핵심 요점을 단 한 줄로 명료하게 요약합니다.
+### 1. 📊 한 줄 요약 & 핵심 트렌드
 
-- **주요 인사이트**: 이 이슈가 현재 IT/AI 및 금융 핀테크 업계 전체에 던지는 핵심 화두가 무엇인지 명시합니다.
+- **한 줄 요약**: [해당 트렌드의 핵심 요점을 단 한 줄로 명료하게 요약]
 
+- **주요 인사이트**: [이 이슈가 현재 IT/AI 및 금융 핀테크 업계 전체에 던지는 핵심 화두 기재]
 
-### 🔍 [상세 이슈 및 핵심 팩트 분석]
 
-컨텍스트를 근거로 구체적인 사실 관계를 일목요연한 글머리기호(bullet points)로 상세히 정리합니다.
+### 2. 🔍 상세 분석 및 팩트 정리
 
-- 예: 이슈의 전개 과정, 관련 기업들의 구체적인 움직임, 발생하고 있는 현상(예: 전력난, 반발, 기술적 한계 등).
+[컨텍스트에 기록된 실제 사실 관계들을 근거로 구체적 사실을 정리]
 
+- **이슈 전개**: [구체적인 이슈 발생 배경 및 진행 경과]
 
-### 💡 [시사점 및 지원동기/자소서 활용 가이드]
+- **기업 동향**: [관련 핵심 기업들의 실물 비즈니스 움직임 및 대응 행보]
 
-이 뉴스가 갖는 거시적 의미와 핀테크/금융 대기업 채용 준비생이 서류/면접에 활용할 수 있는 차별화된 전략 포인트를 도출합니다.
+- **인프라/사회적 요인**: [전력망 부족, 대중적 불안감, 하드웨어적 제약 사항 등 핵심 요인]
 
-- **업계 시사점**: 기술 발전과 사회적 수용성(ESG, 인프라, 전력망 확보 등) 간의 균형적 관점 제시.
 
-- **실전 활용 Tip**: 지원동기나 면접 답변 구성 시 해당 트렌드를 어떻게 본인의 역량(예: 지속 가능한 기술 기획, 신뢰받는 AI 설계 등)과 연계하여 풀어낼 수 있을지에 대한 맞춤형 가이드라인 제공.
+### 3. 💡 취업/자소서/면접 실전 가이드
 
+[지원자가 면접이나 자기소개서에서 차별화된 통찰을 보여줄 수 있는 방법 제시]
 
-### 📰 [출처 및 근거 자료]
+- **금융/IT 업계 시사점**: [거시적인 파급효과와 지속가능성 관점 제시]
 
-- 컨텍스트에 포함된 기사의 실물 제목과 링크를 마크다운 링크 형식으로 투명하고 정밀하게 표기합니다.
-  - 예: * [기사 제목](기사 URL) - 보도일자/언론사
+- **실전 자소서/면접 활용 Tip**: [지원동기나 역량 기술서 작성 시 본인의 역량과 어떻게 연계하여 풀어낼지에 대한 맞춤 가이드]
+
+
+### 📰 4. 근거 뉴스 출처
+
+- *[기사 제목](기사 URL)* - 보도일자/언론사
 
 ---