AI 요약 기능 도입기 3부: 프론트엔드, 사용자 경험에 생명을 불어넣다
2부에서는 AWS Bedrock AI와 데이터베이스를 연결하여, 안전하고 효율적인 'AI 요약 API'를 완성했다. 이제 보이지 않는 곳의 모든 준비는 끝났다. 3부에서는 이 강력한 기능을 사용자가 직접 만지고 경험할 수 있도록, 프론트엔드에 생명을 불어넣는 과정을 기록한다.
이번 여정의 목표는 단순히 버튼 하나를 추가하는 것이 아니었다. 사용자가 AI의 응답을 기다리는 순간마저도 즐거운 경험이 되도록, 세심한 UI/UX를 설계하고 구현하는 것이었다.
첫 번째 조각: API 클라이언트 확장
가장 먼저, 프론트엔드의 모든 컴포넌트가 백엔드와 대화할 수 있는 공식적인 통로인 api.ts 파일을 수정했다. 백엔드에 새로 만든 GET /api/posts/:postId/summary 엔드포인트를 호출하는 fetchSummary 함수를 추가했다.
// apps/frontend/src/utils/api.ts export const api = { // ... 기존 함수들 fetchSummary: (postId: string): Promise<{ summary: string; source: 'cache' | 'live' }> => { return fetchWrapper(`/posts/${postId}/summary`, { method: 'GET' }); }, };
이 간단한 코드를 통해, 이제 프론트엔드의 어떤 컴포넌트에서든 api.fetchSummary('게시물ID')를 호출하여 AI 요약을 요청할 수 있게 되었다.
두 번째 조각: 'AI 요약 보기' 버튼과 커스텀 아이콘
나는 이 새로운 기능이 다른 버튼들과는 조금 다른, 특별한 느낌을 주기를 바랐다. 그래서 기존의 아이콘 라이브러리를 사용하는 대신, AI의 '마법' 같은 느낌을 상징하는 나만의 SVG 아이콘을 직접 디자인하여 사용하기로 했다.
AI 요약 기능을 위해 직접 디자인한 아이콘. Next.js의 Image 컴포넌트를 사용하여 UI에 통합했다.
이 버튼은 PostUtilButtons.tsx 컴포넌트에 추가되었으며, 처음에는 로그인한 사용자에게만 보였다가, 나중에는 모든 방문자가 AI 요약 기능을 경험 할 수 있도록 로그인 제한을 제거했다.
세 번째 조각: 경험의 중심, SummaryModal 컴포넌트
AI의 응답은 몇 초의 시간이 걸릴 수 있다. 이 기다림의 시간을 어떻게 디자인하느냐가 사용자 경험의 질을 결정한다고 생각했다. 그래서 나는 framer-motion 라이브러리를 활용하여, 모든 상태 변화가 부드러운 애니메이션과 함께 이루어지는 SummaryModal 컴포넌트를 설계했다.
framer-motion의AnimatePresence를 사용하여 구현한 모달의 등장/퇴장 애니메이션.
모달의 동작 흐름은 다음과 같다.
- 등장: 'AI 요약 보기' 버튼을 클릭하면, 반투명한 검은 배경과 함께 모달 창이 화면 중앙에 부드럽게 떠오른다.
- 로딩: API 응답을 기다리는 동안, 모달 내부에는 "AI가 글을 읽고 있어요..." 라는 메시지와 함께 로딩 스피너가 표시된다. 이 '인위적인' 로딩 메시지는, 심지어 캐시된 데이터를 0.1초 만에 가져올 때도 최소 0.3초간 보여주도록 설정했다. 이를 통해 사용자는 AI가 항상 실시간으로 작동하고 있다는 느낌을 받게 된다.
- 결과 표시: API 응답이 도착하면, 로딩 UI는 AI가 생성한 요약문으로 부드럽게 교차하며 전환(cross-fade)된다.
- 퇴장: 사용자가 배경이나 'X' 버튼을 클릭하면, 모달 창은 다시 부드럽게 사라진다.
마지막 조각: 관리자를 위한 '캐시 지우기' 기능
마지막으로, 운영 관점의 디테일을 추가했다. 만약 AI가 생성한 요약이 마음에 들지 않거나, 원본 글이 크게 수정되어 요약을 갱신하고 싶을 때를 대비한 기능이다.
관리자 계정으로 로그인했을 때만, 모달 창 푸터에 '요약 캐시 지우기'라는 작은 버튼이 나타나도록 했다. 이 버튼은 DELETE /api/posts/:postId/summary API를 호출하여 데이터베이스에 저장된 요약(캐시)을 삭제한다. 이로써 관리자는 언제든지 AI가 다음번에 새로운 요약을 생성하도록 강제할 수 있게 되었다.
이 작은 기능 하나가, 이 시스템을 단순한 '기능'에서 지속적으로 관리하고 개선할 수 있는 '제품'으로 만들어준다고 믿는다.
다음 이야기 예고
지금까지 세 편에 걸쳐, 아이디어 구상부터 비용 분석, 백엔드 구축, 그리고 프론트엔드 경험 설계까지 AI 요약 기능의 전체 개발 과정을 기록했다. 하지만 아직 마지막 단계가 남아있다. 바로 '비용 통제'를 위한 최후의 안전망을 설치하는 것이다.
다음 4부에서는, AWS Budgets를 사용하여 Bedrock 사용량이 특정 금액을 초과하면 나에게 자동으로 알림이 오도록 설정하는 과정을 통해, 이 AI 기능을 어떻게 프리티어 범위 혹은 그에 준하는 저비용에서 안심하고 운영할 수 있는지에 대한 이야기를 이어가려 한다.
