Django 뉴스 분석 웹앱 성능 & UX 개선 – 로딩 표시 + 비동기 처리 (AJAX)

0. 이 글은 누구를 위한 글인가요?

• 뉴스 분석 시간이 길어 웹이 멈춘 것처럼 보여 걱정되는 분
• 분석 중 메시지나 로딩 애니메이션을 표시하고 싶은 분
• 새 페이지로 이동하지 않고 페이지 내에서 결과를 바로 보고 싶은 분

---

1. 실습 목표

기능	설명
로딩 표시	분석 중일 때 “분석 중입니다” 문구 표시
AJAX 처리	결과 페이지로 이동하지 않고 비동기 요청 처리
결과 표시	페이지 내 결과영역에 분석 결과표 표시

---

2. 기본 흐름 구조

[키워드 입력]
   ↓
[AJAX 요청 → /analyze/]
   ↓
[서버에서 분석 실행 → JSON 응답]
   ↓
[결과 템플릿을 페이지 내에 삽입]

---

3. URLconf 수정

# analyzer/urls.py
path('analyze/', views.analyze_ajax, name='analyze_ajax'),

---

4. views.py – AJAX 처리

from django.http import JsonResponse

@login_required
def analyze_ajax(request):
    if request.method == 'POST':
        keyword = request.POST.get('keyword', '')

        titles = collect_titles(keyword)
        results = []

        for t in titles:
            sentiment = get_sentiment(t)
            summary = summarize(t)

            AnalysisResult.objects.create(
                user=request.user,
                keyword=keyword,
                title=t,
                sentiment=sentiment,
                summary=summary
            )

            results.append({
                'title': t,
                'sentiment': sentiment,
                'summary': summary
            })

        return JsonResponse({'results': results})
    return JsonResponse({'error': 'POST 요청만 허용됩니다'}, status=400)

---

5. form.html 수정 (AJAX 적용)

HTML 구조

<form id="analyze-form">
  {% csrf_token %}
  키워드: <input type="text" name="keyword" id="keyword-input" required>
  <button type="submit">분석 시작</button>
</form>

<div id="loading" style="display:none; color:blue;">
  분석 중입니다... 잠시만 기다려주세요.
</div>

<div id="result-area"></div>

JavaScript (AJAX 처리)

<script>
document.getElementById('analyze-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const keyword = document.getElementById('keyword-input').value;
  const loading = document.getElementById('loading');
  const resultArea = document.getElementById('result-area');

  loading.style.display = 'block';
  resultArea.innerHTML = '';

  fetch("{% url 'analyze_ajax' %}", {
    method: 'POST',
    headers: {
      'X-CSRFToken': '{{ csrf_token }}',
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: `keyword=${encodeURIComponent(keyword)}`
  })
  .then(response => response.json())
  .then(data => {
    loading.style.display = 'none';
    if (data.results) {
      let html = '<h2>분석 결과</h2><table border="1"><tr><th>제목</th><th>감성</th><th>요약</th></tr>';
      data.results.forEach(row => {
        html += `<tr><td>${row.title}</td><td>${row.sentiment}</td><td>${row.summary}</td></tr>`;
      });
      html += '</table>';
      resultArea.innerHTML = html;
    } else {
      resultArea.innerHTML = '<p>분석 실패. 다시 시도해주세요.</p>';
    }
  });
});
</script>

---

6. 출력 예시

• 사용자 입력: 키워드 = 인공지능
• 분석 중... 메시지 표시됨
• 분석 완료 후 표 형태로 결과 출력됨

| 제목                       | 감성 | 요약                             |
|----------------------------|------|----------------------------------|
| 인공지능이 바꾸는 사회     | 긍정 | 인공지능이 사회를 바꾼다         |
| AI 기술의 교육 적용 확대   | 중립 | AI가 교육에 적용되고 있다         |

---

7. 추가 UX 개선 팁

• 로딩 GIF 넣기 (이미지 삽입)
• 버튼 비활성화 처리
• 오류 메시지 안내
• 결과 영역 fade-in 처리 (jQuery / CSS)

---

8. 마무리 요약

기능	구현 방법
로딩 표시	AJAX 요청 전 loading div 표시
비동기 처리	fetch + JSON 응답
결과 출력	HTML innerHTML로 표 렌더링

---